"선배님 undefined하고, null하고 뭐가 달라요?"

자바스크립트에는 undefined 라는 자료형이 있습니다.

할때마다 헷갈립니다.

뭔가 없는거 같기는 한데, null 같은건지

그래도, 누가 물어보면 선뜻 같다고 말하기는 힘들어서.

그냥 애둘러서 다음 처럼 말합니다.

"null 같은 거야"

1. undefine 와 null 🐤

1) undefined

undefined는 자료형이고 선언되었지만 값이 할당되지 않았음 의미합니다.

다음과 같이 선언만하고, 값을 할당하지 않으면 undefined 입니다.
(아래에 더 많은 undefined 경우가 있습니다.)

var a

console.log(a)
// undefined

2) null

null은 자료형이고, 선언되었고, 개발자에 의도로 초기화 되었음을 나타냅니다.

선언후 의도적으로 null을 대입하면, null 이 됩니다.

var b

b = null

console.log(b)
// null

2. 제일 헷갈리는 점 🌞

왜 undefined 씀?
그냥 null 쓰면 안됌?
다른 언어는 그냥 선언만 하면 null인데

자바스크립트 만든 사람과 대화해보지는 않아서 모르지만

내가 추측한 의도는 다음과 같다.

undefined 와 null을 쓰는 이유.

다음을 구별하고 싶어서

1) 개발자의 실수로 아무값도 못받은건지
2) 개발자의 의도로 아무것도 없는값으로 초기화한건지

undefined는 실수를 나타내는것 같다. 😡

3. undefined인 경우 🐸

자바스크립트 개발하다보면 실수로 undefined가 퐉! 하고 나타나는 경우가 있다.

경험적으로 다들 느낀적이 있다.

1) 선언되었지만, 정의되지 않았음

위에서 한번 했다.

var a

console.log(a)
// undefined

2) 배열 인덱스 넘어간 경우

인덱스 실수는 자주 일어난다.(자주..? ㅋ)

결과는 undefined이다.

var b = [0, 1, 2]

b[3]
// undefined

3) 객체 요소 잘못 참조한 경우

이 경우도 자주 있다.

var a = {
  b: 1
}

console.log(a)
// {b: 1}

console.log(a.c)
// undefined

4) 함수의 파라미터 값을 못받은 경우

그래 맞아.

이 경우도 꽤 있었어.

// go함수는 2개의 파라미터 a, b를 받는다.
function go(a, b) {
   console.log("a", a)
   console.log("b", b)
}

go(1) // 파라미터를 1개만 넘겨주었다.

// a 1
// b undefined

사실, 이 부분은 조금더 중요하다. 🔥

자바스크립트에는 오버로딩이 없다.
파라미터 2개를 받는 함수를 파라미터 1개만 넘겨주면서 호출하면

다른 언어(예: C++, java) 에서는 오버로딩 된 함수가 없다는 에러를 발생시킨다.

하지만, 자바스크립트에서는 함수가 실행되고 받지 못한 파라미터는 undefined 자료형이 된다.

5) 함수의 반환값을 못받은 경우

이 경우가 제일 많은것 같다.

내가 만든 함수가 올바른 값을 줘야하는데 못줘서

결과는 undefined

function hello() {
   // 이런 실수로 return을 하지 못할때가 있다.
   if( 1 > 3 ) {
      return "hello"
   }
}

var result = hello()

console.log(result)
// undefined

4. 정리 🐤

누가 물어본다면

"선배님 undefined하고, null하고 뭐가 달라요?"

"....."

"undefined는 선언되었지만, 할당되지 않은 상태"

"null은 선언되었고, 개발자의 의도로 빈값으로 초기화된 상태"

2개의 파라미터를 받는 함수에 1개만 전달하면, 받지 못한 파라미터는 undefined

"function go(a, b) {
   console.log("a", a)
   console.log("b", b)
}

go(1)

이렇게 undefined는 개발자의 실수를 알 수 있어

5. 부록 (부제: null같은것) 😱

"선배님 null == undefined 인데요"
"역시 undefined는 null 같은 것 이네요?"

console.log(null == undefined)

// true

비교 대상으로 1) 자료형, 2) 값 이 있는데

=== 은 일치 연산자 - 자료형, 값 모두 비교
== 은 동치 연산자 - 자료형이 다르면 강제 형 변환 후 값 비교

다음은 모두 true입니다.

console.log(1 == "1")
// true

console.log(0 == "")
// true

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

== 이 어떤 규칙으로 하는지 모두 알기는 어려워서
정말 잘 비교하고 싶으면 === 을 사용

그래서 정리하면

undefined은 null 같은 것이 아니야