What is difference between "Name () { }" and "function Name() { }"?

Question

I am wondering what is difference between Name(){ } and function NAME() { } and Name = () => { }?

When I used Name(){ }, I got an error and then I modified it to Name = () => { } after that it worked.

//this doesn't work.
onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}
//this works.
onClickHandler = () => {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

• Patrick Roberts: Depends on what you mean by "it works". this won't refer to what you expect it to.
• Scott Marcus: The first is invalid syntax that means nothing. The second is a variable assignment to an Arrow Function.
• Andrew Kim: it has to do with context and the value of this in relation to the function
• Andrew Kim: not in it's current state, it would need the function keyword, like @ScottMarcus is saying, the first is invalid syntax
• trincot: "other situation" is when you use it as part of a wider syntax context, such as a class definition or an object literal. But on its own it is a syntax error. It's like saying that sometimes - works and sometimes not. It works in an expression, not as a stand-alone statement.

Answer 1

The first example is not valid syntax. It doesn't define or invoke anything and will result in an error because the JavaScript runtime will think that you want to invoke the onClickHandler function, but then won't understand what the following block (delimited by {} is for):

onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

The second is a variable assignment of an Arrow Function to the variable and while the syntax is valid, the use of this within an Arrow Function will not produce the same results as with a function declaration or function expression:

let onClickHandler = () => {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

The following is a Function Declaration. Function Declarations are hoisted, can be passed as data, and they can be invoked as functions or constructor functions:

function onClickHandler() {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

The following is a Function Expression (an anonymous function assigned to another item). The function portion of the expression is not hoisted.:

let onClickHandler = function () {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

• Isaac Vidrine: The first example, onClickHandler(){} is valid syntax for defining ES6 class methods.
• Scott Marcus: @IsaacVidrine As it is written by the OP, it is invalid.
• Isaac Vidrine: As it was written, sure, but that is beside the point of the question.
• Scott Marcus: @IsaacVidrine How is it besides the point of the question? The OP does not mention anything about ES6 classes and, in fact, states that the first syntax doesn't work. It is exactly the point of the question.
• Isaac Vidrine: because his question was I am wondering what is difference between Name(){ } and function NAME() { } and Name = () => { }. and saying that his first example was invalid javascript syntax is only partially true. Given the way he was using it, yes. But why not explain that he is using it wrong rather than simply saying it is invalid syntax, period. Now other people will see your answer and assume that it is invalid syntax always. Then be confused when they see it actually being used.

Answer 2

Just for the sake of clarification, I'll add in my two cents.

Your first example

onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

is valid syntax for defining ES6 class methods. Heres an example:

class MyAwesomeClass {
 constructor() {
 this.name="Isaac" 
 }
 
 printName() {
 console.log(this.name) 
 }
}
let m = new MyAwesomeClass();
m.printName();

Honestly don't know why so many people were quick to say it was "invalid JavaScript syntax", but wouldn't explain that it is acceptable syntax in some situations.

• ryonz: Thank you for your comment. I have one question about it. When I used the first one in my code I got an error like below. TypeError: Cannot read property 'state' of undefined
• Isaac Vidrine: @ryonz not sure, post some more snippets of your code. If you're calling this.setState im assuming you have a react app. Depending on where you are calling the function, the context of this will change. You may need to say this.onClickHandler = this.onClickHandler.bind(this) in the constructor.
• ryonz: I got it! I add bind(this) to 'this.onClickHandler', after that everything can work! Thank you a lot

Answer 3

I think this might be what you are potentially talking about. Let's say we have a click event:

Given this html:

<button id="button">click me</button>

You might handle the click event like this:

 document.getElementById('button').addEventListener('click', onClickHandler)

Let's say you used the function keyword in your first example and it looked like this:

function onClickHandler(){
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

In this example this is actually the dom element you're clicking on.

In your second example:

const onClickHandler = () => {
 let nextVersion = parseInt(this.state.version, 10) + 1
 this.setState({ version: nextVersion.toFixed(1)})
}

The handler leverages an arrow function which has lexical bound this. This means that the value of this or context is bound to the originating context. Which since you said "this works" means it's what you want it to be, not the button(aka. dom element).