JAVASCRIPT

JAVASCRIPT ) 배열 고차 함수

Hweb 2024. 7. 30. 10:15

자바스크립트에서 배열 고차 함수(Higher-Order Functions)란 다른 함수를 인자로 받거나 또는 함수를 반환하는 함수를 의미합니다. 대표적인 배열 고차 함수에는 map, filter, reduce, forEach, some, every 등이 있습니다.

 

1. forEach()

forEach()는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 단, 값을 반환하지 않습니다(즉, 배열을 변경하거나 새 배열을 반환하지 않음).

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

numbers.forEach(function(num) {
  console.log(num); // 각 요소를 콘솔에 출력
});

 

 

  • forEach()는 배열의 각 요소를 반복하며 함수(callback)를 실행하지만, 배열을 변환하지 않고 반환값도 없습니다.
  • forEach는 순수하게 **반복(iteration)**을 위해 사용됩니다.

 

2. map()

map()은 배열의 각 요소를 변환한 새로운 배열을 반환합니다. 기존 배열을 변경하지 않고, 새로운 배열을 만들어 반환합니다.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8]

 

 

 

  • map()은 배열의 각 요소에 대해 변환 작업을 수행하고, 그 결과를 새로운 배열로 반환합니다.
  • 원래 배열인 numbers는 변경되지 않고, 새 배열 doubled가 반환됩니다.

 

3. filter()

filter()는 주어진 조건을 만족하는 요소들만 추출하여 새로운 배열을 반환합니다. 즉, **조건이 참(true)**인 요소들만 모아서 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0; // 짝수만 걸러냄
});

console.log(evenNumbers); // [2, 4]

 

 

 

  • filter()는 배열의 각 요소에 대해 조건 검사를 수행하고, 그 조건을 만족하는 요소들로 새로운 배열을 반환합니다.
  • 원래 배열은 변경되지 않고, 새로운 배열이 만들어집니다.

 

 

4. reduce()

reduce()는 배열을 하나의 값으로 축약하는 데 사용됩니다. **누적값(accumulator)**과 배열의 **각 요소(currentValue)**를 차례로 처리하면서 값을 축약해 나갑니다. 이 함수는 배열의 모든 요소를 합치거나, 특정 로직을 적용해 누적하는 작업에 매우 유용합니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

 

 

  • reduce()는 **초기값(여기선 0)**을 사용하여 배열의 모든 요소를 누적한 값을 반환합니다.
  • 첫 번째 인자는 누적값(accumulator), 두 번째 인자는 **현재 처리 중인 값(currentValue)**입니다.

 

 

5. some()

some()은 배열의 어떤 요소라도 주어진 조건을 만족하면 true를 반환합니다. 즉, 배열에서 하나 이상의 요소가 조건을 만족하는지를 확인하는 함수입니다.

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(function(num) {
  return num % 2 === 0; // 짝수가 하나라도 있으면 true
});

console.log(hasEven); // true (짝수 2, 4가 있으므로)

 

 

  • some()은 배열의 하나라도 조건을 만족하면 true를 반환합니다.
  • 조건을 만족하는 요소가 없으면 false를 반환합니다.

 

6. every()

every()는 배열의 모든 요소가 주어진 조건을 만족하면 true를 반환합니다. 배열의 모든 요소가 조건을 충족해야 합니다.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(function(num) {
  return num % 2 === 0; // 모든 요소가 짝수인지 확인
});

console.log(allEven); // true (모든 요소가 짝수이므로)

 

 

 

  • every()는 배열의 모든 요소가 조건을 만족해야 true를 반환합니다.
  • 하나라도 조건을 만족하지 않으면 false를 반환합니다.

 

7. find()

find()는 배열에서 주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없다면 undefined를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(function(num) {
  return num > 3; // 3보다 큰 첫 번째 요소 찾기
});

console.log(found); // 4 (첫 번째로 3보다 큰 숫자)

 

  • find()는 조건을 만족하는 첫 번째 요소를 반환하며, 요소를 찾으면 그 이후의 요소는 확인하지 않습니다.

 

8. findIndex()

findIndex()는 배열에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없다면 -1을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(function(num) {
  return num > 3; // 3보다 큰 첫 번째 요소의 인덱스 찾기
});

console.log(index); // 3 (4의 인덱스)

 

9. sort()

sort()는 배열의 요소들을 정렬합니다. 기본적으로 문자열 기준으로 정렬하며, 숫자를 정렬할 경우는 비교 함수를 사용해야 합니다.

const numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b; // 오름차순 정렬
});

console.log(numbers); // [1, 2, 3, 4, 5]

 

  • sort()는 배열을 제자리에서 정렬하며, 비교 함수를 통해 정렬 기준을 지정할 수 있습니다.

 

 

 

 

예제

length를 이용해 for문을 돌리면 안된다.

배열의 length를 신용할 수 없기 때문이다.

배열고차함수중 하나인 forEach문을 통해 돌려야 안정적이다.

 

let myA = [100,200,300,400];
myA[10] = 1004;

for(let i=0; i<myA.length; i++){
    document.write(myA[i] + "<br>");
};

myA.forEach((v, i, a) => {
    document.write(v + "<br>");
});

//100
//200
//300
//400
//undefined
//undefined
//undefined
//undefined
//undefined
//undefined
//1004
//100
//200
//300
//400
//1004

 

 

반응형