[JS]배열 내장함수 forEach, map

forEach

for문을 대체 할 수 있는 내장함수.

 

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

 

위와 같은 텍스트 배열이 있다고 가정할 때,

배열 안에 있는 모든 원소들을 출력해야한다면

for 사용시

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);
}

 

forEach 사용 시

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});

forEach의 파라미터는 각 원소(hero)에 대하여 => 처리하고싶은 코드를 함수로 넣어줌.

 

map

map은 배열 안의 각 원소를 변환 할 때 사용되며, 이 과정에서 새로운 배열이 만들어짐.

예를 들어 아래와 같은 배열이 있다고 가정하자.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

배열안의 모든 숫자를 제곱하여 새로운 배열은 만들려면

기존에는 아래와 같이 구현할 수 있음.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];
for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]);
}

console.log(squared);

forEach를 쓰면 아래와 같이 구현할 수 있음

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];

array.forEach(n => {
  squared.push(n * n);
});

console.log(squared);

map을 사용하면 아래와 같이 짧은 코드로 구현 가능.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = n => n * n;
const squared = array.map(square);
console.log(squared);

map 함수의 파라미터로 변화를 주는 함수를 전달해주는데, 이를 변화함수라고 부르도록 하자.

현재 변화함수 square는 파라미터 n 을 받아와서 이를 제곱해 줌.

array.map 함수를 사용 하 ㄹ때, square 를 변화함수로 사용함으로서, 내부의 모든값에 대하여 제곱을 해서 새로운 배열을 생성하였음.

변화함수는 이름을 붙이지 않고 선언할 수 있음.

Example

const squared = array.map(n => n * n);
console.log(squared);

 

 

참고 https://learnjs.vlpt.us/