"JavaScript 스코프"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-source +syntaxhighlight))
 
(사용자 4명의 중간 판 14개는 보이지 않습니다)
6번째 줄: 6번째 줄:
==전역 변수==
==전역 변수==
*전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
*전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
<source lang="javascript">
<syntaxhighlight lang="javascript">
var a = 1; // 전역 변수
var a = 1; // 전역 변수
function printNumber() {
function printNumber() {
12번째 줄: 12번째 줄:
}
}
printNumber();
printNumber();
</source>
</syntaxhighlight>
:→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능
:→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능
{{인용문|웹에서 전역변수는 window객체에 소속됨}}
{{인용문|웹에서 전역변수는 window객체에 소속됨}}
18번째 줄: 18번째 줄:
==지역 변수==
==지역 변수==
*함수 안에서만 접근 가능한 변수
*함수 안에서만 접근 가능한 변수
<source lang="javascript">
<syntaxhighlight lang="javascript">
var a = 1; // 전역 변수
var a = 1; // 전역 변수


26번째 줄: 26번째 줄:
}
}
printNumber();
printNumber();
</source>
</syntaxhighlight>
:→ printNumber함수 안에서 지역 변수 접근
:→ printNumber함수 안에서 지역 변수 접근


<source lang="javascript">
<syntaxhighlight lang="javascript">
function printNumber() {
function printNumber() {
     var a = 2;
     var a = 2;
36번째 줄: 36번째 줄:
printNumber();
printNumber();
console.log(a); // Uncaught ReferenceError: a is not defined(…)
console.log(a); // Uncaught ReferenceError: a is not defined(…)
</source>
</syntaxhighlight>
:→ 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음
:→ 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음


==암묵적 전역 변수==
==암묵적 전역 변수==
*var 키워드 없이 변수를 생성하면 함수 안이라도 전역변수로 생성 됨
*var 키워드 없이 변수를 생성하면 함수 안이라도 전역변수로 생성 됨
<source lang="javascript">
<syntaxhighlight lang="javascript">
function foo() {
function foo() {
     bar = "Hello";
     bar = "Hello";
47번째 줄: 47번째 줄:
foo();
foo();
console.log(bar); // Hello
console.log(bar); // Hello
</source>
</syntaxhighlight>
:→ foo 함수 안에서 var없이 bar변수가 생성되었음. 함수의 안에 변수가 있음에도 불구하고 함수 밖에서 bar를 사용하여 정상 출력하였음
:→ foo 함수 안에서 var없이 bar변수가 생성되었음. 함수의 안에 변수가 있음에도 불구하고 함수 밖에서 bar를 사용하여 정상 출력하였음


==변수 소멸 (Variable Lifetime)==
==변수 소멸 (Variable Lifetime)==
*전역변수는 어플리케이션이 살아 있는한 존재함. 즉 위도우 혹은 웹페이지가 살아 있는한 존재함.
* 전역변수는 애플리케이션이 살아 있는 한 존재함. 즉 웹페이지가 살아 있는 한 존재함.
*지역변수는 함수 생성과 함께 생성 됐다가 함수 소멸시 함께 소멸
* 지역변수는 함수 생성시 함께 생성되었다가 함수 소멸시 함께 소멸됨.


==중괄호의 영향==
==중괄호의 영향==
*자바스크립트에서 중괄호에 의한 지역변수 영향은 함수에 한함
*자바스크립트에서 중괄호에 의한 지역변수 영향은 함수에 한함
<source lang="javascript">
<syntaxhighlight lang="javascript">
function foo() {
function foo() {
     for(var i = 0; i < 10; i++) {
     for(var i = 0; i < 10; i++) {
64번째 줄: 64번째 줄:
}
}
foo();
foo();
</source>
</syntaxhighlight>
:→자바스크립트에서는 bar에 할당된 john이 중괄호로 쌓여진 for문 안의 값을 외부에서 출력이 가능함
:→ 자바스크립트에서는 bar에 할당된 john이 중괄호로 쌓여진 for문 안의 값을 외부에서 출력이 가능함


<source lang="c">
<syntaxhighlight lang="c">
#include <stdio.h>
#include <stdio.h>


void main()
void main()
{
{
     int i;
     if (1) {
        int a = 1;
    }
    printf("%d", a); // error: ‘a’ undeclared (first use in this function)
}
</syntaxhighlight>
:→ C언어에서 a값을 중괄호로 쌓여진 if문 외부에서 a값을 출력하면 에러가 발생함


     for (i = 0; i < 10; i++) {
*중괄호 안 영역에서만 동작 하도록 하려면 <code>let</code>, <code>const</code>을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
         int j = 2;
<syntaxhighlight lang="javascript">
function foo() {
     if (1) {
         let a = 1;
     }
     }
    console.log(a); // Uncaught ReferenceError: a is not defined
}


    printf("%d", j); // error: ‘j’ undeclared (first use in this function)
foo();
</syntaxhighlight>
:→ let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌
<syntaxhighlight lang="javascript">
function foo() {
    if (1) {
        const a = 1;
    }
    console.log(a); // Uncaught ReferenceError: a is not defined
}
}
</source>
 
:→C언어에서 j값을 중괄호로 쌓여진 for문 외부에서 j값을 출력하면 에러가 발생함
foo();
</syntaxhighlight>
:→ const로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌


==같이 보기==
==같이 보기==
* [[스코프]]
* [[스코프]]
* [[전역변수, 지역변수]]
* [[전역변수, 지역변수]]
==참고==
*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
*http://www.w3schools.com/js/js_scope.asp


[[분류: JavaScript]]
[[분류: JavaScript]]

2020년 11월 2일 (월) 00:55 기준 최신판

1 개념[ | ]

JavaScript Scope
자바스크립트 스코프, 자바스크립트 유효범위
  • JavaScript에서 변수, 객체, 함수의 접근 가능 범위

2 전역 변수[ | ]

  • 전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
var a = 1; // 전역 변수
function printNumber() {
    console.log(a); // 1
}
printNumber();
→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능

웹에서 전역변수는 window객체에 소속됨

3 지역 변수[ | ]

  • 함수 안에서만 접근 가능한 변수
var a = 1; // 전역 변수

function printNumber() {
    var a = 2; // 지역 변수
    console.log(a); // 2
}
printNumber();
→ printNumber함수 안에서 지역 변수 접근
function printNumber() {
    var a = 2;
}

printNumber();
console.log(a); // Uncaught ReferenceError: a is not defined(…)
→ 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음

4 암묵적 전역 변수[ | ]

  • var 키워드 없이 변수를 생성하면 함수 안이라도 전역변수로 생성 됨
function foo() {
    bar = "Hello";
}
foo();
console.log(bar); // Hello
→ foo 함수 안에서 var없이 bar변수가 생성되었음. 함수의 안에 변수가 있음에도 불구하고 함수 밖에서 bar를 사용하여 정상 출력하였음

5 변수 소멸 (Variable Lifetime)[ | ]

  • 전역변수는 애플리케이션이 살아 있는 한 존재함. 즉 웹페이지가 살아 있는 한 존재함.
  • 지역변수는 함수 생성시 함께 생성되었다가 함수 소멸시 함께 소멸됨.

6 중괄호의 영향[ | ]

  • 자바스크립트에서 중괄호에 의한 지역변수 영향은 함수에 한함
function foo() {
    for(var i = 0; i < 10; i++) {
        var bar = "john";
    }
    console.log(bar);
}
foo();
→ 자바스크립트에서는 bar에 할당된 john이 중괄호로 쌓여진 for문 안의 값을 외부에서 출력이 가능함
#include <stdio.h>

void main()
{
    if (1) {
        int a = 1;
    }
    printf("%d", a); // error: ‘a’ undeclared (first use in this function)
}
→ C언어에서 a값을 중괄호로 쌓여진 if문 외부에서 a값을 출력하면 에러가 발생함
  • 중괄호 안 영역에서만 동작 하도록 하려면 let, const을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
function foo() {
    if (1) {
        let a = 1;
    }
    console.log(a); // Uncaught ReferenceError: a is not defined
}

foo();
→ let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌
function foo() {
    if (1) {
        const a = 1;
    }
    console.log(a); // Uncaught ReferenceError: a is not defined
}

foo();
→ const로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌

7 같이 보기[ | ]

8 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}