Comparison with ordinary objects

Differences Between ECMAScript 6 and Regular Object Definitions

ECMAScript 6 (ES6) introduced richer ways to create and manipulate objects. Regular objects refer to traditional objects created via object literals {} or new Object(). ES6 not only retains these basic features but also extends object capabilities through class syntax, symbol properties, and more.

// Traditional object
const obj1 = { 
  name: 'Traditional Object' 
};

// ES6 class instance
class ES6Class {
  constructor() {
    this.name = 'ES6 Object';
  }
}
const obj2 = new ES6Class();

Evolution of Property Definition Methods

ES6 provides more flexible syntax for property definitions. Traditional objects require property names to be strings or numbers, while ES6 allows computed property names and symbols as keys.

// Traditional property definition
const oldObj = {
  'fixedKey': 'Static Key Name'
};

// ES6 dynamic property names
const dynamicKey = 'calculated';
const es6Obj = {
  [dynamicKey + 'Prop']: 'Dynamic Key Value',
  [Symbol('unique')]: 'Symbol Key Value'
};

Simplified Method Definition Syntax

Method declarations in ES6 are significantly simplified. Traditional objects require full function declarations, while ES6 supports more concise method syntax, including generator methods.

// Traditional method definition
const legacyObj = {
  sayHello: function() {
    return 'Hello';
  }
};

// ES6 method syntax
const modernObj = {
  sayHello() {
    return 'Hello ES6';
  },
  *generatorMethod() {
    yield 1;
    yield 2;
  }
};

Modernization of Prototype Inheritance

ES6 class syntax is essentially syntactic sugar for prototype inheritance but provides a clearer inheritance structure. Compare traditional prototype manipulation with class inheritance:

// Traditional prototype inheritance
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name);
};

// ES6 class inheritance
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name);
  }
}

New Object Static Methods

ES6 added several practical static methods to the Object constructor, significantly enhancing object manipulation capabilities:

const source = { a: 1 };
const target = { b: 2 };

// Object merging
Object.assign(target, source); // { b: 2, a: 1 }

// Property descriptor retrieval
const descriptors = Object.getOwnPropertyDescriptors(source);

// Creating frozen objects
const frozen = Object.freeze({ key: 'Immutable' });

Standardization of Property Enumeration Order

ES6 explicitly defines the enumeration order of object properties, whereas traditional JavaScript engines had varying implementations:

1. Numeric keys in ascending order
2. String keys in creation order
3. Symbol keys in creation order

const orderedObj = {
  '2': 'Number 2',
  '1': 'Number 1',
  'b': 'String b',
  'a': 'String a',
  [Symbol('first')]: 'First Symbol',
  [Symbol('second')]: 'Second Symbol'
};

// Enumeration order: 1, 2, b, a, Symbol(first), Symbol(second)

Revolution of Object Destructuring Assignment

Destructuring assignment is one of ES6's most popular features, greatly simplifying the process of extracting object properties:

const config = {
  server: 'api.example.com',
  port: 8080,
  timeout: 3000
};

// Traditional way
const server = config.server;
const port = config.port;

// ES6 destructuring
const { server, port, timeout = 5000 } = config;

// Nested destructuring
const { 
  db: { host, credentials } 
} = complexConfig;

Enhanced Property Descriptor Control

ES6 improved metaprogramming capabilities for properties, enabling finer-grained property control through the Reflect API and Proxy:

const protectedObj = {};

Object.defineProperty(protectedObj, 'secret', {
  value: 'confidential',
  writable: false,
  enumerable: false
});

// Proxy for property interception
const proxy = new Proxy({}, {
  get(target, prop) {
    return prop in target ? target[prop] : 'Default Value';
  }
});

Applications of Object Spread Operator

The object spread operator introduced in ES2018 further simplified object operations:

const defaults = { theme: 'light', fontSize: 14 };
const userSettings = { fontSize: 16 };

// Traditional merging
const merged1 = Object.assign({}, defaults, userSettings);

// Spread operator merging
const merged2 = { ...defaults, ...userSettings };

// Nested object spreading
const original = { a: { b: 1 } };
const copy = { ...original, a: { ...original.a } };

Leap in Metaprogramming Capabilities

ES6 Symbols and the Reflect API ushered in a new era of JavaScript metaprogramming:

const METADATA = Symbol('metadata');

class AdvancedObject {
  constructor() {
    this[METADATA] = { created: new Date() };
  }
  
  [Symbol.toPrimitive](hint) {
    return hint === 'number' ? 42 : '[Object]';
  }
}

// Reflect operations
const obj = {};
Reflect.defineProperty(obj, 'hidden', {
  value: true,
  configurable: false
});