[JavaScript] Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes

Map / Filter / Reduce / Find / FindIndex / IndexOf / Includes

들어가며

• 자바스크립트 ES6의 @Map@, @Filter@, @Reduce@, @Find@, @FindIndex@, @IndexOf@, @Includes@ 함수에 대해 알아보자.
• 이 함수들은 배열을 다양한 방식으로 조작하고 필터링하며, 배열 요소를 가공하여 필요한 결과를 얻을 때 유용하게 사용된다.

 

설명

① Map

• Map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 모아 새로운 배열을 생성한다.
• 기존 배열의 각 요소를 변환하여 새로운 배열을 만들 때 주로 사용된다.
• 예를 들어, 모든 요소를 2배로 만드는 경우와 같이 각 요소를 수정하고 새로운 배열을 생성하는 데 사용된다.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
// doubledNumbers: [2, 4, 6, 8, 10]

 

 

② Filter

• Filter 함수는 주어진 함수의 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환한다.
• 주어진 조건에 맞는 요소만을 걸러내고 필터링할 때 사용된다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers: [2, 4]

 

 

③ Reduce

• Reduce 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환한다.
• 주로 누적값을 구할 때 사용되며, 배열을 하나의 값으로 줄이는 데 활용된다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
// sum: 15

 

 

④ Find

• Find 함수는 주어진 조건을 만족하는 배열의 첫 번째 요소를 반환한다.
• 조건에 맞는 요소가 없으면 undefined를 반환한다.

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find((num) => num > 3);
// found: 4

 

 

⑤ FindIndex

• FindIndex 함수는 주어진 조건을 만족하는 배열 요소의 첫 번째 인덱스를 반환한다.
• 조건에 맞는 요소가 없으면 -1을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const foundIndex = numbers.findIndex((num) => num > 3);
// foundIndex: 3 (4의 인덱스)

 

 

⑥ IndexOf / Includes

IndexOf

• IndexOf 함수는 배열에서 주어진 요소를 찾아 그 인덱스를 반환한다.
• 해당 요소가 배열에 여러 번 등장하더라도 첫 번째로 등장하는 위치의 인덱스를 반환한다.
• 만약 배열에 해당 요소가 없다면 @-1@을 반환한다.

const fruits = ['apple', 'banana', 'orange', 'apple', 'pear'];
const indexOfApple = fruits.indexOf('apple');
// indexOfApple: 0 (첫 번째 'apple'의 인덱스)

const indexOfCherry = fruits.indexOf('cherry');
// indexOfCherry: -1 ('cherry'는 배열에 존재하지 않음)

 

Includes

• ES6에서는 @indexOf@와 유사하지만 요소가 없을 때 @-1@ 대신에 @true@/@false@를 반환하는 @includes@ 함수가 추가되었다.
• 배열에 특정 요소가 있는지 여부를 빠르게 확인할 수 있어서 조건문에서 사용하거나 요소의 존재 여부를 판단할 때 유용하다.
• indexOf와 달리 요소의 인덱스를 반환하는 것이 아니라 단순히 요소의 존재 여부를 판단한다.

const fruits = ['apple', 'banana', 'orange', 'pear'];

const hasApple = fruits.includes('apple');
// hasApple: true (배열에 'apple'이 존재함)

const hasCherry = fruits.includes('cherry');
// hasCherry: false (배열에 'cherry'가 존재하지 않음)

 

 

Cheat Sheet