Scope (스코프)

 

Global Scope VS Local Scope

• Local scope 안 쪽에서 선언된 변수는 Local scope 바깥 (Global scope)에서 사용할 수 없다.

• Javascript 에서는 함수에서만 자신만의 Scope를 가질 수 있다. (= Javascript 는 function 단위의 scope를 가진다.)

• 안 쪽 함수에서 바깥 함수 접근은 가능 / 바깥 함수에서 안 쪽 함수 접근은 불가능

• Scope는 중첩이 가능 (함수 안에 함수 가능)

• Global scope는 최상단 함수로 Global variable 은 어디든 접근 가능

• Local scope는 함수 내에서 Global variable 보다 더 높은 우선 순위를 가짐

   

let greeting = 'Hello'; 
function greetSomeone() {
let firstName = 'Josh'; 
return greeting + ' ' + firstName; 
} 

greetSomeone(); // --> 'Hello Josh' 
firstName; // --> ReferenceError

let name = 'Richard'; 
function showName() {
let name = 'jack'; 
console.log(name); // --> Jack (2) 
}
console.log(name); // --> Richard (1)
showName(); 
console.log(name); // --> Richard (3)

이 때 function 안에서 let이 없어지면?

let name = 'Richard';
function showName() {
name = 'jack'; 
console.log(name); // --> Jack (2) 
} 
console.log(name); // --> Richard (1) 
showName(); 
console.log(name); // --> Jack (3)

 

var vs let

• var : 함수 단위로 자신만의 Scope를 가짐 (old way)

• let : Block { } 단위로 Scope를 구분해서 예측하기 쉬운 코드를 작성할 수 있다.

   

for (let i = 0; i < 5; i++){ 
console.log(i); 
} 
console.log(i) // --> ReferenceError

for (var i = 0; i < 5; i++){ 
console.log(i); 
} 
console.log(i) // --> 5

 

Const

• 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용하는 키워드
• let 과 동일하게 Block Scope를 따름
• 하지만 값을 재정의하려고 하면 TypeError 발생

	let	const	var
유효 범위	Block scope	Block scope	Function scope
값 재정의	가능	불가능	가능
재선언	불가능	불가능	가능

 

window

• Global scope를 대표하는 객체(최상위 Scope)이다.
• Global scope 에서 선언된 함수, var 키워드를 이용해 선언된 변수는 window 객체와 연결
• Global scope 에 너무 많은 변수를 선언하지 않도록 주의!

 

선언 없이 초기화된 전역 변수

• 절대로 선언 키워드(var, let, const) 없이 변수를 초기화 하지 말 것!

• 이런 실수를 방지하고 싶을 경우, Strict mode 를 사용

  : 맨 위에 'use strict'; 적기

function showAge(){ 
age = 90; 
console.log(age); 
} 

showAge(); // 90 
console.log(age); // 90

// 여기서 age 는 전역 변수로 취급됩니다. 
// age === window.age

 

HOISTING (var에서만 적용됨)

 

변수 선언은 범위에 따라 선언과 할당으로 분리됨

javascript 엔진이 내부적으로 변수 선언을 scope의 상단으로 끌어올림 (hoisting)

 

console.log(a); // undefined
var a = 'hello';

왜 이렇게 나오나?

위의 코드는 즉,

var a;
console.log(a);
a = 'hello';

와 같은 코드이다. a라는 변수가 hoisting 되었기 때문!!

 

반면,

console.log(b);
let b = 'hello'; //reference error : b is not defined

let을 이용해서 선언한 변수는 error를 일으킨다.

let은 hoisting 되지 않기 때문에!