JavaScript ES6

let and const

The let and const keywords are two of the most important additions to JavaScript in ES6. They allow you to declare variables that are scoped to the block, statement, or expression in which they are used. This means that variables declared with let or const can not be accessed outside of the scope in which they are declared.

The main difference between let and const is that variables declared with let can be reassigned, while variables declared with const cannot be reassigned. This means that if you declare a variable with const, you must assign a value to it at the time it is declared.

Here is an example of let and const in action:

let x = 5;
let y = 10;
const z = 15;

x = 20;
z = 25; // Error: z is read-only

In this example, we have declared two variables, x and y, using the let keyword. We have then assigned the value 5 to x and the value 10 to y. We have also declared a third variable, z, using the const keyword and assigned the value 15 to it.

We can then reassign the value of x to 20 using the assignment operator (=). However, if we try to reassign the value of z, we will get an error because z was declared with the const keyword, which means it cannot be reassigned.

To learn more about let and const, visit let and const.

Arrow Function

Arrow functions are a concise way to write functions in JavaScript. They are a new feature introduced in ES6 (ECMAScript 6). They are also known as fat arrow functions.

An arrow function is a shorter way to write a function expression. They are anonymous and change the way this binds in functions. They are syntactically similar to the related feature in C#, Java, and CoffeeScript.

An arrow function is defined using the following syntax:

const myFunc = (param1, param2) => {
  // code here
};

The arrow function above is equivalent to the following ES5 code:

const myFunc = function(param1, param2) {
  // code here
};

The main purpose of arrow functions is to make the code more concise. But there are some other benefits as well.

• this is lexically scoped, so you don't need to use bind() to access the correct this.
• Arrow functions are always anonymous.
• Arrow functions don't have their own arguments object.

To learn more about arrow function, visit Arrow Function.

Default Parameters

Default parameters are a feature introduced in ES6 that allows developers to set default values for function parameters. This allows for more flexibility in function calls, as well as more control over the arguments passed into a function.

For example, if you have a function that takes two parameters, you can set a default value for the second parameter. If no value is passed into the function, then the default value will be used instead.

function getMessage(message, name = 'World') {
  console.log(message + ', ' + name);
}

getMessage('Hello'); // Prints 'Hello, World'
getMessage('Hello', 'John'); // Prints 'Hello, John'

In the example above, the function getMessage takes two parameters: message and name. The name parameter has a default value of 'World'. If no value is passed into the function, then the default value will be used. If a value is passed into the function, then the value will be used instead.

Default parameters can be used to make function calls more flexible and easier to read. They can also be used to provide default values for optional parameters, or to provide default values for parameters that are not always used.

To learn more about default parameters, visit Default Parameters.

Rest Parameters

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(1, 2, 3)); // 6

function sum(...args) {
  return args.reduce((acc, cur) => acc + cur);
}

console.log(sum(1, 2, 3)); // 6

function sum(...args) {
  return args.reduce((acc, cur) => acc + cur);
}

console.log(sum(1)); // 1

function sum(...args) {
  return args.reduce((acc, cur) => acc + cur);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

To learn more about rest parameters, visit Rest Parameters.

Spread Operator

const arr = [1, 2, 3];
console.log(...arr);

In the above example, the spread operator is used to spread the values of the array arr into the arguments of the console.log() function call. The result of this is that the values of the array arr are logged to the console.

The spread operator can also be used to spread the values of an object into a new object. This is useful when you want to create a new object with the same properties as an existing object but with different values.

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

const newObj = {
  ...obj,
  a: 4,
};

console.log(newObj);

In the above example, the spread operator is used to spread the values of the object obj into the new object newObj. The result of this is that the new object newObj has the same properties as the object obj but with different values.

To learn more about spread operator, visit Spread Operator.

Destructuring

const person = {
  name: 'John',
  age: 30
};

const {name, age} = person;

console.log(name); // John
console.log(age); // 30

const people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 35 },
];

const [john, jane, bob] = people;

console.log(john.name); // John
console.log(jane.name); // Jane
console.log(bob.name); // Bob

const person = {
  name: 'John',
  age: 30
};

function sayHello({name, age}) {
  console.log(
    `Hello, my name is ${name} and I am ${age} years old.`
  );
}

