قالب وردپرس درنا توس
Home / Tips and Tricks / What is ES6 JavaScript and how is it different? – CloudSavvy IT

What is ES6 JavaScript and how is it different? – CloudSavvy IT



  ES6 JavaScript.

JavaScript powers most of the interactive web, which is why it had to evolve alongside it. New features in JavaScript are now added every year; we'll see what's new and how to use ES6 JavaScript on your website.

JavaScript has many flavors

Oracle is trademarked to the term JavaScript, so the actual standard that modern JavaScript implementations are called the EMCAScript standard or ES. The primary JavaScript standard is EMCAScript 5, or ES5, released in 2009. This is vanilla JavaScript with no special features, supported everywhere, even in IE 9.

ES6 is a fairly new specification, released in 201

5, and it supports a lot new Features. It's technically called ES2015, and each annual release after that is indicated by the year of its release. But everyone calls it ES6 anyway, so we stick to that.

ES6 is particularly important because it marks the beginning of the restandardization of JavaScript. Nowadays EMCA sets a new standard every year. But ES6 was released 6 years after ES5, which was 10 years after ES3, so it's an important milestone.

Using ES6 syntax

ES6 is supported in many places, the main problem being Internet Explorer (as usual). So while you may just be able to start writing ES6 style, you can't be sure everyone's browser will behave the same.

Today it is still usually compiled into "regular" ES5 syntax using a utility such as Babel. Babel is a compiler that will convert your development code (written in ES6 with all its goodies) into code that you will run on your production site, often bundled and reduced with Webpack.

This is how it works: You have your development environment where you write your .js files. You are free to use any nice ES6 syntax you like. Instead of running them directly, set Webpack to load JS files with Babel. Often you want to run webpack-dev server, so this happens automatically when you make changes.

Instead of loading index.js load bundle.js ] that contains all your code. This also has the great advantage of being able to use NPM modules in your JS, but it can make your code bulky if you add too many (although webpack is pretty good at minification).

What's New

There's a lot to unpack here, so this article certainly won't cover everything. For a full list, you can check out this compatibility table, which also includes ES2016 and newer features.

If Babel can generally compile something with an older specification of JS, it is probably safe to use in development. If not, and you don't care about the 3% of the population using IE 11, it's probably supported in most browsers, provided it's not a super new feature.

Arrow functions

Instead of typing: [19659017] arr.map (function (d) {
return d + 1;
});

You can instead replace the function keyword with an arrow after the parentheses:

  arr.map ((d) => {
return d + 1;
}); 

In addition, you don't need the parentheses if you pass only one argument. And you don't need the brackets and return statement if you only return one value:

  arr.map (d => d + 1); 

This is the new expression that closes the syntax and provides nicely compressed functions, especially when working with lists, callback requests or error handling. It is similar to how some lines as statements work.

Simplified creation of objects and arrays with destructuring

Instead of writing:

  var type = "123", color = "blue"
var obj = {type: type, color: color} 

You can just omit the key names and they will be automatically set to the variable names:

  var obj = {type, color} 

In addition, this works the other way around, destructuring command called:

  var {type, color} = obj 

A nice side effect of destructuring is the ... syntax, which works as "etc." and assigns the rest of the array or object to a variable:

  var {type, ... rest} = obj

// rest == {color: "blue"} 

And it also works the other way around, which has the effect of expanding and flattening arrays:

  var arr1 = ["a", "b"] arr2 = ["c", "d"]
var flat = [...a, ...b, "e"]

// flat = ["a", "b", "c", "d", "e"] 

There is much more to destructuring than is discussed here.

Classes

JavaScript now has classes. Here's how it works, from Mozilla & # 39; s documents:

  class Rectangle {
constructor (height, width) {
this.height = height;
this.width = width;
}
// getter
get area () {
return this.calcArea ();
}
// Method
calcArea () {
return this.height * this.width;
}
}

const square = new rectangle (10, 10);

console.log (square.area); // 100 

As you can see, it resembles other object oriented languages, but not quite. As Mozilla states, this new system is & # 39; primarily syntactic sugar over and above the prototype-based inheritance of JavaScript & # 39; and does not make the JS object oriented. But it is still fun to have.

In addition, the class syntax supports static methods and properties, and child classes, but a child class cannot inherit from multiple parents.

Changes in function arguments

ES6 introduces two new ways to write function parameters. First, default parameters can be specified by assigning a value in the function definition:

  var func = (a, b = "default") => {} 

If you would call func without to give two arguments, it would take the default value.

Also, functions can now get an indefinite number of arguments as an array, called the syntax of the parameters of the rest function:

  var func = (a, b, c, ... rest) => {} [19659017] The  remainder  parameter is set to an array of the rest of the function parameters, or  undefined  if no more than the listed parameters are present 

let and const

The let command is a replacement for var which grants specific block range . For example, variables normally work in JS:

  var x = 0; // global variable

function someFunc () {

var y = 3; // local variable

} 

The global variable can be used in the function, but the local function variable cannot be used outside of the function. For example, you can name your variables ["19459008] i "," tmp "," x "and" all count "all of the time and get away with it.

Block range is different and you can redefine variables with nested blocks:

  var x = 0

{
let x = 2
// x == 2
}
// x == 0 again 

With the syntax let you can essentially change the contents of x within that block (be it a function, a catch block or an explicit block), and have it reset when leaving the block. This is especially useful for those temporary variables " count ", because each block has a different scope. The range is inherited to child blocks, but can be nested further and changed again.

The syntax of const is fairly simple. Replace var with const and your variable is now read-only. If you try to write to it, you get the following:

  Uncaught TypeError: Assignment to constant variable. 

Notifying you that you are trying to do something that you are not allowed to do. This has no other purpose than to be a nice coding reminder to avoid some bugs.


Source link