3. Arrays and Array Methods

Arrays are one of the most important topics in JavaScript interviews.

Most React and frontend interview questions use array methods for data manipulation.

---

What is an Array?

An array is used to store multiple values in a single variable.

Example

const fruits = ["Apple", "Banana", "Mango"];

---

Access Array Elements

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana

---

Array Properties

length

const nums = [1, 2, 3];

console.log(nums.length);

Output:

3;

---

Important Array Methods

---

1. map() (VERY IMPORTANT)

map() creates a new array by transforming each element.

---

Syntax

array.map((item) => {
  return item;
});

---

Example

const nums = [1, 2, 3];

const doubled = nums.map((num) => num * 2);

console.log(doubled);

---

Output

[2, 4, 6];

---

Explanation

• Loops through every element
• Modifies/transforms data
• Returns a NEW array
• Original array remains unchanged

---

Real Interview Example

const users = [{ name: "Dipak" }, { name: "Rahul" }];

const names = users.map((user) => user.name);

console.log(names);

Output:

["Dipak", "Rahul"];

---

2. forEach()

Used for looping through arrays.

---

Example

const nums = [1, 2, 3];

nums.forEach((num) => {
  console.log(num);
});

---

Important Point

forEach() does NOT return anything.

const result = nums.forEach((num) => num * 2);

console.log(result);

Output:

undefined;

---

Difference Between map() and forEach()

Feature	map()	forEach()
Returns new array	Yes	No
Used for transformation	Yes	No
Chainable	Yes	No
Main purpose	Modify data	Looping

---

3. filter() (VERY IMPORTANT)

Used to filter elements based on condition.

Returns a new array.

---

Example

const nums = [1, 2, 3, 4, 5];

const evenNums = nums.filter((num) => num % 2 === 0);

console.log(evenNums);

---

Output

[2, 4];

---

Explanation

• Checks condition for each item
• If condition is true → item included
• Returns new filtered array

---

Real Interview Example

const users = [
  { name: "Dipak", active: true },
  { name: "Rahul", active: false },
];

const activeUsers = users.filter((user) => user.active);

console.log(activeUsers);

---

4. reduce() (VERY IMPORTANT)

reduce() reduces array into a single value.

Used for:

• Sum
• Total
• Counting
• Grouping
• Object creation

---

Syntax

array.reduce((accumulator, currentValue) => {
  return result;
}, initialValue);

---

Example — Sum of Array

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(sum);

---

Output

10;

---

Step-by-Step Working

Iteration	acc	curr	Result
1	0	1	1
2	1	2	3
3	3	3	6
4	6	4	10

---

Explanation

• acc = accumulator (stores result)
• curr = current array item
• 0 = initial value

---

Real Interview Example — Total Price

const cart = [{ price: 100 }, { price: 200 }, { price: 300 }];

const total = cart.reduce((acc, item) => {
  return acc + item.price;
}, 0);

console.log(total);

---

5. find()

Returns FIRST matching element.

---

Example

const nums = [10, 20, 30, 40];

const result = nums.find((num) => num > 20);

console.log(result);

---

Output

30;

---

Important Point

• Returns only first match
• Returns undefined if nothing found

---

Difference Between find() and filter()

find()	filter()
Returns first item	Returns array
Single value	Multiple values
Stops after first match	Checks all items

---

6. some()

Checks if AT LEAST ONE element satisfies condition.

Returns true or false.

---

Example

const nums = [1, 2, 3, 4];

const hasEven = nums.some((num) => num % 2 === 0);

console.log(hasEven);

---

Output

true;

---

7. every()

Checks if ALL elements satisfy condition.

---

Example

const nums = [2, 4, 6];

const allEven = nums.every((num) => num % 2 === 0);

console.log(allEven);

---

Output

true;

---

Difference Between some() and every()

some()	every()
One condition true	All conditions true
Returns boolean	Returns boolean

---

8. sort()

Used to sort array elements.

---

Problem with Default Sort

const nums = [100, 2, 25];

nums.sort();

console.log(nums);

Output:

[100, 2, 25];

Because sort() converts values into strings.

---

Correct Numeric Sort

Ascending

nums.sort((a, b) => a - b);

Descending

nums.sort((a, b) => b - a);

---

9. slice()

Returns portion of array.

Does NOT modify original array.

---

Syntax

array.slice(start, end);

---

Example

const nums = [1, 2, 3, 4, 5];

const result = nums.slice(1, 4);

console.log(result);

---

Output

[2, 3, 4];

---

10. splice()

Adds/removes elements from array.

Modifies original array.

---

Syntax

array.splice(start, deleteCount, items);

---

Remove Elements

const nums = [1, 2, 3, 4];

nums.splice(1, 2);

console.log(nums);

---

Output

[1, 4];

---

Add Elements

const nums = [1, 2, 3];

nums.splice(1, 0, 100);

console.log(nums);

---

Output

[1, 100, 2, 3];

---

Difference Between slice() and splice()

slice()	splice()
Does not modify original array	Modifies original array
Returns copied portion	Adds/removes items
Non-destructive	Destructive

---

Most Asked Interview Questions

---

Q1. Difference Between map() and forEach()

map()	forEach()
Returns new array	Returns undefined
Used for transformation	Used for looping
Chainable	Not chainable

---

Q2. What is reduce()?

reduce() converts array into single value.

Example

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(sum);

Used for:

• Sum
• Total calculation
• Flatten arrays
• Counting values

---

Q3. Difference Between find() and filter()

find()	filter()
Returns first match	Returns all matches
Returns single value	Returns array

---

Q4. Difference Between some() and every()

some()	every()
One item passes	All items must pass
Boolean result	Boolean result

---

Interview Tips

Most Important Methods

Focus heavily on:

• map()
• filter()
• reduce()
• find()
• some()
• every()

These are asked in:

• React interviews
• JavaScript interviews
• Machine coding rounds
• Frontend assignments

---

Best Practices

• Use map() for transforming data
• Use filter() for filtering
• Use reduce() for totals/calculations
• Avoid mutating original arrays unnecessarily
• Prefer immutable operations in React