JavaScript ES6 Awesome
By: Deardo D. Sinaga
Tags: JavaScript, Front End Development, Vanillajs, ES6, HTML

Block-Scoped Variables (let)

Declaring a variable is the most basic thing in code. Without it, you can’t do anything, for sure! But even the simplest thing absolutely need an attention, especially if it affects the scoping. Check this out:

Regular variable

key points:

scope of a var variable is the entire enclosing function

variable is the entire enclosing function redeclaration won’t throw error

hoisting allowed

At the top level, it will create a property on the global object

ES6 let variable

key points:

let variable is blocked-scope

variable is blocked-scope redeclaration absolutely throw error

hoisting not allowed

At the top level, not create a property on the global object

Complete reference: mdn

2. Constant (const)

not only let , there is also another type of variable with different functionality. check this out:

let

key points:

reassigning variable value allowed

declaration without initial value allowed

const

key points:

value can’t be reassign

declaration must put the initial value

Complete reference: mdn

3. Arrow Function

“Being as short as possible!” i think that’s kind of motto for every developer/engineer, especially when you just writing a single statement, you might want to find the shortest way to write the code like function. Check this out:

regular function

key points:

have this

must state return to return value

to return value must state function

must use argument parentheses ()

must use bracket {}

arrow function

key points:

does not have this

no need return to return value in a single statement

to return value in a single statement no need to state function

use => instead of ()

instead of single/simple statement may not use {}

Complete reference: mdn

4. Template literals

Writing multiline string with variables in JavaScript? no need to hassle anymore. check this out:

regular

key points:

use + between variable expression

between variable expression enter doesn’t affect the break line

template strings

key points:

just use `` (back tick) to wrap the strings

(back tick) to wrap the strings use ${} to write expression

to write expression enter will give a breakline

Complete reference: mdn

5. Default Parameter

Handling unused parameter is another thing to do when you don’t assign default parameter values, but is there a shorter way to handle it? check this out:

no default

default

Complete reference: mdn

6. Spread Operator

This one is one of my favourite feature in ES6. it’s like a magical feature! 🌈

As it’s name, the spread operator will spreading the values inside an object/array into various of place (arguments, elements, or object expression). cool right?! let’s check this out:

concat

key points:

concat will put the elements at the end of the array

will put the elements at the end of the array concat dependent to the order of the array

dependent to the order of the array concat not return the values, but the array itself

spread syntax

key points:

spread syntax has no order dependency

spread syntax is more flexible in terms of the order

spread syntax will return the values inside of the array/object

In this topic, concat and spread syntax have their own characteristic and function depends on the cases. but if you need to merge the values of an object/array, and you need the flexible order, spread syntax looks like the best option instead of concat .

Complete reference: mdn

7. Promise

Have you ever running multiple function but you’re not sure if the other process is finished one after another? or maybe you want to start calling a function right after another asynchronous process is done? well, you might use callback but is there another way to handle this kind of thing? check this out:

callback

key points:

callback is passing another function into the argument

is passing another function into the argument nesting a lot of callback might be painful. it could causing callback hell

promise

promise is returning an object

is returning an object promise has 3 states: pending, fulfilled, reject;

Complete reference: mdn

8. Modules (export/import)

On these days, writing code in a non-modular file is absolutely not a choice for every developer whose working in a team. Can you imagine sharing single main.js to write different functions with your team? Impossible. Well, thanks to export/import features! Now you can work with the team with no hassle. Check this out:

write functions as a module, export them

import modules, call the exported function

also you will need to put type="module" to your <script> tag

Complete reference: mdn