이권석

이권석

Studying Design & Data

[JavaScript] var VS let, const

스코프(scope)

함수가 실행될 때, 함수 내에서 변수에 대한 접근이 어떻게 되든지를 나타내는 용어
(함수의 실행 컨텍스트 내에서의 변수 환경이 무엇인지)스코프는 함수를 기반으로 한 용어
쉽게 말하면, 변수에 접근할 수 있는 범위를 나타냄


컨텍스트(context)

this 키워드 값이 무엇인지를 나타내는 용어
현재 실행 컨텍스트 내에서 어떤 객체를 참조하고 있는지를 의미
컨텍스트는 객체를 기반으로 한 용어


함수스코프 VS 블록스코프

1. 함수스코프(var)

JS는 기본적으로 함수스코프를 따르는 언어 → 새로운 함수가 생성될때마다 새로운 스코프 발생
(함수 몸체에 선언한 변수는 해당 함수 안에서만 접근할 수 있다)
함수스코프 === 지역스코프 로 보면 된다

// 함수스코프: 조건문 생성시

if (true) {
  var a = '출력'
}
console.log(a)   

[console.log]

출력

해당 코드에서는 함수를 선언하지 않았기 때문에(그냥 조건문만 있음) 새로운 스코프가 형성X
스코프 형성X → 동일한 실행 context내에 존재하는 의미.
이런 경우, 어디서든 ‘a’ 변수에 접근 가능

// 함수스코프: 함수 생성시

function func() {
  var a = '출력'
}
console.log(a)

[console.log]

Error : Uncaught ReferenceError: a is not defined

해당 코드에서는 함수를 선언함 → func()함수에 대한 새로운 실행 context 생성됨
내부에 존재하는 변수환경에 a 변수가 저장
함수 외부에서 a에 접근하려고 하면 스코프가 다르기 때문에 접근이 불가능
함수 외부: global scope / 함수 내부: func() 스코프 → 부모스코프는 자식스코프에 간섭X


2. 블록스코프(let, const)

블록스코프: 블록 {}이 생성될 때마다 새로운 scope가 형성되는 것을 의미
원래 JS는 함수scope를 따르지만, let과 const 키워드 등장 → 블록 스코프 형성하는 것도 가능
그래서 ES6 부터는 변수선언할 때 var 를 지양하고 let: 변수, const: 상수 사용을 권장

// 함수스코프: 함수 생성시

function func() {
  for (var i = 0; i < 5; i++) {
    console.log(i)
  }
  console.log('final', i)
}
func()

[console.log]

0
1
2
3
4
final 5


3. 이제는 var 말고 let, const 사용하자

함수스코프는 다음과 같은 위험이 있다


출처

velog : fromzoo 블로그

참고