[JavaScript][basic] null & undefined

기본 데이터 형식
JavaScript에는 데이터 형식으로 아래의 형식이 있다.

• 기본 형식
• String
• Number
• Boolean
• 합성(참고) 형식
• Object
• Array
• 특정 형식
• null
• undefined

이중 null과 undefined라는 특정 형식이 늘 사람을 혼란스럽게 만든다.

null
null은 보통 객체 타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다.
null은 다른 모든 값들과 구분되는 고유한 값이다.

어떤 변수가 null값을 가지면 그 변수는 기본 형식(String, Number, Boolean)이나 합성 형식(Object, Array)의 값을 담고 있지 않다는 것을 의미한다.

따라서 어떤 변수의 값을 초기화 하고 싶을 경우엔 null을 사용한다.

var a = "문자값";	//기본 형식의 값이 할당됨.
a = null;	//해당 값이 a 변수에서 제거됨.

var B = function(name) {
	this.name = name;
}
var b = new B("b이름");	//B 생성자를 사용하여 개체가 생성-> b라는 변수에 해당 객체가 참조됨.
b = null;	//b에 참조 정보가 제거됨. (객체가 제거되는 것이 아니라 참조 정보가 제거되는 것.)

null이 숫자 문맥에서 사용되면 0으로 변환되며, 문자열 문맥에서 사용되면 "null"로 변환된다.
불리언 문맥에서 사용되면 false로 변환된다.

//숫자 문맥에서 사용하는 경우
document.writeln(3 + null);	// 3 + 0이므로 결과 : 3
document.writeln(3 - null);	// 3 - 0이므로 결과 : 3
document.writeln(3 * null);	// 3 * 0이므로 결과 : 0
document.writeln(3 / null);	// 3 / 0이므로 결과 : Infinity(무한대)
document.writeln(3 % null);	// 3 % 0이므로 결과 : NaN(Not a Number. 숫자가 아님)

//문자 문맥에서 사용하는 경우
document.writeln("이것은 " + null + "입니다.")	//결과 : 이것은 null 입니다.

//boolean 문맥에서 사용하는 경우.
var a=null;	
if(!a) document.writeln("null 입니다.");

undefined
undefined는 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반횐되는 값이다.

쉽게 생각하면 null은 사용자가 고의로 값을 할당하여 값이 없다는 것을 명시한 것이고,
undefined는 사용자가 아닌 프로그램이 실행을 하면서 존재하지 않는 값의 변수를 호출하도록(주로 오타나 누락된 변수) 한 경우와 같이 호출상 오류를 나타내는 특정형식이라고 생각하면 쉽다.

다음의 예제를 보도록 하자.

var a;
document.writeln(a);	//undefined a가 선언은 되었으나 값이 할당된 적이 없음.

//document.writeln(b);	//없는 값의 호출로 인해 이후 JavaScript구간 호출 중지
document.writeln(typeof b);	//undefined

document.writeln("글쓰기")	//위에 주석처리된 b호출 구문이 실행되는 경우(b가 없는데도 호출되는 경우) 이후 스크립트는 실행되지 않음.

a의 경우는 변수는 있지만 값을 할당하지 않아 생긴 변수 a에 대한 값이 undefined인 경우이고
b의 경우는 b라는 변수를 할당하지 않고 호출하여 사용된 변수에 대해 undefined인 경우이다.
예제에선 또다른 JS 영역이 존재하지 않아 별 문제 없어보일지 몰라도, 실제 페이지에서 b와 같이 변수 자체에 대한 undefined 호출 오류가 발생하게 되면 해당 오류가 발생된 <script>~</script>로 감싸진 블럭 내의 이후 구문들은 실행이 되지 않는다.

b의 경우는 하나의 변수가 없음으로 인해 이후의 스크립트에 대해서도 영향을 미치게 되는 치명적인 오류이다.
따라서 이런 undefined에 대한 체크가 선행되어야 한다.
이럴 때 사용할 수 있는 것이 typeof 연산자이다.

typeof 연산자
typeof 연산자는 형식 정보를 다음 중 하나의 문자열로 반환해준다.
number, string, boolean, object, function, undefined

if (typeof a == "undefined") document.writeln("a가 존재하지 않음.")

함수의 경우도 적절히 체크 해준다.

//함수의 경우
function test() {
	if (typeof a =="undefined") return false;	//없으면 함수 호출 중지
	//있는 경우 조건 체크
}

JavaScript에서 사용하는 변수는 위와 같이 사용이 가능하지만 HTML의 DOM요소에 대해서는 좀 다르다.
getElementbyId 요소를 사용하면 호출한 id값을 가진 object가 리턴된다.
존재하지 않는 id의 DOM요소를 호출하면 값이 null인 object가 호출된다.
따라서 typeof의 체크가 필요없다.

if(document.getElementById("a") == null) document.writeln("a가 존재하지 않음.")

JSON객체의 경우 var로 만들고 난 이후 호출시 존재하지 않는 값인 경우 자동으로 해당 멤버변수가 생성이 되므로 변수 자체의 존재하지 않음으로 인한 오류 발생은 발생하지 않으며 해당 멤버변수의 값은 undefined가 된다.

var objectA = {};
document.writeln(typeof objectA);	//당연히 object
document.writeln(typeof objectA.a);	//결과 : undefined, 변수는 함축적선언으로 인해 존재
document.writeln(objectA.a);	//결과 : undefined

null과 undefined는 서로 구별되는 값이지만 동등 연산자(equality operator) == 는 둘을 같은 것으로 간주한다.
이 두 값을 구별하여 비교하려면 일치 연산자(===) 또는 typeof 연산자를 사용하면 된다.

위에서 언급한 HTML DOM과 일반 자바 변수 및 함수에 대해 확실히 구분하여 개발할 수 있게 되면 동등 연산자가 아닌 일치 연산자로 타입을 체크하는 버릇을 들이도록 해야한다.