Ch 3. JS 함수-03.IIFE(즉시실행함수)

[목차]

#IIFE(즉시실행함수) 의미

#실습준비, 즉시실행함수를 쓰는 목적설명

#이럴 때 즉시실행함수 사용법 첫번째

#즉시실행함수와 세미콜론

#즉시실행함수 사용법 두번째

 

#IIFE(즉시실행함수) 의미

말 그대로 어떤 특정한 함수를 즉시 실행 해 버릴 수가 있겠구요.

Immediately-Invoked Function Expression

 

#실습준비, 즉시실행함수를 쓰는 목적설명

실습시작화면

a라는 변수가 선언이 되었고요, 숫자 7을 할당해서 담았습니다.

그리고 double()이라는 함수를 만들어서 그 내부에서 

console.log로 a * 2를 출력합니다.

그 함수 자체를 아래쪽에서 이렇게 double()이라는 이름으로 실행해서

로직이 구성되었습니다.

const a = 7 function double() {   console.log(a * 2) } double()

14가 출력이 되었습니다.

만약에 여러분들이 함수를 하나 만들었는데,  그 함수가 기본적인 내용으로

만들고나서, 한번 실행이 되고 쓸 일이 없다는 전제라면,

굳이 우리가 함수의 이름을 double()이라고 이렇게 따로 만들어서

아래쪽에서 호출할 필요가 없어요.

 

#이럴 때 즉시실행함수를 사용하면 되는데요.

즉, 함수를 만들자마자 바로 실행해서 동작시킬수 있는 방법이 되겠구요.

 

아래쪽에서 이렇게 익명의 함수를 하나 만들어 주겠습니다.

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

 이 함수는 익명의 함수이기 때문에 이름이 없어서 실행을 할 수가 없죠.

대신에 이 부분을 이렇게 소괄호 사이에다가 작성을 하는거에요.

( 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 ) } )()

자 그래서 불편할 수 있겠지만, 즉시 실행 함수를 사용할 때는 이렇게

더블 뒤쪽에다가 하나의 실행문이 끝났습니다.

라는 세미콜론 ; 을 명시를 해 주면 이제 더이상 에러가 출력되지 않고

바로 숫자데이터 14가잘 콘솔 창에 출력되는 것을 확인 할 수가 있죠.

더이상 에러가 출력되지 않고 바로 숫자데이터 14가 잘 콘솔 창에 출력되는 것을 확인 할 수가 있죠.

 

세미콜론을 사용하지 않고 즉시실행함수를 사용할 때는 이런부분들만

조금 주의 해 주시고요.

#즉시실행함수 사용법 두번째

( function () {   console.log( a  * 2 ) } () )  소괄호 내부에 뒤쪽

즉시 실행 함수같은 경우에는 이 뒤쪽에 이렇게 두번째로 작성했었던 소괄호를 

익명함수를 묶어놓은 소괄호 내부에 뒤쪽에다가도 이렇게 넣어서 작성을 할 수가

있어요. 즉 구분해서 보여드리면

소괄호를 내부에 뒤쪽 에다가도 이렇게 넣어서 작성을 했는데, 세미콜론을 사용하지 않아서 에러가 발생했네요.

새미 콜론을 넣고 14가 출력되었습니다.

#정리

자 그래서 즉시실행함수는 하나는 소괄호를 이렇게 이중으로 작성을 하는 것이고,

이 방법 같은 경우에는 함수를 첫번째 소괄호 사이에다가 넣어주시면 되겠구요. 

( function () {   console.log( a  * 2 ) } )(); ( 함수 { 로직 } )();

 

그 다음에 또 하나는 소괄호 사이에다가 소괄호를 또 넣는 거에요.

두번째 방법 같은 경우에는 함수를 첫번째 소괄호 앞쪽에다가 이렇게 작성해 주

시면 되겠습니다.

( function () {   console.log( a  * 2 ) } () ); ( 함수 { 로직 } ());

두가지 방법 모두  똑같이 즉시 실행 함수로 사용할 수 있는 문법이고요,

아무거나 사용가능한데요 두번째 방법을 권장합니다.