JS 4

Absolutely. Since your goal is to become job-ready and your time is limited, we'll optimize for maximum learning per minute.

New Learning Style (from Chapter 4 onward)

We'll use this format:

• ✅ 5–10 minute lesson

• ✅ 15–20 carefully chosen MCQs

• ✅ Answers immediately below each question

• ✅ Mini challenge with complete solution

• ✅ Mini project with complete solution

• ✅ "Common interview mistakes"

• ✅ "What you must remember" summary

You should still try to predict the answer first, but you won't get stuck if you don't have time.

---

Chapter 4 — Arrays

🎯 Goal (1 line)

Learn how to store and work with a list of values—the most commonly used data structure in JavaScript and React.

---

Think Like a Programmer

So far you've stored one value:

const name = "Alice";

But what if you have 100 names?

❌ Bad

const name1 = "Alice";
const name2 = "Bob";
const name3 = "Charlie";

✅ Good

const names = ["Alice", "Bob", "Charlie"];

An array is simply one box that holds many values.

Think of it like a shopping basket.

Basket
──────────────
Apple
Banana
Orange
Milk

Instead of many variables, one array stores everything.

---

Accessing Items

Arrays start counting from 0, not 1.

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

Index	Value
0	Apple
1	Banana
2	Orange

console.log(fruits[0]);

Output

Apple

---

Adding Items

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

fruits.push("Orange");

console.log(fruits);

Output

["Apple", "Banana", "Orange"]

push() adds an item to the end.

---

Removing the Last Item

fruits.pop();

Removes the last item.

---

Finding the Number of Items

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

console.log(fruits.length);

Output

3

---

MCQs

---

Q1

What is an array?

A. A number

B. A list of values

C. A function

D. A condition

✅ Answer

B

---

Q2

Which creates an array?

A.

const fruits = {};

B.

const fruits = [];

C.

const fruits = ();

D.

const fruits = "";

✅ Answer

B

---

Q3

Output?

const colors = ["Red", "Blue"];

console.log(colors[0]);

A. Blue

B. Red

C. 0

D. Error

✅ Answer

B

---

Q4

Output?

const colors = ["Red", "Blue"];

console.log(colors[1]);

A. Red

B. Blue

C. Error

D. undefined

✅ Answer

B

---

Q5

Output?

const colors = ["Red", "Blue"];

console.log(colors.length);

A. 1

B. 2

C. 3

D. Error

✅ Answer

B

---

Q6

What does push() do?

A. Removes first item

B. Adds an item to the end

C. Sorts items

D. Finds an item

✅ Answer

B

---

Q7

Output?

const fruits = ["Apple"];

fruits.push("Banana");

console.log(fruits.length);

A. 1

B. 2

C. 3

D. Error

✅ Answer

B

---

Q8

What does pop() do?

A. Removes last item

B. Removes first item

C. Adds an item

D. Clears the array

✅ Answer

A

---

Q9

Output?

const nums = [10, 20, 30];

nums.pop();

console.log(nums);

A.

[10,20]

B.

[20,30]

C.

[30]

D.

Error

✅ Answer

A

---

Q10

Find the bug.

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

console.log(fruits[2]);

A. No bug

B. Index should be 0 or 1

C. Need push()

D. Need let

✅ Answer

B

There are only two items.

---

Q11

Output?

const nums = [5,10,15];

console.log(nums[2]);

A. 5

B. 10

C. 15

D. Error

✅ Answer

C

---

Q12

Which code is better?

A.

const student1="A";
const student2="B";
const student3="C";

B.

const students=["A","B","C"];

✅ Answer

B

Arrays make related data much easier to manage.

---

Q13

Output?

const items = [];

items.push("Book");

console.log(items);

A.

[]

B.

["Book"]

C.

Book

D.

Error

✅ Answer

B

---

Q14

Output?

const items = ["Pen"];

items.push("Book");
items.push("Bag");

console.log(items.length);

A. 1

B. 2

C. 3

D. Error

✅ Answer

C

---

Q15 (Hardest)

Predict the output.

const numbers = [1,2];

numbers.push(3);

numbers.pop();

numbers.push(4);

console.log(numbers);

A.

[1,2]

B.

[1,2,3]

C.

[1,2,4]

D.

[4]

✅ Answer

C

Step by step:

[1,2]

push(3)
↓

[1,2,3]

pop()
↓

[1,2]

push(4)
↓

[1,2,4]

---

Mini Coding Challenge

Predict the output.

const cities = ["Delhi", "Mumbai"];

cities.push("Bengaluru");

console.log(cities[2]);
console.log(cities.length);

✅ Solution

Output

Bengaluru
3

Explanation:

["Delhi","Mumbai"]

push("Bengaluru")

↓

["Delhi","Mumbai","Bengaluru"]

Index 2 = Bengaluru.

Length = 3.

---

Mini Project — Shopping Cart

const cart = [];

cart.push("Laptop");
cart.push("Mouse");
cart.push("Keyboard");

console.log(cart);

console.log("Items:", cart.length);

cart.pop();

console.log(cart);

✅ Output

["Laptop", "Mouse", "Keyboard"]

Items: 3

["Laptop", "Mouse"]

---

Common Beginner Mistakes

❌ Thinking arrays start at index 1.

array[1]

is the second item.

---

❌ Forgetting () when calling methods.

Wrong:

cart.push;

Correct:

cart.push("Laptop");

---

❌ Confusing .length with a function.

Wrong:

cart.length();

Correct:

cart.length

---

🧠 What You Must Remember (80/20)

These five patterns cover most day-to-day array work:

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

fruits[0];          // Read an item
fruits.push("Kiwi"); // Add to the end
fruits.pop();        // Remove the last item
fruits.length;       // Count items

Master these before moving on to more advanced array methods like map(), filter(), and find(), which we'll cover later. Those methods are heavily used in React and modern JavaScript.