sayHello(person); // Hello, my name is John and I am 30 years old.

const numbers = [1, 2, 3];

function sum([a, b, c]) {
  console.log(a + b + c);
}

sum(numbers); // 6

To learn more about destructuring, visit Destructuring.

Template Literals

Template literals are string literals that allow embedded expressions. You can use template literals to create multi-line strings and to use string interpolation features to create strings. Template literals are enclosed by the backtick (` `) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between them get passed to a function. The default function just concatenates the parts into a single string. You can also create your own template literal tag functions.

For example, let's say we have a template literal with a placeholder:

const name = 'John';
const message = `Hello, ${name}!`;
console.log(message);

In this case, the placeholder ${name} will be replaced with the value of the name variable. The result of the template literal will be:

Template literals can also be used to create multi-line strings. For example:

const name = 'John';
const message = `Hello,
${name}!`;
console.log(message);

The result of the template literal will be:

To learn more about template literals, visit Template Literals.

Object Literal

Object literals are collections of key-value pairs, which can be used to store data and access it in an efficient manner. Object literals are created using curly braces, and the key-value pairs are separated by commas. The syntax for creating an object literal is as follows:

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

As you can see, the syntax for creating an object literal is very similar to that of an array. The difference is that instead of using square brackets, we use curly braces, and instead of using an index number, we use a key-value pair. The key is a string, and the value is any data type, such as a string, number, array, or even another object.

Object literals can also be used to store functions. This is useful for creating objects with methods, such as an object that has a method to calculate its area. The syntax for creating an object with a function is as follows:

const obj = {
  calculateArea: (width, height) => {
    return width * height;
  }
};

In this example, the object literal has a method called “calculateArea”, which takes two parameters (width and height) and returns the area of a rectangle. This is just one example of how object literals can be used to store functions.

Object literals are a powerful way to store and access data. They are also a great way to create objects with methods, which can be used to perform calculations or other operations. Object literals are an essential part of the JavaScript language, and they are used in many different ways.

To learn more about object literal, visit Object Literal.

For...of Loop

const arr = [1, 2, 3];

for (let el of arr) {
  console.log(el);
}

const str = 'Hello World';

for (let char of str) {
  console.log(char);
}

const set = new Set([1, 2, 3]);

for (let el of set) {
  console.log(el);
}

To learn more about for...of loop, visit For...of Loop.

Promises

Promises are an important part of modern JavaScript development. They allow you to write asynchronous code that is easier to read and debug. Promises provide a way to handle errors, chain multiple asynchronous operations together, and much more.

A promise is an object that represents a value that may be available now, or in the future, or never. Promises can be used to handle asynchronous operations, such as making an AJAX request or reading from a file.

Promises are created using the new Promise() constructor, which takes a callback function as its argument. The callback function takes two parameters: resolve and reject, which are functions that are used to indicate when the promise is fulfilled (resolved) or rejected.

The resolve function is used to return a value when the promise is fulfilled. The reject function is used to return an error when the promise is rejected.

The following example shows how to create a promise and use the resolve and reject functions to handle the promise:

const promise = new Promise((resolve, reject) => {
  // Do something asynchronous
  setTimeout(() => {
    // Resolve the promise
    resolve('Done!');
  }, 2000);
});

promise.then((result) => {
  console.log(result);
});

Promises can also be chained together using the then() method. The then() method takes two parameters: a callback function for when the promise is fulfilled, and a callback function for when the promise is rejected.

The following example shows how to chain two promises together using the then() method:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2');
  }, 4000);
});

promise1.then((result) => {
  console.log(result);
  return promise2;
}).then((result) => {
  console.log(result);
});

To learn more about promises, visit Promises.

Classes

To create a class, we use the class keyword followed by the name of the class. Inside the class, we can define properties and methods. Properties are defined as variables, and methods are defined as functions. For example, we can create a class called Person that has two properties: name and age. We can also define a method called sayHello that prints out a greeting.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

In the example above, we have created a class called Person. This class has two properties: name and age. We have also defined a method called sayHello, which prints out a greeting. We can create an instance of this class by using the new keyword, followed by the name of the class. When we create an instance, we can pass in the values for the properties.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

const person = new Person('John', 25);

