JavaScript and ES6 — “The Confusion”
This article speaks to my present comprehension of the contrasts among JavaScript and ECMAScript. It is equipped towards individuals who know about JavaScript however might want a more clear comprehension of its association with ECMAScript, web browsers, Babel, and that’s only the tip of the iceberg.
It’s important to note that JavaScript preceded ECMAscript.
“ Javascript and Java are Similar ” — Was one of the Confusion that prevailed and is somewhat there till now for people who have used Java and have never used JavaScript .
Brendon Eich (The Creator Of JS) decided that Java was too complicated with all its rules and so set out to create a less complex language that even a fledgling could code in. This is evident in such things like the relaxing of the need to have a semicolon in JavaScript . After the language was complete, the marketing team of Netscape requested Sun Microsystems to allow them to name it JavaScript as a marketing stunt and henceforth why a great many people who have never utilized JavaScript believe it’s identified with Java.
Before Netscape went down, they decided to start a standard that would guide the path of JavaScript, named ECMAScript.
ECMAScript had a few releases and in 1999 they released their last version (ECMAScript 3) before they went into hibernation for the next 10 years.Since then, ECMAScript has gained a lot of momentum and released its 6th Edition with the biggest changes its had thus far.
Regardless of whether ECMAScript is the language and JavaScript is a lingo is questionable, however not significant. If you continue to think like this it might confuse you.
There is no compiler out there that would run ECMAScript, and I believe JavaScript is viewed as the Language which actualizes a standard called ECMAScript.
ARROW FUNCTIONS
As we have seen previously that in JavaScript the function according to Old Syntax is made up of somewhat like shown below :
// Old Syntax
function oldOne() {
console.log(“Hello World..!”);
}While for the ES6 version according to the new syntax we can have a expression similar Lambda expressions in Java. Wherein we define a variable and the functionality using empty brackets pointing to the function definition .
// New Syntax
var newOne = () => {
console.log(“Hello World..!”);
}ES6 provides Arrow Functions, a new way to declare functions, to solve the problem of a very weird feature of JavaScript that : this keyword is not always the object itself.
Explanation :
Here => replaced function keyword and provided a convenient way of making functions: (param1, param2) => { function_body; }
Implicit Return in Arrow Functions
If only one expression is specified in the arrow function without the curly braces (compact body), it becomes the implicit return value of the function. In a with curly braces(block body), you must use an explicit return statement.
const Shivansh = subject => `busy writing about ${subject}`
Shivansh('a blog on JS vs ES6');
// Output : 'busy writing about a blog on JS vs ES6'When returning an object in a compact body, wrap the object with parentheses in order to distinguish it from a block body:
const Shivansh = () => ({
Awesome: true,
Smart: true,
Lazy: false
});
Shivansh();
// Output : { Awesome: true , Smart: true , Lazy: false }Remember that the this keyword is lexically-scoped which means that it takes the value of the context where it is written.
In the case of arrow function methods, the this keyword takes the value of the current execution context of the function where the object method was defined. What really matters is where the this keyword was written , not the place in source code where it is called.
Therefore, arrow functions are not suited for object methods and cannot be used as constructors either, when instantiating an object will raise a TypeError because you would be trying to initialize an object of type undefined (remember that there is no this keyword in arrow functions).
As a general rule, avoid using arrow functions when you need the this keyword or be very careful to what the this keyword points to.
CLASSES
This is one of the most important reason why I am fond of ES6 . ES6 introduced class keyword so that no need to use prototype inheritance when creating a class. Prototypical inheritance, while in my opinion is class-based.
class Circle extends Shape {
draw() {
super.draw();
…
}
}As you can see clearly that in the above example we have used Prototype Inheritance while in the example given below there is no need for it when creating a class.
// ES5
var Shape = function() {…};
Shape.prototype.draw = function() {…};
…ARRAY / OBJECT DESTRUCTURING
Insttead of writing this :
var x = point[0], y = point[1];
var name = obj.name, age = obj.age;We Can make use of much simpler piece of code for performing the similar operation as given below :
var [x, y] = point;
var { name, age } = obj;The destructuring assignment syntax is a JavaScript expression that makes it to unpack values from arrays, or properties /attributes from objects, into different variables.
const ShivanshDetails = {
name: 'Shivansh',
college: 'VIT Vellore',
domain: Web Dev,
};
const {name: name1 , name2} = ShivanshDetails;
console.log(`Hi ${name1} and ${name2}`);The variables name1 and name2 contain the desired values.
These were some noticeable features that I use in my daily work . To Learn More new Features of ES6 look here.
Compatibility Issues ?
One common question about using another language is compatibility. The same question raised for ES5 and CoffeeScript too. Well, CoffeeScript is dead, so this question is reasonable. And here’s the answer:
ES6 is safe.
Take a look at this link and you will get to know that for sure all the browsers have extended the support to ES6 .
Remember that !
If your JavaScript code contains Import or Export, let and const features, then your JavaScript is using next generation syntax which is ES6.
JavaScript = ECMAScript + DOM API;
That leaves us with this fun fact: JavaScript is based on ECMAScript , and ECMAScript is based on JavaScript .
Thanks for reading! If you find this post useful please consider clapping for this post and share it with everyone!
