13. Map , Filter , Reduce in JS

1. map()

• The map() method creates a new array by applying a function to each element of an existing array.

• It does not modify the original array.

• It returns an array of the same length as the original.

• It takes callback function

•       //Example 1
        let myarr= [1,2,3,4]
        let newArr = myarr.map(function(x){  // callback function will take x from myarr one by one 
            return x*x;
        })
        console.log(newArr);   //[ 1, 4, 9, 16 ]
  
        //Example 2 : using arrow function
        let myarr= [1,2,3,4]
        let newArr = myarr.map((x)=>{
            return x*x;
        })
        console.log(newArr);  //[ 1, 4, 9, 16 ]
  
        //Example 3 : Using index of array
        let myarr= [1,2,3,4]
        let newArr = myarr.map((x,i)=>{
            return i
        })
        console.log(newArr);     //[ 0, 1, 2, 3 ]
  

  map in react:

//Example 4 : Map use in react.js
  let myarr= [
       {
         id:1,
         name:"asdf"
       },
       {
        id: 2,
        name:"hii"
        },
     ]

  let newArr = myarr.map((x,i)=>{  //it will display name on UI one by one all
      return (
          <div>
              {x.name}  
          </div>
      )
  })
  console.log(newArr);

1. filter()

   • The filter() method creates a new array containing elements that pass a given test.

   • It does not modify the original array.

   •       let myarr= [1,2,3,4]
           let newArr = myarr.filter((x)=>{
               return x%2==0;   // filter those elements that are divisble by 2 
           })
           console.log(newArr)  //[ 2, 4 ]
     

2. reduce()

   • The reduce() method executes a reducer function on each element of the array, accumulating the result into a single value.

   • It requires a callback function with an accumulator and the current element.

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

3. Strict mode (“use strict”)

   • Enforces stricter parsing and error handling.

   • Helps catch common coding mistakes.

   • Prevents the use of undeclared variables.

   • Disallows the use of reserved words.

   • Prevents accidental creation of global variables.

   •       "use strict";
     
           x = 10; // ReferenceError: x is not defined
           let public = "data"; // SyntaxError: Unexpected strict mode reserved word
     

4. Non Strict mode (default mode)

   • In non-strict mode, JavaScript is more lenient with errors.

   • Undeclared variables are automatically created as global variables.

   •       x = 10; 
           console.log(x); // Output: 10 (but this is bad practice)
     

Interview Questions

1. What will be the output ?

    const nums = [1, 2, 3, 4];
    const result = nums.map(num => num * 2).filter(num => num > 4);
    console.log(result);
   

   • map(): [2, 4, 6, 8]

   • filter(): [6, 8] Final Output: [6, 8]

Next Topic

14. this keyword in javascript