본문 바로가기
프로그래밍/JavaScript

함수 표현식 vs 함수 선언식 vs 화살표 함수

네눙 2022. 2. 24. 13:42
반응형

함수 표현식

var myFunction = function [name]([params]) { statement };
  • 이름을 생략하면 익명함수를 만들 수 있다.
  • 정의하자마자 실행되는 IIFE(즉시 호출되는 함수 표현식)로 사용될 수 있다.
  • 함수 선언식과 달리 호이스팅 되지 않는다. (변수 이름만 호이스팅되고 함수의 정의는 호이스팅되지 않는다) 따라서 함수 표현식은 정의하기 전에는 사용할 수 없다.

함수 선언식

function name([params]) { [statements] }
  • 함수 선언식은 선언을 둘러싼 함수의 최상부나 전역범위로 호이스팅된다.

화살표 함수

([parmas]) => { statements }
([params]) => expression // { return expression; }과 동일
singleParam => { statements } // 매개변수가 하나인 경우 괄호 생략가능
  • this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다.
  • 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
  • 생성자로 사용할 수 없다.
  • yield를 화살표 함수 내부에서 사용할 수 없다.

Function 객체 이용

new Function(args, functionBody)
  • 동적으로 함수를 생성할 수도 있으나, eval과 유사한 성능 문제 발생할 수 있다.
  • 전역 범위로 한정된 함수만 생성한다.
  • 모든 JavaScript 함수는 Function 객체이다.
const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));// expected output: 8

IIFE (즉시 실행 함수 표현)

(function() { statements })();

  • 이름 그대로 정의되자마자 즉시 실행되는 함수이다.
  • 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있고, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있어 주로 라이브러리나 플러그인을 만들 때 많이 사용한다.
  • IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
반응형

티스토리툴바