🧠 10-Day JS Challenge: Arrays & Array Methods Day-6

📅 Day 6: Arrays & Array Methods

Welcome to Day 6 of the challenge!

Today, we’re diving into one of JavaScript’s most used data structures — the Array. Whether you're storing numbers, strings, or objects, arrays are essential for organizing and working with collections of data.

📦 What is an Array?

An array is a special variable that can hold more than one value at a time — like a list.

You can think of it as a container that stores items in a specific order, and you can access each item using an index (starting from 0).

✅ Declaring an Array:

let colors = ["red", "green", "blue"];

let numbers = [10, 20, 30, 40];

✅ Accessing Elements:

console.log(colors[0]); // "red"

console.log(numbers[2]); // 30

✅ Modifying Elements:

colors[1] = "yellow"; 

console.log(colors); // ["red", "yellow", "blue"]

🔧 Common Array Methods in JavaScript

JavaScript provides built-in methods to make working with arrays easier and more powerful. Let’s look at some essentials:

📌 1. push()

Adds an element to the end of the array.

let fruits = ["apple", "banana"];

fruits.push("mango");

console.log(fruits); // ["apple", "banana", "mango"]

📌 2. pop()

Removes the last element.

fruits.pop();

console.log(fruits); // ["apple", "banana"]

📌 3. unshift()

Adds an element to the beginning.

fruits.unshift("orange");

console.log(fruits); // ["orange", "apple", "banana"]

📌 4. shift()

Removes the first element.

fruits.shift();

console.log(fruits); // ["apple", "banana"]

🔁 Advanced Array Methods

✅ map()

Creates a new array by applying a function to each item.

let numbers = [1, 2, 3];

let squared = numbers.map(num => num * num);

console.log(squared); // [1, 4, 9]

✅ filter()

Creates a new array with elements that pass a condition.

let numbers = [1, 2, 3, 4, 5];

let even = numbers.filter(num => num % 2 === 0);

console.log(even); // [2, 4]

✅ Mini Task: Filter Even Numbers from an Array

🎯 Task:

Write a program that filters all even numbers from an array and stores them in a new array.

💻 Solution:

function filterEven(arr) {

  return arr.filter(num => num % 2 === 0);

}



let sample = [10, 15, 22, 37, 40, 51];

let evens = filterEven(sample);



console.log(evens); // Output: [10, 22, 40]

Try it with different numbers or even as a reusable function in other projects!

Shallow Copy vs Deep Copy

When copying arrays or objects, it's important to know how deep the copy goes.

🔹 Shallow Copy

A shallow copy duplicates only the first layer. If the original contains objects or arrays inside, they are still linked.

let original = [1, 2, [3, 4]];

let copy = [...original];



copy[2][0] = 99;

console.log(original[2][0]); // 99 (original is affected!)

Common shallow copy methods:

• [...] spread operator


• Array.prototype.slice()


• Object.assign()

🔸 Deep Copy

A deep copy duplicates all levels of nested structures — no shared references.

let deepOriginal = [1, 2, [3, 4]];

let deepCopy = JSON.parse(JSON.stringify(deepOriginal));



deepCopy[2][0] = 100;

console.log(deepOriginal[2][0]); // 3 (original is safe!)

Deep copy is ideal when working with complex data structures that shouldn't be altered accidentally.

⚠️ JSON method doesn’t work well with functions, undefined, or circular references.

❓ Interview Questions (Day 6 Topics)

1. What is an array in JavaScript, and how is it different from an object?


2. How do push() and unshift() differ?


3. When would you use map() vs forEach()?


4. What does the filter() method return?


5. Can you explain the difference between pop() and shift()?

🏁 Day 6 Wrap-Up

Arrays are everywhere in JavaScript — from storing lists of users to managing UI components. By mastering these basic and advanced methods, you're getting closer to writing clean, powerful, and expressive code.

📅 Coming up next in Day 7: We’ll explore Objects & Object Methods

Happy coding! 💻🚀