loading...

ES6 Basic Features

k_penguin_sato profile image K-Sato Updated on ・2 min read

Introduction

Some new features were introduced in ES6. I will cover some of the basic features of them in this post.

Table of contents

  1. Variable declaration with const and let
  2. The scope of let and const
  3. String Interpolation
  4. Arrow function
  5. Default parameters
  6. Class Expression
  7. Class Inheritance
  8. Spread Operator

Variable declaration with const and let

You can use var, let or const to declare a variable.

Let

Variables declared with let can not be redeclared. But you can reassingn a new value.

let name = 'John'
console.log(name) //=> John

name = 'Mike'
console.log(name) //=> Mike

let name = 'Nick' //=> SyntaxError: redeclaration of let name

Const

Variables declared with const can not be redeclared. And you can not reassingn a new value.

const name = 'John'
console.log(name) //=> John

name = 'Mike' //=> TypeError: invalid assignment to const `name'

const name = 'Nick' //=> SyntaxError: redeclaration of let name

The scope of let and const

The let and const statements declare block scope local variables unlike var.

Example of var

var x = 10
console.log(x) //=>10

{
    var x = 5
    console.log(x) //=>5
}

console.log(x) //=> 5

Example of let

let x = 10
console.log(x) //=>10

{
    let x = 5
    console.log(x) //=>5
}

console.log(x) //=> 10

Example of const

const x = 10
console.log(x)//=> 10

{
    const x = 5
    console.log(x)//=> 5
}

console.log(x)//=> 10

String Interpolation

You can use template literals to read the value of a variable in a string.

let name = 'Mike'

console.log(`I am ${name}`)//=> I am Mike

Arrow function

ES5 style function

function greeting(name){
    console.log('Hello' + ' ' + name)
}

greeting('Mike') //=>Hello Mike

ES6 style function

const greeting=(name)=> {
    console.log(`Hello ${name}`)
}

greeting('Mike') //=> Hello Mike

Default parameters

You can assign the default value to an argument.

const add = (x, y = 10) => {
    console.log(x + y)
}

add(5) //=> 15

Class Expression

The class expressiong is syntactical sugar over JavaScript's existing prototype-based inheritance.

class Car{
    constructor(name){
        this.name = name
    }

    displayinfo(name){
        console.log(this.name)
    }
}

const car1 = new Car('Honda')

car1.displayinfo()//=> Honda

Class Inheritance

Classes can extend one another using extends.

class Car{
    constructor(name){
        this.name = name
    }

    displayinfo(name){
        console.log(this.name)
    }
}

class Track extends Car {
    constructor(name){
        super()
        this.name = name
    }
}

track1 = new Track('TL')
track1.displayinfo() //=> TL

Spread Operator

Here are some usages of the spread operator.

Spread an array

const arr = [2,3]

console.log(...arr)//=> 2, 3 

Combine arrays

const arr = [2,3]
const arr2 = [1, ...arr, 4, 5]

console.log(arr2)//=> Array(5) [ 1, 2, 3, 4, 5 ]

Get multiple arguments as an array

const arr=(arg1, ...args)=> {
    console.log(arg1, args)
}

arr(1, 2, 3, 4, 5)//=> 1 Array(4) [ 2, 3, 4, 5 ]

Posted on by:

k_penguin_sato profile

K-Sato

@k_penguin_sato

I am a software-engineer based somewhere on earth.

Discussion

markdown guide