Basics of ES6

Introduction
Until recently, front side development was mainly using JQuery, however
many developers started to incorporate React (React uses ES6).

I summarized the main basic points that have changed compared to ES5 and broken it down into four parts so that you can get a glimpse!


Table of contents
■import and export
■Declaration by let, const
■Class syntax
■Arrow function


Let’s  check out about import and export in ES6
■ import

There are four types of way to import in ES6 like the following, I will introduce the pattern that I often used in web development(1 and 3)!

1.import A from “module”
2.import {a, b} from “module”
3.import A, {a, b} from “module”
4.import “module”

//Pattern that imports React itself from "react"
import React from "react"

// From "react" to React, as well as the Component to use directly, the pattern to import
import React, { Component } from "react"

■ export

named export export const bar = "def"

Look at the form above, it is used when exporting multiple modules.
As mentioned above, give each name individually and export.

export default class Example {}
export default class Example extends Super {} // Also inherits the classes< /pre>

Now let’s move onto the declaration by let, const Up to ES5, the variable declaration by var was done, however In ES6, the variable declaration by let or const was added.

■ So what is the difference between let and const? Ok, the biggest difference is, While let can be reassigned, const is that reassignment is impossible. const is like final in java programming! It was possible to redefine var, but redefining const and let values are not possible. You must also keep an close attention to scopes when using let and const. Please refer to the following code. For let and const, If declared within a block, outside the block

if(true){
    var a = 1;
}
console.log(a); //1

if(true){
    let b = 10;
}
console.log(b); // You will get ReferenceError

if(true){
    const c = 10;
}
console.log(c);// You will get ReferenceError

let x = 11;
const y = 13;
if(true){
  console.log(a);// OK
  console.log(x);// OK
  console.log(y);// OK
}

Please note that declarations in if statements cannot be used outside of if statements.


Class syntax

Before explaining the class syntax, I want to show you the code first. If you are used to programming languages like Java, I think you will be familiar and might be very easy for you!

class Sample{
  constructor(name){
    this.name = name;
  };
  greet(){
    console.log('My name is ' + this.name);
  };
  static greetings(){
    console.log('Hello, World!!!');
  };
}

object = new Sample('Test')
object.greet() //=> "My name is Test"
Sample.greetings() // => "Hello, World!!!"

I will try to explain the above code.
It is something like protoType, also handled in ES5.
constructor method
The function to be executed when the class is new. Set initial value etc.

prototype method
It is a method to call from an instance of a class like the greet() function.

static method
It is a method that can be called with a class name. Method name() without creating an instance.

As for the class concept, there is another class inheritance

class Parent {
}

class Child extends Parent{
  super();
}

A very simple example, but something like the above
You can inherit from parent class to child class.
By the way, super () calls the constructor method of the parent class.


Arrow function
There are three major features of the Arrow function.
1. Always anonymous functions
2. If there is only one argument, () is optional
3. If a body is a single expression, {} and return can be omitted
The following code compares the old pattern with the new pattern.

// Old pattern
var plus = function(x, y){
  return x + y;
}

// New pattern
const plus = (x, y) => {
  return x + y;
}
//New pattern in trucated form
const plus = (x, y) => x + y;

Summary
Ok, I’ve covered the basic functionalities for ES6…I think!
I think that it will become more convenient from now on, so I will keep on watching continuously and learning! I will be posting some new tips after I learn some new ES6 skills that I find useful!

Leave a Reply

Your email address will not be published. Required fields are marked *