JS 문법 - 배열 고차함수

Class: 제로베이스
Created: December 1, 2022 3:44 PM
Type: Javascript
강의 명: 이론부터 실전까지 모든 것을 담은 자료구조/알고리즘

배열 고차함수

• 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수
• 매개변수로 전달되는 함수는 콜백 함수
• 대표 배열 조작 메소드
  • 임의 정렬: Array. sort(콜백 함수)
  • 반복 작업: Array. forEach( )
  • 콜백함수 결과 배열 반환: Array. map( )
  • 조건 만족하는 하나의 값 반환: Array. find( )
  • 조건 만족하는 값 배열로 반환: Array. filter( )
  • 누적 결과 값 반환: Array. reduce( )

sort( )

• 문제점 : 숫자 정렬시, 배열의 요소가 일시적으로 문자열로 변경되어, 문자열 기준으로 정렬됨.

  let nums = [1,-1,4,0,10,20,12]
  
  console.log(nums.sort((a,b) => a-b))
  // 오름차순 정렬 [ -1, 0, 1, 4, 10, 12, 20 ]
  console.log(nums.sort((a,b) => b-a))
  // 내림차순 정렬 [ 20, 12, 10, 4, 1,  0, -1 ]

• 한계점 : 대소문자 구분 없이 정렬되지 않고, 유니코드상 더 작은 대문자가 앞에 옴

  let fruits = ['orange', 'Orange', 'apple', 'melon'];
  
  console.log(
    fruits.sort((a,b)=> {
      a = a.toUpperCase();
      b = b.toUpperCase();
      if(a > b) return 1;
      else if(b > a) return -1;
      else return 0;
      }
    )
  ) // [ 'apple', 'melon', 'orange', 'Orange' ]

• 두가지 문제를 한번에 해결할 수도 있다.

  let order = (x,y) => {
    if (typeof x === "string") x = x.toUpperCase();
    if (typeof y === "string") y = y.toUpperCase();
    return x>y ? 1 : -1;
  }
  
  let nums = [1,-1,4,0,10,20,12]
  let fruits = ['orange', 'Orange', 'apple', 'melon'];
  
  console.log(nums.sort(order))
  // [ -1,  0, 1, 4, 10, 12, 20 ]
  console.log(fruits.sort(order))
  // [ 'apple', 'melon', 'orange', 'Orange' ]

forEach( )

• 배열 요소 별 콜백 함수 각각에 실행
• Array .forEach(function(item, index, array) { } )

  • item : 배열 요소, index : 배열 위치, array : 배열

    let nums = [10, 20, 30, 40]
    nums.forEach(function(i) {
      console.log(i) // 10 20 30 40 
    })

map ( )

• 배열 요소 별 함수 호출 및 결과를 바로 배열로 반환한다.
• Array .map (function(item, index, array) { } )

  • item : 배열 요소, index : 배열 위치, array : 배열

    let nums = [10, 20, 30, 40]
    let use_map = nums.map( x => x * 2)
    console.log(use_map) // [ 20, 40, 60, 80 ]

find ( ) / filter ( )

• find - 콜백 함수의 조건을 만족하는, 단 하나의 값만을 반환한다.
• filter - 조건에 만족하는 값을 모두 반환한다.
• Array .find (function(item, index, array) { } )
  • item : 배열 요소, index : 배열 위치, array : 배열

let users = [
  {name: "bob", age: 17, job: false},
  {name: "alice", age: 20, job: false},
  {name: "john", age: 27, job: true},
];

let find_job = users.find(user => user.job == false);
console.log(find_job);
// { name: 'bob', age: 17, job: false }

let find_age = users.filter(function(user) {
  return user.age >=19;
})
console.log(find_age);
// [ { name: 'alice', age: 20, job: false }, 
//   { name: 'john', age: 27, job: true }   ]

reduce ( )

요소 별 함수 수행 누적 결과값을 반환한다.

• Array. reduce ( function ( accumulator, item, index, array ) { } )
  • accumulator: 이전 함수 결과 ( initial로 초기값 설정 가능 )
  • item : 배열 요소, index : 배열 위치, array: 배열

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

let result = nums.reduce((accumulator, current) => {
  return accumulator + current
}, 0)
console.log(result) // 15