map()

 

 

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

Calls a defined callback function on each element of an array, and returns an array that contains the results.

 

@param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

 

@param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

 

 

 

Example

1.

class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];
  
  const result = students.map((student) => student.score);
  
  console.log(result);
  // [ 45, 80, 90, 66, 88 ]
   

 

 

2.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const smilingDays = days.map(day => `😂 ${day}`);

// same code
const addSmile = day => `😂 ${day}`;
const smilingDays = days.map(addSmile);
console.log(smilingDays);
// [ '😂 Mon', '😂 Tue', '😂 Wed', '😂 Thurs', '😂 Fri' ]

const addIndexDays = days.map((day, index) => `#${index} ${day}`);
console.log(addIndexDays);
// [ '#0 Mon', '#1 Tue', '#2 Wed', '#3 Thurs', '#4 Fri' ]

 

 

3.

const numbers = [1, -1, 2, 3];

const filtered = numbers.filter(n => n >= 0);
// can filter value in an array

const items = filtered.map(n => {
    const obj = { value : n };
    return obj;
})

console.log(items);
// [ { value: 1 }, { value: 2 }, { value: 3 } ]

// same code
const items2 = filtered.map(n => ({ value : n }));

// same code
const items3 = numbers
    .filter(n => n >= 0)
    .map(n => ({ value : n }));

 

 

4. filter and map chaining 

const items4 = numbers
  .filter(n => n >= 0)
  .map(n => ({ value : n }))
  .filter(obj => obj.value > 1);
// can call the filter one more time 
// get an object and maybe want to get objects with value greater than 1

console.log(items4);
// [ { value: 2 }, { value: 3 } ]


const items5 = numbers
  .filter(n => n >= 0)
  .map(n => ({ value : n }))
  .filter(obj => obj.value > 1)
  .map(obj => obj.value);
// and again call the map method
// maybe map each object to a number
// so i can read the value property and return it

console.log(items5);
// [ 2, 3 ]