ES6

Next-Gen JS

by Julia Dizhak

a history

1996 - first ECMAScript realise by Brendan Eich (in 10 days)

2015 - ES6 released

Transpiling

babel is a JS transpiler

babel playground

JS data types: primitives and references

Primitives:
- Number
- String
- Boolean
- ...
References:
- Array
- Object

JS is compatible

compatible table

caniuse

Overview

Variables: let and const
Arrow functions
Default values
Template literals
export and import
Classes
Spread operator
Destructuring

let

Forget about var - doesn't repsect block scope

				
					if (true) {
					   var x = 3;
					}
					console.log(x); // 3

let is a block scope

					
						if (true) {
						   let x = 3;
						}
						console.log(x); // ReferenceError: x is not defined

const

const makes variables immutable

					
						const obj = { x: 3 };
						obj = 4; // TypeError

The current best practice is to use const by default (95%) and only use let when you know a variable’s value needs to change.

Arrow functions

					
						// function declaration and function expression
						function() { ... }
						var myFunction = function() { ... }

						// syntax arrow functions
						
							const myFunction = () => { ... } // no parametres
							(item) => { ... } or item => { ... }
							(item, key) => { ... }

inside => can omit keyword return

					
						const multiply = fuction(number) {
							   return number * 2;
						}
						const multiply = (number) => number * 2;
						console.log(multiply(16)); // 32

.map, .filter & =>

					
						const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
						console.log(materials.map(material => material.length)); // --> [8, 6, 7, 9]

						const filter = [1,2,4] => {
							   return args.filter(el => el === 1)
						}
						console.log(filter) —> [1];

Default functions parametres

					
						function multiply(a, b = 1) {
							   	return a * b;
						}

						console.log(multiply(5)); // 5
						console.log(multiply(5, 2)); // 10

Template literals: template strings

					
						const str = `string text`; // use back stick
						// multiline old variant
						var message = 'Multiline \n string'  +
									'Another string';

						// multiline es6
						const markup = `<div class="person">
						    <p>str</p>
						    </div>`;

Template strings: expressions

						
							let name = 'team';
							`Hi ${name}, Do you know that MoneyPark company age is ${2018-2011} years?`
							
							/*
							  Hi team, Do you know that MoneyPark company age is 7 years?
							*/

Template strings: concatenation

						
							const PATH = 'https://hn.algolia.com/api/v1/search/',
							   PARAM_SEARCH = 'query=',
							   DEFAULT_QUERY = 'es6';
							...
							fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`).then(...)
							// url -> https://hn.algolia.com/api/v1/search?query=es6

Export & import

					
						// index.html
						<script src="test.js"></script>
						<script src="test1.js"></script>

can split code across multiple JS files - modules.

To access functionality in another file, you need export (to make it available) and import (to get access) statements.

Export

					
						// default => export default ...;
						const Person = {
							   name: 'Julia'
						}
						export default Person;

						// named => export const someData ...;
						export function setDateSomeTimeAgo() {...}
						export let date = Date.now();

Import

					
						// can import default exports like this:
						import someNameOfYourChoice from './path/to/file.js

						// can import named exports like this:
						import { someData } from './path/to/file.js';
						import { smth as Smth } from './utility.js';
						import * as bundled from './path/to/file.js'

Example of file with imports

					
						import React, { Component } from 'react';
						import { render } from 'react-dom';
						import { Router, Route } from 'react-router-dom';
						...

Classes

					
						class Developer {
							   name = 'Julia';
							   getName() {
								      return name;
								   }
						}

						const dev = new Developer('New is coming');
						console.log(dev.getName()); // New is coming

Classes: inheritance

					
						class Human {
							   species = 'human';
						}

						class Developer extends Human {
							   ...
						}

super and constructor

					
						class Developer {
							   constructor(lastname) { // executes during initialize
								      super(); // executes parent constructor
								      this.lastname = lastname;
								   }
								   getName() {
									      return this.lastname;
								   }
						}

Arrays: spread operator

It only consists of three dots: ...

					
						const devsList = ['Dev1', 'Dev2']
						const newDev = 'New Dev';
						const allDevs = [ ...devsList, newDev];
						console.log(allDevs) // ['Dev1', 'Dev2', 'New Dev']

Objects: spread operator

					
						const userNames = {first: 'Julia', last: 'Dizhak'};
						const userAge = { age: 16 };
						const user = { ...userNames, ...userAge }
						console.log(user) // {first: 'Julia', last: 'Dizhak', age: 16}

Destructuring

					
						const array = [1,2,3];
						const [a,b] = array;
						console.log(a); // prints 1
						console.log(b); // prints 2

ES6