최신판 |
당신의 편집 |
1번째 줄: |
1번째 줄: |
| ==개념== | | ==개념== |
| ;JavaScript Scope | | ;JavaScript Scope |
| ;자바스크립트 스코프, 자바스크립트 유효범위 | | ;전역변수, Global Variable |
| * JavaScript에서 변수, 객체, 함수의 접근 가능 범위 | | ;지역변수, Local Variable |
| | *변수 유효범위란 변수, 객체, 함수의 접근 가능 범위 |
|
| |
|
| ==전역 변수== | | ==전역 변수== |
| *전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임 | | *전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임 |
| <syntaxhighlight lang="javascript"> | | <source lang="javascript"> |
| var a = 1; // 전역 변수 | | var a = 1; // 전역 변수 |
| function printNumber() { | | function printNumber() { |
12번째 줄: |
13번째 줄: |
| } | | } |
| printNumber(); | | printNumber(); |
| </syntaxhighlight> | | </source> |
| :→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능 | | :→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능 |
| {{인용문|웹에서 전역변수는 window객체에 소속됨}}
| |
|
| |
|
| ==지역 변수== | | ==지역 변수== |
| *함수 안에서만 접근 가능한 변수 | | *함수 안에서만 접근 가능한 변수 |
| <syntaxhighlight lang="javascript"> | | <source lang="javascript"> |
| var a = 1; // 전역 변수 | | var a = 1; // 전역 변수 |
|
| |
|
26번째 줄: |
26번째 줄: |
| } | | } |
| printNumber(); | | printNumber(); |
| </syntaxhighlight> | | </source> |
| :→ printNumber함수 안에서 지역 변수 접근 | | :→ 함수 안에서 지역 변수 접근 |
|
| |
|
| <syntaxhighlight lang="javascript"> | | <source 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(…) |
| </syntaxhighlight> | | </source> |
| :→ 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음 | | :→ 함수 밖에서 printNumber함수의 지역 변수 접근이 되지 않음 |
|
| |
| ==암묵적 전역 변수==
| |
| *var 키워드 없이 변수를 생성하면 함수 안이라도 전역변수로 생성 됨
| |
| <syntaxhighlight lang="javascript">
| |
| function foo() {
| |
| bar = "Hello";
| |
| }
| |
| foo();
| |
| console.log(bar); // Hello
| |
| </syntaxhighlight>
| |
| :→ foo 함수 안에서 var없이 bar변수가 생성되었음. 함수의 안에 변수가 있음에도 불구하고 함수 밖에서 bar를 사용하여 정상 출력하였음
| |
|
| |
| ==변수 소멸 (Variable Lifetime)==
| |
| * 전역변수는 애플리케이션이 살아 있는 한 존재함. 즉 웹페이지가 살아 있는 한 존재함.
| |
| * 지역변수는 함수 생성시 함께 생성되었다가 함수 소멸시 함께 소멸됨.
| |
|
| |
| ==중괄호의 영향==
| |
| *자바스크립트에서 중괄호에 의한 지역변수 영향은 함수에 한함
| |
| <syntaxhighlight lang="javascript">
| |
| function foo() {
| |
| for(var i = 0; i < 10; i++) {
| |
| var bar = "john";
| |
| }
| |
| console.log(bar);
| |
| }
| |
| foo();
| |
| </syntaxhighlight>
| |
| :→ 자바스크립트에서는 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)
| |
| }
| |
| </syntaxhighlight>
| |
| :→ C언어에서 a값을 중괄호로 쌓여진 if문 외부에서 a값을 출력하면 에러가 발생함
| |
|
| |
| *중괄호 안 영역에서만 동작 하도록 하려면 <code>let</code>, <code>const</code>을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
| |
| <syntaxhighlight lang="javascript">
| |
| function foo() {
| |
| if (1) {
| |
| let a = 1;
| |
| }
| |
| console.log(a); // Uncaught ReferenceError: a is not defined
| |
| }
| |
|
| |
| foo();
| |
| </syntaxhighlight>
| |
| :→ let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌
| |
| <syntaxhighlight lang="javascript">
| |
| function foo() {
| |
| if (1) {
| |
| const a = 1;
| |
| }
| |
| console.log(a); // Uncaught ReferenceError: a is not defined
| |
| }
| |
|
| |
| 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]] |