In the example above, we have created an instance of the Person class. We have passed in the values for the name and age properties. We can access the properties of an instance using the dot operator. For example, we can access the name property of our instance by using the dot operator:

We can also call the methods of an instance using the dot operator. For example, we can call the sayHello method of our instance by using the dot operator:

To learn more about classes, visit Classes.

Modules

import {sayHello} from './utils.js';

sayHello();

In the above example, we are importing the sayHello function from the utils.js file. We can then use the sayHello function in our code. We can also export functions and variables from a file using the export keyword.

import {sayHello} from './utils.js';

sayHello();

In the above example, we are exporting the sayHello function from the utils.js file. We can then import the sayHello function in another file and use it in our code.

To learn more about modules, visit Modules.

Generators

Generators are functions in JavaScript that can be paused and resumed, allowing you to create asynchronous code that looks synchronous. Generators are a powerful tool for creating iterators and asynchronous code, and are an important part of the ES6 specification.

Generators are functions that can be paused and resumed. They can be used to create iterators that can be used to iterate over a set of values. Generators can also be used to create asynchronous code that looks synchronous.

Generators are declared using the function* keyword. Inside the generator, the yield keyword is used to pause the generator and return a value.

function* count() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = count();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

Generators can also be used to create asynchronous code. The yield keyword can be used to pause the generator until a promise is resolved, and the await keyword can be used to pause the generator until a promise is resolved.

function* count() {
  const response = yield fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = yield response.json();
  console.log(data);
}

const iterator = count();

const promise = iterator.next().value;
promise.then(response => {
  const promise2 = iterator.next(response).value;
  promise2.then(data => iterator.next(data));
});

Generators are an important part of the ES6 specification, and are a powerful tool for creating iterators and asynchronous code.

To learn more about generators, visit Generators.

Symbols

Symbols are a new data type in JavaScript that are used to create unique identifiers. They are a primitive data type and are immutable, meaning they cannot be changed. Symbols are used to create unique property keys and to avoid naming collisions when working with objects.

Symbols can be created using the Symbol() function. This function takes an optional parameter which is a description of the symbol. This description is used for debugging purposes and is not used to create unique symbols.

// Create a symbol
const mySymbol = Symbol();

console.log(mySymbol); // Symbol()

Symbols can also be used as keys on objects. This allows them to be used to create unique property keys that can be used to store data on objects without having to worry about naming collisions.

// Create a symbol
const mySymbol = Symbol();

// Create an object
const myObject = {
  [mySymbol]: 'Hello World'
};

console.log(myObject[mySymbol]); // 'Hello World'

To learn more about symbols, visit Symbols.

Map and Set

const map = new Map();
map.set('name', 'John');
map.set('age', 30);

console.log(map.get('name')); // John
console.log(map.has('age')); // true

The code above creates a new Map and adds two key-value pairs to it. The .get() method is used to get the value associated with a key, and the .set() method is used to set a value for a key. The .has() method is used to check if a key exists in the Map.

const set = new Set();
set.add('John');
set.add('Jane');

console.log(set.has('John')); // true
console.log(set.size); // 2

The code above creates a new Set and adds two values to it. The .add() method is used to add a new value to the Set, and the .has() method is used to check if a value exists in the Set. The .size() method is used to get the number of elements in the Set.

To learn more about map and set, visit Map and Set.

WeakMap and WeakSet

let obj1 = {name: 'John'};
let obj2 = {name: 'Jane'};

let weakMap = new WeakMap();
let weakSet = new WeakSet();

weakMap.set(obj1, 'John is in the WeakMap');
weakSet.add(obj2);

console.log(weakMap.has(obj1)); // true
console.log(weakSet.has(obj2)); // true

obj1 = null; // remove reference to obj1
obj2 = null; // remove reference to obj2

console.log(weakMap.has(obj1)); // false
console.log(weakSet.has(obj2)); // false

As you can see, when we remove the references to the objects, they are no longer in the WeakMap and WeakSet. This is because they are held by a weak reference, so when the objects are no longer referenced anywhere else, they can be garbage collected.

To learn more about weakmap and weakset, visit WeakMap and WeakSet.

Proxy

Proxy is a powerful JavaScript feature that allows you to intercept and customize operations performed on objects. It is commonly used to perform operations like logging, authentication, and other tasks that can be done before or after an operation is performed.

