[자바스크립트 JavaScript] 콜백 함수

콜백함수 

• 다른 함수의 매개변수로 전달되어, 특정 이벤트나 상황이 발생했을 때 호출되는 함수 (고차함수의 한 종류)
• 고차함수 : 함수를 인자로 받거나 return 하는 함수

 

• 변수에 할당된 함수, 값처럼 취급되어 나중에 필요한 경우 사용할 수 있다

let sayHello = function () {
  console.log("Hello");
};

 

 

• 함수를 인자로 다른 함수에 전달

function callFunction(func) {
  func();
  // 다른 함수를 매개변수로 받아 내부에서 호출 할 수 있다.
};

callFunction(sayHello);

 

 

• 함수의 반환
• createAdder 함수의 return값으로 익명함수 넣고  x + createAdder의 매개변수가 return 된다
• addFive 변수에 익명함수를 넣고, createAdder함수의 인자값을 전달한다
• console.log로 addFive 변수에 입력된 10은 익명함수의 인자값으로 전달되어  x + num값이 return 된다.

function createAdder(num) {
  return function (x) {
    return x + num;
  };
};
const addFive = createAdder(5);
console.log(addFive(10));

 

 

• 함수의 반환 2
• multiplyBy의 return값으로 익명함수를 넣고, 익명함수의 return값은 multiplyBy의 매개변수와 익명함수의 매개변수를 곱한 값이다
• multiplyByTwo , multiplyByThree  변수를 선언하여 익명함수를 넣고 multiplyBy 함수의 인자값을 전달한다
• console.log로 익명함수의 인자값을 전달하여 두 값이 곱한 값이 return 된다.
• 마지막으로 add함수의 인자값으로 multiplyBy함수가 들어간다, 인자값을 새로 전달하고 두 값을 합한 값이 return 된다.

function multiplyBy(num) {
  return function (x) {
    return x * num;
  };
};

function add(x, y) {
  return x + y;
}

const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

console.log(multiplyByTwo(10));
console.log(multiplyByThree(10));

const result = add(multiplyByTwo(5),multiplyByThree(10));
console.log(`FINAL > ${result}`);

 

 

• 객체 내부의 함수, 화살표 함수
• 화살표함수는 this를 바인딩하지 않는다.(객체의 속성과 연결되지 않는다)

const person = {
  name: "John",
  age: 30,
  isMarried: true,
  // sayHello:function () {
  //   console.log(`Hello My name is ~~ ${this.name}`);
  // }
  sayHello: () => {
    console.log(`Hello My name is ~~ ${this.name}`);
  }
};

person.sayHello();

 

 

• 배열 요소로 함수 할당
• 인덱스를 지정하여 인자값을 전달

const myArr = [
  function (a, b) {
    a + b
  },
  function (a, b) {
    a - b
  }
];
console.log(myArr[0](1, 3));
console.log(myArr[1](10, 7));

 

---

 

콜백 함수를 이용한 배열의 메서드

 

• 콜백 함수 : 매개변수 자리에 함수를 넣어 사용한다.

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

numbers.forEach(function (item) {
  console.log(item);
});

 

• map : 원본 배열을 변경하지 않고, 각 요소에 대해 주어진 콜백 함수를 적용한 새로운 배열을 반환한다.(원본 배열의 길이만큼) 반드시 return이 있어야 한다.

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

let newNumbers = numbers.map(function (item) {
  return item * 2;
});

console.log(newNumbers);

 

• filter : 함수가 true를 반환하는 요소들로 이루어진 새로운 배열을 생성한다.

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

let filteredNumbers = numbers.filter(function (item) {
  return item === 5;
});
console.log(filteredNumbers);

 

• find : 함수가 true를 반환하는 첫 번째 요소를 찾아 반환한다(조건을 만족하는 요소가 없으면 undefined를 반환한다.)

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

let result = numbers.find(function (item) {
  return item > 3;
});
console.log(item);