고차함수 part2

dorazi·2020년 11월 26일
0

js

목록 보기
6/10
post-thumbnail

이번에는 내장 고차 함수를 한번 정리 해보는 시간을 가져볼까 한다.
코플릿 문제를 진행하면서 filter, map, reduce 를 사용해서 문제를 풀어봤지만 아직 명쾌하게 이해가 되지 못한거 같다. 그래서 이번 시간에 다시 한번 정리하고 찾아보며 이해하는 시간을 가져보겠다.

1. Filter

filter는 뜻 그대로 조건을 두고 배열의 각 요소를 순회해 해당 조건에 해당하는 경우 남겨두고 아닌 경우 없애는 기능을 가진 것으로 이해했다. 예를 들어 3이상 숫자를 filter 하는 조건을 둔다면

let foo = [1,2,3,4,5]

function filterNum(numlist) {
  return numlist.filter(function(x){
      if(x >= 3){
          return true
      }
      return false
  })
}
console.log(filterNum(foo))  // ==> [3,4,5]

위와 같이 3이상의 숫자들로만 걸러진다.

2. Map

map은 filter와 다르게 배열의 각 요소 하나하나에 함수를 적용하고 결과를 요소로 갖는 배열를 리턴시킨다. 이해하기 쉽게 위의 filter에서 사용된 예시와 같은 예시로 비교한다면

let foo = [1,2,3,4,5]

function mapNum(numlist) {
  return numlist.map(function(x){
      if(x >= 3){
          return true
      }
      return false
  })
}
console.log(mapNum(foo))  //==> [false, false, true, true, true]

위와 같이 3이상인 요소에 true를 아닌 경우 false를 적용해 리턴시킨다.

3. Reduce

reduce는 배열의 각 요소에 인자로 전달 받은 함수를 적용하고, 각 결과를 두 번째 인자로 전달 받은 초기값에 누적한 결과를 리턴한다.

let foo = [1,2,3,4,5]

function reducenum(numlist) {
  return numlist.reduce(function(acc, cur){
     return  acc + cur
    
  }, 0);
  }

  console.log(reducenum(foo)) // ==> 15

foo 배열에 있는 모든 요소를 더한 값이 나왔다.
reduce는 정말 강력하다는 것은 알겠는데 아직 활용을 잘못하는 것 같다.
좀 더 알아보고 따로 정리하는 시간을 가져봐야 할 것 같다.

지금까지 대표적으로 많이 쓰이는 3가지 내장 고차함수 메소드를 정리해봤고 지금부터는 아직 써보지는 못한 내장 고차함수들 find, sort, some, every 에 대해 알아보고 정리해본다.

4. Find

find 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 리턴한다. 그런 요소가 없다면 undefined를 리턴한다. 만약 짝수를 판별하는 함수를 적용시킨다면

let foo = [1,2,3,4,5]

function findnum(numlist) {
  return numlist.find(function(x){
     if(x % 2 === 0){
        return true
     }
    
  });
  }

  console.log(findnum(foo)) // ==> 2

foo에는 짝수가 2, 4 둘이 있지만 find를 적용한다면 첫번째 요소인 2를 리턴한다.

5. Sort

sort는 언더바 과제를 진행하면서 잠깐 사용해봤지만 익숙하진 않다.
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 리턴한다. sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 리턴하고 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다. 이 말은

let foo = [1,2,12,23,3]

function sortnum(numlist) {
  return numlist.sort()
  }

  console.log(sort(foo)) // ==> [1, 12, 2, 23, 3]

위와 같이 숫자 정렬에서는 2가 12보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "12"은 유니 코드 순서에서 "2"앞에 온다.

만약 제대로 정렬을 하려면

let foo = [1,2,12,23,3]

function sortnum(numlist) {
  return numlist.sort(function(a,b){
     return a - b
  })
  }

  console.log(sortnum(foo)) // ==> [1, 2, 3, 12, 23]


function reverseSortnum(numlist) {
  return numlist.sort(function(a,b){
     return b - a
  })
  }

  console.log(reverseSortnum(foo)) // ==> [23, 12, 3, 2, 1]

위와 같이 정리할수 있다.

6. Some

some 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다. 빈 배열에서 호출하면 무조건 false를 리턴한다.

let fruits = ['apple', 'banana', 'mango', 'guava']

function somenum(arr, target) {
  return arr.some(function(a){
     return a === target
  })
  }

  console.log(somenum(fruits, 'banana')) //==> true
  console.log(somenum(fruits, 'orange')) //==> false

7. Every

every 메서드는 some 메서드와 다르게 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다

let numlist = [1,3,5,7,9]

function everynum(arr) {
  return arr.every(function(a){
     return a < 10
  })
  }

  console.log(everynum(numlist))
profile
프론트엔드 개발자

0개의 댓글