Javascript 배열(Array) 마스터하기: forEach, map, filter, reduce

배열 내장 함수와 배열을 활용한 데이터 처리, 다차원 배열, 그리고 배열 메서드 체이닝에 대해 알아보겠습니다. 이러한 주제를 통해 배열을 더욱 효율적으로 다루고 데이터를 가공할 수 있게 됩니다.

배열 내장 함수 이해하기

forEach

forEach는 배열의 각 요소에 대해 지정된 함수를 순서대로 한 번씩 실행합니다.

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

map

map은 주어진 함수를 배열의 모든 요소에 대해 실행하고, 그 결과를 모아 새로운 배열을 반환합니다.

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

filter

filter는 주어진 함수의 조건을 만족하는 요소만을 모아 새로운 배열로 반환합니다.

const values = [1, 2, 3, 4, 5];
const evenValues = values.filter(value => value % 2 === 0);
console.log(evenValues); // [2, 4]

reduce 메서드

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

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, value) => total + value, 0);
console.log(sum); // 15

배열을 활용한 데이터 처리와 변환

자바스크립트 배열 메서드는 복잡한 데이터 처리와 변환 작업을 간단하고 직관적으로 만들어줍니다. 이러한 메서드들은 데이터의 효율적인 관리를 가능케 해주며, 개발 시간을 단축시켜줍니다.

const products = [
  { name: '사과', price: 1000 },
  { name: '바나나', price: 1500 },
  { name: '딸기', price: 2000 },
];

// 가격이 1500 이상인 상품만 필터링
const expensiveProducts = products.filter(function(product) {
  return product.price >= 1500;
});

// 상품 이름만 추출
const productNames = products.map(function(product) {
  return product.name;
});

다차원 배열과 중첩 배열 다루기

다차원 배열은 배열 내부에 또 다른 배열을 포함하는 구조를 말합니다. 이를 활용해 복잡한 데이터 구조와 알고리즘을 손쉽게 표현하고 처리할 수 있습니다.

const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(grid[0][2]); // Outputs: 3

배열 메서드 체이닝으로 생산성 높이기

메서드 체이닝은 여러 배열 메서드를 연결하여 사용하는 기법입니다. 이를 통해 코드가 간결해지고, 가독성과 생산성이 높아집니다.

const result = [1, 2, 3, 4, 5]
  .filter(x => x % 2 === 0)
  .map(x => x * 10)
  .reduce((sum, x) => sum + x, 0);
console.log(result); // Outputs: 60

결론

forEach, map, filter, reduce와 같은 자바스크립트 배열 내장 메서드들은 코드의 효율성과 가독성을 높이는 데 도움이 됩니다. 이러한 메서드들을 익히고 활용함으로써 복잡한 데이터 조작과 처리를 간단하게 해결할 수 있습니다. 자바스크립트를 마스터하고 싶다면 이러한 기법들을 반드시 숙지해야 합니다.