DEV Community

K-Sato
K-Sato

Posted on • Updated on

ES6 Basic Features

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Example of let

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

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

console.log(x) //=> 10
Enter fullscreen mode Exit fullscreen mode

Example of const

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

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

console.log(x)//=> 10
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Arrow function

ES5 style function

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

greeting('Mike') //=>Hello Mike
Enter fullscreen mode Exit fullscreen mode

ES6 style function

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

greeting('Mike') //=> Hello Mike
Enter fullscreen mode Exit fullscreen mode

Default parameters

You can assign the default value to an argument.

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

add(5) //=> 15
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Spread Operator

Here are some usages of the spread operator.

Spread an array

const arr = [2,3]

console.log(...arr)//=> 2, 3 
Enter fullscreen mode Exit fullscreen mode

Combine arrays

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

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

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 ]
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
charliewaylonwriter profile image
charliewaylonwriter

All new features are useful that were recently introduced in ES6. I will more share with the people through my website affordable assignments where they can cover some of the basic features in this post.

Collapse
 
dashbrowns profile image
Dash Browns

In this post, you describe detailed and easy-to-understand new basic features in ES6. Thanks a lot! I so appreciate your effort. retro bowl

Collapse
 
meave9786 profile image
meave9786

This is the great post here you have to need see how to get free skins in fortnite it is the great option for getting to be great fun.