자바스크립트 배열 메소드 -map()

안녕하세요 개발자 여러분,

코딩하는 동안 코드의 어딘가에 분명히 배열됩니다. 배열을 사용한 적이 있다면 배열에 대한 루프 작업 방법을 알아야 합니다.
그래서 기본적으로 이 블로그에서는 가장 많이 사용되는 자바스크립트 배열 방법에 대해 알아볼 것입니다. 예, 올바르게 추측했습니다. map() 방법입니다.

지도()

언제 어디서 map() 방법을 사용해야 하는지 혼동하지 않도록 아래에 기록된 모든 사항을 기억하십시오.

배열을 반복하는 데 사용되며 forEach() 및 for 루프와 같습니다.

원래 배열을 변경하지 않습니다.

새 배열을 반환합니다.

통사론

const array = [2, 4, 5, 6]

// it takes a callback function
// array.map(callbackFn())

// parameters of callback function
// 1. callbackFn(element)
// 2. callbackFn(element, index)
// 3. callbackFn(element, index, arrary)    the 3rd one is the original array where we are using map()

3가지 질문으로 자바스크립트map()를 배울 것입니다.

질문 1

// Create a new array based on the given array with twice every element.
// double [2, 6, 4, 16, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

const doubledArray = myArray.map((el) => el * 2)

질문 2

// Create a new array based on the given array with the sum of index + element at that index.
// double [1, 4, 4, 11, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

질문 3

// create a new array based on the given array object, the new array should contain 

const items = [
    {
        id: 1,
        fName: 'John',
        lName: 'Doe',
    },
    {
        id: 2,
        fName: 'Julia',
        lName: 'Green',
    },
    {
        id: 3,
        fName: 'Thomas',
        lName: 'Freguson',
    },
    {
        id: 4,
        fName: 'Jane',
        lName: 'Smith',
    },
    {
        id: 5,
        fName: 'Maria',
        lName: 'Reese',
    },
]

const newItems = items.map((el) => `${el.fName} ${el.lName}`)
// ['John Doe', 'Julia Green', 'Thomas Freguson', 'Jane Smith', 'Maria Reese']

자바스크립트에서 map() 메소드를 언제 사용해야 하는지 이해하셨기를 바랍니다.

질문이 있으면 댓글에 게시할 수 있습니다.

당신은 또한 저와 연결할 수 있습니다