5.1 글로벌 스코프
스코프(scopes)는 프로그램의 다양한 부분에서 변수와 함수의 접근성을 결정해. JavaScript에는 글로벌, 로컬, 블록 이렇게 세 가지 주요 스코프가 있어. 이런 스코프에 대한 이해는 데이터를 효과적으로 관리하고 코드의 오류를 방지하는 데 중요해.
글로벌 스코프는 어떤 함수나 코드 블록 밖에서 선언된 모든 변수와 함수를 포함해. 이 변수와 함수는 코드의 어느 곳에서나 접근할 수 있어.
예제 1: 글로벌 변수 선언
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // 글로벌 변수에 접근
}
showGlobalVar(); // 결과: I am a global variable
console.log(globalVar); // 글로벌 변수에 접근
예제 2: 글로벌 함수
여기서 변수 globalVar와 함수 globalFunction()는 글로벌 스코프에 선언되어 코드의 어느 곳에서나 접근할 수 있어.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // 결과: I am a global function
5.2 로컬 스코프
로컬 스코프는 함수 내부에 선언된 변수와 함수를 포함해. 이 변수와 함수는 해당 함수 내에서만 접근할 수 있고, 그 외부에서는 접근할 수 없어.
예제 3: 로컬 변수 선언
이 예에서는 변수 localVar가 함수 localScopeExample() 내에 선언되어 외부에서는 접근할 수 없어:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // 로컬 변수에 접근
}
localScopeExample(); // 결과: I am a local variable
console.log(localVar); // 오류: localVar is not defined
예제 4: 로컬 함수
이 예에서는 함수 innerFunction()가 함수 outerFunction() 내에 선언되어 outerFunction() 외부에서는 접근할 수 없어:
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // 로컬 함수에 접근
}
outerFunction(); // 결과: I am a local function
console.log(innerFunction()); // 오류: innerFunction is not defined
5.3 블록 스코프
블록 스코프는 let과 const를 사용하여 중괄호 {}로 제한된 코드 블록 내에서 선언된 변수를 포함해. 이 변수는 해당 블록 내에서만 접근할 수 있고, 그 외부에서는 접근할 수 없어.
예제 5: let으로 변수 선언
이 예에서는 변수 blockVar가 if 블록 내에 선언되어 외부에서는 접근할 수 없어:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // 블록 변수에 접근
}
console.log(blockVar); // 오류: blockVar is not defined
예제 6: const로 변수 선언
이 예제에서는 변수 i가 for 블록 내에 선언되어 외부에서는 접근할 수 없어:
for (const i = 0; i < 3; i++) {
console.log(i); // 블록 변수에 접근
}
console.log(i); // 오류: i is not defined
블록 스코프의 특징
예제 7: 중첩된 블록
이 예제에서는 변수 innerVar가 내부 블록에서만 접근할 수 있고, 변수 outerVar는 외부와 내부 블록 모두에서 접근할 수 있어:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // 외부 블록 변수에 접근
console.log(innerVar); // 내부 블록 변수에 접근
}
console.log(outerVar); // 외부 블록 변수에 접근
console.log(innerVar); // 오류: innerVar is not defined
}
5.4 다양한 스코프의 상호작용
예제 8: 글로벌과 로컬 스코프의 상호작용
이 예제에서는 함수 scopeExample()이 글로벌 변수 globalVar와 자신의 로컬 변수 localVar에 접근할 수 있어:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // 글로벌 변수에 접근
console.log(localVar); // 로컬 변수에 접근
}
scopeExample(); // 결과: I am a global variable
// I am a local variable
console.log(globalVar); // 글로벌 변수에 접근
console.log(localVar); // 오류: localVar is not defined
예제 9: 화살표 함수와 스코프
이 예제에서는 화살표 함수 arrowFunction()이 글로벌 변수 globalVar와 자신의 로컬 변수 localVar에 접근할 수 있어:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // 글로벌 변수에 접근
console.log(localVar); // 로컬 변수에 접근
};
arrowFunction(); // 결과: I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // 글로벌 변수에 접근
console.log(localVar); // 오류: localVar is not defined
GO TO FULL VERSION