📌 JavaScript에서의 Scope
- Scope 즉, 유효범위란 변수와 매개변수의 접근성과 생존 기간을 나타낸다. 해당 변수나 매개변수가 어느 범위 내에서만 사용이 가능한지를 의미한다.
- 유효범위는 크게 전역범위, 지역범위 두 가지로 나뉘어진다. 전역범위는 스트립트 전체에서 어디서든 참조되어 사용할 수 있는 범위를 가지고 지역범위는 정의된 함수 안에서만 참조되어 사용할 수 있습니다. 쉽게말해 전역범위는 정말 전체에서 호출하여 사용할 수 있고 지역범위는 한정된 지역 내에서만 사용할 수 있습니다.
📌 Scope의 특징 4가지
함수 단위의 유효범위
위의 그림에서 Global scope는 전역변수로서 전체적으로 사용이 가능하다. first() scope은 first함수 내에서만 사용할 수 있는 지역변수이다. second() scope는 second함수 내에서만 사용할 수 있는 지역변수이다. second 함수 내에 선언된 변수는 first함수에서 사용할 수 없다. 이렇게 함수 단위의 유효범위가 존재한다.
var 키워드 생략
function getTotal() {
total = 100
return total
}
getTotal() //100
total = 200
console.log(total) //200JavaScript에서는 var 키워드의 경우 생략할 수 있다. 다만 var키워드를 생략할 경우 전역변수로 선언되어 특정 함수 내에서 선언되었어도 함수 밖에서 사용할 수 있다. 위의 예시에서 getTotal()에 total 변수를 var선언 없이 선언하였다. 해당 변수는 전역변수로 선언되어 getTotal()밖에서 total에 값을 대입할 수 있게되어 total값을 수정할 수 있게된다.
변수명 중복
function greeting1() {
a = "Hello"
console.log(`greeting1 = ${a}`) //'greeting1 = Hello'
}
function greeting2() {
var a = "Hi"
console.log(`greeting2 = ${a}`) //'greeting2 = Hi'
}
greeting1()
greeting2()
console.log(a) //'Hello'
a = "Hey"
console.log(a) //'Hey'Javascript에서는 변수명이 중복되어도 에러가 나지 않는다. 같은 변수명이 여러 개 있을 때에는 가장 가까운 범위의 변수를 참조하여 코드가 실행된다. 위 코드를 보면, greeting1()에서 a가 전역변수로 선언되었는데 greeting2()에서는 var a로 지역변수가 선언된 것을 확인할 수 있다. greeting2()에서는 동일한 변수명을 가지고 있지만 가장 가까운 변수가 지역변수 a이므로 해당 a의 값을 참조하여 실행된다.
이후에 function 밖에서 a를 콘솔을 이용하여 출력하였을 때는 지역변수가 아닌 greeting1()에서 선언된 전역변수가 출력되는 것을 확인할 수 있다.
렉시컬 특성
function f1(){
var a = 10
f2()
}
function f2(){
return a //ReferenceError: a is not defined
}
f1() //ERROR!!렉시컬 특성이란 함수 실행 시 유효범위를 함수 실행 환경이 아닌 함수 정의 환경으로 참조하는 특성입니다. 위의 코드에서 f1()에 a변수를 선언하고 f2()함수를 호출했다고해서 f2()함수에서 f1()에 선언된 a를 사용할 수 없다. 렉시컬 특성으로 인해 함수 f2가 실행될 때가 아닌 정의될 때의 환경을 보기 때문에 a 변수를 찾을 수 없다.
📌 참고
