As a consequence each object instance will create a new, separate function.
For a regular method a single function exists on the prototype object of all the object instances that share it - i.e. one single function is reused across all object instances. For traditional methods (including the short hand syntax) this (the function context) refers to the calling context.
So when using arrow functions for "regular methods" you are creating more functions than you need to.
Arrow functions in class declarations are justified when that function is intended to be used as a callback (e.g. event listener), i.e. it needs to be bound to (this of) that particular object instance.
Also ES6 is the legacy term for ES2015. There is no ES7. Since ES2015 TC39 has annually published updates to the spec, e.g. ES2016, ES2017, etc.
The additions (finished proposals) for each publication year are identified here.
Some people use "ES.Next" when Babel offers implementations of proposals before they reach stage 4 (finished).
var variables are globally scoped or accessible.
Inside a function they are scoped to the function - i.e. not globally accessible - that is what the "immediately invoked function expressions" IIFE are about. However var declarations are effectively hoisted to the top of the function - independent of where they appear inside the function.
is a bit misleading. It's more accurate to say that classes are syntax sugar for constructor functions.
we use this keyword to refer to the current class.
"we use this keyword to refer to the current object (an instance of the class)."
And as already mentioned this has a different meaning in arrow and traditional methods:
arrow function - the object the function was created on
traditional method - the object the method is called on
The super method
super is a keyword. super([arguments]) is only valid in the constructor. super.name or super[name]can be used to access properties (and functions/methods) on the parent.
The spread operator is used for splitting up the values of an array
The spread syntax also works on object literals and can also be used to convert an iterable to arguments for a function call.
I am a User Interface Designer learning web development. I don't know what I am doing but I am trying my best to grow as a self taught developer.
Welcome to my newbie tech journey.๐ฉโ๐ป
Edit:
When the "Standard ECMA-262 6th Edition" was being drafted it was referred to as ES6.
However before it was finalized the committee decided to go with the ES2015 moniker to reflect the fact that they intended to publish yearly updates to the specification - which they have done so far.
Publications before June 2015 can be excused for using the ES6 moniker, past that ES2015 should have been used.
It's been 5 years - it's time to let go of the edition based moniker unless one is referring to ES5.1 and below.
I am a User Interface Designer learning web development. I don't know what I am doing but I am trying my best to grow as a self taught developer.
Welcome to my newbie tech journey.๐ฉโ๐ป
Edit:
Method vs "arrow function on public class field" weirdness:
classA{myArrow=()=>{console.log('A.myArrow()');}myMethod(){console.log('A.myMethod()');}}classBextendsA{myArrow=()=>{super.myArrow();// arrow function exists on // public class field of A but// but is not available on // the prototype chain via `super`console.log('B.myArrow()');}myMix(){super.myArrow();// same problemconsole.log('B.myMix()');}myMethod(){super.myMethod();// just worksconsole.log('B.myMethod()');}}letmyB=newB();myB.myMethod();// 'A.myMethod()'// 'B.myMethod()'myB.myMix();// Uncaught TypeError: (intermediate value).myArrow is not a function at B.myMixmyB.myArrow();// Uncaught TypeError: (intermediate value).myArrow is not a function at B.myArrow
I am a User Interface Designer learning web development. I don't know what I am doing but I am trying my best to grow as a self taught developer.
Welcome to my newbie tech journey.๐ฉโ๐ป
Despite of what you may see in framework tutorials in terms of "Vanilla JS" that is considered bad form.
The issue is that in arrow functions
this
refers to the lexical scope that created the function.As a consequence each object instance will create a new, separate function.
For a regular method a single function exists on the prototype object of all the object instances that share it - i.e. one single function is reused across all object instances. For traditional methods (including the short hand syntax)
this
(the function context) refers to the calling context.So when using arrow functions for "regular methods" you are creating more functions than you need to.
Arrow functions in class declarations are justified when that function is intended to be used as a callback (e.g. event listener), i.e. it needs to be bound to (
this
of) that particular object instance.Please have a look at:
Also ES6 is the legacy term for ES2015. There is no ES7. Since ES2015 TC39 has annually published updates to the spec, e.g. ES2016, ES2017, etc.
The additions (finished proposals) for each publication year are identified here.
Some people use "ES.Next" when Babel offers implementations of proposals before they reach stage 4 (finished).
Inside a function they are scoped to the function - i.e. not globally accessible - that is what the "immediately invoked function expressions" IIFE are about. However
var
declarations are effectively hoisted to the top of the function - independent of where they appear inside the function.There is a class declaration and class expression.
The MDN's statement:
is a bit misleading. It's more accurate to say that classes are syntax sugar for constructor functions.
"we use
this
keyword to refer to the current object (an instance of the class)."And as already mentioned
this
has a different meaning in arrow and traditional methods:super is a keyword.
super([arguments])
is only valid in the constructor.super.name
orsuper[name]
can be used to access properties (and functions/methods) on the parent.The spread syntax also works on object literals and can also be used to convert an iterable to arguments for a function call.
JSX supports spread attributes:
Some people think of the rest syntax as "gather" because it collects the remaining arguments.
The
rest
syntax can also be used for Array destructuring and Object destructuring.You can use "rest in object destructuring" to omit object properties.
One issue is that these functions are limited to arrays rather than general iterables. While at times Array.from, Object.entries, Object.keys, and Object.values can be helpful often it's more performant to stick to using for..of.
ES7 => ES2016
True, I agree Jacob.
ECMA-262 7แตสฐ Edition / June 2016 => ECMAScriptยฎ 2016 Language Specification
Edit:
When the "Standard ECMA-262 6th Edition" was being drafted it was referred to as ES6.
However before it was finalized the committee decided to go with the ES2015 moniker to reflect the fact that they intended to publish yearly updates to the specification - which they have done so far.
Publications before June 2015 can be excused for using the ES6 moniker, past that ES2015 should have been used.
It's been 5 years - it's time to let go of the edition based moniker unless one is referring to ES5.1 and below.
Cool...Ill keep this in mind while writing configs that use ES5-11 but hey you do you.
Great input, I will take a look at the links.
Good coverage for three months ๐
Edit:
Method vs "arrow function on public class field" weirdness:
Awesome, explanation. ๐๐