JavaScript 배열 메서드와 고차 함수 총정리

고차 함수란?

JavaScript의 고차 함수(Higher-Order Function)는 다른 함수를 인수로 받거나 함수를 반환하는 함수입니다.

배열 메서드 중 고차 함수들은 데이터 처리, 변환, 필터링 등 다양한 작업을 간결하고 명확하게 수행할 수 있도록 도와줍니다.

이러한 메서드는 함수형 프로그래밍 패턴을 따르며, 가독성, 재사용성, 유지보수성을 높이는 데 기여합니다.

메서드(method)란?

메서드(method)는 객체의 속성으로 포함된 함수를 의미합니다. JavaScript에서는 배열도 객체이기 때문에 배열에 포함된 함수들을 배열 메서드라고 부릅니다. 메서드는 객체와 관련된 동작이나 로직을 캡슐화하며, 특정 작업을 수행할 때 사용됩니다.

예를 들어, push(), map(), filter() 같은 배열 메서드들은 배열을 조작하거나 새로운 배열을 반환하는 기능을 수행합니다. 메서드는 다음과 같은 형태로 사용됩니다:

배열 고차 함수 메서드 비교 표

예시

forEach()

forEach()는 배열의 각 요소를 순회하며, 주어진 콜백 함수를 실행합니다. 하지만 반환값은 없고, 단순히 반복 작업에 사용됩니다.

const arr = [1, 2, 3];
arr.forEach((value) => console.log(value));
// 1
// 2
// 3

map()

map()은 배열의 각 요소를 변환하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.

const arr = [1, 2, 3];
const doubled = arr.map((value) => value * 2);
console.log(doubled); // [2, 4, 6]

filter()

filter()는 조건을 만족하는 요소들만 남겨 새로운 배열을 반환합니다.

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

find()

find()는 조건을 만족하는 첫 번째 요소를 반환합니다. 찾는 요소가 없으면 undefined를 반환합니다.

const arr = [1, 2, 3, 4];
const result = arr.find((value) => value > 2);
console.log(result); // 3

push()

push()는 배열의 끝에 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const arr = [1, 2];
arr.push(3);
console.log(arr); // [1, 2, 3]

pop()

pop()은 배열의 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.

const arr = [1, 2, 3];
const removed = arr.pop();
console.log(removed); // 3
console.log(arr); // [1, 2]

sort()

sort()는 배열을 정렬합니다. 기본적으로 문자열로 정렬되기 때문에, 숫자 정렬을 위해서는 콜백 함수를 제공해야 합니다.

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

slice()

slice()는 배열의 일부를 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.

const arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3); // 인덱스 1부터 3 이전까지 추출
console.log(sliced); // [2, 3]

reduce()

reduce()는 배열의 모든 요소를 누적하여 하나의 값으로 줄입니다.

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

concat()

concat()은 두 개 이상의 배열을 연결하여 새로운 배열을 반환합니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

join()

join()은 배열의 모든 요소를 문자열로 연결합니다.

const arr = ["Hello", "World"];
console.log(arr.join(" ")); // "Hello World"