배열 순회 메소드

method(callbackFn, thisArg)

• 순회 메소드는 콜백함수를 인수로 전달받는다.
• 배열의 각 요소에 대해 제공된 콜백함수를 오름차순 인덱스 순서로 한 번씩 순회한다.

forEach()

• 각 배열 요소에 대해 콜백 함수를 한 번씩 실행한다.
• map()과의 차이점 : forEach()는 항상 undefined를 반환하므로 체이닝할 수 없다.

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

numbers.forEach((number) => {
    console.log(number * 10); // 10 20 30 40 50
});

map()

• 배열의 각각의 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환한다.
• 원본 배열은 바뀌지 않는다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.map((number) => {
    return number * 10;
});

console.log(result); // [10, 20, 30, 40, 50]
console.log(numbers); // [1, 2, 3, 4, 5]

filter()

• 배열의 각각의 요소에 대해 콜백을 호출한 결과 true를 반환하는 모든 요소를 모아 새로운 배열 반환한다.
• 원본 배열은 바뀌지 않는다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.filter((number) => {
    return number < 3;
});

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

reduce()

• 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
• 반환된 결과값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.
• 리듀서 함수는 네 개의 인자를 가진다.
  1. 누산기(acc)
  2. 현재 값(cur)
  3. 현재 인덱스(idx)
  4. 원본 배열(src)
  

아래의 예시는 리듀서 함수로 누산기(acc)와 현재 값(cur) 두 개의 인자를 갖는다.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, cur) => {
    return acc + cur;
});

console.log(sum); // 15

인덱스 오름차순 순으로 순회하면서 리듀서 함수 실행한다.
[index 0] acc = 0, cur = 1
[index 1] acc = 1, cur = 2
[index 2] acc = 3, cur = 3
[index 3] acc = 6, cur = 4
[index 4] acc = 10, cur = 5
return acc = 15

이번에는 리듀서 함수로 현재 인덱스 (idx) 값까지 3개의 인자를 갖는 경우이다.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, cur, idx) => {
    return acc + cur + idx;
});

console.log(sum); // 25

[index 0] acc = 0, cur = 1, idx = 0
[index 1] acc = 1, cur = 2, idx = 1
[index 2] acc = 4, cur = 3, idx = 2
[index 3] acc = 9, cur = 4, idx = 3
[index 4] acc = 16, cur = 5, idx = 4
return acc = 25

every()

• 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트한다.
• 이 메서드는 불리언 값을 반환한다.
• 하나라도 false를 리턴할 경우 false가 된다.
• some()과의 차이점 : every()의 경우 하나라도 false를 리턴할 경우 false를 반환, some()의 경우 각 요소들 중 하나라도 true를 리턴할 경우 true를 반환한다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.every((number) => {
    return number < 3;
});

console.log(result); // false

some()

• 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트한다.
• 이 메서드는 불리언 값을 반환한다.
• 각 요소들 중 하나라도 true를 리턴하면 값은 true가 된다

let numbers = [1, 2, 3, 4, 5];
let result = numbers.some((number) => {
    return number < 3;
});

console.log(result); // true

find()

• 배열에서 콜백 함수를 만족하는 첫 번째 요소를 반환한다.
• 만족하는 값이 없으면 undefined가 반환된다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.find((number) => {
    return number > 3;
});

console.log(result); // 4

result = numbers.find((number) => {
    return number > 5;
});

console.log(result); // undefined

findIndex()

• 콜백 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.
• 만족하는 요소가 없으면 -1을 반환한다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.findIndex((number) => {
    return number > 3;
});

console.log(result); // 3

result = numbers.findIndex((number) => {
    return number > 5;
});

console.log(result); // -1

그 외 메소드

includes()

• 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 true 또는 false를 반환한다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.includes(1);
console.log(result); // true

result = numbers.includes(6);
console.log(result); // false

indexOf()

• 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환한다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.indexOf(3);
console.log(result); // 2

result = numbers.indexOf(6);
console.log(result); // -1

slice()

• 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.
• 원본 배열은 바뀌지 않는다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.slice(0, 3);
console.log(result); // [1, 2, 3]
console.log(numbers); // [1, 2, 3, 4, 5]

result = numbers.slice(1, 2);
console.log(result); // [2]
console.log(numbers); // [1, 2, 3, 4, 5]

splice()

• 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
• 제거한 요소를 담은 배열을 반환한다.
• 그리고 원본 배열은 변경된 배열을 반환한다.
• 매개변수로 start, deleteCount(optional), item(optional)을 갖는다.
  1. start : 배열의 변경을 시작할 인덱스
  2. deleteCount : 배열에서 제거할 요소의 수
  3. item : 배열에 추가할 요소

let numbers = [1, 2, 3, 4, 5];
let result = numbers.splice(0, 3);
console.log(result); // [1, 2, 3]
console.log(numbers); // [4, 5]

result = numbers.splice(1, 2, "추가", "또 추가");
console.log(result); // [2, 3]
console.log(numbers); // [1, '추가', '또 추가', 4, 5]

result = numbers.splice(2, 1, '하나만 추가');
console.log(result); // [3]
console.log(numbers); // [1, 2, '하나만 추가', 4, 5]

result = numbers.splice(0, 5);
console.log(result); // [1, 2, 3, 4, 5]
console.log(numbers); // []

result = numbers.splice();
console.log(result); // []
console.log(numbers); // [1, 2, 3, 4, 5]

concat()

• 두 개 이상의 배열을 병합하는 데 사용된다.
• 원본 배열은 바뀌지 않는다.

let number1 = [1, 2, 3];
let number2 = [5, 10, 20];
let hello = 'world';
let result = number1.concat(number2, hello);;

console.log(result); // [1, 2, 3, 5, 10, 20, 'world']

fill()

• 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경한다.
• 그리고 변경된 배열을 반환한다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.fill('🍎');

console.log(result); // ['🍎', '🍎', '🍎', '🍎', '🍎']
console.log(numbers); // ['🍎', '🍎', '🍎', '🍎', '🍎']

🔎 출처 및 참고자료 링크(mdn)