Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

coding etude

200830 [고차함수] 본문

Javascript TIL

200830 [고차함수]

코코리니 2020. 8. 31. 19:47

고차 함수 (HOF : Higher order function)

 : 다른함수를 인자(argument)로 받거나 다른 함수를 리턴하는 함수.

 

  @first class citizen(1급 시민의 조건)

   - 변수에 할당(assignment) 할 수 있다.

   - 다른 함수에 인자(argument)로 전달 할 수 있다.

   - 다른 함수의 결과로 리턴 할 수 있다.

javascript에서는 함수도 1급 객체이다.

 

  @함수가 1급객체인 것이 중요한 이유.

   - 함수를 전달 할 수 있다는 것은 인자로 조건에 맞는 함수를 넣어주면 작업이 쉽게 처리되기 때문이다.

 

  ※함수 선언식과 표현식의 차이점.

   // 호이스팅을 제외하면 실행의 차이는 없으나 함수 표현식은 함수의 할당과 실행 위치가 중요하기 때문에 코드의 위치가 어느정도 예측 가능하다.

 

고차함수에서 다른 함수의 인자로 들어오는 함수를 Callback 함수라고 한다.

 

내장 고차함수(Built-in HoF)

 : javascript에 기본적으로 내장되어 있는 고차 함수

 

배열 고차함수

  1. filter()

    : 배열의 요소를 함수의 element 값으로 주어 함수의 조건에 true 인 값을 새로운 배열로 리턴하는 고차함수

let num = [1, 2, 3, 4, 5];

let five = num.filter(funtion(el){
  return el < 5;
)
// console.log(five) =>  [1, 2, 3, 4]

  2. map()

    : 배열의 요소를 함수의 element 값으로 주어 함수의 리턴값으로 새로운 배열을 리턴하는 고차함수

let num = [1, 2, 3, 4]

let multi = num.map(function(el){
  return el * 2
});

// console.log(add) => [2, 4, 6, 8]

  3. reduce()

    : 배열의 요소를 함수의 element 값으로 주어 하나의 값을 리턴하는 고차함수

let num = [1, 2, 3, 4]

let sum = num.reduce(funtion(acc, cur){
  return acc + cur
}, 0) ; 

// console.log(sum) => 10

reduce에 주어진 함수의 argument는 function(누적값, 현재값){ 조건식 }, 초기값); 의 형태를 가지며 초기값이 없을때는 첫번째 요소를 초기값으로 한다. 위 예제로 보면 초기값 0 에서 현재값 1을 조건식에 의해 더하고 누적값 1을 다음 현재값이 2와 더한다. 그럼 누적값은 3이 되고 다음 현재값은 3이 되기 때문에 이런식으로 반복되면 값은 10이 리턴 된다.

reduce는 간단한 숫자 연산뿐만 아니라 함수에서 사용 할 수 있는 모든 반복문 조건문들을 사용하여 리턴 할 수 있기 때문에 배열의 연산에서 굉장히 활용도가 높다. 꼭 기억하자.

 

  4. sort() // mutable(원시값을 바꾼다)

    : 주어진 배열을 일정순서로 정렬한 후 그 배열을 리턴한다. 

let num = [3, 5, 2, 4, 1]
let newNum = [10, 7, 60, 3] 

let sort = num.sort(); // console.log(sort) => [1, 2, 3, 4, 5]
let newSort = newNum.sort(); // console.log(sort) => [10, 3, 60, 7]

let newSort = newNum.sort(function(a , b){
  return a - b
}); 

// console.log(sort) => [3, 7, 10, 60]

 함수식이 주어지지 않으면 배열의 요소를 유니코드 코드 포인트로 변경하여 비교를 하기 때문에 10 과 3 중에 1과 3을 비교하게 되어서 10이 앞에 오게 된다. 그래서 숫자를 비교하기 위해서 각요소를 a - b 할 수 있다.  값이 0보다 작으면 앞으로 0보다 크면 뒤로 값이 0일 경우 변경없이 지나간다. 이 함수의 조건을 이용하여 값을 비교하여 재정렬 시킬 수 있다.

 

  5. every / some

    : 배열의 요소를 함수의 element 값으로 주어 함수의 판별 조건에 맞게 true / false 값을 리턴한다.

   every : 모든 요소가 true 일때 true 값 리턴, 하나라도 false 일때 즉시 false 값 리턴

   some : 요소 중 하나라도 true 일때 즉시 ture 값 리턴

  ※ callback 선언 이전의 요소만 가능하고 every / some 호출 이후에 변경된 값은 callback 함수에 해당하지 않는다.

 

※forEach, find 의 기능도 파악해 두자..

'Javascript TIL' 카테고리의 다른 글

200902 [Function method]  (0) 2020.09.02
200831 [github 활용하기]  (0) 2020.08.31
200828 [DOM]  (0) 2020.08.29
200827 [HTML & CSS]  (0) 2020.08.27
200808 [객체지향 프로그램]  (0) 2020.08.08