[JS] 순수 함수를 활용한 데이터 변환 메서드

[React] 순수 함수

 

JavaScript에서 배열을 다룰 때 자주 사용되는 다양한 배열 메서드들이 있다. 이 매서드들은 배열의 각 요소에 대해 반복 작업을 수행하거나, 배열의 일부를 필터링하거나, 배열을 변형시키는 등의 작업을 할 때 매우 유용하다.

 

reduce

배열의 요소를 순회하면서 콜백 함수를 실행하고, 그 결과를 누적하여 단일 값을 반환한다. 이 매서드는 배열을 하나의 값으로 누적하는데 유용하다.

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

 

filter

주어진 조건을 만족하는 배열의 요소만을 포함하는 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

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

 

map

배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 생성한다. 원본 배열은 변경되지 않으며, 요소의 변환 작업을 수행할 때 주로 사용된다.

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

 

forEach

배열의 각 요소에 대해 주어진 함수를 한번씩 실행한다. 이 메서드는 배열을 순환하며, 반환값이 없다.

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

numbers.forEach((num) => {
  console.log(num * 2); // 2, 4, 6, 8
});

 

some

배열의 요소 중 하나라도 주어진 조건을 만족하는지 검사한다. 조건을 만족하는 요소가 있으면 ture, 없으면 false를 반환한다.

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

const hasEvenNumber = numbers.some((num) => num % 2 === 0);
console.log(hasEvenNumber); // true (2, 4가 짝수이므로)

 

every

배열의 모든 요소가 주어진 조건을 만족하는지 검사한다. 모든 요소가 조건을 만족하면 true, 만족하지 않으면 false를 반환한다.

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

const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // true (모든 숫자가 양수이므로)

 

find

배열에서 주어진 조건을 만족하는 첫번째 요소를 반환한다. 조건을 만족하는 요소가 없으면 'undefined'를 반환한다.

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

const firstEvenNumber = numbers.find((num) => num % 2 === 0);
console.log(firstEvenNumber); // 2 (첫 번째 짝수)

 

findIndex

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

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

const firstEvenIndex = numbers.findIndex((num) => num % 2 === 0);
console.log(firstEvenIndex); // 1 (2의 인덱스)

 

sort

배열의 요소를 정렬한다. 기본적으로는 요소들을 문자열로 변환하여 유니코드 순서로 정렬하지만, 커스텀 정렬 함수를 제공하여 숫자, 날짜등의 정렬을 수행할 수 도 있다.

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

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

 

slice

배열의 일부를 선택하여 새로운 배열을 반환한다. 원본 배열은 변경되자 않는다. slice(start, end) 형태로 사용된다.

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

const slicedNumbers = numbers.slice(1, 3);
console.log(slicedNumbers); // [2, 3]

 

splice

배열에서 요소를 추가하거나 제거할 때 사용한다. 원본 배열을 변경한다. 'splice(start, deleteCount, item1, item2,...)' 형태로 사용된다.

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

const removedNumbers = numbers.splice(1, 2, 5, 6);
console.log(numbers); // [1, 5, 6, 4] (2, 3이 제거되고 5, 6이 추가됨)
console.log(removedNumbers); // [2, 3] (제거된 요소들)