Arrays and Objects
-
This lesson covers JavaScript arrays and objects, teaching how to store, access, and manipulate data needed for building React components.
Arrays
Used to store multiple values.
const skills = ["HTML", "CSS", "JavaScript"];Objects
Used to store key-value pairs.
const student = {
name: "Amit",
course: "React"
};
React frequently works with arrays of objects.
Array Methods: map(), filter(), reduce()
map()
Used to transform data.
const numbers = [1, 2, 3];
const result = numbers.map(n => n * 2);
Used in React to render lists.
filter()
Used to remove unwanted data.
const numbers = [1, 2, 3, 4];
const even = numbers.filter(n => n % 2 === 0);
reduce()
Used to combine values.
const numbers = [1, 2, 3];
const sum = numbers.reduce((total, n) => total + n, 0);
Object Destructuring
Destructuring extracts values from objects easily.
const student = { name: "Amit", age: 21 };
const { name, age } = student;
Benefits:
Less code
Cleaner access
Widely used in React props
Spread and Rest Operators
Spread Operator (...)
Used to copy or merge data.
const a = [1, 2];
const b = [...a, 3, 4];
Rest Operator (...)
Used to collect remaining values.
const sum = (...numbers) => {
return numbers.reduce((a, b) => a + b);
};