IIFE

2019-01-31

//function statement
function greet(name) {
    console.log('Hello ' + name); 
}
greet('John);  //Hello John

//using a function expression 
var greetFunc = function(name) {
    console.log('Hello ' + name);
};
greetFunc(); //Hello John


//IIFE 함수 생성 후 바로 실행시킴
var greetFunc = function(name) {
    return 'Hello ' + name;
}('John');

console.log(greeting); // Hello John

3;  //vaild
'I'm a string' //vaild
{ name: 'John' } //vaild

//그렇다면 함수는?

//function statement 

function(name) {
    return 'Hello ' + name;
}
// function 키워드를 보면 statement라고 인식
// 함수명을 요구하기에 error 발생!

// statement를 괄호()로 묶으면 expression으로 인식
// 함수 생성과 호출을 동시에, IIFE

var tom = 'Tom'

(function(name) {
   var greeting = 'Inside IIFE: Hello';
   console.log(greeting + ' ' + name); 
}(tom)); // Inside IIFE: Hello Tom

//IIFE 구조
(function {...})();  //괄호 밖
(function {...}()); // 괄호 안, 둘 다 가능

Why IIFE ?

IIFE 코드가 실행되면 발생하는 일

Global Execution context 생성
IIFE 코드, expression을 만나면 메모리에 () 함수 공간 할당
코드 끝 호출 () 를 만나면 새로운 Execution context 생성
IIFE 내 변수들 메모리에 할당 () , Not to Global Object

//index.html
<html>
	<head></head>
	<body>
		<script src="greet.js"></script>
		<script src="app.js"></script>
	</body>
</html>

1 2	//greet.js var greeting = 'Hola';

//app.js
(function(name) {
    var greeting = 'Hello';
    console.log(greeting + ' ' + name);
})('John'); //IIFE

console.log(greeting);

// Hello John
// Hola

Global 의 greeting 과 IIFE 의 greeting 이 충돌없이 공존

Conclusion

IIFE 코드 내 변수들은 전부 IIFE 의 Execution context 내의 variable environment 에 속하기 때문에 전역객체에 영향 안줌, 전역 변수나 다른 execution context 들의 변수들과 충돌 가능성 없음!

이 때문에 대부분의 라이브러리나 프레임워크는 IIFE 형식으로 설계 되어있음

var global = window;

(function(global, name) {
    var greeting = 'Hello';
    global.greeting = 'Hello global';
    console.log(greeting + ' ' + name);
})(window, 'John'); //IIFE

만약 IIFE 로 글로벌 객체에 영향을 주고 싶다면?

IIFE에 글로벌 객체를 인자로 전달해서 조작하면 가능

Closure

arguments & etc

FrontJavascript

Why IIFE ?

Conclusion

Related Posts