웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 배열의 map() 함수 알아보기

Last Modified : 2023-10-29 / Created : 2021-06-23
12,529
View Count
자바스크립트의 배열에 사용되는 빌트인 메소드 중에서 가장 잘 알려진 map()에 대하여 알아봅니다.



# 자바스크립트 map()은?


자바스크립트built-in 메소드인 map() 메소드는 배열에 사용하는 메소드로 배열의 모든 값들을 순환 후 새로운 배열을 반환하기 위해 사용됩니다. 즉 모든 배열 값들을 순환할 수 있다는 장점을 가지고 있습니다. 배열의 값을 순차적으로 가져와 동작하는 루프문과는 다른 방법으로 사용할 수 있습니다.

자바스크립트의 map() 함수는 기본적으로 아래와 같은 특징이 있습니다.

- 배열을 사용하여 모든 값을 순환하는 방법 중 가장 간단하다
- Higher Order Function이다

다음으로 map()의 문법은 아래와 같습니다.

myArray.map(callback(current value, index, array), this)


여기서 콜백함수는 세 가지 인자를 전달하고 두 번째로 this값을 인자로 받을 수 있습니다. 각각 다음과 같이 사용됩니다.

- current value // 현재 반환할 값
- index // <Option> 현재 해당하는 인덱스의 값
- array // <Option> 배열에 접근 가능

- this // <Option> 사용할 this 키워드의 값

이처럼 위에서 value, array, this는 선택 가능한 옵션값입니다. 그럼 간단한 예제를 만들어보겠습니다.


! map() 예제 알아보기


몇 가지 간단한 예제를 만들어보겠습니다. 편의를 위해 ES 6의 화살표 함수를 사용하였습니다.

## Example 1
첫 번째 예제는 배열에 담긴 숫자에 2를 곱한 값을 얻기 위한 방법으로 map()을 사용하였습니다.
const nums = [1, 2, 3];
const newNums = nums.map(x => 2 * x);
console.log(newNums);

// Result
[2, 4, 6]

이처럼 기존 배열의 값들을 특정 값으로 변경하기 위해서 map()이 많이 쓰입니다. 단순하게 반복을 위해 사용하기도 합니다.

참고로 위 예제는 아래와 같이 for 문으로 사용할 수 있겠죠. 물론 출력 결과는 동일합니다.
const nums = [1, 2, 3];
let newNums = [];
for (var i = 0; i < nums.length; i++) {
  newNums.push(nums[i] * 2);
};
console.log(newNums);

// Result
[2, 4, 6]

위 두 코드의 결과는 동일하지만 첫 번째 코드가 훨씬 간결하고 보기 쉽습니다. 아래는 두 번째 예제입니다. 


## Example 2
위 예제는 숫자만 사용하였습니다. 여기서는 배열안에 객체를 가진 경우의 예제를 만들어봅니다. map()을 사용하여 배열의 값이 가진 객체의 특정 프로퍼티를 가져온 후 문자열로 변환하여 반환하는 예제입니다.
const sites = [
  { id: 1, name: 'web'},
  { id: 2, name: 'is'},
  { id: 3, name: 'free'},
];
const newSites = sites.map(site => site['id'] + '-' + site['name']);
console.log(newSites);

// Result
["1-web", "2-is", "3-free"]

이처럼 배열이 객체 값을 가지는 컬렉션 타입의 데이터를 조작하기 위해서도 map()은 유용하게 사용할 수 있습니다.


@ this를 변경하는 방법
위에서 본 것처럼 map()에서 콜백 이 외에 this의 값을 다른 값으로 매핑할 수 있도록 설정할 수 있습니다. 예를들어 아래와 같이 this의 값으로 'test'라는 문자열을 넘겨주는 것도 가능합니다.
myArray = [1, 2, 3];
myArray.map(function(x) {
  console.log(this);
  return x;
}, 'test');

// Result
String {"test"}
String {"test"}
String {"test"}

출력된 결과를 보면 문자열 test가 this로 출력된 것을 알 수 있습니다.

주의할 점은 이 경우 Block scope를 사용하는 ES 6의 화살표 함수를 사용하면 안됩니다. 이 경우 머리 객체에 해당하는 window객체를 반환하니 주의하여 주세요.
myArray.map((x) => ( console.log(this)), 'test');
// 문자열 test가 아닌 window 객체를 반환


여기까지 map() 함수에 대하여 알아보았습니다.

Previous

자바스크립트 ES6의 const 상수 조금 더 알아보기

Previous

특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth