null 과 undefined 의 차이

 

 

 

 

* null : 자바스크립트의 원시 값 중 하나로 어떤 값이 의.도.적 으로 비어있음을 표현합니다 - MDN

 

function getVowels(str) {

var m = str.match(/[aeiou]/gi);

if (m === null) {

return 0;

}

return m.length;

}

console.log(getVowels('sky'));

// expected output: 0

- getVowels() 함수는 1개의 인자를 받는다.

 

- 블록스코프 내부에 m 이라는 변수에 str.match() 를 통해 정규현식으로 동일한 문자가 있는지 확인하고

  그 값을 저장한다.

- if 문으로 m 이라는 변수가 비어있으면 0을 리턴하고

- 그렇지않으면 m 에 저장된 배열의 갯수를 출력한다.

- sky 문자열에는 a, e, i, o, u 중에 해당하는 문자열이 없기 때문에 0을 리턴하게된다.

 

 

* undefined : null 과 마찬가지로 자바스크립트의 원시값중 하나로 아직 값이 지정되지 않았을 경우에 발생한다. - MDN

 

function test(t) {

if (t === undefined) {

return 'Undefined value!';

}

return t;

}

var x;

console.log(test(x));

// expected output: "Undefined value!"

 

- test() 함수는 1개의 인자를 받는다.

- 함수 내에서 if 는 t 와 undefined 를 비교한다.

- 비교 구문이 true 라면 해당 텍스트를 리턴하고 그렇지않으면 t 에 할당된 값을 리턴한다.

- 변수 x 를 선언한다

- 아무런 값도 할당되지않은 변수는 undefined 로 반환되기때문에 if 의 true 가 실행된다.

 

 

추가적으로 명확히 확인이 가능한 간단한 비교 예제를 확인해 본다.

 

let a

console.log(a) // undefined

console.log(typeof a) // undefined

let b = null

console.log(b) // null

console.log(typeof b) // object

console.log(null === undefined) // false

console.log(null == undefined) //true

 

 

여기서 주의할점은 undefined 는 type을 확인해도 undefined 이지만 null 은 object type을 갖는다.

 

null 과 undefined 를 == 로 비교할경우 자바스크립트에서는 둘다 비어있는 형태로 동일하다보고 true를 리턴하는 반면 === 로 타입까지 비교하게되면 false 를 리턴하게된다.

 

둘을 혼동하지않고 오류없이 사용하려면 null 은 의도적인 선언을 통해서 사용하여야 undefined 와 구분하여 사용할 수 있다. 그리고 항상 비교형태는 === 으로 형까지 비교해줘야 예상치못한 오류를 피하고 오류가 발생하도 어떤 문제로 인한 오류인지 확인하여 빠른 수정이 가능하다.

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.