[JavaScript] map() 메서드, JavaScript 배열 map()

Array.prototype.map(실행할 함수)

 

map() 메서드는 배열에 붙여 사용하며, 배열의 각 요소를 불러와 괄호 안의 내용을 수행하고 반환하여 새로운 배열을 만든다.

즉, return 값이 있다.

 

예시를 보자.

 

배열과 map()

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const map = numbers.map(function (number) {
    return number * 3; // 3을 곱한 값을 반환
})

console.log(map);

 

위 코드는 1부터 10까지의 숫자가 배열로 담긴 numbers를 map을 사용하여 각 값에 3을 곱한 값을 반환하도록 하는 함수이다.

 

 

 

결과를 보면 map이라는 변수에 3이 곱해진 값들이 정상적으로 들어가있는 것을 확인할 수 있다.

 

 

 

 

에시를 하나 더 보겠다.

객체와 map()

const students = [
    {
        name: 'Minwoo',
        score: 87
    },
    {
        name: 'Yewon',
        score: 100
    },
    {
        name: 'Binu',
        score: 95
    },
    {
        name: 'Sebin',
        score: 90
    }
]

const studentsName = students.map((person) => {
    return person.name;
})

console.log(studentsName);

 

students라는 객체에서 학생 4명의 이름과 점수를 저장하고 있다.

그리고 map을 사용하여 studentsName이라는 변수에 students 객체에서 "name"에 해당하는 값들만 매핑하여 저장하고 있다.

 

결과는 위처럼 이름값들만 저장된 것을 확인할 수 있다.

 

이처럼 map() 메서드는 배열이나 객체 데이터를 순서대로 각각 불러와 괄호 안의 함수를 실행시킨 뒤 반환하는 형식으로 실행된다.