JavaScript 배열 메서드 10가지: 실용 예제와 함께 배우기

자바스크립트에서 배열은 아주 중요한 데이터 구조입니다. 배열을 다루는 다양한 메서드들이 있으며, 이를 효율적으로 활용하는 방법을 아는 것은 매우 중요합니다. 이 글에서는 자바스크립트 배열 메서드 10가지를 실용 예제와 함께 알아보겠습니다.

1. forEach

forEach 메서드는 배열의 각 요소에 대해 한 번씩 제공된 함수를 실행합니다.

javascript
const numbers = [1, 2, 3, 4];
numbers.forEach(number => {
  console.log(number * 2);
});

이 메서드는 주로 배열의 각 요소를 순회하며 출력하거나, 부수적인 작업을 수행할 때 유용합니다.

2. map

map 메서드는 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8]

map은 특히 배열의 각 요소를 변환하고 그 결과를 새로운 배열로 만들어야 할 때 유용합니다.

3. filter

filter 메서드는 제공된 함수의 테스트를 통과한 모든 요소를 모아 새로운 배열로 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

이 메서드는 조건에 맞는 요소들만을 추출하고자 할 때 사용합니다.

4. reduce

reduce 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

reduce는 배열의 모든 요소를 하나의 값으로 축약해야 하는 경우에 강력한 도구가 됩니다.

5. find

find 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const found = numbers.find(number => number > 2);
console.log(found); // 3

이 메서드는 조건을 만족하는 첫 번째 요소만 찾고자 할 때 사용됩니다.

6. findIndex

findIndex 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const index = numbers.findIndex(number => number > 2);
console.log(index); // 2

조건을 만족하는 요소의 위치를 찾을 때 유용합니다.

7. every

every 메서드는 배열의 모든 요소가 주어진 판별 함수를 만족하는지 테스트합니다. 모든 요소가 만족하면 true를, 그렇지 않으면 false를 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // false

배열의 모든 요소가 특정 조건을 만족하는지 확인할 때 사용됩니다.

8. some

some 메서드는 배열의 일부 요소가 주어진 판별 함수를 만족하는지 테스트합니다. 만족하는 요소가 하나라도 있으면 true를, 그렇지 않으면 false를 반환합니다.

javascript
const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(number => number % 2 === 0);
console.log(hasEven); // true

배열 요소 중 하나라도 조건을 만족하면 되는 경우에 유용합니다.

9. includes

includes 메서드는 배열이 특정 요소를 포함하고 있는지 확인합니다. 포함하고 있으면 true를, 그렇지 않으면 false를 반환합니다.

javascript
const fruits = ['apple', 'banana', 'mango'];
const hasApple = fruits.includes('apple');
console.log(hasApple); // true

특정 값이 배열에 존재하는지 확인할 때 사용됩니다.

10. sort

sort 메서드는 배열의 요소를 정렬합니다. 기본적으로 요소를 문자열로 취급하여 사전식으로 정렬합니다.

javascript
const fruits = ['apple', 'banana', 'mango'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'mango']

숫자나 복잡한 조건의 정렬을 위해서는 비교 함수를 제공할 수 있습니다.

javascript
const numbers = [3, 1, 4, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4]

sort는 요소를 정렬해야 할 때 사용됩니다.

이상으로 자바스크립트 배열 메서드 10가지를 실용 예제와 함께 알아보았습니다. 이 메서드들을 잘 이해하고 활용하면 자바스크립트로 더욱 효율적이고 강력한 코드를 작성할 수 있습니다.