This in regular function and arrow function

JavaScript
1

Hello there. I am learning about ‘this’ in java script and I have a few questions. Consider the example

function normalize() {
  console.log(this.coords.map(n => n / this.length));
}
normalize.call({coords: [0, 2, 3], length: 5}); // [0, 0.4, 0.6]

when i change the arrow function to a regular one, an interesting results appears

function normalize() {
  console.log(this.coords.map(function (n){return n/this.length}));
}
normalize.call({coords: [0, 2, 3], length: 5}); //[NaN, Infinity, Infinity]

I dont understand why it returns [NaN, Infinity, Infinity] and why NaN will be returned
What is this referred to in the example 2 without arrow expression? Thanks for your help

2

try to add also a console.log(this) inside the function

I don’t know yet how to explain the difference, but it depends on how the two different functions relate to their outside

3

it seems that it refers to the window object
but I don’t understand why function (n){return n/this.length} will refer to the window object

4

try looking at this:

5

I have read the difference of this in => and regular function
I understand the difference but I still don’t know why the this in example 2 points to the window object

function normalize() {
  console.log(this.coords.map(function (n){return n/this.length}));
}
6

nside a function, the value of this depends on how the function is called.

Since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser.

from the description part of the docs

it just does that