Why is the execution context of ES6 IIFEs and ES5 IIFEs different?

Question

The title about sums up the question - this is the code example:

!function() {
    console.log(this); // global object
}();

(function() {
    console.log(this); // global object
})();

() => {
    console.log(this); // {}
}();

var x = (function() {
    console.log(this); // global object
})();

What is happening behind the scenes wrt to the arrow function? If I wanted that scope in ES5, so far as I know, I would have to bind the execution to an empty object like so:

!function() {
    console.log(this); // global object
}.bind({})();

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this — Evan Trimboli, Jul 23 '16 at 07:55
@ZachSmith that's because the function doesn't return anything. — Mulan, Jul 26 '16 at 05:57
ah. then they are not the same. since you are storing a variable with example 4, but not with example 2 (if there is a return) — Zach Smith, Jul 26 '16 at 06:00
@ZachSmith my point was more about the IIFE being identical. Variable assignment is irrelevant to the topic. — Mulan, Jul 26 '16 at 17:08

score 5 · Accepted Answer · answered Jul 23 '16 at 07:58

It's nothing to do with ES5 or ES6, arrow functions always get the enclosing function's context. Function invocation without using 'use strict'; is always get the global object as context (window in the browser for example), when used, the context is undefined by default.

This is a very good article explaining the topic:

https://rainsoft.io/gentle-explanation-of-this-in-javascript/

Why is the execution context of ES6 IIFEs and ES5 IIFEs different?

1 Answers1