javascript 배열 내장함수 map

글을 시작하며...

열심히 살겠다고 마음을 먹은 요즘, 난 점심시간마다 1일 1 코딩테스트를 풀고있다.
JavaScript도 익숙해질 겸사겸사 언어를 JS로 풀고있는데 모르는 함수나 문법이 많았다.(한번 공부하고 velog에 적어두기까지 했는데 기억이 안나는건 이해를 못하고 넘어가서일까...?)
그래서 이제부터 코딩테스트를 풀고 다른사람의 풀이를 보면서 내가 몰랐던 문법과 함수들을 하나씩 정리해보고자 한다.

배열 내장함수 - map()

map은 배열에 사용할 수 있는 내장함수이다.
배열에서 각각의 모든 요소에 대하여 callbackFunction을 호출한 결과를 새로운 배열로 반환하는 메서드다. map은 기존 사용한 배열을 변경시키지 않는다.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(n => n*2);

console.log(arr);		// [1, 2, 3, 4, 5] = 원 배열은 바뀌지 않는다.
console.log(newArr);	// [2, 4, 6, 8, 10]

위 예시처럼 arr의 배열은 변하지 않고, 해당 원소의 x2의 해당하는 원소들로 새로운 배열을 만들어낸다.
callbackFunction을 따로작성 할수도 있고, 안에서 로직을 작성 할 수도 있다.
그리고 꼭 화살표함수를 사용하지 않아도 된다.

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

// callbackFunction을 분리한 코드
const callbackFunc = (n) => n * 2;
const newArr = arr.map(callbackFunc);

// 내부에서 로직을 작성한 코드
const newArr2 = arr.map((n) => {
	const newN = n * 2;
  	return newN;
});

// 화살표함수를 사용하지 않은 코드
const newArr3 = arr.map(function(n){
	const newN = n * 2;
  	return newN;
});

console.log(arr);		// [1, 2, 3, 4, 5] = 원 배열은 바뀌지 않는다.
console.log(newArr);	// [2, 4, 6, 8, 10]
console.log(newArr2);	// [2, 4, 6, 8, 10]
console.log(newArr3);	// [2, 4, 6, 8, 10]

작성한 결과값은 모두 같다.

마무리하며..

막상 정리하니까 이론은 정말 쉬운것 같지만, 실전이나 코딩테스트에서 응용하는건 생각보다 어려웠다.
지금당장은 응용하면서 어려웠던게 생각은 나지않지만, 그런 난관이 있을 때 마다 이 게시글에 해당 문제와 솔루션을 적고 적절한 예시로 설명을 적어놓아야 나중에 봐도 한눈에 이해할 수 있을 것 같다. (난 예시를 들어야 이해가 잘되는 편이니까.)