개발 무지렁이

[JavaScript] 호출 가능한 객체, 함수와 콜백함수 본문

Frontend/JavaScript

[JavaScript] 호출 가능한 객체, 함수와 콜백함수

Gaejirang-e 2023. 9. 3. 21:30

𐂂 함수란? 호출할 수 있는 객체, callable
(1) 작업을 처리하는 코드블럭 (🧩 코드의 재사용성)
(2) 객체 타입의 값이다, 함수 객체
(3) 함수는 호출되기 이전에, 함수 몸체의 어떤것도 실행되지 않는다.

🦔 함수 리터럴
함수 객체를 생성하는 표기법을 말한다.
(피연산자로 사용될 때, 함수리터럴로 해석)

일급객체: 처럼 사용할 수 있는 객체

🦔 함수 정의 방식
(1) 함수 선언문
function add(x, y) {
    return x + y;
}  

⚠️ 함수 호이스팅이 일어난다. (함수이름과 동일한 이름의 식별자가 생성, 함수 객체가 할당)

(2) 함수 표현식: 함수리터럴로 생성한 함수 객체가 변수에 할당

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

(3) Function 생성자 함수

let add = new Function('x', 'y', 'return x+y');

(4) 화살표 함수

let add = (x, y) => x + y;

(5) 즉시 실행 함수

(function() {
    let a = 3;
    let b = 5;
    return a * b;
}());

⚠️ 그룹연산자로 감싸면 함수리터럴로 평가되어 함수객체를 생성


🦉 순수 함수
: 외부 상태의존하지도 않고, 외부 상태바꾸지도 않는,
즉, 부수효과가 없는 함수를 말한다.

𖠃 콜백함수
매개변수를 통해 다른 함수의 내부로 전달되는 함수를 '콜백함수'라하고,
인수로 함수를 받는 함수를 '고차함수'라 한다.

📜 콜백함수를 사용한 비동기 처리.js

  setTimeout(function() {
      console.log('1초 경과');
  }, 1000);

📜 콜백함수를 사용한 배열고차함수.js

  let res = [1, 2, 3].map(function(item) {
      return item * 2;
  });
  console.log(res); //[2, 4, 6]

  res = [1, 2, 3].filter(function() {
      return item % 2;
  });
  console.log(res); //[1, 3]

  res = [1, 2, 3].reduce(function(acc, cur) {
      return acc + cur
  });
  console.log(res); //6
Comments