Javascript - Array map 사용법

오늘은 Javascript의 Array가 가지고 있는 map의 정의와 사용법 그리고 활용 방법에 대해 이야기해보려고 합니다. 일단 Array가 가진 map 함수가 어떤 함수인 지부터 살펴보도록 하죠.

map 정의

Array.prototype.map ( callbackfn [ , thisArg ] )

주로 주어진 배열의 값을 재정의 할 때 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다. 예제 코드를 통해 map의 사용법을 살펴보겠습니다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * number);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [1, 4, 9, 16, 25]

예시는 주어진 array의 값들을 map을 사용해 제곱을 하는 방법입니다. map을 사용하지 않고 for문을 사용하면 아래와 같이 사용해야 합니다. map은 간결하지만 for문을 사용하면 "순환"이라는 부분까지 직접 처리해야 하기 때문에 작성해야 하는 코드가 길고 간결하지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const result = [];

for (i = 0; i < numbers.length; i++) {
    result.push(numbers[i] * numbers[i]);
}

console.log(result);
// [1, 4, 9, 16, 25]

map 사용법

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것입니다.

const numbers = [1];

numbers.map((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number * number;
});

map을 사용하는 경우 주로 number에 해당하는 요소 값을 많이 활용하지만 index와 array도 함께 사용할 수 있습니다. map 정의에서 다루었던 예제 코드보다는 조금 더 재미있게 map을 사용하는 방법을 보도록 할게요.

// 프로그래밍 이름 길이 구하기
const programingLanguages = ["javascript", "java", "c#", "c++", "c"];
const lengthOfProgramingLanguages = programingLanguages.map(language => language.length);

console.log(lengthOfProgramingLanguages);
// [10, 4, 2, 3, 1];

처음에는 단순히 값을 곱하기만 했던 예제였다면 이번에는 문자의 길이를 이용해 완전히 새로운 값을 가진 배열을 만들어보았습니다. map을 사용해 기존의 값을 다시 정의하기도 하지만 새로운 형태의 값을 정의할 수 도 있습니다. 사실 실무에서는 객체나 json을 사용하기 때문에 기존의 값을 다시 정의하는 경우보다는 새로운 형태의 값을 정의하는 경우가 더 많습니다.

 

map을 사용할 때는 알아두어야 주의사항이 있는데요. 그 내용은 다음과 같습니다.

 

- map 함수는 객체를 직접 사용하거나 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 됩니다.

- callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기 이전이며, map이 순회하는 도중에 추가된 요소는 접근하지 않습니다. 반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않습니다.

// array 요소가 추가되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.push(number);
    return number * number;
});

console.log(result);
// [1, 4, 9, 16, 25];

// array 요소가 수정되는 경우
const numbers = [1, 2, 3, 4, 5];

const result = numbers.map(number => {
    numbers.pop();
    return number * number;
});

console.log(result);
// [1, 4, 9, empty × 2];

 

 

map 활용법

- 고차 함수 사용하기

const numbers = [1, 2, 3, 4, 5];

// 제곱근 구하기
const squares = numbers.map(Math.sqrt);

console.log(squares);
// [1, 1.4142135623730951, 1.7320508075688772, 2, 2.23606797749979]

// 곱 구하기
const double = value => value * 2;
const doubles = numbers.map(double);

console.log(doubles);
// [2, 4, 6, 8, 10]

map은 고차 함수를 사용해 미리 정해둔 식이나 정의되어 있는 식을 이용할 수 있어 편리합니다.

- 새로운 형태의 값 생성하기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const ages = users.map(user => user.age);

console.log(ages);
// [22, 32, 21, 35]

배열에 들어가 있는 값 중 특정 값만 추출해 새로운 형태의 배열을 만들어 낼 수 있습니다.

- 특정 요소만 재정의하기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const newUsers = users.map(user => {
    if (user.name === 'YD') {
        return { ...user, age: 18 };
    }

    return { ...user };
});

console.log(newUsers);
// [{name: "YD", age: 18}, {name: "Bill", age: 32}, {name: "Andy", age: 21}, {name: "Roky", age: 35}]

배열 요소 중 특정 조건을 만족하는 대상만 값을 재정의해서 사용할 수 있습니다.

- 문자를 배열로 바꾸기

const message = 'Hello world';

const newMessage = Array.prototype.map.call(message, char => `${char}`);

console.log(newMessage);
// ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

call을 이용하면 다른 객체의 context를 사용해 문자를 배열로 반환하는 데에 사용할 수 있습니다.

- React에 적용해보기

function Contacts() {
    const contactData = [
        { name: "YD", phone: "010-0000-0001" },
        { name: "Bill", phone: "010-0000-0002" },
        { name: "Andy", phone: "010-0000-0003" },
        { name: "Roky", phone: "010-0000-0004" }
    ];

    return (
        <div>
            <h1>Contacts</h1>
            <ul>
                {contactData.map((contact, index) => {
                    return (<li key={index} name={contact.name} phone={contact.phone} />);
                })}
            </ul>
        </div>
    );
}

React에서 화면을 구성할 때에도 map을 활용하면 보다 쉽게 화면 요소를 정의할 수 있습니다.