Comparison Of Syntax

Arrow Function

clickButton(); // error

const clickButton = () => {
  alert(alertMsg.value);
};

clickButton(); // work

Normal Function(can be defined after used)

clickButton(); // work

function clickButton() {
  alert(alertMsg.value);
};

clickButton(); // work

Normal Function(need defined before used)

clickButton(); // error

const clickButton = function() {
  alert(alertMsg.value);
};

clickButton(); // work

Normal Function

• By default, this refers to the object that calls it.

var tmp = 'a'
var obj = {
  tmp: 'b',
  func: function() { console.log(this.tmp)} 
}
console.log(tmp)  // a
obj.func()  // b

obj.func() is called by obj, so this is obj and thus it would print the tmp of obj

Arrow Function

• Introduced in ES6.
• Where it is defined, this refers to that object.

var tmp = 'a'
var obj = {
  tmp: 'b',
  func: () => console.log(this.tmp)
}
console.log(tmp)  // a
obj.func()  // a

obj.func is defined in global environment, so this is global environment and thus it would print the tmp of global environment