# ํ–ฅ์ƒ๋œ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด(Enhanced Object Literal)

ํ–ฅ์ƒ๋œ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์ด๋ž€ ๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋˜ ๊ฐ์ฒด ์ •์˜ ๋ฐฉ์‹์„ ๊ฐœ์„ ํ•œ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ž์ฃผ ์‚ฌ์šฉํ•˜๋˜ ๋ฌธ๋ฒ•๋“ค์„ ์ข€ ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐ์ฒด ์ •์˜ ํ˜•์‹์„ ๋ฐ”๊ฟจ์Šต๋‹ˆ๋‹ค.

# ๊ธฐ์กด ๊ฐ์ฒด ์ •์˜ ๋ฐฉ์‹

๊ธฐ์กด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด ์ •์˜ ๋ฐฉ์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

var josh = {
  // ์†์„ฑ: ๊ฐ’
  language: 'javascript',
  coding: function() {
    console.log('Hello World');
  }
};

# ์ถ•์•ฝ ๋ฌธ๋ฒ• 1 - ์†์„ฑ๊ณผ ๊ฐ’์ด ๊ฐ™์œผ๋ฉด 1๊ฐœ๋งŒ ๊ธฐ์ž…

๊ฐ์ฒด๋ฅผ ์ •์˜ํ•  ๋•Œ ์†์„ฑ(property)์™€ ๊ฐ’(value)์ด ๊ฐ™์œผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ•์•ฝ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

var language = 'javascript';

var josh = {
  // language: language,
  language
};

console.log(josh); // {language: "javascript"}

์œ„์™€ ๊ฐ™์€ ์ถ•์•ฝ ๋ฌธ๋ฒ•์„ ๋ทฐ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก ๋ฐฉ์‹๊ณผ ๋ทฐ ๋ผ์šฐํ„ฐ ๋“ฑ๋ก ๋ฐฉ์‹์— ๋Œ€์ž…ํ•ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

// #1 - ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก ๋ฐฉ์‹์—์„œ์˜ ์ถ•์•ฝ ๋ฌธ๋ฒ•
const myComponent = {
  template: '<p>My Component</p>'
};

new Vue({
  components: {
    // myComponent: myComponent
    myComponent
  }
});
// #2 - ๋ผ์šฐํ„ฐ ๋“ฑ๋ก ๋ฐฉ์‹์—์„œ์˜ ์ถ•์•ฝ ๋ฌธ๋ฒ•
const router = new VueRouter({
  // ...
});

new Vue({
  // router: router,
  router
});

# ์ถ•์•ฝ ๋ฌธ๋ฒ• 2 - ์†์„ฑ์— ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ function ์˜ˆ์•ฝ์–ด ์ƒ๋žต

๊ธฐ์กด์— ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•  ๋•Œ ๊ฐ์ฒด์˜ ์†์„ฑ์— ํ•จ์ˆ˜๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ง์ด์ฃ .

const josh = {
  // ์†์„ฑ: ํ•จ์ˆ˜
  coding: function() {
    console.log('Hello World');
  }
};
josh.coding(); // Hello World

์‹ค์ œ๋กœ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋‹ค๋ณด๋ฉด ์œ„์™€ ๊ฐ™์ด ์ •์˜ํ•ด์•ผ ํ•  ๋•Œ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ES6์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ•์•ฝํ•˜์—ฌ ์ฝ”๋”ฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

const josh = {
  coding() {
    console.log('Hello World');
  }
};
josh.coding(); // Hello World

์ด๋ ‡๊ฒŒ function ์˜ˆ์•ฝ์–ด๋ฅผ ์ƒ๋žตํ•ด๋„ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํƒ€์ดํ•‘ ํ•˜๋Š” ์‹œ๊ฐ„์ด ์ค„์–ด๋“ญ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ์ด๋ฒˆ์—๋Š” ๋ทฐ ์ฝ”๋“œ์— ์ ์šฉํ•ด์„œ ์–ผ๋งˆ๋‚˜ ํƒ€์ดํ•‘์ด ์ค„์–ด๋“œ๋Š”์ง€ ํ™•์ธํ•ด๋ณผ๊นŒ์š”?

new Vue({
  // ...
  methods: {
    fetchData: function() {
      // ...
    },
    showAlert: function() {
      // ...
    }
  }
});

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

new Vue({
  // ...
  methods: {
    fetchData() {
      // ...
    },
    showAlert() {
      // ...
    }
  }
});