JavaScript 스코프 편집하기

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.

편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.

최신판 당신의 편집
6번째 줄: 6번째 줄:
==전역 변수==
==전역 변수==
*전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
*전역 변수는 함수 안과 밖 어디에서든 접근이 가능한 변수임
<syntaxhighlight lang="javascript">
<source lang="javascript">
var a = 1; // 전역 변수
var a = 1; // 전역 변수
function printNumber() {
function printNumber() {
12번째 줄: 12번째 줄:
}
}
printNumber();
printNumber();
</syntaxhighlight>
</source>
:→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능
:→ printNumber함수 안에서 함수 밖에 있는 전역 변수 a에 접근 가능
{{인용문|웹에서 전역변수는 window객체에 소속됨}}
{{인용문|웹에서 전역변수는 window객체에 소속됨}}
18번째 줄: 18번째 줄:
==지역 변수==
==지역 변수==
*함수 안에서만 접근 가능한 변수
*함수 안에서만 접근 가능한 변수
<syntaxhighlight lang="javascript">
<source lang="javascript">
var a = 1; // 전역 변수
var a = 1; // 전역 변수


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


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


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


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


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


*중괄호 안 영역에서만 동작 하도록 하려면 <code>let</code>, <code>const</code>을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
*중괄호 안 영역에서만 동작 하도록 하려면 <code>let</code>, <code>const</code>을 목적에 맞게 사용해 주면 됨 / ES6 표준화 시점 부터
<syntaxhighlight lang="javascript">
<source lang="javascript">
function foo() {
function foo() {
     if (1) {
     if (1) {
90번째 줄: 90번째 줄:


foo();
foo();
</syntaxhighlight>
</source>
:→ let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌  
:→ let으로 변수를 정의하여 중괄호안 영역에서만 변수가 유효하도록 만들어줌  
<syntaxhighlight lang="javascript">
<source lang="javascript">
function foo() {
function foo() {
     if (1) {
     if (1) {
101번째 줄: 101번째 줄:


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


108번째 줄: 108번째 줄:
* [[전역변수, 지역변수]]
* [[전역변수, 지역변수]]


==참고==
==참고 자료==
*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
*http://www.w3schools.com/js/js_scope.asp
*http://www.w3schools.com/js/js_scope.asp


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

제타위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 제타위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 편집 도움말 (새 창에서 열림)

이 문서에서 사용한 틀: