[JS, ES6] 객체 리터럴 한눈에 살펴보기

자바스크립트에서 객체를 표현하는 방법은 다양하며, ECMA 버전이 올라가면서 여러 가지 편리한 정의 방법이 추가되고 있습니다. 이번 글에서는 JavaScript에서의 객체 리터럴과 함께 새롭게 추가된 ES6의 객체 리터럴에 대해서 살펴보도록 하겠습니다.

 

1. 자바스크립트의 객체 리터럴 표기법

Javascript 객체를 선언하는 방법은 다음과 같습니다.

var blog = new Object();

 

물론 위와 같이 선언하는 분은 거의 없을 것으로 생각됩니다. 매번 생성할 때마다 new Object() 붙이는 일은 아무리 봐도 귀찮으니까요! 고로 객체 리터럴 표기법( { } )을 사용합니다. 이 경우 굳이 인스턴스를 생성하는 번거로운 과정을 거치지 않아도 됩니다.

var blog = {}

 

이제 프로퍼티와 메서드를 추가해볼까요? 

var blog = {};
blog.tool = 'tistory';
blog.name = 'paper block';
blog.author = 'showtime';
blog.adsense = function() { return '누르는 사람이 없네'; }

 

역시나 뭔가 한눈에 들어오는 깔끔한 맛이 없네요.

우리가 보통 사용해 온 객체 리터럴을 사용해서 다음과 같이 한 번에 설정할 수 있습니다.

var blog = {
  tool: 'tistory',
  name: 'paper block',
  author: 'showtime',
  adsense: function() {
  	return '클릭하는 사람이 없네';
  }
};

 

리터럴 표기법을 사용하면 속성과 함께 객체를 만들 때 코드도 적게 사용할 수 있으며 시각적으로도 가독성을 높여주는 효과를 볼 수 있습니다.

 

🚩 주의사항

한 가지 주의할 점은 객체 선언 시 key 값이 숫자로 시작하거나 (숫자 + 문자), 공백 또는 일부 특수문자를 포함한 경우 ' '를 붙여서 사용해야 한다는 점입니다. 이때는 호출도 [ ]를 이용해서만 호출할 수 있습니다. 

 

var emoticon= { ^^: 'smile' } // Uncaught SyntaxError: Unexpected token ^

var emoticon= {'^^': 'smile'};
console.log(emoticon.^^);  // Uncaught SyntaxError: Unexpected token ^
console.log(emoticon['^^']); // smile


var id = { 0A: 10 }; //Uncaught SyntaxError: Invalid or unexpected token

var id = { '0A': 10};
console.log(id['0A']); // 10

console.log(id.0A);  // Uncaught SyntaxError: missing ) after argument list

 

단 숫자로만 된 경우에는 정의는 가능하며 호출 시에는 여전히 [ ]를 이용해야 합니다.

var id = { 10: 10 } 
console.log(id.10)  // error
console.log(id[10]) // 10
console.log(id['10']) // 10

 

예외 케이스로 0으로 시작되는 숫자는 8진수로 인식됩니다. 사실 거의 사용할 일은 없으니 참고로만 알면 될 것 같네요.

var id = { 010: 8, 10: 10, 0x10: 16} 
console.log(id); // {8:8, 10: 10, 16:16}
console.log(id[010]); // 8
console.log(id[10]); // 10
console.log(id[0x10]); // 16
console.log(id['10']); // 10
console.log(id['010']); // undefined
console.log(id['0x10']); // undefined
console.log(id[8]); // 8
console.log(id[16]); // 16
console.log(id['8']); // 8
console.log(id['16']); // 16

 

ES6에서 8진수는 "0o", 2진수는 "0b"로 시작하여 표현하는 내용이 추가되었습니다.

 

 

Key 값을 변수로 호출하는 경우에는 "." 대신 [ ]를 사용해야 합니다. 아래와 같이 [ ]를 이용하여 새로운 키 값도 추가할 수 있습니다.

var profile = {
  age  : 10,
  name  : '철수'
}

var key = 'name';
console.log(profile.key); // undefine
console.log(profile[key]); // '철수'

var newKey = 'like';
profile[newKey] = '놀기';
console.log(profile); // {age: 10, name: "철수", like: "놀기" }

 

---

2. ES6 객체 리터럴 표기법

ES6에서는 객체 리터럴 표기법에 있어서 좀 더 심플하게 표현할 수 있는 몇 가지 구문이 추가되었습니다.

 

프로퍼티 축약 (Shorthand property name)

기존의 JavaScript에서 객체 리터럴은 단순히 name-value 쌍의 모음이었습니다.

