ES6+

Modules

They support the import export syntax

we have to export from a file in order to import it into another file

We can also do an export default for a single value per module

We can import a default export by any name and for named exports we have to preciesly give the same name or otherwise we can rename using as keyword


// === File one.js ===
// Importing a default and a named
import main, {calculate as generate} from './two.js';


// === File two.js ===
export function calculate(){}

export default function(){}

De-structuring

Array destructure

Extra comma can be added to skip values


let cars = ['ferrari', 'tesla', 'cadillac', 'fisker', 'rangerover'];
let [car1, car2, car3, , car5] = cars;
console.log(car1, car2, car3); // Prints: ferrari tesla cadillac

Object destructure

Values can be renamed using colon


let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let { x: place, y, z } = destinations;
console.log(x, y, z); // Prints LA NYC MIA

Function Parameter destructure

We don’t need to destructure all the values, only the ones we need


let truck = {
  model: '1977 Mustang convertible',
  maker: 'Ford',
  city: 'Detroit',
  year: '1977',
  convertible: true
};

const printCarInfo = ({model, maker, city}) => {
  console.log(`The ${model}, or ${maker}, is in the city ${city}.`);
};

Spread and Rest

Both use the … syntax

Spread is used to get values outside from an Object or Array (to create copy)

Rest is used in function parameters to receive any n number or arguments