범위라는 의미를 가진 Scope는 Javascript에서도 비슷한 의미로 사용된다.
변수가 접근 할 수 있는 범위를 Javascript에서는 Scope라고 하는데
Scope에는 Global Scope(전역스코프) Local Scope(지역스코프)가 존재한다. Local Scope에는 Function Scope 와 Block Scope로 구성되어있다.
Javascript에서 변수를 선언할 때는 var, let, const 를 사용한다.
셋 모두 변수를 선언 할 수 있지만 각각의 역할들이 조금씩은 다르다. 전에 공부한 let과 const의 차이
ES6에서 달라진점에서도 볼 수 있었던 내용이므로 간략하게 복습해보고 넘어갈 예정이다. 우선 var키워드로 선언된 변수는 같은 스코프 내에선 중복선언이 가능해진다.
ES6전까지는 var로 모든변수를 선언했었다고 한다. 새로도입된 let, const 키워드는 중복선언이 불가능하다.
var a = 1 // global scope
function test () { // local scope (function scope)
var a = 10
var a = 20
console.log(a)
}
test() // 20
console.log(a) // 1
함수 스코프 안에 있는 변수 a가 재할당되어 값이 출력되는것을 볼 수 있는데 이는
의도치 않은 변수재할당을 야기 할 수 있다. 같은 함수식으로 let,const 키워드로 작성해보면
let a = 1 // global scope
function test () { // local scope (function scope)
let a = 10
let a = 20
console.log(a)
}
test() // 20
console.log(a) // 1
"SyntaxError: Identifier 'a' has already been declared 라는 에러를 출력한다.
<Scope Chain>
함수스코프 안에 변수가 없으면 어떤값이 출력될까?
let a = 1 // global scope
function test () { // local scope (function scope)
console.log(a)
}
test() // 1
console.log(a) // 1
전역스코프에 할당된 변수 a가 출력되는데 test라는 함수내에 할당된 변수가 없으면 상위스코프의 변수를
참조한다. 단, inner -> outer 간 참조는 가능하나 outer -> inner는 불가능하다.
function test () { // local scope (function scope)
var a = 1
console.log(a)
}
test() // 1
console.log(a) // "ReferenceError: a is not defined
a가 없다고 오류를 반환한다.
여기까지가 간단한? 스코프에 대해 공부한 내용이고 이 내용들을 이해하기 위해선
Variable Environment
Lexcial Environment
environmentRecord
outerEnvironmentReference 등등.. 정리해야 할 내용들이 한두개가 아니였다. 전에 간단하게 학습한 적이 있긴하지만 아직 머리속에 개념이 자리잡지 못한내용이다. 따로 빼서 정리할 예정이다.
