JavaScript ES6 , write less, do more - AkuCode

JavaScript ES6 , write less, do more - AkuCode

    ECMAScript is the standard upon which JavaScript is based, and it’s often abbreviated to ES. Discover everything about ECMAScript, and the last features added in ES6, aka ES2015. ECMAScript 2015, is also known as ES16, is a fundamental version of the ECMAScript standard. Published 4 years after the latest standard revision, ECMAScript 5.1, it also marked the switch from edition number to year number.
    So it should not be named as ES6 (although everyone calls it as such) but ES2015 instead.
ES5 was 10 years in the making, from 1999 to 2009, and as such, it was also a fundamental and very important revision of the language, but now much time has passed that it’s not worth discussing how pre-ES5 code worked.
    Since this long time passed between ES5.1 and ES6, the release is full of important new features and major changes in suggested the best practice in developing JavaScript programs. To understand how fundamental ES2015 is, just keep in mind that with this version, the specification document went from 250 pages to ~600.

The most important changes in ES2015 include

  • Arrow functions
  • Promises
  • Generators
  •  let and const
  •  Classes
  • Modules
  • Multiline string
  • Template literals
  • Default parameters
  • The spread operator
  • Destructing assignments
  • Enhanced object literals
  • The for..of loop
  • Map and Set
Each of them has a dedicated section in this article

Arrow Functions

    Arrow function since their introduction changed how most JavaScript code looks (and works).
Visually, it’s a simple and welcome change, from:
const foo = function foo(){
//…
}
to
const foo = () => {
//…
}
    And if the function body is a one-liner, just:  
const foo = () => doSomething()
    Aldo, if you have a single parameter, you could write:
const foo = param => doSomething(param)
This is not a breaking change, regular functions will continue to work just as before.

A new this scope

    This scope with arrow function is inherited from the context. With the regular functions, this always refers to the nearest function, while with arrow functions this problem is removed, and you won’t need to write var that = this ever again.

Promises

    Promises (check the full guide to promises) allow us to eliminate the famous “callback hell”, although they introduce a bit more complexity (which has been solved in ES2017 with async, a higher level construct). Promises have been used by JavaScript developers well before ES2015, with many different libraries implementation (e.g. jQuery, q, deferred.js, vow…), and the standard put a common ground across differences.

    By using promises you can rewrite this code
setTimeout(function(){


console.log(‘I Promised to run after 1s’)


setTimeout(function(){


console.log(‘I promised to run after 2s’)


}, 1000)

}, 1000)
    As
const wait = () => new Promise((resolve, reject) => {


setTimeout(resolve, 1000)


})


wait().then(() => {


consolge.log(‘I promised to run after 1s’)


return wait()


})

.then(() => console.log(‘I promised to run after 2s’))

Generators

    Generators are a special kind of function with the ability to pause itself, and resume later, allowing other code to run in the meantime. The code decides that it has to wait, so it lets other code “in the queue” to run, and keeps the right to resume its operations “when the thing it’s waiting for” is done.
    All this is done with a single, simple keyword: yield. When a generator contains that keyword, the execution is halted. A generator can contain many yield keyword, thus halting itself multiple times, and it’s identified by the *function keyword, which is not to be confused with the pointer dereference operator used in lower-level programming languages such as C, C++ or Go.

Generators enable whole new paradigms of programming in JavaScript, allowing:
• 2-way communication while a generator is running
• Long-lived while loops which do not freeze your program

    Here is an example of a generator which explains how it all works.
function *calculator(input){


var doubleThat = 2 * (yield (input/2))


var another = yield (doubleThat)


return (input*doubeThat*another)


}


We initialize it with
const cal = calculator(10)
    then we start the iterator on our generator:
calc.next()
    this first iteration starts the iterator. The code returns this object:
{


 done: false


 value: 5

}
    What happens is: the code runs the function, with input = 10 as it was passed in the generator constructor. It runs until it reaches the yield, and returns the content of yield: input / 2 = 5. So we got a value 5, and the indication that the iteration is not done (the function is just paused).
    In the second iteration we pass the value 7:
calc.next(7)
    and what we got back is:
{


 done: false


 value: 14

}
    7 was placed as the value of the doubleThat. Important: you might read like input / 2 was the argument, but that’s just the return value of the first iteration. We now skip that, and use the new input value, 7, and multiply it by 2. We then reach the second yield, and that returns doubleThat, so the returned value is 14.
    In the next, and last, iteration, we pass in 100
calc.next(100)
    and in return we got
{


done: true


value: 14000

}
    As the iteration is done (no more yield keywords found) and we just return (input * doubleThat * another) which amounts to 10*14*100.

let and const

    var is traditionally function scoped. let is a new variable declaration which is block scoped. this means that declaring let variables in a for loop, inside an if or in a plain block is not going to let that variable “escape” the block, while var is hoisted up to the function definition.
    const is just like let, but immutable. In JavaScript moving forward, you’ll see little to no var declarations any more, just let and const. const in particular, maybe surprisingly, is very widely used nowadays with immutability being very popular.

Comments
Newer Posts Older Posts