JAVASCRIPT 스코프(Scope) - 2. 함수 스코프
스코프(scope)란?
▶ 스코프(scope)는 변수나 함수가 유효한 범위를 의미합니다.
즉, 스코프는 코드의 어떤 부분에서 변수를 참조할 수 있는지를 결정하는 것으로
오늘은 자바스크립트에 있는 스코프 유형에 대해 알아보겠습니다.
2. 함수 스코프(Function Scope)
▶ 함수 스코프(Function Scope)는 자바스크립트에서 변수가 함수 내부에서만 작동하는 스코프를 의미합니다.
함수 스코프 내에서 선언된 변수는 함수가 실행되는 동안에만 존재하며, 함수 외부에서는 접근할 수 없으며, 주로 var 키워드로 선언된 변수에 적용됩니다.
1
2
3
4
5
6
function test() {
var functionVar = "I'm a function variable";
console.log(functionVar); // "I'm a function variable"
}
test();
console.log(functionVar); // ReferenceError: functionVar is not defined
함수 스코프(Function Scope)의 특징
1. 함수 내부에서만 유효
: 함수 내부에서 선언된 변수는 해당 함수가 실행될 때 생성되고, 함수 실행이 종료되면 소멸되며, 함수 외부에서는 해당 변수에 접근할 수 없습니다.
2. 중첩 함수 가능
: 함수 내부에 다른 함수를 정의할 수 있으며, 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 이 때, 내부 함수의 스코프는 외부 함수의 스코프를 포함합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function outerFunction() {
var outerVar = "I'm an outer variable";
function innerFunction() {
var innerVar = "I'm an inner variable";
console.log(outerVar); // "I'm an outer variable"
console.log(innerVar); // "I'm an inner variable"
}
innerFunction();
console.log(outerVar); // "I'm an outer variable"
console.log(innerVar); // ReferenceError: innerVar is not defined
}
outerFunction();
console.log(outerVar); // ReferenceError: outerVar is not defined
3. 호이스팅
: var 키워드로 선언된 변수는 함수의 최상단으로 호이스팅됩니다. 따라서 함수 내 어디서든 변수에 접근할 수 있지만, 실제 값 할당은 변수 선언 이후에 이루어집니다.
호이스팅(Hoisting) - 자바스크립트에서 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 동작
1
2
3
4
5
6
7
function hoistingExample() {
console.log(hoistedVar); // undefined
var hoistedVar = "I'm a hoisted variable";
console.log(hoistedVar); // "I'm a hoisted variable"
}
hoistingExample();
- 첫 번째 console.log(hoistedVar);에서는 hoistedVar가 undefined로 출력됩니다. 이는 hoistedVar 선언이 함수의 최상단으로 호이스팅되었기 때문입니다.
- 두 번째 console.log(hoistedVar);에서는 hoistedVar가 값이 할당된 후이므로 “I’m a hoisted variable”이 출력됩니다.
함수 스코프의 장점과 단점
장점
1. 캡슐화
: 함수 내부에서만 변수를 사용할 수 있으므로, 코드의 가독성과 유지보수성이 높아집니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCounter() {
var count = 0; // 함수 내부 변수로 캡슐화
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
}
};
}
var counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
// 외부에서는 count 변수에 접근할 수 없음
// console.log(count); // ReferenceError: count is not defined
2. 네임스페이스 관리
: 전역 스코프를 오염시키지 않기 때문에 변수 이름 충돌을 피할 수 있습니다.
1
2
3
4
5
6
7
8
9
var name = "Global";
function setName() {
var name = "Local"; // 함수 내부 변수로 전역 변수와 충돌하지 않음
console.log(name); // "Local"
}
setName();
console.log(name); // "Global"
단점
1. 블록 스코프 미지원
: var 키워드는 블록 스코프를 지원하지 않습니다. 이는 let과 const가 도입되기 전까지는 블록 스코프를 사용할 수 없었음을 의미합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function testVar() {
if (true) {
var x = 10; // var는 미지원으로 블록 스코프가 아닌 함수 스코프
}
console.log(x); // 10
}
testVar();
// let을 사용한 블록 스코프 예시
function testLet() {
if (true) {
let y = 20; // let을 사용한 블록 스코프
console.log(y); // 20
z = 40; // 재할당 가능
}
}
testLet();
// const를 사용한 블록 스코프 예시
function testConst() {
const z = 30; // const를 사용한 블록 스코프
console.log(z); // 30
z = 40; // 재할당 불가능
}
testConst();
// console.log(z); // ReferenceError: z is not defined
- 위의 let을 사용한 예시에서 y 변수는 let 키워드를 사용하여 블록 스코프로 선언되었기 때문에, if 블록 외부에서는 접근할 수 없습니다.
- 위의 const를 사용한 예시에서 z 변수는 const 키워드를 사용하여 선언되었기 때문에 if 블록 외부에서는 접근할 수 없습니다.
- 이 때, let은 변수값의 재할당이 가능하지만, const는 재할당이 불가능하다는 차이가 있습니다.
이렇게 오늘은 자바스크립트의 스코프(scope) 중 함수 스코프에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋을 것 같네요.
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!