[JavaScript 개념잡기] 고차함수와 생성자

7. 고차함수와 생성자

 

1) 고차함수

✔ 고차함수

하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수

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

✔ 고차함수: sort() 🤯

1. sort()의 문제와 한계점
   • 문제: 일의 자리 4가 10의 자리보다 뒤에 정렬됨
   • 원인: 정렬 될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생
   • 한계점: 대소문자 구분없이 정렬이 안됨

 

2. sort() 고차함수(1)

• sort() 함수의 매개변수로 함수를 넣어 고차함수를 이용한 정렬 수행 가능
• 즉 콜백 함수의 알고리즘으로 양수, 음수를 반환 후 자료형에 따라 의도한대로 정렬할 수 있음

/* 양수, 음수 반환을 통한 정렬 */
let ascending_order = function(x, y) { return x - y }; // 0 > 일 때 반환
let descending_order = function(x, y) { return y - x }; // < 0 일 때 반환

let nums = [1, -1, 4, 0, 10, 20, 12];
console.log(nums.sort(ascending_order)); // [-1, 0, 1, 4, 10, 12, 20]
console.log(nums.sort(descending_order)); // [20, 12, 10, 4, 1, 0, -1]

 

3. sort() 고차함수(2)

/* 대소문자 구분 없애기 */
let ascending_order = function(x, y) {
  x = x.toUpperCase(); // 모든 매개변수를 대문자로
  y = y.toUpperCase();

  if (x > y) return 1;
  else if (y > x) return -1 // 작은값이 왼쪽, 오름차순
  else return 0;
}
let descending_order = function (x, y) {
  x = x.toUpperCase(); // 모든 매개변수를 대문자로
  y = y.toUpperCase();

  if (x < y) return 1;
  else if (y < x) return -1 // 내림차순
  else return 0;
}

let fruits = ["apple", "Orange", "orange", "mango"];
// 알파벳 순으로 정렬됨
console.log(fruits.sort(ascending_order)); // ["apple",  "mango", "Orange", "orange"]
console.log(fruits.sort(desending_order)); // ["Orange", "orange", "mango", "apple"]

/* 콜백 함수 공용화 */
let ascending_order = function (x, y) {
    if (typeof x === "string") x = x.toUpperCase();
    if (typeof y === "string") y = y.toUpperCase();

    return x > y ? 1 : -1; // 3항 연산자 사용
};

let descending_order = function (x, y) {
    if (typeof x === "string") x = x.toUpperCase();
    if (typeof y === "string") y = y.toUpperCase();

    return x < y ? 1 : -1; // 3항 연산자 사용
};

let nums = [1, -1, 4, 0, 10, 20, 12];
console.log(nums.sort(ascending_order));
console.log(nums.sort(descending_order));

let fruits = ["apple", "Orange", "orange", "melon"];
console.log(fruits.sort(ascending_order));
console.log(fruits.sort(descending_order));

2) 그 외 고차함수

✔ forEach()

배열 요소 별 콜백 함수 각각에 실행: Array.forEach()

const nums = [1, 2, 3];

nums.forEach(function(i) {
  console.log(i); // 123
});

✔ map()

배열 요소 별 함수 호출 시키고 각 결과를 배열로 반환: Array.map()

const nums = [1, 2, 3, 4, 5];
let use_map = nums.map(function (item) {
  return item * 2;
});
console.log(use_map); // [2, 4, 6, 8, 10]

✔ find()

콜백 함수의 조건을 만족하는 단 하나의 값만 반환: Array.find()

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(function(user) {
  return user.job == false;
});
console.log(find_job); // { name: "bob", age: 17, job: false }

let find_age = users.find(function(user) {
  return user.age > 19;
});
console.log(finde_age); //  { name: "alice", age: 20, job: false }, 하나만 반환

✔ filter()

콜백 함수의 조건을 만족하는 값을 배열로 반환: Array.filter()

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(function(user) {
  return user.job == false;
});
console.log(find_job);
/* { name: "bob", age: 17, job: false },
 { name: "alice", age: 20, job: false } */

let find_age = users.find(function(user) {
  return user.age > 19;
});
console.log(finde_age); 
/* { name: "alice", age: 20, job: false },
  { name: "john", age: 27, job: true } */

✔ reduce()

요소 별 함수 수행 누적 결과값 반환: Array.reduce()

• accumulator: 이전 함수 결과(initial로 초기값 설정 가능)

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

console.log("result\tvalue\tindex");
let sum = nums.reduce(function(accumulator, item, index, array) {
  console.log(accumulator, "\t\t", item, "\t\t", index);
  call_count++;
  return accumulator + item;
}, 0); // initial이 없으면 index 1부터 시작(2부터)

console.log(call_count); // 5
console.log(sum); // 15, 합산

3) 생성자

✔ 생성자 함수

유사한 객체를 다중으로 만들 때 사용되는 함수

• 일반적으로 생성자 함수의 첫 글자는 대문자
• 생성자 함수로 객체 생성 시 new 연산자를 통해 객체 생성

function FishBread(flavor, price) {
  this.flavor = flavor;
  this.price = price;
  this.base = "flour";
}

const bread1 = new FishBread("cream", 1200);
const bread2 = new FishBread("redbean", 1300);
const bread3 = new FishBread("milk", 1500);

console.log(bread1); // { flavor: 'cream', price: 1200, base: 'flour'}
console.log(bread2); // { flavor: 'cream', price: 1300, base: 'flour'}
console.log(bread3); // { flavor: 'cream', price: 1500, base: 'flour'}

✔ new.target

new와 함께 호출했는지 확인 가능

function FishBread(name) {
  if (!new.target) {
    return new FishBread(flavor, price);
  }
  this.flavor = flavor;
  this.price = price;
  this.base = "fish";
}
const bread1 = new FishBread("cream", 1200);
const bread2 = new FishBread("redbean", 1300);
const bread3 = new FishBread("milk", 1500);

console.log(bread1);
console.log(bread2);
console.log(bread3);