자바스크립트 함수 표현식

이번 포스트에서는 자바스크립트 함수 포스트에서 다루지 못했던 함수 표현식 특징에 대해서 정리해 보았습니다.

함수 표현식 문법

함수 표현식은 다양한 형태로 사용될 수 있습니다.

function (param0) {
  statements
}

function (param0, param1) {
  statements
}

function (param0, param1, /* …, */ paramN) {
  statements
}


function name(param0) {
  statements
}

function name(param0, param1) {
  statements
}

function name(param0, param1, /* …, */ paramN) {
  statements
}

주의해야 할 점은 function 키워드만 사용하고 이름을 안 넣으면 함수 선언문으로 오해해서 오류가 발생한다는 점입니다. 함수 표현식은 변수에 할당되거나 다른 표현식의 일부로 사용되어야 합니다.

var func1 = function() {
    return "No problem";
};

function(){
    return "Error";
};

위 코드에서 func1은 함수 표현식으로 인식되어서 함수 이름이 없어도 문제가 없습니다.

반면 5~7번 줄에 해당하는 함수는 함수 선언문으로 인식이 됩니다. 함수 선언문은 함수 표현식과 다르게 함수 이름이 필수 입니다.

때문에 5~7번 줄에 해당하는 함수는 SyntaxError를 일으킵니다.

함수 표현식의 특징

함수 표현식의 호이스팅

함수 선언문과 다르게 호이스팅 되지 않습니다.

console.log(notHoisted); // undefined
// Even though the variable name is hoisted,
// the definition isn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};

함수의 즉시 사용 IIFE (Immediately Invoked Function Expression)

함수 표현식은 함수 선언문과 유사합니다.

함수 선언문과의 주요 차이점은 함수 이름을 생략하여 익명 함수로 만들 수 있다는 것입니다.

이런 익명함수 성격을 갖는 함수 표현식은 정의되자마자 사용하는 형태로 이용할 수 있습니다.

이 패턴은 전역 스코프의 오염을 방지하고 변수와 함수를 캡슐화하여 격리된 환경을 만들 수 있게 해줍니다.

IIFE를 만드는 기본적인 구조는 다음과 같습니다

(function () {
  console.log("Code runs!");
})();

// or

!function () {
  console.log("Code runs!");
}();

IIFE는 다음과 같이 변수 보호 효과를 가질 수 있습니다.

(function() {
  var secret = "IIFE 사용법";
  console.log(secret); // 접근 가능
})();

console.log(secret); // 에러: secret은 외부에서 접근 불가

참고할 만한 글

Leave a Comment

목차