[JavaScript] 배열 메소드 forEach 와 map

forEach 메소드

배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드로 forEach 함수는 첫번째 아규먼트로 콜백함수를 전달 받는데, 콜백함수의 파라미터에는 각각 배열의 요소, Index, 메소드를 호출한 배열이 전달된다.

 

그동안 반복적인 작업을 할 때, for of 문을 사용했었으나 

const members = ['철수', '유리', '훈이', '짱구', '맹구'];

for (let member of members) {
  console.log(`${member}님이 입장하셨습니다.`);
}

const members = ['철수', '유리', '훈이', '짱구', '맹구'];

members.forEach(function (member) {
  console.log(`${member}님이 입장하셨습니다.`);
})

이처럼 forEach 문을 사용하면 똑같은 결과가 나타난다.

 

members.forEach((member) => {
  console.log(`${member}님이 입장하셨습니다.`);
})

forEach 문은 화살표함수 형태로 작성할 수 있다.

 

members.forEach((member, i) => {
  console.log(`${i} ${member}님이 입장하셨습니다.`);
})

// 0 철수님이 입장하셨습니다.
// 1 유리님이 입장하셨습니다.
// 2 훈이님이 입장하셨습니다.
// 3 짱구님이 입장하셨습니다.
// 4 맹구님이 입장하셨습니다.

또한 파라미터로 배열의요소(member), 인덱스(i), 배열 그 자체를 전달받을수 있다.

 

const numbers = [1, 2, 3];

numbers.forEach((element, index, array) => {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});

 

---

map 메소드

forEach 와 비슷하게 요소를 하나씩 살펴보며 반복 작업을 하는 메소드로, 첫번째 아규먼트로 전달하는 콜백함수가 매번 리턴하는 값을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.

const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

console.log(twiceNumbers); // (3) [2, 4, 6]