Detailed Research Notes on JavaScript

ES6+ Features
This document provides detailed research notes on key features introduced in ECMAScript
2015 (ES6) and subsequent versions (ES7, ES8, ES9, etc.), often collectively referred to as
ES6+. These features have significantly enhanced JavaScript's capabilities, readability, and
developer experience.

1. let and const Declarations

ES6 introduced let and const as alternatives to var for variable declaration, providing
block-scoping and improved control over variable immutability.
●​ let: Declares a block-scoped local variable, optionally initializing it to a value. It can be
reassigned.
●​ const: Declares a block-scoped, read-only named constant. It must be initialized at
declaration and cannot be reassigned.
// Using let​
let count = 10;​
if (true) {​
let count = 20; // Different 'count' variable, block-scoped​
console.log(count); // Output: 20​
}​
console.log(count); // Output: 10​
​
// Using const​
const PI = 3.14159;​
// PI = 3.14; // This would cause an error: Assignment to constant
variable.​
​
const user = { name: 'Alice' };​
user.name = 'Bob'; // This is allowed: modifying properties of a const
object​
console.log(user); // Output: { name: 'Bob' }​
​
// user = { name: 'Charlie' }; // This would cause an error:
Reassignment of const variable​

2. Arrow Functions (=>)

Arrow functions provide a more concise syntax for writing function expressions. They also have
a lexical this binding, meaning this is determined by the surrounding scope, not by how the
function is called.
// Traditional function expression​
const addTraditional = function(a, b) {​
return a + b;​
};​
console.log(addTraditional(2, 3)); // Output: 5​
​
// Arrow function (concise syntax for single expression)​
const addArrow = (a, b) => a + b;​
console.log(addArrow(2, 3)); // Output: 5​
​
// Arrow function with block body​
const greet = (name) => {​
const greeting = `Hello, ${name}!`;​
return greeting;​
};​
console.log(greet('World')); // Output: Hello, World!​
​
// Lexical 'this' example​
function Timer() {​
this.seconds = 0;​
setInterval(() => {​
this.seconds++; // 'this' refers to the Timer instance​
console.log(this.seconds);​
}, 1000);​
}​
// const timer = new Timer(); // Uncomment to see it in action​

3. Template Literals (Template Strings)