A proxy is a function that takes two arguments: an object and a handler. The handler is an object that contains a set of methods that will be called when a certain operation is performed on the object. For example, when a property is accessed, the get method of the handler will be called. The proxy will then return the value of the property. The same is true for other operations like setting the value of a property, deleting a property, or enumerating the properties of an object.

Let's take a look at a simple example of using a proxy to log all access to a property of an object:

const obj = {
  foo: 'bar'
};

const handler = {
  get: (target, property) => {
    console.log(property, target[property]);
    return target[property];
  }
};

const proxy = new Proxy(obj, handler);

// Logs 'foo bar'
proxy.foo;

In this example, we create a proxy for an object called obj. We set the get method of the handler to a function that logs the property name and its value. Whenever the property is accessed, the get method is called, which logs the property name and its value.

The same idea can be applied to other operations like setting the value of a property, deleting a property, or enumerating the properties of an object. The proxy can be used to log all of these operations, or to perform other tasks before or after they are performed.

To learn more about proxy, visit Proxy.

Reflect

The Reflect object is a built-in object that provides methods for interceptable JavaScript operations. It is the counterpart of the Proxy object and allows you to interact with target objects by intercepting and defining custom behavior for fundamental operations.

For example, you can use the Reflect.get() method to get the value of a property from an object, or the Reflect.set() method to set the value of a property on an object.

To demonstrate how the Reflect object works, let's look at an example. We'll create an object called myObject and use the Reflect.get() method to get the value of the property name.

const myObject = {
  name: 'John'
};

const name = Reflect.get(myObject, 'name');

console.log(name); // 'John'

In this example, we use the Reflect.get() method to get the value of the property name from the myObject object. The result is that the value of the property name is "John".

We can also use the Reflect.set() method to set the value of a property on an object. For example, we can use the Reflect.set() method to set the value of the property name to "Jane".

const myObject = {
  name: 'John'
};

Reflect.set(myObject, 'name', 'Jane');

console.log(myObject.name); // 'Jane'

In this example, we use the Reflect.set() method to set the value of the property name to "Jane". The result is that the value of the property name is now "Jane".

The Reflect object also has methods for other operations, such as the Reflect.apply() method for applying a function to an object, the Reflect.construct() method for constructing a new object from a constructor function, and the Reflect.defineProperty() method for defining a property on an object.

To learn more about reflect, visit Reflect.

Async and Await

Async and await are two of the most important features of modern JavaScript. Async and await allow you to write asynchronous code in a more concise and readable way. Async and await are keywords that are used to define and handle asynchronous functions.

Async functions are functions that return a promise. A promise is an object that represents the result of an asynchronous operation. Await is used to wait for a promise to be resolved or rejected. When a promise is resolved or rejected, the await keyword will pause the execution of the async function and return the result of the promise.

To better understand how async and await work, let's look at an example. We will create an async function that fetches data from a remote server. We will use the fetch API to make the request.

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  console.log(data);
}

getData();

In the example above, we created an async function called getData. This function returns a promise that will resolve to the data we requested. We can use the await keyword to wait for the promise to be resolved. The await keyword will pause the execution of the async function until the promise is resolved.

Once the promise is resolved, the result of the promise will be returned. We can then use the result of the promise to do something with the data we requested. In this example, we are simply logging the data to the console.

To learn more about async and await, visit Async and Await.

Iterators

let arr = [1, 2, 3, 4, 5];

for (let value of arr) {
  console.log(value);
}
// Outputs: 
// 1
// 2
// 3
// 4
// 5

To learn more about iterators, visit Iterators.

Typed Arrays

Let's create a typed array that stores numbers:

const numbers = new Int32Array(10);

Now that we have created our typed array, we can use it to store numbers. Let's add some numbers to our array:

numbers[0] = 10;
numbers[1] = 20;
numbers[2] = 30;

We can also access and modify the values in our typed array:

let firstNumber = numbers[0];
console.log(firstNumber); // 10

numbers[0] = 100;
console.log(numbers[0]); // 100

Typed arrays are a great way to ensure that our code is always working with the correct data type. They are also more efficient than regular arrays, since they can store data in a more compact form.

To learn more about typed arrays, visit Typed Arrays.