모던 프로퍼티 표기법

객체의 프로퍼티를 좀 더 간결하게 작성하는 방법

const title = 'Codeit';
const birth = '2017';
const job = '프로그래밍 강사';

const user = {
  title: title,
  birth: birth,
  job: job,
};

이렇게 우리가 활용할 변수의 이름과 프로퍼티 네임이 똑같다면

const title = 'Codeit';
const birth = '2017';
const job = '프로그래밍 강사';

const user = {
  title,
  birth,
  job,
};

이렇게 하나만 작성하는 표현이 가능하다.

변수뿐만 아니라 함수를 메소드로 만들 때도 축약형 표기가 가능하다.

function getFullName() {
  return `${this.firstName} ${this.lastName}`;
};

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName,
};

const admin = {
  firstName: 'Alex',
  lastName: 'Kim', 
  getFullName,
};

console.log(user.getFullName());
console.log(admin.getFullName());

프로퍼티 네임과 벨류로 사용할 변수나 함수의 이름이 같다면 중복해서 작성하지 않고 하나만 작성해줄 수 있다.

이와 같이 외부에 있는 함수를 메소드로 만들 때 말고 객체 내부에서 메소드를 선언할 때도 활용할 수 있는 표현이 있다.

const user = {
  firstName: 'Tess';
  lastName: 'Jang';
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName());

이때 콜론키호와 function 키워드를 생략할 수 있다.

계산된 속성명 (computed property name)

표현식을 대괄호로 감싸주게 되면 표현식의 값을 프로퍼티 네임으로 쓸 수 있게 된다.

const user = {
  ['Code'+'it']: 'value',
};

console.log(user);

이렇게 대괄호로 감싸서 표현식을 작성하는 방식은

const propertyName = 'birth';
const getJob = () => 'job';

const codeit = {
  ['topic' + 'Name']: 'Modern JavaScript',
  [propertyName]: 2017,
  [getJob()]: '프로그래밍 강사',
};

console.log(codeit)

이렇게 변수에 담긴 값을 사용하거나 함수의 리턴값을 사용할 수도 있다.

옵셔널 체이닝 (Optional Chaining)

ECMAScript2020에서 등장한 옵셔널 체이닝이라는 접근 방법은 안전하게 프로퍼티에 접근할 수 있는 방법이다. 일반적으로 객체의 프로퍼티는 점 표기법을 통해서 접근하게 되는데,

function printCatName(user) {
  console.log(user.cat.name);
}

const user1 = {
  name: 'Captain',
  cat: {
    name: 'Crew',
    breed: 'British Shorthair',
  }
}

printCatName(user1); // Crew

객체를 활용해서 데이터를 표현하다 보면 이렇게 중첩된 객체를 작성하게 될 일이 빈번하고, 함수에서도 이런 중첩 객체의 프로퍼티를 활용할 일이 많다.
함수 printCatName은 user 파라미터에 중첩된 cat 객체의 name 프로퍼티를 콘솔에 출력해주는 함수이다.

그런데 이렇게 중첩 객체를 다룰 때 조심해야 될 부분이 있다.

const user2 = {
  name: 'Young',
}

console.log(user2.cat); // undefined
printCatName(user2); // TypeError: Cannot read property 'name' of undefined

여러 가지 상황에 맞춰 데이터를 다루다 보면 때로는 우리가 예상한 프로퍼티를 가지고 있지 않을 수도 있다. cat 프로퍼티를 가지고 있지 않은 user2는 cat 프로퍼티가 undefined 이기 때문에 user2.cat.name에 접근하려는 순간 에러가 발생하게 된다.

그래서 printCatName과 같이 중첩된 객체의 프로퍼티를 다룰 때는 user.cat.name에 접근하기 전에 user.cat이 null 혹은 undefined가 아니라는 것을 검증하고 접근해야 에러를 방지할 수 있다.

function printCatName(user) {
  console.log(user.cat && user.cat.name);
}

if문을 활용할 수도 있지만, 일반적으로는 간결하게 AND 연산자를 활용해서 이 문제를 해결하곤 했었는데 이마저도 객체의 이름이나 프로퍼티의 이름이 길어질수록 가독성이 나빠진다. 이런 상황에 훨씬 더 코드를 간결하게 사용할 수 있는 문법이 바로 옵셔널 체이닝 (Optional Chaining)이다.

function printCatName(user) {
  console.log(user.cat?.name);
}

위 코드에서 볼 수 있는 것처럼 물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.)이다. 만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그 다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법이다.

옵셔널 체이닝 연산자의 동작 원리를 삼항 연산자를 통해 구체적으로 표현하면 다음과 같이 작성할 수 있다.

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

null 병합 연산자와 함께 활용하면

function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

const user2 = {
  name: 'Young',
}

printCatName(user2); // 함께 지내는 고양이가 없습니다.

이렇게 응용할 수도 있다.

중첩된 객체를 다룰 때 에러를 방지하기 위해 다양한 방식을 활용할 수 있지만 옵셔널 체이닝 연산자를 활용하면 훨씬 더 간결하게 코드를 작성할 수 있다.