이번 포스트에서는 자바스크립트 함수 포스트에서 다루지 못했던 함수 표현식 특징에 대해서 정리해 보았습니다.
함수 표현식 문법
함수 표현식은 다양한 형태로 사용될 수 있습니다.
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은 외부에서 접근 불가참고할 만한 글
자바스크립트 함수 선언문
이번 포스트에서는 자바스크립트 함수 포스트에서 다루지 못했던 함수 선언문 특징에 대해서 정리해 보았습니다. 함수 선언문의 특징 1 : 호이스팅 함수 선언문은 코드 실행 전에 미리 메모리에 올려지기 때문에 함수를 선언하기 전에 호출할 수 있습니다… Read more
자바스크립트 화살표 함수
화살표 함수의 선언 방법들 괄호는 생략 가능합니다. 하지만 매개변수가 하나의 단순한 형태의 경우에만 생략이 가능합니다. 화살표 함수의 특징 this, arguments, super에 바인딩 되지 않으므로 메소드로 사용하면 안됩니다… Read more
