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, pared 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?

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, pared 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?

• javascript
• ecmascript-6

Share Improve this question Follow edited Jun 22, 2018 at 11:32 RobC 25.1k2121 gold badges8484 silver badges8686 bronze badges asked Jun 21, 2018 at 8:11 user544079user544079 16.6k4242 gold badges120120 silver badges172172 bronze badges 15

• 1 Are there any pros / cons of using concise methods? – user544079 Commented Jun 21, 2018 at 8:13
• 3 Or With Arrow Function: add = (a, b) => a + b – Tushar Commented Jun 21, 2018 at 8:13
• 2 @axiac No. This is just the short-hand method notation for object-initializers. – Sebastian Simon Commented Jun 21, 2018 at 8:15
• 2 @Xufox You didn't, but as in the fiddle, the arguments seem to work fine? – CertainPerformance Commented Jun 21, 2018 at 8:20
• 2 @CertainPerformance I said the property wasn’t there. module.sub.hasOwnProperty("prototype") === false, module.sub.hasOwnProperty("arguments") === false, etc. – Sebastian Simon Commented Jun 21, 2018 at 8:22

 |  Show 10 more ments

1 Answer 1

Sorted by: Reset to default 7

One notable difference is that concise methods can utilize the super keyword and the non-concise (aka: traditional) methods cannot. This bees 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!"