4.3.2.1 The name of the properties

Any Unicode character can be used, and any word, including “reserved word”. However, we recommend to respect these best practices:

• – start with a letter (or possibly a dollar sign $ or underscore _);
• – preferably do not use reserved words;
• – preferably use quotes, for they are mandatory in the JSON format.

Examples of valid property names, complying best practice:

    { "firstName": "Jean", "name2": "O", "_salaire_€": 20e3, …

4.3.2.2 The type and value of properties

The type of the property is the type of its value (idem: variables):

• – string: (idem variables) the engine store, the string and the address (reference) becomes the value of the property.

         "first": "Jean", // address of the string "Jean"
  

• – number or boolean: the primitive values must be written without quotes, unless they are strings and a conversion may be necessary:

         "age": 22,     // type number
         "age": "22",   // type string: to convert if required
  

• – object (including array): any value whose typeof is "object" is valid:

          circonscription": { "dept": "Gironde", "numero": 2 }
          affiliation": [ "party_1", "party_2" ]

  These literals are stored and their references become the values.

• – function: any function expression, then called a “method”:

    fullName: function(){return this.first +" "+ this.last;}

  The methods are not accepted in JSON format, only as strings:

     fullName: "function(){return this.first +' '+ this.last;}"

4.3.5.1 Using references in the object literal

For instance, with the nested object “circo”, we can create the object once, outside of any “candidat” object, then the reference to that “circo” object can be mutualized between several “candidat-like” objects. To mutualize avoids creating multiple instances of the “Gironde” string, and makes it possible to “inherit” further additions, modifications brought to the mutualized reference:

const circo_3302 = { // (Gironde INSEE number is 33)
                 "dept": "Gironde", "num": 2
       };
const candidatN = {
       "first": "Jean", "last": "Dupont", "circo": circo_3302
};
circo_3302.population = 25600;
candidatN.circo.population // 25600 new property is "concatenated"

4.4.4.1 Using the instruction for…in

There exists a property enumeration instruction in JavaScript: for..i n

const candidatN = {"first": "Jean", "last": "Dupont", … …};
for (let prop in candidatN) {console.log(prop);}
for (let prop in candidatN) {console.log(candidatN[prop]);}
// these instruction lines successively display:
    "first", "last", "age", "circonscrition"
    "Jean", "Dupont", 22, [Object()]

NOTE 1.– for..in looks like a loop, but it is an enumerator: it lists the enumerable properties of the object, either own properties or delegated by the prototype. To break down between own/delegated properties, use obj.hasOwnProperty(prop).

NOTE 2.–for..in is not recursive, for a nested object, you must code recursively.

4.4.4.2 Using the static methods of Object

Object.keys(obj)/.values/.entries returns an array of the enumerable properties of obj in the same order than for..in but limited to each property: keys returns the names, values the values and entries the couples. Let us compare:

for (let p in candidatN) {
if(candidatN.hasOwnProperty(p)){console.log(candidatN[p]);}
}
// equivalent to:
Object.values(candidatN).forEach(function(v){console.log( v );};

4.4.4.3 Methods of JSON object (with option function)

The JSON methods accept a second, optional, argument: a function with two arguments (key, value).

For example, with ‘JSON.stringifyʼ we cannot directly “stringify” a method, but we can get its code as plain text::

function stringifyTheMethods(k, v) {
return (typeof v === "function")? v.toString(): v;
});
JSON.stringify(candidatN, stringifyTheMethods);
// yields:
{"first":"Jean","last":"Dupont","circo":{"dept":"Gironde","num":2},"fullName ":"function() {return this.first +" "+ this.last;}"}

NOTE.– The quotes used in the code are escaped.

For example, with ‘JSON.parseʼ, to avoid warning messages (“JSON badly formed”), we can add escapements for tabulations, line breaks, etc., with regular expressions::

function escapeSpecialChars(k, v) {
      return v.replace(/"/g, "\"")   // quotes
              .replace(/
/g, "\n")   // line feed
              .replace(/
/g, "\r")   // carriage return
              .replace(//g, "\b")   // back space
              .replace(/	/g, "\t")   // horizontal tab
              .replace(/f/g, "\f");  // new page
}
JSON.parse( jsonText, escapeSpecialChars );

4.5.2.1. Conclusion

With the object notation {…} we can create objects whose prototype is Object.prototype.

With the Object.create(p) method, we can create objects whose prototype is the object p, which therefore becomes a prototype unbeknownst to itself.

The prototypes chain is also an inheritance chain: the properties of an object playing the role of a prototype are delegated to all the objects upwards in the chain.

The inheritance by delegation is dynamic: any modification of a method of a certain prototype object automatically modifies the method used by any object that has the prototype in its chain.

NOTE.– By contrast, a method is “static” if that method is owned by the object itself.

JavaScript is very permissive; it is sometimes unwise to use this flexibility: some recommendations are as follows:

RECOMMENDATION 1.– Objects are containers, the contents can be modified, but do not modify the box: use const x = Object.create(p); or const x = {..}; to declare and create an object.

RECOMMENDATION 2.– Its prototypes chain is the marker of an object; do not modify that chain once created and do not use Object.setPrototypeOf(x).

In the following, three object construction approaches are described: literal with the operator {..}, prototypal with Object.create and classical with the operator new.

4.5.3.1. The object–function “Function”

The built-in object Function is a function, and as such (see chapter 5) it owns a special property named prototype, which is not to be confused with the [[prototype]] property. Hence Function owns a Function.prototype and a [[prototype]].

4.5.3.2. The object–function “Object”

The built-in object Object is a function, therefore it owns an Object.prototype, which points to the root to any prototypes chain, and whose [[prototype]] is null.

4.5.3.3. The operator {..}

The literal approach for creating an object is: const x = {..}; it:

• – creates a new object x: implicitly with function Object;
• – sets the prototype: x[[prototype]] = Object .prototype;
• – sets constructorʼs name: x.constructor.name = "Object".

Once created, the object may receive new properties, and others can be modified:

const x = {last: "Dupont", first:"J"};
x.first = "Jean";
x.full = function(){return this.first+" "+this.last}

NOTE.– These properties and methods are named “static” and we must use the object itself to modify them. By contrast, properties or methods delegated from the prototype can be modified independently.

4.5.6.1. What does the JavaScript operator new do?

It invokes a function, which is named a “constructor”. Good practice is to capitalize its name with an uppercase letter:

function Candidat(last){this.last = last;}       // line 1
const x = new Candidat("Dupont");                // line 2

Line 1: Two objects are created: Candidat and Candidat.prototype.

WARNING.– The property Candidat.[[prototype]] is Function.prototype, for Candidat is a function, which inherits function’s methods: e.g. call.

Line 2, new Candidat, acts as follows:

• – creates a new object x, which is assigned to the pronoun this, inside the function. Otherwise, this = window (or the global object);
• – returns implicitly this (unless an explicit return is coded: to avoid!);
• – updates x.[[prototype]] = Candidat.prototype, which makes x inherit by delegation;
• – updates x.constructor = Candidat.

The role of the constructor is very limited: the object Candidat.prototype is the one that really triggers the inheritance by delegation. The overall classical operation¹ is complex, even if it is transparent for the programmer.

4.6.1.1. Classical simulation: class “Person” and subclass “Candidate”

function Person (last, first) {                        // line 1
    this.last = last || "?";
    this.first = first || "";
}
function Candidate (last, first, dN) {                 // line 2
     Person.call(this, last, first); // uses code of Person with this
     this.dN = dN || "somewhere";
}
Candidate.prototype = new Person();                    // line 3
Candidate.prototype.constructor = Candidate;           // line 4
Person.prototype.fullName = function(){                // line 5
        return this.first+" "+this.last;
};
Candidate.prototype.fullName = function(){            // line 6
       return Person.prototype.fullName.call(this)+", at "+this.dN;
};
const c1 = new Person("D","Jean", "Creuse");
const c2 = new Candidate("D","Jean", "Creuse");

Let us comment on the logics of that code:

• – lines 1 and 2, the functions Person and Candidate are creating prototypes, and make some initializations;
• – line 2: Candidate “recycles” the code of Person with itself (this), i.e. the object that will be created when invoking new Candidate(). This is the job of Person.call (see Chapter 6).
• – line 3: links Candidate to the prototypes chain of Person:

  c2 ¬ Candidate.prototype ¬ Person.prototype ¬ Object.prototype

• – line 4: updates property constructor, which line 3 initialized to Person;
• – line 5: adds method fullName to Person.prototype;
• – line 6: recycles the code Person.fullName in Candidate.prototype.

The inheritance is controlled in lines 3-4. Finally, for c1, c2, let’s print: 'c.constructor.name', JSON.stringify(c) and c.fullName():

     name                            JSON                   fullName()
Perscn        {"last":"D","first":"Jean"}               Jean D
Candidate     {"last":"D","first":"Jean","dN":"Creuse"} Jean D, en Creuse

4.6.1.2. Prototypal simulation: class “Person” and subclass “Candidate”

function Person(){}                                 // line 1
function Candidate(){}                              // line 2
Person.prototype.fullName = function(){             // line 3
    return this.first+" "+this.last;
};
Candidate.prototype = Object.assign(                // line 4
                 Object.create(Person.prototype),
                 { fullName(){
    return Person.prototype.fullName.call(this)+", at "+this.dN;
}});
Candidate.prototype.constructor = Candidate;         // line 5
const p1 = Object.assign(                            // line 6
                 Object.create(Person.prototype),
                 { last:"D", first:"Jean", dN:"Creuse"});
const p2 = Object.assign(                            // line 7
                  Object.create(Candidate.prototype),
                  { last:"D", first:"Jean", dN:"Creuse"});

Let us comment and compare:

• – lines 1 and 2, functions Person and Candidate merely create prototypes;
• – line 3: adds fullName to Person.prototype (= line 5 classical);
• – line 4: the assign/create pattern modifies Candidate.prototype to inherit from Person.prototype, and updates method fullName (= line 6 classical);
• – line 5: updates Candidate.prototype.constructor (= line 4 classical).

Figures 4.5 and 4.6 demonstrate the similarity of the two approaches.

In Figures 4.5 and 4.6, the numbered dotted lines represent the prototype chains of the following objects:

c2/p2 ¬ Candidate.prototype ¬ Person.prototype ¬ Object.prototype ¬ null.

In the prototypal approach, 'pattern' replaces 'new', and there is no initialization for Person and Candidate.

4.6.2.1. Properties

• – Every object owns two types of properties: “own”, or “inherited” by delegation from one prototype of its prototypes chain;
• – among own properties, some are not enumerable: the property [[prototype]] is hidden, which protects it. Preserving the link, preserves the mechanism of delegation;
• – the property constructor refers to the function f that provides its f.prototype to the object (if a literal f = Object). The constructor.name property is shared by all the objects of an equivalence class.

4.6.2.2. Values

• – The value of a property is a reference: after deleting a property, the garbage collector will check if the referred value must be flushed or not.

4.6.2.3. Methods

• – Methods are generally meant to be shared by the objects linked to the same prototype: you must add them to that prototype.

Methods defined in the constructor are “static” and methods defined in its prototype are “delegated”. For example:

function Candidate(last, first){    // method in the constructor
   this.last = last; this.first = first;
   this.full = function(){return this.first+" "+this.last};
}
const c1 = new Candidate("Dupont"), c2 = new Candidate("Durand");
(cl.full === c2.full);             // false: not shared

The full method is different for each new instruction. You may get hundreds!

  function Candidate(last, first){
     this.last = last; this.first = first;
}                        // method in the prototype
Candidate.prototype.full = function(){return this.first+"…};
(cl.full === c2.full);   // true: shared

A single method 'full' is delegated: not found among the own properties, the method is taken from the prototype. One unique version for hundreds!

4.6.2.4. Inheritance kinds (delegation, concatenation)

There are two ways to provide properties to an object:

• – delegation: if the referred property is present in the prototypes chain, inheritance is dynamic. (see: 'Object.create');
• – concatenation: if the referred property is copied from another object, it becomes static to be updated whenever necessary (see: 'Object.assign').

4.6.2.5. Multiple inheritance in JavaScript

An object inherits from only one prototype (delegation). The concatenation makes it possible to multiply static inheritances under the condition that the referred objects (from which copies are made) remain unchanged. This can be the case when we concatenate methods or specific values, which are meant to be constant. One solution can be to “freeze” those referred objects (Object.freeze), hence preserving them from later modifications.

4.6.2.6. Conclusion about the notion of “class” in JavaScript

There is no “class” nor “instance” in JavaScript, however we have learnt that a generic concept is provided by the "equivalence class” induced by the relation “has prototype”, and we can name it (constructor.name). Any member of that class can be named an “instance”, if you are pleased with it.