소개
자바스크립트의 배열 내부 값을 처리하는 맵(map)을 알아보고 익숙해지기 위해 연습해보는 시간을 가져보려 한다. 사실 회사에서 자주 사용하기 때문에 익숙하고 잘 사용하고 있지만 한번 더 정리해서 올려본다.
map 함수
map 함수는 콜백 함수를 인자로 받아 콜백 함수에 대한 반환값으로 새 배열을 생성해 반환한다.
map을 사용한 예시는 아래와 같다.
const arr = [1, 2, 3, 4, 5];
const result = arr.map(value=>value*10);
console.log(result);
//결과: [10, 20, 30, 40, 50]결과를 보면 각 원소의 값을 받아와 X10을 해주었다는 것을 알 수 있다.
이처럼 map은 배열의 값들을 처리하고 싶을 때 사용한다.
위의 코드는 아래의 코드와 완전히 같은 역할을 수행한다.
const arr = [1, 2, 3, 4, 5];
const result = [];
for(let item of arr){
result.push(item * 10);
}
console.log(result);
//결과: [10, 20, 30, 40, 50]사실 map을 사용했을 때와 사용하지 않았을 때의 차이를 보면 왜 사용하는지 알 수 있을 것이다. 참고로 map은 일반 for문을 사용한 것보다 속도가 약 10% 정도 느리지만 훨씬 간결하고 빠르게 작성 가능하기 때문에 자주 사용한다.
map을 사용하는 방법은 아래와 같다.
arr.map(callback[value, index, source])
map에는 인자로 callback 함수를 받으며 callback 함수에는 아래의 매개변수가 들어간다.
value - 배열의 값
index - 배열의 인덱스
source - 순회하는 대상const arr = ['첫번째', '두번째', '세번째'];
const result = arr.map((value, index, source)=>{
console.log(`value: ${value} / index: ${index} / source: ${source}`);
});
/* 결과
value: 첫번째 / index: 0 / source: 첫번째,두번째,세번째
value: 두번째 / index: 1 / source: 첫번째,두번째,세번째
value: 세번째 / index: 2 / source: 첫번째,두번째,세번째
*/map 연습해보기
위에서 map에 대해 충분히 알아봤으니 map을 직접 사용해보면서 익혀보도록 하자. 한번 정답을 보지 않고 직접 해보길 권장한다.
- 배열 값 우측에 '개' 붙이기
배열 예시: [1, 3, 2, 5, 6, 8]
결과 예시: ['1개', '3개', '2개', '5개', '6개', '8개']
<정답>
const arr = [1, 3, 2, 5, 6, 8];
const result = arr.map(v=>v+'개');
console.log(result);- 2차원 배열의 특정 원소만 가져오기
배열 예시: [[0, '영'], [1, '일'], [2, '이']]
결과 예시: ['영', '일', '이']
<정답>
const arr = [[0, '영'], [1, '일'], [2, '이']];
const result = arr.map(v=>v[1]);
console.log(result);-
2차원 배열을 객체 배열로 만들기
배열 예시: [['철수', 12], ['영희', 10]]
결과 예시: [{name: '철수', age: 12}, {name: '영희', age: 10}]
<정답>
const arr = [['철수', 12], ['영희', 10]];
const result = arr.map(v=>{return {name: v[0], age: v[1]}});
console.log(result);참고로 아래와 같이 배열의 값만 사용할 경우 반환값이 없어도 무관하며 map 콜백 함수 내부에서 수행할 코드를 적어주면 된다.
const arr = ['안녕하세요', '인사', 'ㅎㅇ'];
arr.map(v=>{
console.log(v);
});
/* 결과
안녕하세요
인사
ㅎㅇ
*/여기까지 자바스크립트의 map 함수에 대해서 알아보았다.
끗!
