[Javascript] Array (2)

SungWoo·2024년 10월 31일

JavaScript

자바스크립트 공부

목록 보기

19/42

고차 함수, 함수형 프로그래밍

고차 함수(High-Order Function, HOF)

함수를 인수로 전달받거나 함수를 반환하는 함수

자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다.
고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

함수형 프로그래밍(Functional Programming)

순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임

조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있기 때문이다.
함수형 프로그래밍은 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다.

자바스크립트 배열 고차 함수

sort()

배열의 요소를 정렬한다.
원본 배열을 직접 변경하며 변경된 배열을 반환한다.
기본적으로 각 요소를 문자열로 변환하여 오름차순으로 요소를 정렬한다.
sort메서드의 기본 정렬 순서는 유니코드 포인트의 순서를 따른다.
숫자 요소를 정렬할 때는 정렬 순서를 정의하는 비교함수를 인수로 전달해야 한다.
비교 함수의 반환값이 0보다 작으면(음수) 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면(양수) 두 번째 인수를 우선하여 정렬한다.

const fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // 출력: ["apple", "banana", "cherry"]

// 숫자 정렬
const numbers = [10, 5, 20, 15];
numbers.sort((a, b) => a - b);
console.log(numbers); // 출력: [5, 10, 15, 20]

// 객체 정렬
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 30 }
];
users.sort((a, b) => a.age - b.age);
console.log(users); 
// 출력: [{ name: "Bob", age: 20 }, { name: "Alice", age: 25 }, { name: "Charlie", age: 30 }]

forEach((v, i, arr) => {})

배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행한다.
forEach 메서드의 반환값은 언제나 undefined이다.
for문과 달리 break, continue 문을 사용할 수 없다. (순회를 중단할 수 없다.)

const numbers = [1, 2, 3, 4];
numbers.forEach((num) => console.log(num * 2));
// 출력: 2, 4, 6, 8

map((v, i, arr) => {})

배열의 각 요소에 대해 콜백 함수를 호출하여 반환된 결과를 모아 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 출력: [2, 4, 6, 8]

filter((v, i, arr) => {})

콜백 함수의 반환 값이 true인 요소만 모아 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.

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

reduce((accumulator, currentValue, index, array) => {}, initialValue)

배열의 각 요소에 대해 콜백 함수를 호출하여 누적된 값을 반환한다.
콜백 함수는 누적 값(accumulator)과 현재 요소를 인수로 받아 계산을 진행한다.
초기값을 설정할 수 있으며 설정하지 않으면 배열의 첫 번째 요소가 초기값이 된다.
reduce 메서드는 하나의 결과값을 반환한다.
원본 배열은 변경되지 않는다.

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

some()

배열의 요소 중 하나라도 콜백 함수의 조건을 만족하면 true, 모두 거짓이면 false를 반환한다.

const numbers = [1, 3, 5, 7];
const hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); // 출력: false

every()

배열의 모든 요소가 콜백 함수의 조건을 만족해야만 true를 반환, 단 한번이라도 거짓이면 false를 반환한다.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // 출력: true

find()

배열의 요소 중 콜백 함수의 조건을 만족하는 첫 번째 요소를 반환한다.
조건에 맞는 요소가 여러 개여도 첫 번째 요소만 반환한다.

const numbers = [1, 2, 3, 4];
const firstEven = numbers.find((num) => num % 2 === 0);
console.log(firstEven); // 출력: 2

findIndex()

배열의 요소 중 콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.
조건을 만족하는 요소가 없다면 -1을 반환한다.

const numbers = [1, 3, 5, 7];
const index = numbers.findIndex((num) => num > 4);
console.log(index); // 출력: 2

flatMap()

각 요소에 대해 콜백함수를 적용한 뒤, 결과를 평탄화하여 하나의 배열로 반환한다.
기본적으로 한 단계의 평탄화만 수행하며, 이보다 깊은 중첩이 있을 경우 flat 메서드와 함께 사용할 수 있다.

const arr = [1, 2, 3];
const result = arr.flatMap((num) => [num, num * 2]);
console.log(result); // 출력: [1, 2, 2, 4, 3, 6]

// 중첩 배열에서 값 추출
const sentences = ["hello world", "how are you"];
const words = sentences.flatMap((sentence) => sentence.split(" "));
console.log(words); // 출력: ["hello", "world", "how", "are", "you"]