💡Scope
📌예제로 알아보는 Scope
☑️예제 1
- 콘솔에 순서대로 출력되는 결과는?
let username = 'Kim Hosik';
if (username) {
let message = `Hello, ${username}!`;
console.log(message); // 1
}
console.log(message); // 2- 1번 :
Hello, Kim Hosik!
: 5번 줄에서 message 를 출력할 때, 4번 줄의 username 을 중괄호(블럭) 바깥에서 가져왔으므로 정상적으로 출력된다. - 2번 :
Uncaught ReferenceError: message is not defined at <anonymous>:8:13
: 8번 줄에서는 message 라는 변수 자체가 중괄호(블럭) 안쪽에서 선언되었으므로, 바깥쪽에서는 접근 불가하여 ReferenceError 가 된다.☑️예제 2
- 콘솔에 순서대로 출력되는 결과는?
let greeting = 'Hello';
function greetSomeone () {
let firstName = 'Hosik';
return greeting + ' ' + firstName;
}
console.log(greetSomeone()); // 1
console.log(firstName); // 2
- 1번 :
Hello Hoisk
: greeting 변수는 바깥에 정의되어 있으므로, 함수 안쪽에서 사용할 수 있다.
: greeting 변수와 firstName 변수의 조합에 의해 'Hello Hosik' 문자열을 반환한다. - 2번 :
Uncaught ReferenceError: firstName is not defined at <anonymous>:8:13
: firstName 변수는 함수 안쪽에 정의되어 있으므로 함수 바깥쪽에서는 접근이 불가하여 ReferenceError 가 된다.☑️예제 3
- 콘솔에 순서대로 출력되는 결과는?
let name = '김코딩'; // 전역 변수
function showName() {
let name = '김호식'; // 지역 변수
console.log(name); // 1
}
console.log(name); // 2
showName();
console.log(name); // 3-
1번 : 김호식
: 함수 안에서 선언한 name 이라는 지역 변수에 접근
: 변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name 이 출력된다
: 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 variable shadowing 이라고 한다. -
2번 : 김코딩
: 1번 줄에서 전역 변수로 선언된 name을 가져온다.
: Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다. -
3번 : 김코딩
: 1번 줄에서 전역 변수로 선언된 name 을 가져온다.
: Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다.☑️예제 4
- 콘솔에 순서대로 출력되는 결과는?
let name = '김코딩'; // 전역 변수
function showName() {
name = '김호식'; // 지역 변수
console.log(name); // 1
}
console.log(name); // 2
showName();
console.log(name); // 3-
1번 : 김호식
: 함수 안에서 선언한 name 이라는 지역 변수에 접근
: 변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name 이 출력된다.
: 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 variable shadowing 이라고 한다. -
2번 : 김코딩
: 1번 줄에서 전역 변수로 선언된 name 을 가져온다.
: Scope 규칙에 의해 showName 함수 안쪽에 선언된 지역 변수 name 에는 접근 불가하다. -
3번 : 김호식
: let 키워드를 사용한 선언이 존재하지 않으므로, '김호식'이라는 값으로 할당하고 있는 name 변수는 전역에 선언된 name 변수를 그대로 사용하겠다는 의미이다.
: showName 함수가 실행되기 전에는 '김코딩'을 출력하고, 그 이후에는 전역 변수 name 으로 값이 바뀌기 때문에 3번은 '김호식'을 출력
📌Scope란?
- 변수에 접근할 수 있는 범위가 존재하며, 이 범위를 Scope라고 한다.
- 중괄호(블럭) 안쪽에 변수가 선언되었는지, 바깥쪽에 변수가 선언되었는지가 중요하다.
- 변수의 접근 범위는 함수에 의해 나뉘어지기도 한다.
- 바깥쪽 Scope 에서 선언한 변수는 안쪽 Scope 에서 사용 가능하다.
- 안쪽에서 선언한 변수는 바깥쪽 Scope 에서 사용 불가하다.
✔️Scope 유효 범위
-
가장 바깥쪽의 Scope는 Global Scope(전역 스코프)라고 부른다.
-
전역이 아닌 다른 Scope 는 Local Scope(지역 스코프)라고 부른다.
-
Global Scope(전역 스코프)에서 선언한 변수는 전역 변수이다.
-
Local Scope(지역 스코프)에서 선언한 변수는 지역 변수이다.
-
변수 접근 규칙에 다른 유효 범위
- 규칙 1. 안쪽 Scope 에서 바깥쪽 Scope 로는 접근할 수 있지만 반대는 불가능하다.
- 규칙 2. Scope 는 중첩이 가능하다.
- 규칙 3. 지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다.
📌Scope의 종류
✔️Block Scope
: 중괄호를 기준으로 범위 구분
- function 키워드를 사용해도, 화살표 함수에 해당하면 Block Scope 로 취급한다.
☑️예제 1
- 콘솔에 출력되는 결과는?
for (let i = 0; i < 5; i++) {
console.log(i) // 다섯 번 반복한다.
}
console.log('final i:', i); // 1- 1번 : 5
: var 키워드는 Block Scope 를 무시하고 Funtion Scope 만 따르므로, Block 범위를 벗어나도 사용 가능하다.
Function Scope
: 함수 선언식 및 함수 표현식으로 범위 구분
- function 키워드를 사용하면 Function Scope
- 함수의 실행부터 종료까지가 범위에 해당된다.
- 함수 내에 선언 키워드가 ㅅ없는 선언은, 함수의 실행 전까지 선언되지 않은 것으로 취급한다.
📌var, let, const
var 키워드
- Block Scope 를 무시하고 Function Scope 만 따른다.
- 화살표 함수의 Block Scope 는 무시하지 않는다.
- Block 단위로 Scope 를 구분했을 때 일반적으로 들여쓰기가 적용되어 시각적으로 분명하기 때문에 더 예측 가능한 코드 작성이
가능하므로, let 키워드 사용을 권장한다. - Function Scope 의 최상단에 선언되며, 선언 키워드 없는 선언은 최고 Scope 에 선언된다.
- 재선언을 해도 에러가 나지 않아 사람의 실수를 찾기 어렵다.
let 키워드
- Block Scope 를 따른다.
- 불필요한 재선언을 방지한다.
const 키워드
- 값이 변하지 않는 상수를 정의할 때 사용한다.
- Block Scope 를 따른다.
- 값의 변경을 최소화하여 의도하지 않는 값의 변경을 막을 수 있으므로, 값을 새롭게 할당할 일이 없다면 const 키워드의 사용을 권장한다.
- 값을 재할당하는 경우, TypeError 를 낸다.
| var | let | const | |
|---|---|---|---|
| 유효 범위 | 함수 스코프 | 블록스코프 및 함수 스코프 | 블록스코프 및 함수 스코프 |
| 값 재할당 | 가능 | 가능 | 불가능 |
| 재선언 | 가능 | 불가능 | 불가능 |
