주니어 개발자를 위한 JavaScript 배열 메소드 활용 📊

JavaScript는 웹 개발의 핵심 언어 중 하나이며, 배열을 다루는 다양한 메소드를 제공합니다. 이 글에서는 주니어 개발자가 알아야 할 몇 가지 기본적이면서도 유용한 배열 메소드를 살펴보겠습니다. 복잡한 용어는 피하고, 실제 예제를 통해 이해를 돕겠습니다.

forEach() - 배열의 각 요소에 대해 함수 실행

forEach() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 예를 들어, 배열의 모든 요소를 콘솔에 출력하고 싶다면 다음과 같이 할 수 있습니다.

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => {
  console.log(fruit);
});

map() - 배열의 각 요소를 변환

map() 메소드는 모든 요소에 함수를 적용하고, 그 결과로 새 배열을 생성합니다. 예를 들어, 모든 숫자를 제곱하고 싶다면 다음과 같이 사용할 수 있습니다.

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

filter() - 조건에 맞는 요소만 추출

filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소로 새 배열을 만듭니다. 예를 들어, 짝수만 추출하고 싶다면 다음과 같이 할 수 있습니다.

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce() - 배열을 하나의 값으로 줄임

reduce() 메소드는 배열의 각 요소에 대해 주어진 "리듀서" 함수를 실행하고, 하나의 결과값을 반환합니다. 예를 들어, 모든 숫자의 합을 계산하고 싶다면 다음과 같이 사용할 수 있습니다.

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

find() - 조건에 맞는 첫 번째 요소를 찾음

find() 메소드는 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만약 없다면 undefined를 반환합니다. 예를 들어, 10보다 큰 첫 번째 숫자를 찾고 싶다면 다음과 같이 할 수 있습니다.

const numbers = [3, 5, 7, 9, 11, 13];
const found = numbers.find(num => num > 10);
console.log(found); // 11

이 글을 통해 JavaScript의 배열을 다루는 몇 가지 기본적인 메소드를 알아보았습니다. 이러한 메소드들을 활용하면 배열 데이터를 효율적으로 처리할 수 있습니다. 실제 프로젝트에서 이 메소드들을 적극적으로 사용해 보세요!