스코프(scope)란 변수에의 접근성과 생존기간을 의미한다. 이는 달리 말하자면 변수의 참조 범위를 뜻하기도 한다.
JS의 스코프는 전역변수와 지역변수로 나뉠 수 있는데, 전역변수는 의미 그대로 전역에서, 코드 어디에서라도 참조할수 있는 변수를 의미하며 지역변수는 정의된 함수 내에서만 참조할 수 있다. 모든 변수는 스코프를 가지며, 전역변수는 전역 스코프를, 지역변수는 지역 스코프를 가진다.
JS의 유효범위는 다음 4가지 특징을 지닌다.
함수단위의 유효범위란 함수 코드 블럭 내에서 선언된 함수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않다는 의미이다.
또한 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로 선언된 변수가 아니라면 변수명 중복을 허용하므로 에러메시지를 발생시키지 않는다. 전역변수를 반드시 사용하여야 할 사안이 아니라면 지역변수를 사용하는 것이 좋다. 변수의 스코프는 좁을수록 안전하다.
function pizza(){
domino = 'is good'
}
pizza()
console.log(domino) // 'is good'
위의 함수에서 domino라는 변수는 선언되지 않고 할당만 되었다. pizza함수 안에서 domino라는 변수는 없고, 그 상위지역(이경우엔 전역)에서 또한 domino라는 변수를 찾지 못했다면 JS는 암묵적으로 domino라는 변수를 전역변수로 선언한다.
자바스크립트는 함수가 선언된 시점에서 유효범위를 갖는다.
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를 참조하게 된것이다.