Javascript ES6 Features

ES6 Features

ES6 Features:

Classes.
Arrow functions.
Variable (let, var, const)
Array methods like .map().
Destructuring.
Modules.
Ternary Operator.
Spread Operator.

Classes.
========
Class is a type of function, but instead of using the keryword function, we use class. Properties are assigned inside the constructor() methods.

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

To call the class we can use:


const mycar = new Car('Ford'); 

The construtor function is automatically called while calling the class.

We can extend the class by using the extend keyword.

class Model extend Car{
	constructor(name, mod){
		super(name);
		this.model= mod;
	}
}

super method refers to parent class.

Arrow functions.
================

hello = () => {
	return 'Hello world.'
}

if the arraow function has only one line, the we can remove curly braces.

hello = () = > return 'Hello world';

Arrow function this represent current header object. But in normal function, this represents object that called the function.

Destructuring:
==============
Here we can assing the items in an array to a variable.

const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;

Spread operator:
================
Javascript spread operator(...), allows us to quickly copy all or part of  existing array into another arrayor object.

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];


Modules:
========
Allows you to break up your code into seperate files. It contain import and export.

We can export  funciton or variable from any file.

person.js
=========
export const name = "Jesse"
export const age = 40


person.js
=========
const name = "Jesse"
const age = 40

export { name, age }

message.js
==========
const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

You can import module into file in two ways. Named export uses curly bases to and default xport do not.
eg:
import message from "./message.js";


Ternary Operator:
=================
condition ? <expression if true> : <expression if false>