[JavaScript] Scope

스코프(Scope)

---

1️⃣ 전역 스코프 vs 전역 스코프

2️⃣ 전역 객체

3️⃣ 호이스팅

4️⃣ IIFE

 

 

1️⃣ 전역 스코프 vs 전역 스코프

---

전역 스코프 (Global Scope)

let foo = 'foo';

{
  console.log(foo);  //foo
}

function func(){
  console.log(foo);   //foo
}

if (true) {
  console.log(foo);   //foo
}

어디서나 쓸 수 있지만 동작 결과는 예측하기 어렵다

즉, 전역 스코프의 큰 단점은 런타임 시점(프로그래밍 실행시점)을 알지 못한다는 것

 

 

지역 스코프 (Local Scope)

- 함수 스코프

- 블록 스코프 { }

	var	let	const
전역 스코프	⭕️	❌	❌
함수 스코프	⭕️	⭕️	⭕️
블록 스코프	❌	⭕️	⭕️
재선언	⭕️	❌	❌
재할당	⭕️	⭕️	❌

 

2️⃣ 전역 객체

---

✅ 브라우저 => window 객체

✅ Node.js => global 객체

 

 

3️⃣ 호이스팅

---

호이스팅이란?

=> 선언한 코드를 내부적으로 최상단으로 끌어올리는 것

- var와 함수 선언이 대상이다.

- 선언된 var는 최상단으로 올라간다는 의미 (let, const는 최상단으로 올라갈 수 없다.)

- 선언된 함수는 최상단으로 올라간다는 의미

function foo() {
  console.log(hoist);
  
  var hoist = '호이스팅';
  
  console.log(hoist);
}

위의 함수 실행 결과를 예측해보자

.

.

.

function foo() {
  console.log(hoist);  //undefined
  
  var hoist = '호이스팅'; //호이스팅
  
  console.log(hoist);  //호이스팅, undefined
}

foo()     //undefined

undefined지만 오류가 나타나지 않는다

>> 변수 선언을 끌어올리는 자바스크립트 성질 때문!

>> 변수 선언 시, 최대한 var 사용은 자제! 

 

위의 코드는 다음과 같다고 볼 수 있다.

function foo() {
  var hoist  //변수 선언을 끌어 올림
  console.log(hoist);  //undefined
  
  hoist = '호이스팅'; //호이스팅
  
  console.log(hoist);  //호이스팅, undefined
}

foo()     //undefined

 

 

 

4️⃣ IIFE

---

즉시 실행 함수 (Immediately Invoked Function Expression)

>> 스코프를 지정할 수 없는 var의 특성으로 생겨난 함수로 블록을 지정해 줄 수 있다.

>> 블록 스코프를 흉내냄

>> 불필요한 변수 및 함수 생성❌

>> 스코프 충돌이 발생하지 않는다.

>> 한번만 호출하는 경우에 사용된다

function init(){초기 설정 로직}

(function(){초기 설정 로직})()

if (true) {
	(function() {
       var temp = 'hello';
       
       console.log(temp); //hello
    })()
}

console.log(temp); //temp is not defined

(function() {  //IIFE 시작
   // IIFE 내부 동작 코드
}); // IIFE 종료

단, 사용 시 세미콜론(;) 필수

let, const 등장으로 요즘에는 잘 쓰이진 않지만 외부에서 접근이 불가능하기 때문에 데이터나 변수를 숨길 때 이용

>> 추후 클로저 개념에서 설명