Javascript에서의 not defined 변수 처리 (vs undefined)

Javascript 를 사용하다 보면 다음과 같은 오류를 만날 떄가 있습니다.

 

Uncaught ReferenceError: g_value is not defined(…)

 

잡히지 않은 참조 오류 라고 하면 될까요?

내용인 즉, g_value(제가 임의로 설정한 변수) 가 정의되어 있지 않다는 말입니다.

 

위와 같은 오류를 크롬(Chrome) 브라우저 등의 개발자 Console 모드로 확인해 보면 해당 변수에 빨간 밑줄이 그어지고, Javascript 오류를 발생시킵니다. 빨간색 텍스트로 표시되는 오류가 발생하면 해당 오류 지점 이후로 더 이상 웹 브라우저가 코드를 실행하지 않습니다. (반드시 잡아야 하는 오류이지요)

 

 

일반적으로 객체(변수)가 선언되었으나, 값이 설정되지 않은 경우, undefined 로 체크를 많이 합니다.

 

var x;

 

if(x === undefined) {

...

}

 

undefined 는 javascript에서 사용가능한 사전 정의된 전역 변수입니다. 객체(변수)가 정의되어 있는지 여부를 체크하기 위해서 사용합니다.

 

위의 경우 실제 변수는 선언되었고, 존재하나, 값이 정의(할당)되어 있지 않은 경우입니다. 사실 이런 케이스는 x 를 그대로 사용하더라도 심각한 오류를 발생시키지 않습니다. 단지 x 값이 암묵적으로 undefined라는 값으로 할당된 것으로 간주해도 무방합니다.

 

 

하지만 아래와 같이 x 객체 자체가 선언되어 있지도 않아, 실제 존재 자체가 없다면.. 

 

//var x;

 

if(x == true) {

...

} else {

...

}

  

위와 같이 말이죠.

x 객체 자체가 존재하지 않는데, if문에서 x를 사용하고 있습니다.

 

이런 경우 바로

Uncaught ReferenceError: x is not defined(…)

오류를 발생 시킵니다.

 

이 경우도 undefined 된 것은 맞으나, 이전과 같이 값이 undefiend 된 것이 아니라 객체 존재 자체가 없으니, 객체의 타입 자체가 없다고(undefined) 볼 수 있습니다.

 

//var x;

 

if(typeof x !== "undefined") {

if(x == true) {

...

} else {

...

}

}

위는 x 라는 객체 존재 자체의 type 값을 가져와서 이 type이 undefined 된 것인지 체크합니다. (이 때는 원시 변수인 undefined가 아닌 문자열 "undefined" 를 반환합니다. 비교 구문을 작성할 때 주의하세요!)  

 

type 키워드를 사용하면 해당 객체의 타입을 반환합니다. (Object인지 Function인지 등등을 확인할 수 있습니다.)

 

x 객체의 타입이 undefined(선언 자체가 되지 않은 객체)되었다면 if문 내부의 if-else 구문을 실행하지 않게 됩니다. x 가 실제 선언되어 존재하는 경우에만 내부의 if-else 구문이 실행되게 됩니다.

 

 

객체의 값이 undefined인지, 객체 자체가 undefined인지로 접근하면 이해하기 쉬울 것 같습니다.

 

 

참고로 객체 값의 null 과 undefined 의 경우가 궁금하실 수도 있을 것 같은데요.

객체가 선언되고 값이 세팅된 적이 없다면 undefined를 반환하고, 사용자가 값이 없다라고 null을 설정한 경우라면 null을 반환합니다.

 

var a = null;

var b;

 

위의 두 값을 출력해 보면 a 는 null, b 는 undefined 를 출력합니다.

 

 

 

.