1. map()
Kya karta hai?
map() har element par operation karta hai aur naya array return karta hai (original array ko change nahi karta).
Use case:
Kisi array ke har item ko modify karna.
Example:
const numbers = [1, 2, 3, 4];
const double = numbers.map(num => num * 2);
// Output: [2, 4, 6, 8]2. filter()
Kya karta hai?
filter() har element ko check karta hai
aur sirf true condition wale items
ka naya array banata hai.
Use case:
Array se unwanted data hataana.
Example:
const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
// Output: [2, 4]— -
3. reduce()
Kya karta hai?
reduce() array ke saare elements ko ek hi value mein convert karta hai
(jaise sum, product, etc).
Use case:
Total nikalna, object banana, etc.
Example:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// Output: 10Summary (Short Urdu Explanation):
| map() | Har item par kaam karta hai, naya array |
| filter()| Sirf required items rakhta hai, naya array |
| reduce()| Sab ko mila kar ek value banata hai |
Arrow Function with Implicit Return:
with Implicit Return ka matlab hota hai
ke function direct return kare bina return keyword likhe aur curly braces ke.
— -
✅ Syntax (Implicit Return):
javascript
const add = (a, b) => a + b;
Yeh same hai:
const add = (a, b) => {
return a + b;
}✅ Example:
onst greet = name => `Hello, name!`;
variable name = parameter => defination
console.log(greet("Ali")); // Output: Hello, Ali!⚠ Jab braces {} laga lein, to `return` likhna zaroori hota hai:
const greet = name => return `Hello,{name}` };But if you use parentheses () instead of curly braces, return is implicit:
const greet = name => (`Hello, ${name}`); // ✅ Implicit returnNote: Implicit return sirf single expression ke liye hoti hai. Multiple lines ke liye aapko braces aur return keyword zaroori hota hai.
React mein Object aur Array ka use mostly data ko manage karne, props pass karne, aur UI render karne ke liye hota hai.
✅ 1. Object in React
Use case:
Data grouping (e.g. user info)
jsx
const user = {
name: "Ali",
age: 24,
city: "Lahore"
};
function UserCard() {
return (
<div>
<h2> {user.name} </h2>
<p> Age: {user.age} </p>
<p> City: {user.city} </p>
</div>
);
}✅ 2. Array in React
Use case:
Lists render karne ke liye (e.g. todos, posts)
jsx
const fruits = ["Apple", "Banana", "Mango"];
function FruitList() {
return (
<ul>
{fruits.map ( (fruit, index) => (
<li key={index} > {fruit} </li>
))}
</ul>
);
}✅ Array of Objects in React
jsx
const users = [
{ id: 1, name: "Ali" },
{ id: 2, name: "Sara" }
];
function UserList() {
return (
<div>
{ users .map( user => (
<p key= {user.id} > { user.name } </p>
))}
</div>
);
}Tip: Har element ko map karte waqt
key prop zaroor dena chahiye for better performance & to avoid React warnings.
Mutable aur Immutable programming concepts JavaScript (aur React) mein data handling ko samajhne ke liye bahut important hain.
🔄 Mutable (Changeable)
Mutable ka matlab hai:
value ko directly change kiya ja sakta hai.
✅ Examples (Mutable data types):
- Objects
Get Nimra Kosar’s stories in your inbox
Join Medium for free to get updates from this writer.
- Arrays
🔸 Example:
js
object
let person = { name: "Ali" };
person.name = "Sara"; // changed the original object
console.log(person); // { name: "Sara" }js
//Array
let fruits = ["apple", "banana"];
fruits.push("mango"); // original array modified🔒 Immutable (Unchangeable)
Immutable ka matlab hai
: value ko change nahi kiya ja sakta, agar change karna ho to naya copy banaya jata hai.
✅ Examples (Immutable data types):
- Strings
- Numbers
- Booleans
🔸 Example:
js
let name = "Ali";
let newName = name.toUpperCase(); // returns new string
console.log(name); // "Ali" (original unchanged)
console.log(newName); // "ALI"✅ In React: Why immutability is important?
- State ko directly mutate nahi karte:
js
// ❌ Wrong
state.value = 10;
// ✅ Right
setState({ value: 10 });
Because React relies on immutability to detect changes,
taake efficiently UI re-render ho.
Destructuring JavaScript
mein ek syntax hai jo arrays ya objects se values ko easily extract karne ke liye use hota hai — bina manually access kiye.
🔹 1. Array Destructuring
js
const fruits = ["apple", "banana", "mango"];
const [a, b, c] = fruits;
console.log(a); // "apple"
console.log(b); // "banana"
// You can also skip values
const [first, , third] = fruits;
console.log(third); // "mango"🔹 2. Object Destructuring
js
const person = {
name: "Ali",
age: 22,
city: "Lahore"
};
const { name, age } = person;
console.log(name); // "Ali"
console.log(age); // 22
Change variable name:
const { name: fullName } = person;
console.log(fullName); // "Ali"🔹 3. Nested Destructuring
js
const user = {
profile: {
username: "john_doe",
email: "john@example.com"
}
};
const { profile: { username } } = user;
console.log(username); // "john_doe"🔹 4. Destructuring in Function Parameters
js
function greet({ name, age }) {
console.log(`Hello name, age{age} `):
}
greet({ name: "Sara", age: 25 });React mein yeh kaafi common hota hai, jaise:
js
const MyComponent = ({ title, onClick }) => {
return <button onClick={onClick}> {title} </button>;
};Destructuring ka matlab hota hai “todna” — yaani JavaScript mein kisi array ya object ke andar se specific values ko nikaal lena asaani se, bina bar-bar uska naam likhe.
— -
🔸 Array Destructuring (Array ko todna)
js
const colors = ["red", "blue", "green"];
const [first, second] = colors;
console.log(first); // "red"
console.log(second); // "blue"Matlab: array ke index 0 aur 1 wali values ko direct variables me assign kar diya.
— -
🔸 Object Destructuring (Object ke andar se values nikaalna)
const student = {
name: "Ayesha",
age: 20,
grade: "A"
};
const { name, grade } = student;
console.log(name); // "Ayesha"
console.log(grade); // "A"Matlab: object ke andar jo properties hain (name, grade) unko seedha variables me rakh diya.
— -
🔸 Destructuring with Rename
js
const { name: studentName } = student;
console.log(studentName); // "Ayesha"Yahan name property ko studentName naam ke variable me assign kiya.
🔸 Function Parameters Destructuring
js
function greet({ name }) {
console.log("Hello " + name);
}
greet({ name: "Ali" }); // Hello AliFunction ke andar destructuring directly parameters me ki gayi.
✅ Kab Use Karte Hain?
- Jab aapko object ya array me se specific values chahiyein.
