[JavaScript] null, undefined, undeclared의 차이점, 객체 리터럴

Today, What I learned?

오늘은 자바스크립트 개념을 다시 훑어보며 잘 몰랐던 부분들에 대해서 좀 더 깊게 공부하는 시간을 가졌다. 타입 중 null과 undefined, undeclared의 차이점과 객체 리터럴에 대해서 정리해보려 한다!

 

 

null, undefined, undeclared의 차이점

먼저 undefined부터 정리해보자!

 

undefined

undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값인데,

스코프에 변수가 선언되었지만 값이 할당되지 않은 상태다. 고로 초기화되지 않았을 때의 값이라 할 수 있다.

let name;
console.log(name); // undefined

 

null

undefined와 헷갈리는 경우가 많은 null.

값이 없는 것을 의도적으로 명시하는 것이기 때문에 undefined와 다르다.

let name = 'Lee';
console.log(name); // Lee

name = null;
console.log(name); // null

 

undeclared

간혹 실수로 아래 같은 에러가 발생할 수 있다.

undeclared는 스코프 내에 변수가 선언조차 되지 않았을 때를 말한다.
Lee라는 변수는 현재 선언도 되어있지 않은 상태! 고로 undeclared 하다고 할 수 있다.

let name = 'Lee';
console.log(Lee); // ReferenceError: Lee is not defined

 

 

객체 리터럴

자바스크립트는 클래스 기반 객체 지향 언어와는 다르게 객체를 생성할 수 있는 방법을 여러 가지 지원한다.

그중에서도 객체 리터럴은 객체를 생성할 수 있는 가장 간단한 방법이다.
아래와 같은 형식으로 빠르게 만들 수 있다.

const 변수명 = {
    속성명: 데이터,
    메서드명: function () { 메서드 호출시 실행할 코드들 }
}

 

객체 리터럴은 이런 특징들을 가지고 있다.

 

객체 리터럴의 특징

• 객체는 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.
• 대괄호 표기법을 사용하는 경우 키는 따옴표로 감싸서 접근해야 한다. person\['name'\]
• 존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성된다. person\['age'\] = 10 과 같은 예시로 생성 가능!
• delete 연산자로 객체의 프로퍼티를 삭제한다. delete person.age

 

하지만 단 하나의 객체만 생성하기 때문에, 동일한 프로퍼티를 갖는 객체를 여러 개 생성하려고 할 때는 비효율적이다.

그래서 이 경우에는 클래스를 사용하는 것이 더 효율적!

 

ES6에서 추가된 확장 기능

프로퍼티 값으로 변수를 사용할 때, 프로퍼티의 키와 변수명이 같은 경우 축약해서 프로퍼티 키를 생략할 수 있다.

const a = 'apple';
const b = 1;

const obj = {a, b};

 

또 메서드를 정의할 때 function 키워드를 생략하여 정의할 수 있다.

const person = {
    name: 'Lee',
    sayHi(){
        console.log(`Hi, ${this.name}!`); // Hi Lee!
    }
}

 

마지막으로 프로퍼티 키를 계산된 이름으로 동적 생성이 가능하다.

const prefix = 'index';
let i = 0;

const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
}; // { 'index-1': 1, 'index-2': 2, 'index-3': 3 }

 

 

프로퍼티 키를 대괄호로 가져오거나 할 때 한 번씩은 실수해서 다시 가져오는 일이 잦았는데,

이번 정리를 바탕으로 자연스럽게 사용할 수 있을 것 같다.