ES6 concise methods and non-concise methods in object literals

Question

let module = {
     add: function(a, b){
        return parseInt(a) + parseInt(b);
     },

    sub(a, b){
        return parseInt(a) - parseInt(b);
    }
};

What are the fundamental differences with using either the concise method syntax, such as sub acove, compared with the traditional non-concise method syntax used by add?

Apart from the obvious differences between syntaxes, are concise and non-concise methods essentially the same?

Answer 1

One notable difference is that concise methods can utilize the super keyword and the non-concise (aka: traditional) methods cannot. This becomes pertinent when changing an object(s) prototype to aid inheritance.

To demonstrate this, consider the following gist:

---

Example:

const frenchPerson = {
  speak() {
    return 'Bonjour';
  }
};

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

const multilinguist = {
  speak() {
    return `${super.speak()}, Hola`
  }
};

console.log(frenchPerson.speak()) // -> "Bonjour"
console.log(englishPerson.speak()) // -> "Hello"

Object.setPrototypeOf(multilinguist, frenchPerson);
console.log(Object.getPrototypeOf(multilinguist) === frenchPerson); // true

console.log(multilinguist.speak()); // -> "Bonjour, Hola"

Object.setPrototypeOf(multilinguist, englishPerson);
console.log(Object.getPrototypeOf(multilinguist) === englishPerson); // true

console.log(multilinguist.speak()); // -> "Hello, Hola"

---

Explanation:

1. Firstly note all objects; frenchPerson, englishPerson, and multilinguist, utilize the concise method syntax.

2. As you can see, the concise method named speak of the multilinguist object utilizes super.speak() to point to the it's object prototype (whichever that may be).

3. After setting the prototype of multilinguist to frenchPerson we invoke multilinguist's speak() method - which replies/logs:

   Bonjour, Hola

4. Then we set the prototype of multilinguist to englishPerson and ask multilinguist to speak() again - this time it replies/logs:

   Hello, Hola

---

What happens when multilinguist's speak() method is non-concise?

When using a non-concise speak() method in the multilinguist object in addition to the super reference it returns:

Syntax Error

As shown in the following example:

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

const multilinguist = {
  speak: function() {           // <--- non-concise method
    return `${super.speak()}, Hola`
  }
};

Object.setPrototypeOf(multilinguist, englishPerson);

console.log(multilinguist.speak()); // -> Syntax Error

Additional Note:

To achieve the above with a non-concise method; call() can be utilized as a replacement for super as demonstrated in the following:

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

// Non-concise method utilizing `call` instead of `super`
const multilinguist = {
  speak: function() {
    return `${Object.getPrototypeOf(this).speak.call(this)}, Hola!`
  }
};

Object.setPrototypeOf(multilinguist, englishPerson);

console.log(multilinguist.speak()); // -> "Hello, Hola!"