[JavaScript] 배열의 기초 2 - 배열의 내장함수들과 내장 고차 함수

오늘은 배열을 다루면서 각종 내장 함수들을 공부했다.

 

내장 함수들을 리턴하는 고차 함수를 공부했는데 고차 함수란 함수를 인자로 받거나 함수를 리턴하는 함수들을 뜻한다. 

 

그런데 자바스크립트에서는 내장 고차함수들이 있었고 그 쓰임새가 다양하였다.

 

잘 알아두면 여러가지로 사용이 가능할 것 같아서 정리해보았다. 

 

1. Array.prototype.filter()

Array의 내장 함수인 filter를 이용하면 filter의 인자 값으로 들어오는 함수를 적용하여 true, false를 반환하는데 (적어도 filter는 true, false를 반환하길 기대한다고 한다. ) true로 반환된 요소들만 새로운 배열로 반환해준다. 

 

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

const result = nums.filter(num => num % 2 === 1); // lamda식으로 작성

/* 3번째줄과 같은 뜻
const result = nums.filter(function(num){
  return num % 2 === 1;
});
*/
console.log(result); // [1, 3, 5, 7]

filter안에는 내가 걸러내고 싶은 기능을 가진 함수를 넣어주면 된다.

 

 

2. Array.prototype.map()

map()은 filter()와 유사하지만 살짝 다르다. (사용법도 비슷하다.)

 

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2); // lamda식으로 작성 

/*
const map1 = array1.map(function(x){
  return x * 2;
});
*/

console.log(map1); // [2, 8, 18, 32]

// 조건에 맞는 요소를 그대로 반환하는 filter와는 다르게 
// 이런식으로 객체 안에서 원하는 값만 뽑아낼 수 있다. 
function getOlderThan14(arr){
let answer = [];
  arr.map(function(el){
    if(el.age >= 14){
      answer.push(el.name);
    }
  });
  return answer;
}

console.log( getOlderThan14([
  { name: 'leo', age: 14 },
  { name: 'liz', age: 87 },
  { name: 'child', age: 5 },
  { name: 'parent', age: 43 },
])); // --> ['leo', 'liz', 'parent']

 

3. Array.prototype.forEach()

 

forEach() 역시 map()과 filter()와 사용법이 비슷하지만 살짝 다른점이 있다.

forEach()도 배열의 요소마다 한 번씩 forEach()의 인자로 들어온 함수를 적용시켜 반환해준다. 

 

const array1 = [1, 2, 3];
const array2 = [];
array1.forEach(element => array2.push(element * 2)); // lamda식으로 작성

/* 위와 같은 뜻
array1.forEach(function(element){
  array2.push(element * 2);
});
*/
console.log(array2); // [2, 4, 6]

/* 이런식으로 return 값을 바로 새로운 배열에 대입할 수는 없다.
const array2 = array1.forEach(function(element){
  return element * 2;
});
*/

/* 이 식은 가능하다. 배열을 선언시켜준 뒤, return 값으로 배열에 넣어주는 것은 된다. */
const array2 = [];
 array1.forEach(function(element){
  return array2.push(element * 2);
});


// forEach() 는 앞서 본 map()과 filter()와 사용법은 유사하지만 새로운 배열을 반환해주지는 못하나보다.

 

4. Array.prototype.reduce()

 

reduce() 함수는 내장 고차함수중 가장 신기했다. 

reduce()에는 첫번째 인자 값으로 함수를 넣어주어야 하는데 이 함수의 첫 번째 인자 값으로는 누적되는 값을 담을 변수가 들어가고, 두 번째 인자 값으로는 현재 값이 들어간다.

 

그리고 선택이지만 reduce()함수의 두 번째 인자 값은 초깃값이 들어간다.

 

여기서 주의 할 점이 있는데 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용하는데 만약 Array가 빈 배열이고 초기값이 없다면 오류가 난다.

 

(빈 배열에서 사용하게 될 때는 초기값을 꼭 넣어주어야 한다. ex : 배열 안에 배열을 넣은 구조에서 일부 요소가 빈 배열을 가지고 있으면 여기서 에러가 날 수 있다.. 이거 때문에 한참 고생했다.. )

 

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue; // 누적값, 현재값

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); -> 10

//  10 + 1 + 2 + 3 + 4
console.log(array1.reduce(function(accumulator, currentValue){
  return accumulator + currentValue;
}, 10)) // 10은 초기값, 초기값은 선택. -> 20

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// 15

// filter와 reduce를 함께 사용할 수도 있다.
// 반복문없이 배열 arr에서 숫자 요소만 꺼내 누적값 출력하기

function getNumAccumulator(arr){
  // 하나의 배열로 다 만들어줌
  const oneArr = arr.reduce(function(acc, cur){
    return acc.concat(cur); // 현재 요소 cur 을 누적 요소 acc 에 계속 합쳐준다.
  });
  
  // number만 걸러내준다.
  const numArr = oneArr.filter(function(el){
    return typeof el === 'number';
  });
  
  // 걸러준 배열들의 합을 구해주고 리턴한다.
  return numArr.reduce(function(acc, cur){
    return acc + cur;
  }, 0);
}

getNumAccumulator([
  [1, '2', true],
  ['2', 3, undefined],
  [],
]); // 4

 

내장 고차 함수를 이용하면 이렇게 반복문 없이 배열을 순회하며 원하는 값을 뽑아낼 수 있다.