스코프(2)

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• 1. 즉시 실행 함수, IIFE
• 2. 호이스팅
• 3. 사각지대와 스트릭트 모드

 

<스코프>

1. IIFE : 즉시 호출하는 함수 표현식

1-1) 즉시 실행 함수의 기본 형식

#일반적인 함수 표현식
const g = function 함수이름(){
	//...
}


#즉시 실행 함수 표현식
(function () {
    //IIFE 바디
})()

 

1-2) 즉시 실행 함수의 종류

#1. 기명 즉시 실행 함수
(function square(x) {
    console.log(x*x);
})(2);


#2. 익명 즉시 실행 함수
(function (x) {
    console.log(x*x);
})(2);


#3. 변수에 즉시 실행 함수 저장
(mySquare =function (x) {
    console.log(x*x);
})(2);
mySquare(3);

 

1-3) IIFE의 장점 : 내부에 있는 것들이 모두 자신만의 스코프를 가지지만, IIFE자체는 함수이므로 그 스코프 밖으로 무언가를 내보낼 수 있음. 클로저를 만들고, 클로저에게서 무언가를 반환받을 때 유용함.

const message = (function() {
    //IIFE 바디
    const secret = "I am a secret!";  #외부에서 접근 불가
    return 'The secret is ${secret.length} characters long.';
})();
console.log(message);

 

 

2. 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

let 키워드는 변수를 선언하기 전에는 그 변수는 존재하지 않지만, var 키워드는 스코프 안이라면 어디서든 사용가능하고, 심지어 선언되기 전에도 undefined로 변수 사용 가능하다. → 호이스팅

• 호이스팅 발생O : var 변수 선언, 함수선언문
• 호이스팅 발생X : let · const 변수 선언, 함수표현식

#함수선언문 - 호이스팅o
function foo() { 
	console.log("hello");
}

#함수표현식 - 호이스팅x
var foo2 = function() { 
	console.log("hello2");
}

 

 

3. 사각지대와 스트릭트 모드

3-1) 사각지대

사각지대란, let으로 선언하는 변수는 선언하기 전까지 존재하지 않는다는 개념이다.

let으로 선언할 변수는 존재를 확인(typeof연산자 이용)하는 버릇을 가져야 사각지대 error가 나지 않는다.

 

3-2) 스트릭트 모드  "use strict"

암시적 전역 변수란, var로 변수 선언하는 것을 잊은 변수들을 전역 변수로 간주하는 것을 위미한다.

스트릭트 모드는 이러한 암시적 전역 변수를 허용하지 않는다.

 

 

[참고 사이트]

호이스팅 - https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html