Get started with Next-Gen Javascript

Amine Benkeroum
Apr 18 · 4 min read

Maybe you’re here to have a general idea about what’s going on with JavaScript, or you are a JS developer and you’re moving on smoothly with ES6.

In this post, I will wrap up the main features of ES6 that you can start using today, while you’re sure it’s supported by all modern* browsers ( notice the * on browsers)

First things first, forget “var” start using “let” and “const”

let keyword allows you to define variables considering the block scope.

const myFunction = () => {
let myLet = 10
if(true) {
let myLet = 20
console.log(myLet)
}
console.log(myLet)
}
myFunction()// 20
// 10

const keyword acts like final keyword in Java. It means that the variable that is defined as const will not and cannot (an error will be thrown) be changed again in the entire code.

const myConst = 'I\'m not gonna change'

But listen, you still can use ‘var’ to declare global variables

Arrow Functions

Arrow functions are usually used in anonymous functions where you don’t really care about ‘this’ or you want to use the upper context’s one

Arrow functions don’t have their own this

Single line arrow function ( You should return one statement)

const myFunc = () => console.log('My Function')

Multiline arrow function:

const myFunc = () => { //Your Function body }

Single argument arrow function

const myFunc = arg => { // your func body}

and you may use the () if you have more than one:

const add = (n1, n2) => n1 + n2

Export and Import

When you write code in multiple files, you’ll have to import the function/functions written in one file to another. That’s where you need this.

Export

If you want to expose a single function from your file you can use the default export as given below

export default myfunc

But when you have multiple functions you may use the below syntax. We call this as a named export

export const func1
export const func2

Import

if you are using the default export as given above, you may use the below syntax

import myfunc from './somefile'
import person from './somefile'

If you are importing multiple functions you can use the below syntax

import { func1 } from './somefile'
import { func1, func2 } from './somefile'
import { func1 as f1, func2 as f2 } from './somefile'

Or you can import all at one and use them as below

import * as myFunctionPool from './somefile'// call seperate functions as 
myFunctionPool.func1()
myFunctionPool.func2()

Classes

Classes are blueprints for objects. They can have both properties and methods.

class Planet {
constructor(){
this.name = 'Earth'
this.age = 2300
}
getName() { console.log(this.name) }
}
const earth = new Planet()
earth.getName()Spread and Rest Operators

Classes support inheritance ( I know prototype inheritance is a pain in the a**)

class SolarSystem {
constructor(){
this.galaxy = 'Milky way'
}
getGalaxy() { console.log(this.galaxy)}
}
class Planet extends SolarSystem{
constructor(){
super() // Have to call the super class in derived class which executes the parent constructor
this.name = 'Earth'
this.age = 2300
}
getName() { console.log(this.name) }
}const earth = new Planet()
earth.getName()
earth.getGalaxy()

In ES7 you can skip the constructor function call and directly devrieve the properties within the class. Also you dont have to call the constructor of the superclass using super().

class Water {
ph = 6.97
o2 = 22
}

Rest and Spread operators

Rest and spread are denoted only by using 3 consecutive dots (…)

... // This is basically the spread and rest operator
  • Spread — Used to split up array or object properties to make new arrays or objects
  • Rest — Used to aggregate multiple arguments of a function to an array

Spread operator uses

let myArr = [1,2,3]
let myNewArray = [...myArr, 4, 5]
console.log(myNewArray) // [ 1, 2, 3, 4, 5 ]

The spread operator also can be used with objects

const leaf = {
color:'green',
}
const tree = {
...leaf,
leaves: 23,
}
console.log(tree)

Rest operator uses

function arguments(...args) {
for(let arg of args){
console.log(arg)
}
}
arguments(1,2,3,4,5,6)

Here the arguments we pass to the function will be a push to an array which can be accessed using the index

Destructuring

Used to extract properties or elements from objects and arrays respectively.

In arrays, the order of the elements define the object we extract and in objects, the property name defines what we extract

const { name, age } = { name: 'me', age:22 }
console.log(name) // me

You can also rename your variables after destructuring if you don’t like the old ones from your destructed object:

const { name: nominativo } = { name: 'me', age:22 }
console.log(nominativo) // me

For arrays

[x,,z] = [1, 2, 3]
console.log(x) // 1
console.log(z) //3

Stay tuned for more on the new features of ES6.

Thanks for reading.

JavaScript in Plain English

Learn the web's most important programming language.

Amine Benkeroum

Written by

A twenty-something developer from Morocco, love innovation, startups, new technologies and meet smart people to improve my skills and build new technologies.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade