Enhanced Object Literals

Mohammed Ali - Aug 23 - - Dev Community
  • ES6 introduced 3 ways to write object literals
  • First Way:
- ES6 Enhanced object literal syntax can take an external object like salary object and make it a property of the developer object as shown below:
const salary = {
  fixed: '$200k',
  variable: '$100k'
}

const developer = {
  // salary: salary      // Before ES6
  salary                 // ES6 way
}

developer; // { salary: { fixed: '$200k', variable: '$100k' } }

- If any change is made in salary object, same change needs to be made inside the developer object for salary object which is present as property of developer object.
Enter fullscreen mode Exit fullscreen mode
  • Second way:
  • We don't need to create a property & then set it to function expression. We can write that directly without function keyword as shown below i.e ES6 Way.
const salary = {
  fixed: '$200k',
  variable: '$50k'
}

const developer = {
  salary,
  /* Before ES6
  greet: function(name){
    console.log(`Salary credited. Enjoy ${name}!`);
  }*/
  // ES6 Way
  greet(name){
    console.log(`Salary credited. Enjoy ${name}!`);
  }
}

developer.greet("Peter");
Enter fullscreen mode Exit fullscreen mode
  • Third Way:
  • Property names can be computed also
const seasons = ['winter','summer','spring', 'monsoon','autumn'];

const fruits = {
  [seasons[0]]: 'apple',
  [seasons[1]]: 'mango',
  [[seasons.length]]: 'cherry'
}

fruits;   // { '5': 'cherry', winter: 'apple', summer: 'mango' }
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .