[Javascript] 배열 메소드 - forEach, map (순회 목적)

 

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

// 1부터 5까지 출력
for(let idx=0; i<arr.length; i++) {
	console.log(arr[idx]);
}

전통적인 프로그래밍 언어에서 반복할 때, 또는 순회할 때 사용하는 문법으로 for문이 있습니다.

일반적으로 위와 같이 사용합니다.

 

 

 

그런데, 위와 같은 코드를 배열 메소드를 이용해서도 구현할 수 있습니다.

대표적으로 forEach와 map을 많이 사용하는데요.

 

 

 

forEach가 순수하게 순회하는 목적이라면, map은 순회하면서 값을 가공해서 새로운 배열을 반환합니다.

Vue나 React 같은 곳에서 배열을 순회하면서, 컴포넌트들을 렌더링할 때도 많이 사용됩니다.

 

 

 

 

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

// 1부터 5까지 출력
arr.forEach((value) => {
	console.log(value);
});

forEach 메소드는 콜백 함수를 받는데요.

첫번째 파라미터로부터 배열의 값을 차례대로 받아올 수 있습니다.

 

 

 

 

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

// 배열의 값과 인덱스를 차례대로 출력
arr.forEach((value, index) => {
	console.log(value); // 배열의 값
	console.log(index); // 배열의 인덱스
});

콜백 함수는 여러 개의 파라미터를 받는데요.

두번째 파라미터로부터는 배열의 인덱스 값을 받아올 수 있습니다.

 

 

 

 

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

// 배열의 값과 인덱스를 차례대로 출력
arr.map((value, index) => {
	console.log(value);
	console.log(index);
});

map 메소드도 forEach와 마찬가지로 콜백 함수를 받습니다.

자바스크립트에서 제공하는 배열 메소드는 콜백 함수를 받는데, 파라미터도 유사하게 받을 수 있습니다.

 

 

map 메소드는 새로운 배열을 반환한다고 했는데,

위의 코드처럼 순회하면서 값을 출력하게 구현할 수도 있습니다.

 

 

 

 

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

// arr 배열과 같은 값을 지닌 새로운 배열을 반환
const newArr = arr.map((value) => value));

기존 배열의 값을 그대로 반환하면, 값만 같은 새로운 배열을 만들 수 있고요.

 

 

 

 

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

// 2배를 곱한 값들을 배열로 반환
const newArr = arr.map((value) => value * 2);

console.log(newArr); // [2, 4, 6, 8, 10]

이런 식으로 값이 변형된 새로운 배열을 만들 수 있습니다.

프론트엔드 업무를 진행할 때, map은 데이터들을 불러와서 적절한 UI 위치에 데이터를 넣어줄 때 많이 사용됩니다.