ES6에서는 프로퍼티 초기화의 단축(Property Initializer Shorthand)을 사용하여 프로퍼티 이름과 로컬 변수에 존재하는 중복을 제거할 수 있습니다. 즉, 객체 리터럴의 key 이름과 value에 올 변수 이름이 같은 경우 한 번만 입력해주면 됩니다.

 

var name = 'bar';

var foo = {
  name: name
};

// 축약
var foo = {
  name
};

 

처음에는 약간 혼란스럽기도 합니다만, 일단 익숙해지면 나름 편한 면도 있습니다.

 

메서드 축약 (Shorthand method names)

ES6에서는 콜론 및 function 키워드를 제거하여 메서드 구문을 보다 간결하게 만들 수 있습니다. 이전 예제를 다음과 같이 다시 작성할 수 있습니다.

var blog = {
  tool: 'tistory',
  name: 'paper block',
  author: 'showtime',
  adsense: function() {
    return '클릭하는 사람이 없네';
  }
};


var blogEs6 = {
  tool: 'tistory',
  name: 'paper block',
  author: 'showtime',
  adsense() {
    return '클릭하는 사람이 없네';
  }
};

 

위와 같이 ES6에서는 function키워드를 제거하여 보다 간결하게 만들었습니다. 그런데 사실 간단해지긴 했는데, 가독성이 좋냐고 하면 아직 익숙하지 않아서 그런지 좀 어색하네요. 명확하기로는 기존 방식이 명확한 것 같기도 합니다. 하지만 여기저기서 많이 사용하기 시작하니 익숙해져야겠죠? 사용하다 보면 화살표 함수처럼 편하게 느껴지는 때가 오겠죠!

 

계산된 프로퍼티 이름 (Computed property names)

JavaScript의 객체를 사용하다 보면, 객체의 Key 값을 좀 다이나믹하게 설정하고 싶은 경우가 종종 있습니다. 이런 경우를 위하여 ES5 및 이전 버전에서는 프로퍼티를 점 표기 대신 대괄호( [ ] )로 설정하면 객체 인스턴스의 프로퍼티 이름을 계산하여 지정할 수 있었습니다.

 

✅ ES5

var dogSay = 'bark';

var 바둑이 = {name: '바둑이'};
바둑이[dogSay] = '멍멍';

console.log(바둑이); // {name: "바둑이", bark: "멍멍"};

 

✅ ES6에 추가된 방식

ES6에서는 한가지 더 업그레이드되었습니다.

ES5에서는 객체를 먼저 생성 후 [] 접근자를 이용해서 동적으로 프로퍼티 할당을 해주었지만, ES6부터는 표현식의 연산 값을 객체의 키로 사용할 수 있게 되었습니다. 사용법은 객체 프로퍼티의 키가 올 자리에 [ ]로 감싸진 표현식을 작성하면 됩니다. 자바스크립트에서 일반적으로 사용하는 표현이 가능합니다.

var dogSay = 'bark';

var 바둑이 = {
  name: '바둑이',
  [dogSay]: '멍멍',
  [dogSay+'2']: '으르렁', // 요런 식으로도 표현이 되고
  [`${dogSay}3`]: '깨갱' // 이렇게도 할 수 있어요
};

console.log(바둑이); // {name: "바둑이", bark: "멍멍", bark2: "으르렁", bark3: "깨갱"};

 

이것저것 응용하면 다음과 같이 메서드 축약을 사용하면서 Key 값을 다이나믹하게 선언할 수도 있겠네요.  딱히 쓰일일이 많지는 않아 보입니다만... ^^;;

var getKey = (species) => {    
  if (species === 'dog') {
    return 'bark'
  } else {
    return 'say'
  }
};

var 철수 = {
  species: 'human',
  [getKey('human')]() {
    return '블라블라'
  }
};

var 바둑이 = {
  species: 'dog',
  [getKey('dog')]() {
    return '으르렁';
  }
};

console.log(철수.say()); // 블라블라
console.log(바둑이.bark()); // 으르렁

 

맺음말

이번 글에서는 자바스크립트의 다양한 객체 리터럴 표현법과 ES6에 추가된 몇가지 사항들에 대해서 간략하게 살펴보았습니다.

코딩을 하다 보면 보통은 - 모든걸 다 알 필요없이 - 본인이 즐겨 사용하는 패턴 몇가지로 수렴하기도 합니다. 하지만, 다른 사람의 코드를 분석할 때 문법을 모르면 해석이 잘 안되므로 최소한 "이런 게 있었다!"라는 정도로 알아두는 것도 나쁘지 않을 것 같습니다.