Detailed explanation of object literals in JS

Preface

Before ES6, object literals (also known as object initializers) in JavaScript were very basic. Two types of properties can be defined:

• Key-value pair {name1: value1}
• Computed property values ​​with getters { get name(){..} } and setters { set name(val){..}}

var myObject = {
  myString: 'value 1',
  get myNumber() {
    return this._myNumber;
  },
  set myNumber(value) {
    this._myNumber = Number(value);
  },
};
myObject.myString; // => 'value 1'
myObject.myNumber = '15';
myObject.myNumber; // => 15

js is a prototype-based language, so everything is an object. A language that facilitates construction must be provided when it comes to object creation, configuration, and access to prototypes.

Defining an object and setting its prototype is a common task. The best way is to set the prototype directly in a single statement on the object literal.

Unfortunately, the limitations of literals do not allow for a simple solution to achieve this. You must use object.create() in conjunction with an object literal to set the prototype.

var myProto = {
  propertyExists: function(name) {
    return name in this;
  }
};

var myNumbers = Object.create(myProto);
myNumbers['arrat'] = [1, 6, 7];
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

I think this solution is not flexible enough. JS is prototype-based, why is it so troublesome to create objects with prototypes?

Fortunately, JS is also slowly improving. Many frustrating problems in JS are solved incrementally.

This article demonstrates how ES6 solves the above problems and improves object literals with additional features.

• Setting the prototype on object construction
• Method declaration
• super call
• Computed property names

1. Set the prototype on object construction

As you know, one way to access the prototype of an existing object is to use the getter property __proto__:

var myObject = {
  name: 'Hello World!',
};
myObject.__proto__; // => {}
myObject.__proto__.isPrototypeOf(myObject); // => true

myObject.__proto__ returns the prototype object of myObject.

Note that using object.__proto__ as a getter/setter is not recommended. Alternative approaches should consider using Object.getPrototypeOf() and Object.setPrototypeOf().

ES6 allows using __proto__ as a property name and setting the prototype in {__proto__: protoObject}.

Next, we use the __proto__ property to initialize the object and optimize the above code:

var myProto = {
  propertyExists: function(name) {
    return name in this;
  },
};
var myNumbers = {
  __proto__: myProto,
  array: [1, 6, 7],
};
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

The myNumbers object is created using the special property name proto and the prototype myProto. This time we create it with a single statement, without the need for an additional function like object.create() above.

As you can see, coding with __proto__ is simple, and I always like simple and clear solutions.

Let's talk about something off topic. I find it odd that a simple and flexible solution would require so much work and design. If the solution was simple, you might think it would be easy to design. But the reverse is also true:

• It's complicated to make it simple and clear
• It's easy to make it complicated and hard to understand.

If something seems too complex or difficult to use, it may need further refinement.

1.1 Special cases of __proto__ usage

Even though __proto__ looks simple, there are some special cases you should be aware of.

You can only use __proto__ once in an object literal, otherwise JS will report an error:

var object = {
  __proto__: {
    toString: function() {
      return '[object Numbers]'
    }
  },
  numbers: [1, 5, 89],
  __proto__: {
    toString: function() {
      return '[object ArrayOfNumbers]'
    }
  }
};

The example above uses the __proto__ property twice in the object literal, which is not allowed. In this case, an error will be thrown: SyntaxError: Duplicate __proto__ fields are not allowed in object literals.

JS constrains that only an object or null can be used as the value of the __proto__ property. Any use of primitive types (strings, numbers, booleans) or undefined will be ignored and will not change the object's prototype.

var objUndefined = {
  __proto__: undefined,
};
Object.getPrototypeOf(objUndefined); // => {}
var objNumber = {
  __proto__: 15,
};
Object.getPrototypeOf(objNumber); // => {}

The object literal uses undefined and the number 15 to set the __proto__ value. Because only objects or null are allowed as prototypes, the __proto__ value is ignored, but objUndefined and objNumber still have their default prototype: a plain JS object {}, .

Of course, it would also be weird to try to use a primitive type to set the prototype of an object.

Also be careful when object literals have a string that evaluates to '__proto__' { ['__proto__']: protoObj } . Properties created in this way do not change the object's prototype, but simply create an owned property with the key '__proto__'

2. Abbreviated method definition

You can use a shorter syntax to declare methods in object literals, omitting the function keyword and the : colon. This is called a shorthand method definition.

Next, let's use the shorthand method to define some methods:

