[Javascript] 즉시실행함수

youngseo·2022년 3월 25일
0

Javascript

목록 보기
7/46
post-thumbnail
post-custom-banner

즉시실행함수(IIFE)

즉시 실행 함수 표현(IIFE)는 Immediately Invoked Function Expression으로 정의되자마자 즉시 실행되는 자바스크립트의 함수를 말합니다.

(function() {
  var aName = "Barry";
})(매개변수);

이렇게 함수를 괄호 안에 넣어 실행을 시키는 것입니다.

1. 즉시실행 함수의 형식

익명함수를 소괄호로 감싼 후 소괄호 뒤에 소괄호를 열고 닫습니다. 아래와 같이 함수의 이름을 따로 만들지 않아도 소괄호 두개를 통해 함수를 바로 실행시킬 수 있습니다. (함수)()

(function () {
  console.log(a * 2)
})();

또한 아래와 같이 소괄호로 익명함수를 감싸고 뒷 소괄호 앞에 소괄호를 열고 닫아 작성할 수도 있습니다. (함수())

(function () {
  console.log(a * 2)
}());

※주의점
아래와 같이 자바스크립트 엔진이 즉시 실행함수가 실행되는 부분과 일반 함수를 명확하게 구분짖지 못하기 때문에 반드시 ;를 통해 구분지어줘야합니다.

const a = 7
function double() {
  console.log(a * 2)
}
double(); //반드시 ;를 붙여구분

(function () {
  console.log(a * 2)
})();

2. IIFE의 장점

장점1: 공간을 완전히 분리할 수 있습니다.

즉시실행함수는 공간을 완전히 분리할 수 있기 때문에 ()안에서는 명확하게 새로운 스코프를 만들어낼 수 있기 때문에 유용합니다. 일종의 블록 스코프를 흉내내는 새로운 스코프를 만들고 있다고 생각하면 이해하기 쉽겠습니다.

단, 즉시실행 함수를 사용할 때는 반드시 앞 또는 뒤에 ;를 붙여줘야 한다는 주의점이 있습니다.
(;를 사용하지 않고 즉시실행 함수를 연달아 실행하는 경우 함수가 붙어버리게 됩니다. 붙어버리는 경우 실행이 되지 않습니다.)

스코프에 대한 걱정이 있다면 즉시실행함수를 사용해보는 것도 좋습니다.

장점2: 숨겨야할 데이터를 넣을 때 유용합니다.

(function(num) {
  var privaeData='secret'
})(1)

마무리하며

즉시실행함수는 향후 배우게 될 Closure이라는 함수 사용 기법에 비슷하게 작동하기 때문에 지금 이해를 잘 해놓는다면 closure의 이해해도 많은 도움을 받을 수 있을 것입니다.

post-custom-banner

0개의 댓글