코딩/Javascript

[JS-중급편-OOP] 12. null,undefined 알아보기

드리프트 2021. 1. 2. 18:07
728x170

 

 

누군가는 세계의 미스터리 중 하나가 바로 자바스크립트에서 null과 undefined를 이해하는 것이라고 했습니다.

 

지금까지의 예제에서 보듯이 null과 undefined는 코드 여러 곳에 나타났었고 아마 우리는 실행도 해봤을 겁니다.

 

null 및 undefined를 이해하는 것은 기괴하지 않고 다만 지루할 뿐입니다.

 

그래도 조금만 참고 이해 볼까요?

 

 

 

Null

null부터 알아 보겠습니다.

 

null 키워드는 JavaScript 세계에서 특별한 역할을 합니다.

 

null은 "값이 없다"는 명시적인 정의입니다.

 

다른 사람들이 작성한 코드를 살펴본 적이 있다면 null이 꽤 많이 나타나는 것을 볼 수 있습니다.

 

null의 장점은 확실성에 있기 때문에 꽤 유용합니다.

 

변수에 오래된 값이나 정의되지 않은 값을 저장하는 것보다 대신 null로 설정하면 값이 존재하지 않기를 원한다는 명확한 표시가 됩니다.

 

이 장점은 코드를 작성할 때 아무것도 나타내지 않는 변수에 null로 초기화하려는 경우에 유용합니다.

 

예제를 보겠습니다.

 

var name = null;

if (name === null) {
	name = "Peter Griffin";
} else {
	name = "No name";
}

 

null 프리미티브는 자연적으로 발생하는 리소스가 아닙니다. 

 

의식적으로 할당 한 것이므로 변수 선언의 일부로 사용되거나 함수 호출에 대한 인수로 전달되는 것을 종종 볼 수 있습니다. 

 

null을 사용하는 것은 쉽습니다. 

 

존재 여부를 확인하는 것도 매우 쉽습니다.

 

if (name === null) {
	// do something interesting...or not
}

 

유의해야 할 것은 낮은 == 연산자 대신 엄격한 === 연산자를 사용해야한다는 것입니다.

 

==를 사용한다고 해도 괜찮지만 null로 작업할 때 타입과 값을 모두 확인하는 === 엄격 연산자를 사용하는 것이 좋습니다.

 

 

undefined

여기가 조금 흥미로워지는 곳입니다.

 

정의되지 않은 것을 나타 내기 위해 undefined 같은 프리미티브가 있습니다. 

 

몇가지 예에서 undefined 가 사용됩니다.

 

가장 일반적인 사용처는 초기화되지 않은 변수에 액세스 하려고 하거나 실제로 아무것도 반환하지 않는 함수의 값에 액세스 할 때입니다.

 

다음 코드를 볼까요?

let myVariable;
alert(myVariable); // undefined

function doNothing() {
   // watch paint dry
   return;
}

let weekendPlans = doNothing();
alert(weekendPlans); // undefined

let person = {
  firstName: "Isaac",
  lastName: "Newton"
}
alert(person.title); // undefined

 

보통 우리는 코드에서 undefined를 아무것에도 할당하지 않을 겁니다.

 

대신 무언가가 undefined 인지 확인하는데 시간을 보낼겁니다.

 

undefined인지 확인하는 방법은 간단합니다. 다음과 같이 하면 됩니다.

if (myVariable === undefined) {
	// do something
}

 

이 접근 방식의 단점은 undefined가 실제로 무엇인지와 관련이 있습니다.

 

undefined는 우리를 위해 자동으로 정의된 전역 변수이며, 이는 잠재적으로 true 또는 다른 값으로 덮어쓸 수 있음을 의미합니다.

 

undefined가 덮어 쓰이면 === 또는 == 연산자로 undefined를 확인한다면 결국 코드가 작동하지 않을 겁니다.

 

이 문제를 피하려면 undefined 검사를 수행하는 가장 안전한 방법은 typeof 연산자와 === 연산자입니다.

 

var myVariable;

if (typeof myVariable === "undefined") {
    alert("Define me!!!");
}

 

이렇게 하면 undefined 검사를 수행하고 항상 정답을 반환할 수 있습니다.

 

더보기

쉬어가기. null == undefined, null !== undefined

null == undefined를 확인하면 결과는 true가 됩니다.

 

===를 사용한다면 null === undefined 인 경우 결과는 false가 됩니다.

 

그 이유는 == 연산자는 JavaScript가 생각하기에 값이 되어야 한다고 생각하는 것에 따라 타입을 왜곡하는 타입 강제(type coercion) 변환을 수행하기 때문입니다.

 

===를 사용한다면, 타입과 값을 모두 확인합니다.

 

이것은 실제로 undefined와 null이 다르다는 것을 감지하는 좀 더 포괄적인 검사 방법입니다.

 

 

결론

 

Null과 undefined는 조금은 어려울지 모르더라도 확실하게 이해해야 하며, typeof 연산자를 사용하여 undefined를 찾아내는 방식은 꽤 중요합니다.

 

다음에는 JSON에 대해 알아 보겠습니다.

 

그리드형