Array.map()에 대해 알아보자.

튜토리얼이나, 프로그래머스 문제 풀이를 할 때마다 자주 나오는 몇 가지
매써드들을 정리해 두고 링크용도로 쓰려고 요 카테고리를 만들었다.
 

1.Array?

Array는 자바스크립트에서 사용되는 목록 형태의 표준 내장 객체인데,
[ ]로 감싸고, ", "으로 구분해서 다양한 데이터를 저장할 수 있게 해 준다.
[1,2,3,4,5,6] 이런 식으로 1부터 6까지의 목록이 있는 데이터를 저장 하거나 혹은
[1, "happy", true, [1,2,3], {a: 10}] 이런식으로 각각 숫자, 문자, 참/거짓, 혹은 또 다른 배열, 객체 등등 ", "으로 구분해서 저장해 둘 수 있는
아주~ 편리한 내장 객체이다.
 

Array의 기본 형태

[1, 2, 3, 4, 5, 6, 7]
["hellow", "hi", "good morning"]

 

2. 매서드?

자바스크립트의 표준내장 객체들은 각기 다양한 매써드들을 가지고 있는데, 예를 들면 Array에서 이걸 반대로 뒤집어줘! 라든가 이걸 오름차순으로 정렬해줘!라던가.. 여기서 3번째 원소가 뭐야! 라던가.. 여하튼 이렇게 Array를 좀 더 편하게 다룰 수 있게 해주는 기능들의 집합이다.
 

3.map()?

그 매써드 중에 map()은 굉장히 자주 사용되고 있는 매써드이고, 기능은 어떤 callback 함수를 기준으로 리턴되는 값들로 새로운 배열을 만들어서 리턴해준다. 물론 이런 내용을 이해할 수 있으면 이포스트를 읽을 수준은 아닐 거라고 생각해서, 좀 더 쉽게 설명을 하자면..
 
[1,2,3,4,5]라는 배열에서 모든 원소에 2씩 더한 배열을 만들고 싶다거나,
["hello", "hi", "good morning"]라는 배열의 모든 원소의 끝에 "!"를 붙이고 싶다거나..
 
배열 안에 있는 원소들을 하나씩 꺼내서 동일한 동작을 반복해서 나온 결과물들로 새로운 배열을 만들어 주는 메서드이다.
현실에서 굳이 비교를 해보자면.. 음.. 내가 비디오대여점에서 일하는 사람이라고 쳤을 때, 새로 입고된 비디오들에 "OO비디오대여점"이라는 라벨을 달아주는 작업을 할 때 사용한다고 생각하면 편리하다.
 
쉽게 설명해서 저런 거고 딱 저럴 때만 쓰면 코딩실력이 늘질 않으니 이해에 도움만 받는 식으로 이해해 보자.
정확한 설명은 "각각의 원소들로 주어진 callback을 실행해서 나온 결괏값들로 새로운 배열을 리턴해주는" 메서드이다.
 
사용법은

대상배열.map(매개변수)

이런 식으로 사용한다.
매개변수는 저 괄호 안에 들어갈 수 있는, 혹은 들어가야만 하는 값들로 해당 값들로 매서드가 실행된다.
 
map의 매개변수로는
- callback 함수 (필수)
- thisArg (선택)
 
이렇게 두 종류가 있는데 thisArg의 경우는 콜백함수가 실행될 때 this로 사용되는 값인데..
이 부분은 좀 더 어려운 개념이니 우선은 callback 함수 하나만 들어가면 된다고 생각하면 편하다.
 
함수는
"function(){...}"의 형태와 "()=>{...}"의  두 가지 형태가 있는데 이 두 형태의 차이점에 대해서는 다른 포스트에서 설명하도록 하고, 요즘 흔히 쓰이는 화살표 함수의 형태로 다시 map의 사용 구문을 확인해 보면,
 

대상배열.map(() => {...})

 
뭔가 (()){}{}... 이렇다고 어렵게 생각하지 말고 그냥 ()=>{...} 이 map()의 () 안에 들어갔다고 생각하면 쉽다.
이 콜백함수도 3개의 매개변수를 갖는데 각각

• currentValue : 지금! 실행되는 요소 (필수)
• index :지금 실행 중인 요소가 원본 배열의 몇 번째인지. (선택)
• array : 원본 배열(여기선 대상배열) (선택, 자주 쓰이지 않음)

 
굳이 매개변수의 이름으로 안 쓰고 el, idx, arr 등으로 줄여 써도 되지만 매개변수의 순서의 경우 꼭 지켜야 한다. 
저 내용을 다시 써보고 각각 무슨 값이 나오는지 console.log로 찍어보면

//구문
대상배열.map((currentValue, index, array) => {...})

//출력예
const numberArr = [1,2,3,4,5]
numberArr.map((currentValue, index, array) => {
    console.log(currentValue);
    console.log(index);
    console.log(array);
})

// 1
// 0
// [1,2,3,4,5]
// 2
// 1
// [1,2,3,4,5]
// 3
// 2
// [1,2,3,4,5]
// 4
// 3
// [1,2,3,4,5]
// 5
// 4
// [1,2,3,4,5]
//(5) [undefined, undefined, undefined, undefined, undefined]

 
마지막에 (5) [undefined, undefined, undefined, undefined, undefined]가 나온 이유는
배열의 callback함수에서 아무것도 리턴해주지 않았기 때문이다.
currentValue, index, array를 활용해 원하는 작업을 한 뒤 결괏값을 리턴해주면 해당 값이 적용된 배열을 얻을 수 있다.
 

4. 사용해 보기

1. 모든 원소 뒤에 별 붙이기

const numberArr = [1,2,3,4,5];
const stringArr = ["hello", "hi", "good morning"];

const startNumberArr = numberArr.map(el => el + "★");
const startStringArr =stringArr.map(el => el + "★");

console.log(startNumberArr)
console.log(startStringArr)

//['1★', '2★', '3★', '4★', '5★']
//['hello★', 'hi★', 'good morning★']

 

2. 홀수(혹은 짝수) 원소 뒤에만 별 붙이기

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

const startNumberArrOdd = numberArr.map((el, idx) => {
	if(idx % 2 !== 0) return el;
    else return el + "★";
});

const startNumberArrEven = numberArr.map((el, idx) => {
	if(idx % 2 === 0) return el;
    else return el + "★";
});

console.log(startNumberArrOdd)
console.log(startNumberArrEven)

//['1★', 2, '3★', 4, '5★']
//[1, '2★', 3, '4★', 5]

 

3. 특정 글자를 지우기

const stringArr = ["hello", "hi", "good morning"];

const hOutArr = stringArr.map(el => el.replace('h', ''));

console.log(hOutArr)

//['ello', 'i', 'good morning']