스코프(scope)란 변수에의 접근성과 생존기간을 의미한다. 이는 달리 말하자면 변수의 참조 범위를 뜻하기도 한다.
JS의 스코프는 전역변수와 지역변수로 나뉠 수 있는데, 전역변수는 의미 그대로 전역에서, 코드 어디에서라도 참조할수 있는 변수를 의미하며 지역변수는 정의된 함수 내에서만 참조할 수 있다. 모든 변수는 스코프를 가지며, 전역변수는 전역 스코프를, 지역변수는 지역 스코프를 가진다.
JS의 유효범위 특징
JS의 유효범위는 다음 4가지 특징을 지닌다.
함수단위의 유효범위(function level-scope)
함수단위의 유효범위란 함수 코드 블럭 내에서 선언된 함수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않다는 의미이다.
또한 ES6에 도입된 let으로 변수를 선언하면 박스단위의 유혀범위(box-level scope)를 사용할 수 있다.
// function-level scope
let brave_girls = 'rollin'
function k_pop(){
let brave_girls = 'just dirve'
console.log(brave_girls)
}
k_pop() // 'just drive'
console.log(brave_girls) // 'rollin'
// box-level scope
let chicken = 'nene'
{
let chicken = 'kyochon'
console.log(chicken) // 'kyochon'
}
console.log(chicken) // 'nene'변수명 중복 허용
글로벌 영역에 변수를 선언하면 어디에서든 참조가능한 전역변수가 된다. 전역변수는 전역객체(Globla Object) window의 property이다. 자바스크립트는 const로 선언된 변수가 아니라면 변수명 중복을 허용하므로 에러메시지를 발생시키지 않는다. 전역변수를 반드시 사용하여야 할 사안이 아니라면 지역변수를 사용하는 것이 좋다. 변수의 스코프는 좁을수록 안전하다.
암묵적 전역(implied globals)
function pizza(){
domino = 'is good'
}
pizza()
console.log(domino) // 'is good'위의 함수에서 domino라는 변수는 선언되지 않고 할당만 되었다. pizza함수 안에서 domino라는 변수는 없고, 그 상위지역(이경우엔 전역)에서 또한 domino라는 변수를 찾지 못했다면 JS는 암묵적으로 domino라는 변수를 전역변수로 선언한다.
Lexical Scoping(static scoping)
자바스크립트는 함수가 선언된 시점에서 유효범위를 갖는다.
let dismas = 'live'
function condition_dismas(){
console.log(dismas)
}
function kill_dismas(){
dismas = 'die'
condition_dismas();
}
kill_dismas() // 'die'condition_dismas함수를 실행하기 전에 dismas값을 재할당해서 변경해주어 변수 dismas의 값이 변경되었다.
let dismas = 'live'
function condition_dismas(){
console.log(dismas)
}
function kill_dismas(){
let dismas = 'die'
condition_dismas();
}
kill_dismas() // 'live'dismas변수를 kill_dismas함수 내부에서 선언후 할당해주자 결과값이 바뀌었다. 함수를 처음 선언하는 순간 함수 내부의 변수는 자기 스코프로부터 가장 가까운 상위 범위에 있는 변수를 참조하게 된다.
위는 condition_dismas함수 안의 dismas는 가장 가까운 상위지역인 젼역의 dismas를 참조했다. 그래서 kill_dismas안의 condition_dismas를 호출해도 kill_dismas함수 안의 지역변수로 되있는 dismas를 참조한게 아닌, 전역변수 dismas를 참조하게 된것이다.
