0

So, ES6 has added this way of defining a function,

func() { }

And then we have the old way of doing the same,

function func() {}

As far as, I understand

  1. We can use the new short syntax in object and classes only.
  2. And ES6 classes can only have these short syntax functions, adding long function syntax gives error

I am trying to understand what is the actual implementation difference between the two. Is it related to the use of this or super key word.

Ankur Marwaha
  • 1,613
  • 2
  • 15
  • 30
  • Not quite "a new way of defining a function". That's a way to define a **method**, which is necessarily bound to a class as you have pointed out. – Yangshun Tay Jan 19 '18 at 03:07
  • But we can define it in an object as well. – Ankur Marwaha Jan 19 '18 at 03:09
  • Read more here https://stackoverflow.com/questions/155609/difference-between-a-method-and-a-function – Yangshun Tay Jan 19 '18 at 03:12
  • @AnkurMarwaha an object is merely an instance of a class. – fubar Jan 19 '18 at 03:15
  • @YangshunTay You are saying that the new and old syntax can be called method and function respectively. right ? – Ankur Marwaha Jan 19 '18 at 03:17
  • "*What is the actual difference between the two?*" - uh, the one makes the function a part of a (class prototype) object, the other declares a variable in the local scope? – Bergi Jan 19 '18 at 03:33
  • @Bergi ok so, short syntax defines the class prototype. But in case I use both syntaxes on an object it shows no difference. e.g. ----- `obj={f: function(){}, d(){}}` – Ankur Marwaha Jan 19 '18 at 03:46

1 Answers1

0

Good question!

Here are some of the ways you can declare a function (that can possibly be named doSomething):

Normal function declaration (for the lack of a better world)

This can defined in any block in your code

function doSomething() {
}

Class method and Object shorthand syntax (ES6 only)

These can only be declared inside Class blocks and objects where the function keyword isn't required

class MyClass {
  doSomething() { // class method
  }
}

// ES6
const myObject = {
  foo: 1,
  bar: 'baz',
  doSomething() { // shorthand: key 'doSomething' whose value is a function
  },
}

// ES5 (also ES6)
var myObject = {
  foo: 1,
  doSomething: function doSomething() {
  },
}

Anonymous Functions (functions without a name)

// doesn't have a name but can be invoked using the variable name
const myFunction = function () {}

Callback functions (also can be anonymous)

fetch('/path/to/page').then(function () {
  // do something
})

// same as above but with name
fetch('/path/to/page').then(function doSomething() {
  // do something
})

Immediately-Invoked Functions (IIFE)

(function doSomething() {
  // do something immediately
}())

I'm going to pause here to note that all of the above types of function declaration above have their own scope. Meaning, the this keyword references the actual function, not its surrounding scope.

Arrow functions (lexically scoped)

Meaning that these functions keeps surrounding context when using the this keyword.

const doSomething = () => {
  // do something
}

const myObject = {
  doSomething: () => {
    // do something
  }
}

fetch('/path/to/page').then(() => {
  // do something
})

(() => {
  // do something immediately
})()
Waseem
  • 651
  • 1
  • 5
  • 15
  • How does this answer the question? It lists a bunch of syntax related to functions, but it doesn't explain the difference that was asked about. – Bergi Jan 19 '18 at 03:34
  • I tried to answer the question in the first two options by explaining the difference between ES6 and ES5 and what the syntax means. – Waseem Jan 19 '18 at 03:37