1 개념
- JavaScript Scope
- 자바스크립트 스코프, 자바스크립트 유효범위
- JavaScript에서 변수, 객체, 함수의 접근 가능 범위
2 전역 변수
- 전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
<syntaxhighlight lang="javascript"> var a = 1; // 전역 변수 function printNumber() {
console.log(a); // 1
} printNumber(); </source>
- → printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능
웹에서 전역변수는 window객체에 소속됨
3 지역 변수
- 함수 안에서만 접근 가능한 변수
<syntaxhighlight lang="javascript"> var a = 1; // 전역 변수
function printNumber() {
var a = 2; // 지역 변수 console.log(a); // 2
} printNumber(); </source>
- → printNumber함수 안에서 지역 변수 접근
<syntaxhighlight lang="javascript"> function printNumber() {
var a = 2;
}
printNumber(); console.log(a); // Uncaught ReferenceError: a is not defined(…) </source>
- → 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음
4 암묵적 전역 변수
- var 키워드 없이 변수를 생성하면 함수 안이라도 전역변수로 생성 됨
<syntaxhighlight lang="javascript"> function foo() {
bar = "Hello";
} foo(); console.log(bar); // Hello </source>
- → foo 함수 안에서 var없이 bar변수가 생성되었음. 함수의 안에 변수가 있음에도 불구하고 함수 밖에서 bar를 사용하여 정상 출력하였음
5 변수 소멸 (Variable Lifetime)
- 전역변수는 애플리케이션이 살아 있는 한 존재함. 즉 웹페이지가 살아 있는 한 존재함.
- 지역변수는 함수 생성시 함께 생성되었다가 함수 소멸시 함께 소멸됨.
6 중괄호의 영향
- 자바스크립트에서 중괄호에 의한 지역변수 영향은 함수에 한함
<syntaxhighlight lang="javascript"> function foo() {
for(var i = 0; i < 10; i++) {
var bar = "john";
}
console.log(bar);
} foo(); </source>
- → 자바스크립트에서는 bar에 할당된 john이 중괄호로 쌓여진 for문 안의 값을 외부에서 출력이 가능함
<syntaxhighlight lang="c">
- include <stdio.h>
void main() {
if (1) {
int a = 1;
}
printf("%d", a); // error: ‘a’ undeclared (first use in this function)
} </source>
- → C언어에서 a값을 중괄호로 쌓여진 if문 외부에서 a값을 출력하면 에러가 발생함
- 중괄호 안 영역에서만 동작 하도록 하려면
let,const을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
<syntaxhighlight lang="javascript"> function foo() {
if (1) {
let a = 1;
}
console.log(a); // Uncaught ReferenceError: a is not defined
}
foo(); </source>
- → let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌
<syntaxhighlight lang="javascript"> function foo() {
if (1) {
const a = 1;
}
console.log(a); // Uncaught ReferenceError: a is not defined
}
foo(); </source>
- → const로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌
7 같이 보기
8 참고
-
{{comment.page_title}} ―{{comment.name}}