스코프란 “변수와 함수에 접근할 수 있는 범위” 를 의미한다.
자바스크립트에서 스코프는 크게 전역 스코프(Global Scope), 함수 스코프(Function Scope), 블록 스코프(Block Scope)로 구분된다.
전역 스코프에 선언된 변수는 어디서든 접근 가능하다.
var globalVar = "전역 변수";
function checkScope() {
console.log(globalVar); // "전역 변수" 출력
}
checkScope();
console.log(globalVar); // "전역 변수" 출력
특정 함수에 해당하는 스코프로 해당 함수 자신과 하위 함수에서만 접근이 가능하다.
자바스크립트에서 지역 스코프는 함수 스코프(Function Scope) 또는 블록 스코프(Block Scope)를 통칭한다.
함수 내부에서 선언된 변수는 그 함수 내에서만 유효하며, 외부에서는 접근할 수 없다.
function greet() {
const message = 'Hello!';
console.log(message); // Hello!
}
greet();
console.log(message); // ❌ ReferenceError
var 키워트도 함수 스코프를 따른다.
function test() {
if (true) {
var x = 5;
}
console.log(x); // 5 (var는 함수 스코프)
}
let, const 키워드로 선언된 변수는 블록({}) 내부에서만 접근 가능하다.
if (true) {
const message = 'Block scope!';
let count = 3;
console.log(message); // Block scope!
}
console.log(message); // ❌ ReferenceError
console.log(count); // ❌ ReferenceError
자바스크립트는 안쪽 스코프에서 바깥 스코프로 거슬러 올라가며 변수 참조를 탐색합니다.
const a = 1;
function outer() {
const b = 2;
function inner() {
const c = 3;
console.log(a, b, c); // 1 2 3
}
inner();
}
outer();
자바스크립트는 렉시컬 스코프(Lexical Scope) 를 따릅니다. 즉, 함수가 어디서 호출되었는지가 아니라, 어디서 선언되었는지에 따라 스코프가 결정된다.
const value = 'global';
function print() {
console.log(value);
}
function run() {
const value = 'local';
print(); // global
}
run();
자바스크립트에서 스코프란 무엇인가요?
스코프란 특정 변수나 함수에 접근할 수 있는 범위(scope)를 말합니다.
자바스크립트에서는 전역 스코프, 함수 스코프, 블록 스코프가 있으며, 변수나 함수가 선언된 위치에 따라 접근 가능한 범위가 달라진다.
함수 스코프와 블록 스코프의 차이를 설명해주세요.
함수 스코프는 함수 전체를 범위로 가지며, var로 선언된 변수는 함수 내 어디서든 접근할 수 있습니다.
반면, 블록 스코프는 중괄호 {} 로 구분된 코드 블록을 범위로 하며, let, const로 선언된 변수는 해당 블록 내부에서만 접근 가능하다.
var, let, const의 스코프 차이를 설명해보세요.
var는 함수 스코프를 따르고, let과 const는 블록 스코프를 따른다.
따라서 var로 선언한 변수는 블록 외부에서도 접근이 가능하지만, let과 const는 블록 내부에서만 유효하다.
또한 const는 let과 다르게 재할당이 불가능하다. 그래서 선언과 동시에 초기화가 필요하다.
렉시컬 스코프란 무엇인가요?
자바스크립트는 렉시컬 스코프를 따른다.
이는 함수가 어디서 호출되었는지가 아닌, 선언된 위치를 기준으로 스코프가 결정된다.
따라서 함수 내부에서 외부 변수를 참조할 때는 호출 위치가 아닌 정의된 위치의 스코프 체인을 따라 탐색하게 된다..
이는 중첩된 함수에서 외부 함수의 변수에 접근할 수 있는 이유이기도 합니다.다음 코드에서 출력 결과를 설명해주세요.
const x = 'global';
function outer() {
const x = 'outer';
function inner() {
console.log(x);
}
inner();
}
outer();
출력 결과는 'outer'.
이는 자바스크립트의 렉시컬 스코프에 따라 inner 함수는 outer 함수 내부에서 정의되었기 때문에, x를 찾을 때 outer의 스코프를 먼저 확인하게 됩니다.