바닐라코딩

즉시실행함수(IIFE)

단점이없어지고싶은개발자 2021. 11. 6. 12:01
반응형

즉시실행함수란, 선언과 동시에 즉시 실행이 가능하게 선언을 표현식으로 바꾸는 것을 뜻한다.

(foo = function() {
	console.log("foo);
{)(); //foo

소괄호안에 익명의 함수를 기술하면, 소괄호의 시작부터 종결부분가지 전체가 평가된 후 반환된다. 

 

즉시실행함수를 쓰는 이유는?

 

1. 전역변수 (global scope)의 선언을 막기 위해

IIFE내부에 선언된 변수들의 범위를 익명함수내로 한정이 되기 때문에 중복선언문제가 해결된다.

var foo = "bar";

(function() {
	var foo = "Hello Js";
    console.log(foo); // "Hello Js"
})();

console.log(foo); // "bar"

똑같은 변수 foo임에도 불구하고 익명함수를 통해 중복문제를 해결

 

2. 클로저에서의 값의 중복해결

클로저는 함수와 함수가 선언된 어퓌적 환경의 조합이다. (Lexical scoping),함수가 선언될 당시 주변환경과 함께 갇히는 것
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

 

함수가 실행되는 위치나 시점과는 관계없이, 자바스크립트에서 모든 함수는 선언되는 주변환경을 기억한다!

 

for (var i = 0; i < 3; i++) {
	setTimeout(() => {
    console.log(i);
    }, 1000);
};

// 3,3,3 
//이유는 1초후에 돌아왔을 때 이미 for의 반복문을 돌고 난 뒤라 var i = 3으로 인식

for (var i = 0; i < 3; i++) {
  (function(a) {
	setTimeout(() => {
    console.log(a);
    }, 1000);
})(i)};

// (function(a) {})(i);
// i i값을 즉시실행함수로 가져와 실행시키면 1, 2, 3이 나온다

 

 

IIFE목적은 외부에서 접근할 수 없는 자체 Scope를 형성한다 상위 Scope에 접근할 수 있으면서도, 내부 변수를 외부로부터 보호해 Privacy를 유지할 수 있다.

 

비동기처리란 

자바스크립트의 비동기처리는 특정 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성

즉, 특정 로직의 실행이 끝날 때까지 기다려지지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.

 

console.log("1");

setTimeout(function() {
	console.log("2")}, 1000);
    
console.log("3");

//1 3 1초 후 2가 나온다 비동기특성

 

반응형

'바닐라코딩' 카테고리의 다른 글

Promise란?  (0) 2021.11.06
마지막 강의 Github  (0) 2021.09.19
바닐라코딩 프렙 끝.  (0) 2021.09.19
8주차 과제 - 콜백함수란 무엇인가  (0) 2021.09.12
7주차 과제  (0) 2021.09.05