[Javascript] Scope와 변수 선언 (var, let, const) 키워드 차이점

스코프(Scope)

• 식별자 접근 규칙에 따른 유효 범위를 말함.
• 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.
• 범위는 중괄호(블록) 또는 함수에 의해 나눠진다.
• 각각 Block Scope, Function Scope라고 불린다.

function scopeExample(){
    //Function Scope
    var local = 'Seoul';
    console.log(local);
    {
        //Block Scope
        let name = 'Jook';
        console.log(`${name} lives in ${local}`);
    }
}

스코프 주요 규칙

1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만, 반대는 불가하다.

• 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용가능.
• 안쪽 스코프에서 선언한 식별자는 바깥쪽 스코프에서 사용불가능.

let global_var = "Global";
{
    let local_var = "Local";
    console.log(`${global_var} can be seen in here`);//바깥쪽 Scope변수 참고가능.
}
console.log(local_var);//안쪽 Scope변수는 ReferenceError발생.

 

let global_var = "Global";
{
    var local_var = "Local";//var 키워드로 변수 선언시 블록 외부에서도 접근가능(function block은 예외) 
    //Hoisting 참고
    console.log(`${global_var} can be seen in here`);//바깥쪽 Scope변수 참고가능.
}
console.log(local_var);//Local 출력.

[Hoisting이란?]

 

2. 스코프는 중첩이 가능하다.

• 스코프는 마치 중첩된 울타리와도 같다.

3. 전역 스코프와 지역 스코프.

• 바깥쪽 스코프를 전역 스코프(Global Scope)라고 한다.
• 그외는 지역 스코프(Local Scope)라고 한다.

4. 지역 변수는 전역 변수보다 우선순위가 더 높다.

• 전역 스코프에서 선언한 변수는 전역변수.
• 지역 스코프에서 선언한 변수는 지역변수.
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

{
    let variable = "외부";
    {
    	let variable = "내부";
        console.log(variable);//내부
    }
    console.log(variable);//내부
}

스코프의 종류

• 블록 스코프와 함수 스코프가 있음.
• 화살표 함수는 함수 스코프가 아니다. 블록 스코프로 취급한다.

 

스코프와 var, let, const 키워드

• 변수 선언 키워드 세가지의 차이점과 scope 유효 범위를 알아보자.

keyword	const	let	var
global scope	N	N	Y
function scope	Y	Y	Y
block scope	Y	Y	N
재할당 가능 여부	N	Y	Y

• 블록 스코프 안에서 let과 const키워드로 선언한 변수는 해당 스코프 안에서만 참조 가능.
• var 의 경우 블록 스코프를 무시하고 스코프 울타리 밖에서도 접근 가능하다. 
• var는 Only 함수 스코프만 따른다.
  => 예측가능한 코드를 위해 let,const 사용 권장!

 

주의점

• window 전역 객체는 오직 브라우저에만 존재하는 객체이다.
  • 브라우저의 창(window)를 의미하는 객체이다.
  • 별개로 전역 영역을 담고 있음.
  • 함수 선언식으로 함수를 선언하거나 var 키워드로 변수를 선언하면 window객체에 속해진다.

//web browser에서 실행된다고 가정!
var a = 'a';
let b = 'b';

window.a; /* "a" */
window.b; /* undefined */

• 전역 변수는 최소화 하라.
  • 전역 변수는 어디서든 접근이 가능하므로 예상치못한 side effect가 생길 수 있다.
  • 전역 변수를 var로 선언해서 브라우저의 내장기능을 못하게 만들 수 있음.

• 선언 없는 변수 할당 금지.
  • 선언 없이 변수를 할당할 경우 해당 변수는 var로 선언한 전역 변수 처럼 취금.
  • 실수 방지를 위해 Strict mode 사용가능.
    • js파일 상단에 'use strict' 입력.
    • StrictMode는 브라우저가 보다 엄격하게 동작하도록 만들어줌.
    • "선언 없는 변수 할당"의 경우도 에러로 판단해준다.

 

[참고 https://hanamon.kr/javascript-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%EB%B3%80%EC%88%98%EC%84%A0%EC%96%B8%ED%82%A4%EC%9B%8C%EB%93%9C-%EC%B0%A8%EC%9D%B4%EC%A0%90/]