Template literals allow for easier string interpolation and multiline strings using backticks (`).
const name = 'Alice';​
const age = 30;​
​
// Traditional string concatenation​
const messageOld = 'Hello, my name is ' + name + ' and I am ' + age +
' years old.';​
console.log(messageOld);​
​
// Using template literals​
const messageNew = `Hello, my name is ${name} and I am ${age} years
old.`;​
console.log(messageNew);​
​
// Multiline strings​
const multilineString = `​
This is a string​
that spans multiple​
 lines.​
`;​
console.log(multilineString);​

4. Destructuring Assignment
Destructuring assignment allows you to unpack values from arrays or properties from objects
into distinct variables.

Array Destructuring
const colors = ['red', 'green', 'blue'];​
​
// Destructuring array elements​
const [firstColor, secondColor, thirdColor] = colors;​
console.log(firstColor); // Output: red​
console.log(secondColor); // Output: green​
​
// Skipping elements​
const [,, lastColor] = colors;​
console.log(lastColor); // Output: blue​
​
// Swapping variables easily​
let a = 1;​
let b = 2;​
[a, b] = [b, a];​
console.log(a, b); // Output: 2 1​

Object Destructuring
const person = {​
firstName: 'John',​
lastName: 'Doe',​
age: 40​
};​
​
// Destructuring object properties​
const { firstName, age } = person;​
console.log(firstName); // Output: John​
console.log(age); // Output: 40​
​
// Renaming properties during destructuring​
const { firstName: fName, lastName: lName } = person;​
console.log(fName); // Output: John​
console.log(lName); // Output: Doe​
​
// Destructuring with default values​
const { city = 'New York', age: personAge } = person;​
console.log(city); // Output: New York (since 'city' not in
person)​
console.log(personAge); // Output: 40​

5. Spread (...) and Rest (...) Operators

The ... syntax serves two distinct purposes:
●​ Spread Operator: Expands an iterable (like an array or string) into individual elements.
Useful for array literals, function calls, and object literals.
●​ Rest Parameters: Collects an indefinite number of arguments into an array. Used in
function parameter lists.

Spread Operator Examples

// Spreading arrays​
const arr1 = [1, 2, 3];​
const arr2 = [...arr1, 4, 5]; // Creates a new array [1, 2, 3, 4, 5]​
console.log(arr2);​
​
// Spreading objects (ES8)​
const obj1 = { a: 1, b: 2 };​
const obj2 = { ...obj1, c: 3 }; // Creates a new object { a: 1, b: 2,
c: 3 }​
console.log(obj2);​
​
// Passing array elements as function arguments​
const numbers = [10, 20, 30];​
function sum(x, y, z) {​
return x + y + z;​
}​
console.log(sum(...numbers)); // Output: 60​

Rest Parameters Example

function collectArgs(firstArg, ...restOfArgs) {​
console.log('First argument:', firstArg);​
console.log('Rest of arguments:', restOfArgs); // restOfArgs is an
array​
}​
​
collectArgs(1, 2, 3, 4, 5);​
// Output:​
// First argument: 1​
// Rest of arguments: [2, 3, 4, 5]​
​
collectArgs('hello');​
// Output:​
// First argument: hello​
// Rest of arguments: []​

6. Classes
ES6 introduced class syntax, which is syntactic sugar over JavaScript's existing
prototype-based inheritance. It provides a cleaner and more familiar way to create objects and
handle inheritance.
class Animal {​
constructor(name) {​
this.name = name;​
}​
​
speak() {​
console.log(`${this.name} makes a sound.`);​
}​
}​
​
class Dog extends Animal {​
constructor(name, breed) {​
super(name); // Call the parent constructor​
this.breed = breed;​
}​
​
speak() {​
console.log(`${this.name} barks!`);​
}​
​
fetch() {​
console.log(`${this.name} fetches the ball.`);​
}​
}​
​
const myAnimal = new Animal('Generic Animal');​
myAnimal.speak(); // Output: Generic Animal makes a sound.​
​
const myDog = new Dog('Buddy', 'Golden Retriever');​
myDog.speak(); // Output: Buddy barks! (overridden method)​
myDog.fetch(); // Output: Buddy fetches the ball.​
7. Modules (import / export)
ES6 introduced a standardized module system, allowing developers to break down code into
reusable units and manage dependencies.

math.js (Module to export)

// math.js​
export const PI = 3.14159;​
​
export function add(a, b) {​
return a + b;​
}​
​
export function subtract(a, b) {​
return a - b;​
}​
​
// Default export​
export default function multiply(a, b) {​
return a * b;​
}​

app.js (Module to import)

// app.js​
// Import named exports​
import { PI, add } from './math.js';​
​
// Import all named exports as an object​
import * as MathUtils from './math.js';​
​
// Import default export (can be named anything)​
import multiplyNumbers from './math.js';​
​
console.log(PI); // Output: 3.14159​
console.log(add(5, 3)); // Output: 8​
console.log(MathUtils.subtract(10, 4)); // Output: 6​
console.log(multiplyNumbers(2, 6)); // Output: 12​

Note: Module import/export requires a build step (like Webpack or Parcel) or a browser that
supports ES Modules (using <script type="module">).

8. Promises
Promises provide a cleaner way to handle asynchronous operations, avoiding "callback hell." A
Promise represents the eventual completion (or failure) of an asynchronous operation and its
resulting value.
function fetchData() {​
return new Promise((resolve, reject) => {​
// Simulate an asynchronous operation (e.g., fetching data
from an API)​
setTimeout(() => {​
const success = true; // Change to false to simulate an
error​
if (success) {​
resolve('Data successfully fetched!');​
} else {​
reject('Error fetching data.');​
}​
}, 2000); // 2-second delay​
});​
}​
​
fetchData()​
.then((data) => {​
console.log('Success:', data);​
return 'Processed: ' + data; // Chain another .then​
})​
.then((processedData) => {​
console.log('Second then:', processedData);​
})​
.catch((error) => {​
console.error('Error:', error);​
})​
.finally(() => {​
console.log('Operation finished (resolved or rejected).');​
});​
​
console.log('Fetching data...'); // This will log immediately​

9. Async/Await (ES2017 - ES8)

async and await are syntactic sugar built on top of Promises, making asynchronous code look
and behave more like synchronous code, greatly improving readability.
●​ async function: A function declared with async keyword automatically returns a Promise.
●​ await expression: Can only be used inside an async function. It pauses the execution of
the async function until the Promise it's waiting for settles (resolves or rejects).
function resolveAfter2Seconds() {​
return new Promise(resolve => {​
setTimeout(() => {​
resolve('Resolved after 2 seconds');​
 }, 2000);​
});​
}​
​
async function asyncCall() {​
console.log('Calling...');​
const result = await resolveAfter2Seconds(); // Pause here until
Promise resolves​
console.log(result); // Output: Resolved after 2 seconds​
// Further synchronous-looking code executes after the await​
return 'Async call complete';​
}​
​
asyncCall().then(message => console.log(message));​
console.log('This logs immediately after asyncCall is invoked.');​

Error Handling with async/await

function rejectAfter1Second() {​
return new Promise((_, reject) => {​
setTimeout(() => {​
reject('Error: Something went wrong!');​
}, 1000);​
});​
}​
​
async function handleAsyncError() {​
try {​
console.log('Attempting to fetch...');​
const data = await rejectAfter1Second();​
console.log('Data:', data); // This line will not be reached​
} catch (error) {​
console.error('Caught an error:', error); // Output: Caught an
error: Error: Something went wrong!​
} finally {​
console.log('Cleanup or final actions.');​
}​
}​
​
handleAsyncError();​

10. Default Parameters

Default parameters allow you to initialize function parameters with default values if no value or
undefined is passed.
function greetPerson(name = 'Guest', greeting = 'Hello') {​
console.log(`${greeting}, ${name}!`);​
}​
​
greetPerson('Alice'); // Output: Hello, Alice!​
greetPerson(); // Output: Hello, Guest!​
greetPerson('Bob', 'Hi'); // Output: Hi, Bob!​
greetPerson(undefined, 'Hey'); // Output: Hey, Guest!​

11. Enhanced Object Literals

ES6 introduced several enhancements to object literals, making them more concise and
powerful.
●​ Property Shorthand: If a variable name is the same as the desired property name, you
can just list the variable.
●​ Method Shorthand: A more concise syntax for defining methods.
●​ Computed Property Names: Allows using an expression for a property name.
const userName = 'Charlie';​
const userAge = 25;​
const role = 'admin';​
​
const userProfile = {​
// Property Shorthand​
userName,​
userAge,​
​
// Method Shorthand​
greet() {​
console.log(`Hello, ${this.userName}!`);​
},​
​
// Computed Property Names​
[role + 'Id']: 123,​
​
// Traditional property​
isActive: true​
};​
​
console.log(userProfile);​
// Output: { userName: 'Charlie', userAge: 25, adminId: 123, isActive:
true, greet: [Function: greet] }​
​
userProfile.greet(); // Output: Hello, Charlie!​
12. Iterators and Generators (Brief Overview)
●​ Iterators: Objects that define a sequence and a return value upon its termination. They
implement the next() method, which returns an object with value and done properties.
●​ Generators: Functions that can be paused and resumed, yielding (returning) multiple
values over time. They are defined using function* and use the yield keyword. They are a
powerful way to create custom iterators.
// Simple Generator Function​
function* idGenerator() {​
let id = 1;​
while (true) {​
yield id++;​
}​
}​
​
const gen = idGenerator();​
console.log(gen.next().value); // Output: 1​
console.log(gen.next().value); // Output: 2​
console.log(gen.next().value); // Output: 3​

13. Map and Set

New built-in data structures for more efficient data handling.
●​ Map: A collection of key-value pairs where keys can be of any data type (unlike plain
objects where keys are always strings or symbols). Maintains insertion order.
const myMap = new Map();​
​
myMap.set('name', 'Alice');​
myMap.set(1, 'number one');​
myMap.set(true, 'boolean key');​
myMap.set({}, 'object key'); // Objects can be keys​
​
console.log(myMap.get('name')); // Output: Alice​
console.log(myMap.size); // Output: 4​
console.log(myMap.has(1)); // Output: true​
​
for (const [key, value] of myMap) {​
console.log(`${key} = ${value}`);​
}​

●​ Set: A collection of unique values. Any duplicate values added to a Set are ignored.
Maintains insertion order.
const mySet = new Set();​
​
mySet.add(1);​
mySet.add(5);​
mySet.add('text');​
mySet.add(1); // Duplicate, ignored​
​
console.log(mySet.size); // Output: 3​
console.log(mySet.has(5)); // Output: true​
console.log(mySet.has(10)); // Output: false​
​
const numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5];​
const uniqueNumbers = [...new Set(numbersWithDuplicates)];​
console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]​