Master ES6 Basics: let/const, Template Strings, Set, Map, and Destructuring

Using let and const to declare variables

ES5 lacks block scope and constant declarations. ES6 introduces let and const to solve these problems.

Example with var (ES5):

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

Example with let (ES6):

let a = 1;
if (true) {
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

Using let in loops prevents the classic closure issue:

var a = [];
for (var i = 0; i < 5; i++) {
  a.push(function() { console.log(i); });
}
a.forEach(function(v) { v(); }); // 5,5,5,5,5

let b = [];
for (let i = 0; i < 5; i++) {
  b.push(function() { console.log(i); });
}
b.forEach(function(v) { v(); }); // 0,1,2,3,4

Defining constants with const:

// ES5
var MY_CONSTANT = true;
MY_CONSTANT = false; // allowed but unsafe

// ES6
const MY_CONSTANT = true;
MY_CONSTANT = false; // TypeError: Assignment to constant variable

Template strings

String concatenation becomes concise with back‑ticks and interpolation.

// ES5
var url = 'http://www.' + domain + '.com/' + path + '?' + queryParams;

// ES6
let url = `http://www.${domain}.com/${path}?${queryParams}`;

New Set and Map objects

Set

automatically removes duplicate values.

let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set {1, 2}

Map

stores key‑value pairs with any type of key.

let collection = new Map();
collection.set('a', 'abc');
collection.set('b', 'xyz');
collection.forEach(function(value, key) {
  console.log(key + ':' + value);
});
console.log(collection.size); // 2

Function parameters

ES6 allows default values directly in the parameter list.

function doSomething(someObject = {}) {
  console.log(someObject);
}

Object destructuring in parameters

Extract properties from an object argument in one step.

function doSomething({ propOne, propTwo, propThree }) {
  console.log(propOne);
  console.log(propTwo);
  console.log(propThree);
}

Reference: https://www.codementor.io/javascript/tutorial/4-easy-ways-to-start-using-es2015