JavaScript ES6 Awesome

A JavaScript ES6 most common features that you need to know

cheese :)

Hi! since this is my first medium, before we get started, let me introduce myself to you. I’m Deardo, people call me Ardo, currently working as a Front End Web Developer in one of the ride hailing company in South Jakarta — Indonesia 👋

Working in a Front End world means you will be working closely with CSS and JavaScript. Whatever the framework, the scale or the method, you will never get separated away from CSS and JavaScript! in fact, they will be your very best friends in your daily basis 😃

Well, since the title is ‘JavaScript’, in this article I will share to you about JavaScript only. So without further due, let’s jump into 8 awesome ES6 JavaScript features!

Overview:

• Block-Scoped Variables (let)
• Constant (const)
• Arrow Function
• Template Literals
• Default Parameter
• Spread Operator
• Promise
• Modules (Export/Import)

Extras (ES10 Features):

• Object.fromEntries
• Object.entries

1. 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
• 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
• 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
• 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
• no need to state function
• use => 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
• enter doesn’t affect the break line

template strings

key points:

• just use `` (back tick) to wrap the strings
• use ${} 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
• concat 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
• nesting a lot of callback might be painful. it could causing callback hell

promise

• promise 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

Extras

8 examples above areprobably the most used and some of them are the simplest (I think) ES6 features you might need to know and use (or maybe you already know and use them! 😆).

So if you already know and use them on your work, you might want to take a look at some of ES10 features that I personally think would be cool and very useful. Let’s check this last thing out 😉

Object.fromEntries
Sometimes you might find a case where the data structure is not like the expected, for example when you need an object but you get an array instead. So what will you do? No worries, check this out!

Object.fromEntries

or maybe you want the object to become an array?

Object.entries

To Wrap Up

There are still a lot of ES features you might found in another version. All the examples above are just basic implementation in order to give you the big picture about each feature. You might found more challenging cases in the real world. So keep hustling! 😄 👊

one last thing: i’ve made the live version of the code, you can check on the website; or my github; 😉