다시 시작하는 자바스크립트 - 배열 퀴즈2(고차함수)

 

헷갈리는 것들만 따로 정리할 예정.

deep dive 책을 함께 공부함.

 

 

 

배열 퀴즈에서 사용했던 문제들을 고차함수 식으로 풀어볼 거임.

그러고보니 문제 2번은 이미 고차함수로 바꿨다는 사실이...(쨋든 시작)

 

- 퀴즈 1

 

주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들기
단, 주어진 배열을 수정하지 않도록!
- input: ['🍌', '🍓', '🍇', '🍓']
- output: [ '🍌', '🥝', '🍇', '🥝' ]

 

function replace(array) {
  return array.map((fruit)=> {
    if(fruit === "🍓") {
      return fruit === "🥝";
    } else {
      return fruit; 
    }
  });
}

const fruits = ['🍌', '🍓', '🍇', '🍓'];
result = replace(fruits);
console.log(fruits);
// ['🍌', '🍓', '🍇', '🍓']
console.log(result);
// [ '🍌', '🥝', '🍇', '🥝' ]

 

이걸 삼항연산자로 만들 수도 있음.

 

function replace(array) {
  return array.map((fruit) => fruit  === "🍓" ? fruit = "🥝" : fruit)
}

const fruits = ['🍌', '🍓', '🍇', '🍓'];
result = replace(fruits);
console.log(fruits);
// ['🍌', '🍓', '🍇', '🍓']
console.log(result);
// [ '🍌', '🥝', '🍇', '🥝' ]

 

이제 마지막으로 재사용이 가능하게끔 코드를 작성해보겠음.

 

function replace(array, from, to) {
  return array.map((fruit) => {
    if(fruit === from) {
      return fruit = to;
    } else {
      return fruit;
    }
  });
}

const fruits = ['🍌', '🍓', '🍇', '🍓'];
result = replace(fruits, "🍓", "🥝");
console.log(fruits);
// ['🍌', '🍓', '🍇', '🍓']
console.log(result);
// [ '🍌', '🥝', '🍇', '🥝' ]

 

- 퀴즈 2

 

배열과 특정한 요소를 전달받아, 배열 안에 그 요소가 몇 개나 있는지 카운트하는 함수 만들기
- input : [ '🍌', '🥝', '🍇', '🥝' ], '🥝'
- output : 2

 

function counter(array, item) {
  return array.reduce((sum, fruit) => {
    if(fruit === item){
      sum++;
    }
    return sum;
  }, 0);}

const array2 = [ '🍌', '🥝', '🍇', '🥝' ];
result = counter(array2, "🥝");

console.log(array2);
// [ '🍌', '🥝', '🍇', '🥝' ]
console.log(result);
// 2

 

2번은 이미 예전에 풀었기 때문에 복사...!

 

- 퀴즈 3

 

배열1, 배열2 두 개의 배열을 전달 받아, 배열1 아이템 중 배열2에 존재하는 아이템만 담고 있는 배열 반환
- input : [ '🍌', '🥝', '🍇' ], [ '🍌', '🍓', '🍇', '🍓' ]
- output : [ '🍌', '🍇' ]

 

function match(array1, array2) {
  return array1.filter((fruit) => array2.includes(fruit));
}

const fruits1 = [ '🍌', '🥝', '🍇' ];
const fruits2 = [ '🍌', '🍓', '🍇', '🍓' ];

result = match(fruits1, fruits2);
console.log(array1, array2);
//  [ '🍌', '🥝', '🍇' ], [ '🍌', '🍓', '🍇', '🍓' ]
console.log(result);
// [ '🍌', '🍇' ]

 

고차함수 filter() 사용...!

 

- 퀴즈 4

 

5 이상의 숫자들의 평균을 구하기

- input : [ 3, 16, 5, 25, 4, 34, 21 ]

 

function average(array) {
  return array
  .filter((num) => num >= 5)
  .reduce((avg, num, _, array) => avg + num / array.length, 0);
}

const nums = [ 3, 16, 5, 25, 4, 34, 21 ];
result = average(nums);
console.log(nums);
// [ 3, 16, 5, 25, 4, 34, 21 ]
console.log(result);
// 20.2