[JS] undefined와 null의 차이점 / var let const 차이점

undefined와 null의 차이점

undefined은 변수를 선언하고 값을 할당하지 않은 상태,

null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.

즉, undefined는 자료형이 없는 상태이다.

따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

typeof null // 'object' typeof undefined // 'undefined' null === undefined // false null == undefined // true null === null // true null == null // true !null // true isNaN(1 + null) // false isNaN(1 + undefined) // true

#undefined

undefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.

cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.

아래의 경우에 변수가 undefined를 반환한다.

• 값을 할당하지 않은 변수
• 메서드와 선언에서 변수가 할당받지 않은 경우
• 함수가 값을 return 하지 않았을 때

#null

null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.

cf) null은 undefined처럼 전역 객체의 속성 중 하나가 아니라 리터럴 값이다.

#알아두면 좋은 것

• typeof undefined는 출력하면 undefined이다.
• typeof null은 출력하면 object이다. 하지만 이는 여전히 원시 타입(primitive value)로, JavaScript에서는 구현 버그로 간주한다.
• undefined == null은 true이다.

 

var let const 차이점

1. var (변수 재선언 가능)

var variable = '변수선언함';
console.log(variable); //변수선언함

var variable = '또 변수선언함';
console.log(variable); //또 변수선언함

변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있습니다.

이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있습니다. 이를 보완하기 위해 ES6부터 let, const가 추가되었습니다.

2. let (변수 재선언 불가능, 변수 재할당 가능)

	let variable = '변수선언함';
    console.log(variable); //변수선언함

    variable = '변수 재할당함';
    console.log(variable); //변수 재할당함

    let variable = '또 변수선언함';
    console.log(variable); //또 변수선언함

let은 변수의 재할당은 가능하지만 var처럼 재 선언은 되지 않습니다. 실제로 재선언 후 크롬 개발자도구에서 확인해보면, 아래 이미지와 같은 에러 문구를 확인하실 수 있습니다.

3. const (변수 재선언 불가능, 변수 재할당 불가능)

const variable = '변수선언함';
    console.log(variable); //변수선언함

    variable = '변수 재할당함';
    console.log(variable); //변수 재할당함(에러)

    const variable = '또 변수선언함';
    console.log(variable); //또 변수선언함(에러)

const의 경우 constant(상수)의 의미 그대로 한 번만 선언하고 또 값을 재할당을 통해 바꿀 수도 없습니다.

4. 결론

재할당이 필요없는 경우, const를 사용해 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋음.