Currently viewing "JavaScript Practice Session2",
open Console by Right-click > Inspect > Console or press F12

When to use map in js?

In JavaScript, you should use .map() when you need to transform each element of an array and return a new array of the same length.

---

Use .map() when:
You need a new array – .map() always returns a new array without modifying the original one.
You want to transform each element – Apply a function to each element and get a modified version.
You need the same array length – Unlike .filter(), which removes elements, .map() keeps the array
length the same.

                1. Convert an array of numbers to their squares
                const numbers = [1, 2, 3, 4];
                const squares = numbers.map(num => num * num);
                console.log(squares); // [1, 4, 9, 16]

                2. Extract specific properties from an array of objects
                const users = [{ name: "Alice" }, { name: "Bob" }, { name: "Charlie" }];
                const names = users.map(user => user.name);
                console.log(names); // ["Alice", "Bob", "Charlie"]

                3. Modify elements while keeping structure
                const prices = [10, 20, 30];
                const discounted = prices.map(price => price * 0.9);
                console.log(discounted); // [9, 18, 27]

                📌 Don't use .map() if you are not returning a new array. If you only want to iterate, use .forEach() instead.
            

Why not copy like let arr = arr2?

In JavaScript, doing let arr = arr2; does not create a new array. Instead, it assigns a reference to the same array in memory. Any changes made to arr will also affect arr2, since they both point to the same object.

Example:

                let arr1 = [1, 2, 3];
                let arr2 = arr1;  // Both arr1 and arr2 refer to the same array
                
                arr2.push(4);  // Modifying arr2 also affects arr1
                
                console.log(arr1); // Output: [1, 2, 3, 4]
                console.log(arr2); // Output: [1, 2, 3, 4]
            

Correct Way to Copy an Array:

To create a new independent copy, use slice(), spread operator, or Array.from().

                // Using slice()
                let arr3 = arr1.slice();
                
                // Using spread operator
                let arr4 = [...arr1];
                
                // Using Array.from()
                let arr5 = Array.from(arr1);
            

forEach

Definition: The forEach() method executes a provided function once for each array element. It does not return a new array but is useful for performing actions on elements.

Use Case: When you need to iterate over an array but don't need to transform it or return a new array.

                const numbers = [1, 2, 3, 4, 5];
                numbers.forEach(num => console.log(num * 2)); 
                // Output: 2, 4, 6, 8, 10
            

map

Definition: The map() method creates a new array by applying a function to each element of the original array. It is used for transforming array data.

Use Case: When you need to modify each element and return a new array without altering the original one.

                const numbers = [1, 2, 3, 4, 5];
                const squaredNumbers = numbers.map(num => num * num);
                console.log(squaredNumbers); 
                // Output: [1, 4, 9, 16, 25]
            

filter

Definition: The filter() method creates a new array containing only the elements that meet a specified condition.

Use Case: When you need to extract specific elements from an array based on a condition.

                const numbers = [1, 2, 3, 4, 5];
                const evenNumbers = numbers.filter(num => num % 2 === 0);
                console.log(evenNumbers); 
                // Output: [2, 4]
            

reduce

Definition: The reduce() method applies a function to an array, reducing it to a single value (such as a sum or product).

Use Case: When you need to compute a single value from an array, such as summing elements.

                const numbers = [1, 2, 3, 4, 5];
                const sum = numbers.reduce((acc, num) => acc + num, 0);
                console.log(sum); 
                // Output: 15
            

set()

Definition: The Set object in JavaScript is a collection of unique values. It allows only distinct elements, meaning duplicate values are automatically removed.

Use Case: Use Set when you need to store unique values, remove duplicates from an array, or efficiently check for the existence of a value.

                // Creating a Set
                let mySet = new Set([1, 2, 3, 3, 4, 4, 5]); 

                console.log(mySet); // Output: Set(5) { 1, 2, 3, 4, 5 }

                // Adding values
                mySet.add(6);
                console.log(mySet); // Output: Set(6) { 1, 2, 3, 4, 5, 6 }

                // Checking existence
                console.log(mySet.has(3)); // Output: true
                console.log(mySet.has(10)); // Output: false

                // Removing a value
                mySet.delete(2);
                console.log(mySet); // Output: Set(5) { 1, 3, 4, 5, 6 }

                // Converting Set to Array
                let uniqueArray = [...mySet];
                console.log(uniqueArray); // Output: [1, 3, 4, 5, 6]
            

sort()

Definition: The sort() method sorts the elements of an array in place and returns the sorted array. By default, it sorts elements as strings in ascending order.

Use Case: Used for sorting arrays of numbers, strings, or objects based on specific criteria.

                // Sorting an array of strings
                let fruits = ["Banana", "Apple", "Mango"];
                fruits.sort();
                console.log(fruits); // ["Apple", "Banana", "Mango"]

                // Sorting an array of numbers (ascending order)
                let numbers = [4, 2, 10, 1];
                numbers.sort((a, b) => a - b);
                console.log(numbers); // [1, 2, 4, 10]

                // Sorting an array of objects by a property
                let people = [{ name: "Alice", age: 25 }, { name: "Bob", age: 20 }];
                people.sort((a, b) => a.age - b.age);
                console.log(people); // [{ name: "Bob", age: 20 }, { name: "Alice", age: 25 }]