JavaScript 스코프

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">

1. 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 참고

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
• http://www.w3schools.com/js/js_scope.asp