Javascript Array method

자바스크립트를 사용하다보면 자연스레 배열 함수를 쓰게 된다. 특히 React를 쓴다면 더더욱. React는 자체 문법이 있는 게 아니라 자바스크립트를 기반으로 하기 때문에, 반복 작업을 해주는 배열 함수를 많이 쓰게 된다.

*pug, svelete같은 템플릿 언어를 사용할 때는 #each 같은 템플릿에서 지정한 문법을 써야한다.

배열 함수

아래 배열 함수들은 모두 아래와 같은 구조로 되어 있다.

.배열함수(콜백)

myArray.map((element) => element * 2 );
myArray.forEach((element) => element * 2 );
myArray.filter((element) => element === 10 );

forEach

각 요소에 대해 콜백 함수를 실행

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

fruits.forEach((fruit) => {
  console.log(fruit);
});
// apple
// banana
// orange

인덱스를 쓸 수도 있다

const colors = ['red', 'green', 'blue'];

colors.forEach((color, index) => {
  console.log(`Color at index ${index}: ${color}`);
});
// Color at index 0: red
// Color at index 1: green
// Color at index 2: blue

map

배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과를 새로운 배열로 반환

forEach와 다른점은 새로운 배열을 반환한다는 점이다.

const numbers = [1, 2, 3, 4];

const squaredNumbers = numbers.map((num) => num ** 2);
// squaredNumbers: [1, 4, 9, 16]

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

const fruitDetails = fruits.map((fruit, index) => {
  return {
    name: fruit,
    index: index,
  };
});
// fruitDetails: [{ name: 'apple', index: 0 }, { name: 'banana', index: 1 }, { name: 'orange', index: 2 }]

filter

주어진 함수의 반환값이 **true**인 배열 요소만 모아 새로운 배열을 만들어 반환

const numbers = [1, 2, 3, 4, 5, 6];

// 짝수만 필터링하여 새로운 배열 생성
const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers: [2, 4, 6]

every

모든 요소가 조건을 만족하는지 확인하고 true 혹은 false 반환

const numbers = [2, 4, 6, 8, 10];

// 모든 숫자가 짝수인지 확인
const allEven = numbers.every((num) => num % 2 === 0);
// allEven: true

some

배열 중 하나 이상의 요소가 조건을 만족하면 **true**를 반환

const numbers = [2, 4, 6, 8, 10];

// 어떤 숫자든지 홀수인지 확인
const anyOdd = numbers.some((num) => num % 2 !== 0);
// anyOdd: false

reduce

배열의 모든 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 값으로 축소(reduce)하여 반환

reduce() 메소드를 사용하여 배열 **numbers**의 모든 숫자를 합산하는 예제

const numbers = [1, 2, 3, 4, 5];

// 배열의 모든 숫자를 합산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); //0: 초기값
// sum: 15

reduce() 메소드를 사용하여 배열 values의 최대값을 찾는 예제

const values = [8, 3, 11, 6, 2];

// 배열의 최대값 찾기
const max = values.reduce((maxValue, currentValue) => Math.max(maxValue, currentValue), values[0]); //values[0]: 초기값
// max: 11