let new_array = arr.map(function callback( currentValue[, index[, array]]) {

    // return element for new_array

}[, thisArg])

​

const array1 = [1, 4, 9, 16];

​

// pass a function to map

const map1 = array1.map(x => x * 2);

​

console.log(map1);

// expected output: Array [2, 8, 18, 32]

const array1 = [1, 4, 9, 16];

​

// pass a function to map

const map1 = array1.map(x => x * 2);

​

console.log(map1);

// expected output: Array [2, 8, 18, 32]

​

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

let filteredNumbers = numbers.map(function(_, index) {

  if (index < 3) {

     return num

  }

})

// index goes from 0, so the filterNumbers are 1,2,3 and undefined.

// filteredNumbers is [1, 2, 3, undefined]

// numbers is still [1, 2, 3, 4]

​

​

var x = [1,2,3,4].map( function(item) {return item * 10;});

let arr = [1,2,3]

​

/*

  map accepts a callback function, and each value of arr is passed to the 

  callback function. You define the callback function as you would a regular

  function, you're just doing it inside the map function

  map applies the code in the callback function to each value of arr, 

  and creates a new array based on your callback functions return values

*/

let mappedArr = arr.map(function(value){

    return value + 1

})

​

// mappedArr is:

> [2,3,4]

const numbers = [1, 5, 10, 15];

const doubles = numbers.map(function(x) {

   return x * 2;

});

// doubles is now [2, 10, 20, 30]

// numbers is still [1, 5, 10, 15]

​

const shoppingList = ['Oranges', 'Cassava', 'Garri', 'Ewa', 'Dodo', 'Books']

​

export default function List() {

  return (

    <>

      {shoppingList.map((item, index) => {

        return (

          <ol>

            <li key={index}>{item}</li>

          </ol>

        )

      })}

    </>

  )

}