[모던자바스크립트] 배열 내장함수

1. forEach

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

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

forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 파라미터 hero는 각 원소를 가리키게 된다.
이렇게 함수형태의 파라미터를 전달하는 것을 콜백함수라고 부른다. 함수를 등록해주면, forEach가 실행해 주는 것이다.

2. map

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

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

const square = n => n * n;
const squared = array.map(square); // const squared = array.map(n => n * n);도 가능
console.log(squared);

map 함수의 파라미터에 변화를 주는 함수를 전달해준다. 여기서는 square이다. square는 파라미터 n을 받아와서 이를 제곱해준다. 즉 array.map 함수의 파라미터에 square를 사용함으로써, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성하였다.

3. indexOf

indexOf는 원하는 항목이 몇번째 원소인지 찾아주는 함수이다. indexOf는 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일 때 사용할 수 있다.

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);  // 2

4. findIndex

findIndex는 배열 안에 있는 값이 객체이거나, 배열일 때 찾고자 하는 항목이 몇번째인지 알아낼 때 사용한다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index);  // 2

5. filter

filter함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다. filter함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 된다. 위의 todos 배열에서 done 값이 false인 항목들만 따로 추출한 배열을 만들려면 다음과 같이 하면 된다.

const taskNotDone = todos.filter(todo => todo.done === false);
console.log(taskNotDone);

결과는 다음과 같다.

[
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
];

6. splice

splice는 배열에서 특정 항목을 제거할 때 사용한다. splice의 첫 번째 파라미터는 몇 번째 인덱스부터 지울지를 의미하고 두 번째 파라미터는 그 인덱스부터 몇 개 지울지를 의미한다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);  // [10, 20, 40]

7. slice

slice에는 두 개의 파라미터를 넣게 되는데 첫 번째 파라미터는 어디서부터 자를지, 두 번째 파라미터는 어디까지 자를지를 의미한다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]