var collection = {
  items: [],
  add(item) {
    this.items.push(item);
  },
  get(index) {
    return this.items[index];
  },
};
collection.add(15);
collection.add(3);
collection.get(0); // => 15

A nice benefit is that methods declared this way are named as functions, which is useful for debugging purposes. Executing collection.add.name from the example above would return the function name "add".

3. Use of super

An interesting improvement in JS is the ability to use the super keyword as a way to access inherited properties from the prototype chain. Take a look at the following example:

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
numbers.sumElements(); // => 17

calc is the prototype of the numbers object. In the sumElements method of numbers, you can access the method from the prototype using the super keyword: super.sumElements()

Ultimately, super is a shortcut for accessing inherited properties from an object's prototype chain.

In the previous example, you can try to call the prototype by directly executing calc.sumElements(), which will result in an error. However, super.sumElements() can be called correctly because it accesses the object's prototype chain. And make sure the sumElements() method in the prototype correctly accesses the array using this.numbers.

The presence of super makes it clear that the inherited properties will be used.

3.1 Restrictions on the use of super

super can only be used within a shorthand method definition in an object literal.

If you try to access it from a normal method declaration { name: function(){} }, JS will throw an error:

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements: function() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
// Throws SyntaxError: 'super' keyword unexpected here
numbers.sumElements();

The method sumElements is defined as a property: sumElements: function() {…}. Because super can only be used within a shorthand method, calling it in this context will throw a SyntaxError: 'super' keyword unexpected here .

This restriction does not largely affect how object literals are declared. It is usually better to use the shorthand method definition because of the shorter syntax.

4. Computed property names

Before ES6, objects were initialized using literal values, usually static strings. To create a property with a computed name, you must use a property accessor.

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {};
object[prefix('number', 'pi')] = 3.14;
object[prefix('bool', 'false')] = false;
object; // => { number_pi: 3.14, bool_false: false }

Of course, this way of defining properties is pleasing.

Next, use the shorthand method to modify the above example:

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {
  [prefix('number', 'pi')]: 3.14,
  [prefix('bool', 'false')]: false,
};
object; // => { number_pi: 3.14, bool_false: false }

[prefix('number', 'pi')] sets the attribute name by evaluating the prefix('number', 'pi') expression (i.e. 'number_pi').

Correspondingly, [prefix('bool', 'false')] sets the second attribute name to 'bool_false'.

4.1 Symbol as attribute name

Symbols can also be used as computed property names. Just make sure to enclose them in square brackets: {[Symbol('name')]:'Prop value'}

For example, use the special property Symbol.iterator and iterate over the property names of the object itself. As shown in the following example:

var object = {
   number1: 14,
   number2: 15,
   string1: 'hello',
   string2: 'world',
   [Symbol.iterator]: function *() {
     var own = Object.getOwnPropertyNames(this),
       prop;
     while(prop = own.pop()) {
       yield prop;
     }
   }
}
[...object]; // => ['number1', 'number2', 'string1', 'string2']

[Symbol.iterator]: function *() { } Defines a property that is used to iterate over an object's own properties. The spread operator [...] object takes an iterator and returns a list of its own properties.

5. Rest and Expanded Properties

Remaining properties allow collecting properties from an object that remain after it is allocated and destroyed.

The following example collects the remaining properties after destructuring an object:

var object = {
  propA: 1,
  propB: 2,
  propC: 3,
};
let { propA, ...restObject } = object;
propA; // => 1
restObject; // => { propB: 2, propC: 3 }

Spread properties allow own properties of a source object to be copied into an object literal. In this example, the object literal collects additional properties from the source object into the object:

var source = {
  propB: 2,
  propC: 3,
};
var object = {
  propA: 1,
  ...source,
};
object; // => { propA: 1, propB: 2, propC: 3 }

6. Summary

Even the relatively small construct that is an object literal has been improved considerably in ES6.

An object’s prototype can be set directly from an initializer using the __proto__ property name. This is easier than using Object.create().

Please note that __proto__ is part of ES6 standard Annex B and its use is discouraged. This add-on implementation is required for browsers, but optional for other environments. This feature is supported in NodeJS 4, 5 and 6.

The method declaration form is now shorter, so you don't have to type the function keyword. In the simplified method, you can use the super keyword, which provides easy access to inherited properties in the object's prototype chain.

If the property name is computed at runtime, you can now use the computed property name [expression] to initialize an object.

The above is a detailed explanation of object literals in JS. For more information about JS object literals, please pay attention to other related articles on 123WORDPRESS.COM!