[Javascript] Map() 사용하기

코테를 공부하며 다른사람들이 푼 풀이를 보면 정말 간결한 코드가 많다.
나도 언젠간 그렇게 쓸 수 있겠지? 그러니 노력해보자..
for문을 최대한 쓰지않으려고 연습해야겠다.

Array.map() 을 사용하면 for문을 사용하지 않고 배열을 순회해 새로운 배열을 만들 수 있다고한다. 우선 가볍게 사용할 수 있는 예시를 보자면

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

const newArr = arr.map(a => a * a);

console.log(newArr);
=> [ 1, 4, 9, 16, 25 ] 출력

위에 코드에서 const newArr = arr.map(a => a a); 이 코드의 ()안 영역을 보면
(요소값 => source에서 요소의 index source) 라고 해석하면 된다.
즉 arr배열안의 값을 하나씩 꺼내와 (1 => 1 1), (2 => 2 2) ... (5 => 5 * 5)
이렇게 순회를 돌며 새로운 배열을 만들어 낸다.

여기서 map()의 괄호 안의 내용은 내가 필요한 식을 사용하면 된다.
예를들어 source를 생략하면 기존 arr값이랑 동일하게 나오니 a.length등으로 응용해서 사용 가능하다.

const fruit = ["apple", "banana", "kiwi", "melon"]

const fruitstr = fruit.map(a => a.length);

console.log(fruitstr);
=> [ 5, 6, 4, 5 ] 출력

이런식으로 for문을 사용하지 않고 쉽게 각 요소의 글자수를 알 수 있고, arr.map(Math.sqrt)와 같이 고차함수도 사용이 가능하다.

const uAge = users.map(users => users.age)

console.log(uAge);
=> [ 32, 26, 41, 29 ] 출력

위와 같이 특정 값만 가져오는 것도 가능하고, if문을 함께 사용해 특정 나이대만 출력할 수 도 있다.

마지막 예시로 문자를 배열로 만들어 보자면

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" ] 출력

정말 쉽게 문자를 배열로 만들 수 있다.
아래 링크들에서 더 자세하게 알아볼 수 있으니 한번씩 읽어보면 좋을듯 하다.
그리고 자바스크립트 너무 어렵다.
타입스크립트도.
코딩테스트도.

MDN 공식 문서
블로그 작성 참고 링크