[React] #05 배열을 다루는 Map

Map

왜 Map을 쓸까 ?

  우리가 배열을 다루다 보면, 어떤 배열에 있는 값을 바탕으로 새로운 배열을 재구성하고 싶을 때가 있는데, 원래 하던 것처럼 for문 을 사용해도 된다.

아래는 for문 을 이용하여 배열의 모든 요소에 3을 곱하는 코드이다.

let nums = [1, 2, 3, 4, 5];

for(let i=0; i<nums.length; i++){
	nums[i] = nums[i] * 3;
}

console.log(nums); // [3, 6, 9, 12, 15]

  다음으로 map 함수를 사용한 코드이다.

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

const newNums = nums.map((num)=>{
	return num * 3;
});

console.log(newNums); // [3, 6, 9, 12, 15]

  어떤가, for문 을 사용한 코드보다 map 함수를 사용한 코드가 보이게도 간결하고, 훨씬 가독성이 좋아지고 직관적이게 변한 것을 볼 수 있다.

기본 구조

  왜 map 함수를 사용하는지 알아봤으니, 어떻게 사용하는지도 알아보자.

  일단 map 함수 안에는 콜백함수가 들어간다. 콜백함수에는 위에있는 코드처럼 화살표 함수(Arrow Function)가 될 수도 있고, 그냥 함수가 들어갈 수 도 있다. 하지만 왠만하면 화살표 함수를 사용하는 것을 추천한다.

array.map((value, index, array) => {
	//코드
});

  위 코드를 보면, map함수의 콜백함수가 받을 수 있는 매개변수로 여러종류가 있다. value 부터 살펴보면, 대상 배열의 값이 들아가는 변수이다.

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

const newNums = nums.map((num)=>{
	return num * 3;
});

console.log(newNums); // [3, 6, 9, 12, 15]

  위의 코드를 가져왔다. 여기서 매개변수 num 은 value 에 해당한다. 따라서 변수 num 에는 차례대로 1, 2, 3, 4, 5 의 값이 담기게 되고, 각각 3을 곱해서 newNums 배열에 넣어 준다.

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

const newNums = nums.map((num, id)=>{
	return (num+id) * 3;
});

console.log(newNums); // [3, 9, 15, 21, 27]

  위의 코드에서 index 부분을 추가한 모습이다. id 변수는 num 변수에 들어간 값의 배열에서의 인덱스를 가리키기 때문에, 차례대로 0, 1, 2, 3, 4 의 값이 담기게 된다.

  마지막으로 array 인데, 이건 map 함수를 호출한 배열을 나타낸다. 잘 쓰이지 않는다고 한다. 사실 잘 모르겠다 ㅜ