Array Method for Advanced

Algorithms

1. Array.prototype.forEach(function(elem, index, array))

  • 배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백함수를 실행한다.
  • 콜백함수의 매개변수를 통해 배열 요소의 값(elem), 요소 인덱스(index), 순회할 배열(array)을 전달 받을 수 있다.
  • 반환값은 undefined이다.
  • forEach 메소드는 원본배열을 변경하지 않는다.
  • forEach 메소드는 for 문과는 달리 break 문을 사용할 수 없고, 일반 for 구문에 비해 성능이 좋지는 않다.
  • forEach()는 배열을 순회하며 요소 값을 참조하여 무언가를 하기 위한 함수
1
2
3
4
5
6
7
8
9
10
11
12
let sum = 0;
const arr = [1, 3, 5, 7, 9];

arr.forEach(function (elem, index, array) {
  console.log('[' + index + '] = ' + elem);
  sum += elem;
});

console.log(sum); // 25

// 원본배열이 유지된다.
console.log(arr); // [ 1, 3, 5, 7, 9 ]


2. Array.prototype.map(function(elem, index, array))

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 반환값(결과값)으로 새로운 배열을 생성하여 반환한다.
  • 원본 배열은 변경되지 않는다.
  • 콜백함수의 매개변수를 통해 배열 요소의 값(elem), 요소 인덱스(index), 순회할 배열(array)을 전달 받을 수 있다.
  • map()은 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수이다.
1
2
3
4
5
6
7
8
9
10
11
12
const arr = [1, 4, 9];

// 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행
const result = arr.map(elem => {
  return Math.sqrt(elem);
});

// map 메소드는 새로운 배열을 반환한다
console.log(result);   // [ 1, 2, 3 ]

// map 메소드는 원본 배열은 변경하지 않는다
console.log(arr); // [ 1, 4, 9 ]


3. Array.prototype.filter(function(elem, index, array))

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
  • 이때 원본 배열은 변경되지 않는다.
  • 콜백함수의 매개변수를 통해 배열 요소의 값(elem), 요소 인덱스(index), 순회할 배열(array)을 전달 받을 수 있다.
  • filter()는 배열에서 특정 케이스만 필터링 조건으로 추출하여 새로운 배열을 만들고 싶을 때 사용한다.
1
2
3
4
5
6
7
8
9
10
const arr = [1, 2, 3, 4, 5];
const result = arr.filter(function (elem, index, array) {
  console.log('[' + index + '] = ' + elem);
  return elem % 2; // 홀수만을 필터링한다 (1은 true로 평가된다)
});

console.log(result); // [ 1, 3, 5 ]

// 원본배열은 유지된다.
console.log(arr); // [ 1, 2, 3, 4, 5 ]