자바스크립트 변수
아래는 자바스크립트 실행 시 변수 선언 및 정의에 대한 프로세스 입니다.
1. 자바스크립트 실행 시 모든 전역 변수(x, y)가 선언 됩니다.
- 여기서 실행 시 라는 의미는 x 전역변수 선언문인 "var x ;'" 까지 언어처리가
(인터프리터) 되지 않았을 경우를 의미 합니다. (코드 상 1 ~ 2 라인의 alert(x), alert(y)에 해당 합니다.)
2. "자바스크립트"는 선언만 되고 정의되지 않은 변수는 모두 "undefined" 를 참조
합니다.(즉, 아래 결과처럼 모두 "undefined" 를 출력합니다.)
-
alert(x); // undefiend
-
alert(y); // undefined
-
-
var x;
-
alert(x); // undefiend
-
var y;
-
alert(y); // undefined
var 선언문 없이 선언된 암묵적 전역변수는 변수인가?
-
alert(x); // undefiend
-
alert(y); // undefined
-
alert(z); // ?
-
-
var x;
-
alert(x); // undefiend
-
var y;
-
alert(y); // undefined
-
z;
-
alert(z);
위 코드와 같이 총 3개의 전역변수(x, y, z)가 있습니다.
하지만 x, y 와는 다르게 z는 var 선언문이 없습니다.
이 같은 전역변수를 보통 [암묵적 변수] 라고 합니다.
그리고 이런 경우 3번라인의 alert(z);는 // 'z'가 정의되지 않았다는 에러가 발생합니다.
이유는 x, y 변수와는 달리 z는 var 선언문으로 선언되지 않았으며, 즉, 자바스크립트
실행시 미리 선언되지 않기 때문입니다.
위같은 에러를 피하기 위해서는 아래와 같이 코드를 작성해야 합니다.
-
z = undefined;
-
alert(z);
즉, 위와 같이 암묵적 변수에 접근하기 위해서는 변수에 값을 정의 후 접근해야 에러가
나지 않습니다.
그럼 "암묵적 변수"에 대한 더 자세한 내용을 알기 위해 다음 예제를 보시겠습니다.
-
alert(x); // undefiend
-
alert(y); // undefined
-
-
var x = 'x';
-
-
alert(x); // undefiend
-
alert(window.x); // x
-
alert(window['x']); // x
-
alert(this.x); // x
-
-
var y = 'y';
-
alert(y); // y
-
alert(window.y); // y
-
alert(window['y']); // y
-
alert(this.y); // y
-
-
-
z = 'z';
-
alert(z); // z
-
alert(window.z); // z
-
alert(window['z']); // z
-
alert(this.z); // z
-
-
delete x;
-
delete y;
-
delete z;
-
-
alert(typeof x); // string
-
alert(typeof y); // string
-
alert(typeof z); // undefined
위 코드와 같이 이번 예제에서는 x, y, z 모든 변수가, 전역객체의 프로퍼티로 접근이
가능 합니다.
하지만 25 ~ 27라인의 결과를 보십시오? 뭔가 이상하지 않으신가요?
분명, 21 ~ 23라인에서 delete 연산자로 x, y, z를 모두 제거 했지만
결과를 보면 z를 제외한 x, y 2개의 변수는 제거 되지 않았습니다.
이런 결과가 나오게된 이유는 몰까요?
먼저 delete 연산자의 정의를 살펴 보겠습니다.
delete 연산자는 객체의 속성 혹은 배열변수의 요소를 제거하는데 사용된다.
즉, delete 연산자는 객체의 프로퍼티 및 배열변수를 제거하는 연산자 입니다.
x, y 변수도 전역 객체의 프로퍼티로 접근은 가능 하지만 엄밀히 말하자면 delete 연산자로
삭제 되지않기 때문에 객체(window)의 프로퍼티로는 볼 수 없습니다.
반대로 z는 일반 변수(x, y) 처럼 자바스크립트 실행 시 선언되지 않으며,
delete 연산자로 제거 되기 때문에 전역변수가 아닌 객체(window)의 프로퍼티로 봐야
합니다.