TIL: 스코프 (Scope), var & let & const

스코프란?

식별자 접근 규칙에 따른 유효 범위

스코프의 정의는 "식별자 접근 규칙에 따른 유효 범위" 이다.

식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.

범위는 중괄호(블록) 또는 함수에 의해 나누어지고 그 범위를 각각 Block Scope, Fucntion Scope 라고 부른다.

 

스코프의 주요 규칙

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

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

반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다.

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

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

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

가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고 부른다.

전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope)이다.

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

전역 스코프에서 선언한 변수는 전역 변수이다.

지역 스코프에서 선언한 변수는 지역 변수이다.

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

 

스코프의 종류

스코프의 두가지 종류: 블록스코프와 함수 스코프가 있다.

화살표 함수는 함수 스코프가 아니다. 주의해야할 점은 화살표 함수는 블록 스코프로 취급된다.

1. var : 함수 레벨 스코프 (function-level scope) : 블록 단위로 스코프를 구분할때  let키워드의 사용이 권장됨 

why? 훨씬 더 예측 가능한 코드를 작성할 수 있다.

function func() {
	if (true) {
    	var a = 5;
        console.log(a); // 5
    }
    console.log(a); // 5
}

func(); // 5
console.log(a); // ReferenceError: a is not defined

2. let, const : 블록 레벨 스코프 (block-level scope)

function func() {
	if (true) {
    	let a = 5;
        console.log(a); // 5
    }
    console.log(a); // ReferenceError: a is not defined
}

console.log(a); // ReferenceError: a is not defined

 

스코프와 var, let, const 

변수 선언 키워드 세가지의 차이점, 그리고 스코프 유효 범위는 다음과 같다.

 

const 키워드

유효범위: 블록스코프 

값 재할당: 불가능

재선언: 불가능

const name = 'javascript';
console.log(name); // javascript

const name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

let 키워드

유효범위: 블록스코프

값 재할당: 가능

재선언 : 불가능

let name = 'javascript';
console.log(name); // javascript

let name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name); // vue

 

var 키워드

유효범위: 함수 스코프

값 재할당: 가능

재선언: 가능

var name = 'javascript';
console.log(name); // javascript

var name = 'react';
console.log(name); // react

 

스코프와 변수 선언의 주의점

window 객체

var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.

-> 때문에 전역 변수는 최소화 해야한다.

전역변수는 어디서든 접근 가능한 변수라서 모든 변수를 전역변수로 만들면 편리하게 사용 할 수 있다고 생각할 수 있지만, 수많은 다른 함수와 로직이 같은 이름으로 전역 변수를 선언하려고 하면 문제가 발생하여 side effect가 발생하게되기 때문에 전역변수를 최소화 해야한다.

따라서 let, const를 주로 사용해야 한다.

또한 선언 없이 변수를 할당하면 var로 선언한 전역 변수처럼 취급되므로 선언 없이는 변수 할당을 금지해야함.

 

 

Reference

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/

[JavaScript] 스코프(Scope)와 변수 선언 (var, let, const 키워드 차이점) - 하나몬

 

https://80000coding.oopy.io/e1721710-536f-43f2-823b-663389f5fbfa

var, let, const 차이점