JavaScript 기초

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

개미는뚠뚠딴 2020. 9. 26. 00:35
반응형

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

 

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

 

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

 

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

 

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

 

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

 

반응형