/differences-between-arrow-and-regular-functions/

[panzerdp]

Written on 05/16/2020 13:13:26

URL: https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/

[Storky]

Dmitri Greatest thanks for you articles, which I googled before job interview, and googled again to pass internal interviews. Its best articles in the web with complete explanation exactly how its required by interviewers. There are yet one of threads which is not explained good in the web. Its event loop with micro and macro tasks. Meanwhile I gonna check all your other articles on this site.

[panzerdp]

Thanks @Storky, I'm glad my posts had helped you pass the interview.

There are yet one of threads which is not explained good in the web. Its event loop with micro and macro tasks.

Yes, I have in plans to write good tutorials about the event loop too.

[ayoola-moore]

By default, normal function are hoisted except when they are written as an expression. However, because arrow functions are written as an expression, they are not hoisted by default.

[panzerdp]

By default, normal function are hoisted except when they are written as an expression. However, because arrow functions are written as an expression, they are not hoisted by default.

@ayoola-moore Indeed, that's another important difference. Thanks for sharing!

[indrasen536]

Best explanation ever

[panzerdp]

Best explanation ever

Thank you @indrasen536!

[nicholaspufal]

Thanks for compiling this in such thorough manner. Was casually googling about this to refresh my mind :)

[panzerdp]

Thanks for compiling this in such thorough manner. Was casually googling about this to refresh my mind :)

@nicholaspufal Repetition is the mother of skill!

[JamesParrott]

Great article.

5) also applies to a class's static methods. An arrow function can be used to ensure 'this' refer to its class.

[ghost]

another difference is when you use normal function and call it before its defined it runs normally but in arrow functions you must define then call !

[panzerdp]

another difference is when you use normal function and call it before its defined it runs normally but in arrow functions you must define then call !

You're right!

[majidmehrabi]

It was very useful.

[greatgraphicdesign]

This was concise and easy to follow. Thank you so much!

[panzerdp]

This was concise and easy to follow. Thank you so much!

Thanks @greatgraphicdesign!

[stardustman]

const myObject = {
  method() {
    console.log(this);
  }
};
// Method invocation
myObject.method(); // logs myObject

============ I run the code in my chrome console, the result is:

const myObject = {
  method() {
    console.log(this);
  }
};
myObject.method()
{method: ƒ}

why?

[panzerdp]

const myObject = {
  method() {
    console.log(this);
  }
};
// Method invocation
myObject.method(); // logs myObject

============ I run the code in my chrome console, the result is:

const myObject = {
  method() {
    console.log(this);
  }
};
myObject.method()
{method: ƒ}

why?

{method: ƒ} is myObject.

[prashantdhokare]

const obj = { objName: 'Obj', arrowFun: () => { console.log(this.objName); }, regularFun: function (){ console.log(this.objName); } };

obj.regularFun(); // Obj obj.arrowFun(); // undefined

Could you please explain why arrow function referring 'global this' instead of 'obj this' here.

[zhangenming]

arrow did not hava prototype

[AbhisekJS]

@prasantdhokare

No matter how or where being executed, this value inside of an arrow function always equals this value from the outer function. In other words, the arrow function resolves this lexically.

[ValenciaW9]

Thank you

[spencerdelange]

Hi @panzerdp, you're articles are fantastic and I've been binging them.

A question on the word 'lexically'. Google tells me lexically is defined as an adverb 'connected to the words of a language'.

With a statement like: "Again (same as with this value), the arguments object is resolved lexically: the arrow function accesses arguments from the outer function.", what does lexically mean in the context?

Argument is resolved by the words in the language could be interpreted as any of the words in the Javascript language, i.e. the arrow function definition or the outer function.