One of the most anticipated new features in the ES6 Javascript standard was the . It promises a than it’s predecessor the . In addition(and IMHO more exciting) is how the new Arrow Function binds, or actually bind it’s own Arrow Functions bind their context so actually refers to the originating context. Arrow Function Expression shorter syntax Function Expression DOES NOT this . lexically this Let’s take a deeper look at both of these implementations. Keep in mind that ES5 references below generically mean pre-ES6. A lot of people have been asking about the editor theme in use in these tutorials. It’s the AYU Sublime theme coupled with the Apple SF font(thin). If you like this post check, out my recent post on Component sharing via react-native-web and give me a follow on twitter : _Sorcery?_medium.com react-native-web and true Component Sharing Basic Arrow Function Syntax We will get to some more concrete examples in a second, but let’s get this out of the way first. You can see the basic syntax for a statement on line 3 and an expression on line 4. Note the line 4 equivalent on line 5. With single parameter functions, parentheses are optional(lines 8–9). No param function example on line 12. Shorter Functions Example 1 shorter functions ex 1 Note the ES5 function on line 12. An ES6 implementation on line 17 and a ES6 implementation on line 22. .map() BETTER Example 2(Expressions and Statements) shorter functions ex 2 Lexical this Se we have established that the syntax for ES6 Arrow Functions is superior to previous standards, now let’s take a look at the execution context implications. In the past you may have chosen the common pattern of a top-level followed by a nested web of and statements. Check out this representation below. this .bind(this) self=this lexical this Lines 4, 11 and 17 all offer ES5 implementations for managing existing execution context limitations. You can see on Line 24 the ES6 Arrow Function lexical this context. So exactly is ‘lexical this’ allowing us to pass execution context? By using ‘lexical scoping’. just means that it uses from the code that contains the Arrow Function. HOW Lexical Scoping this I think a good way to finish this article would be to sum up the overall state of functions in ES6. You will likely hardly ever see old school functions as ES6 begins to take hold: Constructor functions will hopefully be replaced by class declarations Functions as subroutines will be replaced by arrow functions Functions as methods will be replaced by method definitions So that’s it for Arrow Functions in ES6. Let me know your thoughts and questions and ive me a follow on . Keep after it. g twitter If you like this article, please recommend and share to help others find it!

Apple

Mozilla

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Javascript ES6 — Arrow Functions and Lexical `this`

Too Long; Didn't Read

Companies Mentioned

Ben Garrison

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Javascript ES6 — Arrow Functions and Lexical `this`

Too Long; Didn't Read

Companies Mentioned

Ben Garrison

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES