What's new in JavaScript?

ECMAScript 2015 (also known as ES6) and later introduced some of the following features:

1. let and const:

These two new keywords were introduced for variable declaration

1let variableOne = 'I can be updated.';
2
3const variableTwo = 'I cannot be updated.';

2. Template literals:

Template literals provide an easy way to interpolate variables and expressions within a string

1let name = 'John';
2
3let age = 25;
4
5let message = `Hello, my name is ${name} and I am ${age} years old.`;

3. Arrow functions:

Arrow functions introduce a shorter syntax for defining functions

1// Traditional function
2
3function add(x, y) {
4
5  return x + y;
6
7}
8
9
10// Arrow function
11
12const add = (x, y) => x + y;

4. Promises:

Promises were introduced for better handling of asynchronous operations

1let myPromise = new Promise((resolve, reject) => {
2
3  setTimeout(() => {
4  
5  resolve('Promise resolved');
6  
7  }, 5000);
8
9});
10
11
12myPromise.then((value) => {
13
14  console.log(value);
15
16});

5. Async/await:

This was introduced in ES2017 to simplify working with promises

1async function fetchData() {
2
3  const response = await fetch('https://api.example.com/data');
4  
5  const data = await response.json();
6  
7  console.log(data);
8
9}
10
11
12fetchData();

6. Object de-structuring:

This allows you to extract properties from objects in a more concise way

1let person = {
2
3  name: 'Alice',
4  
5  age: 30
6
7};
8
9
10
11const {name, age} = person;
12
13console.log(`${name} is ${age} years old.`);

7. Array de-structuring:

This allows you to extract elements from an array in a more concise way

1let numbers = [1, 2, 3];
2
3let [first, , third] = numbers;
4
5console.log(`${first} and ${third} are the first and third elements.`);

8. Spread syntax:

The spread syntax allows you to expand an iterate-able (like an array or an object) into individual elements

1let arrayOne = [1, 2, 3];
2
3let arrayTwo = [4, 5, 6];
4
5
6
7let combinedArray = [...arrayOne, ...arrayTwo];
8
9console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

9. Default parameters:

Allows you to set default values for function parameters

1function greet(name = 'World') {
2
3  console.log(`Hello, ${name}!`);
4
5}
6
7greet(); // Outputs: Hello, World!
8
9greet('John'); // Outputs: Hello, John!

10. Rest parameters:

Captures a variable number of function arguments into an array

1function sum(...numbers) {
2
3  return numbers.reduce((total, n) => total + n, 0);
4
5}
6
7
8console.log(sum(1, 2, 3, 4)); // Outputs: 10

11. Classes:

Introduces a more object-oriented way to define classes and inheritance

1class Animal {
2
3  constructor(name) {
4  
5    this.name = name;
6  
7  }
8
9
10
11  speak() {
12
13    console.log(`${this.name} makes a noise.`);
14  
15  }
16
17}
18
19
20
21class Dog extends Animal {
22
23  speak() {
24  
25    console.log(`${this.name} barks.`);
26  
27  }
28
29}
30
31
32
33const dog = new Dog('Rover');
34
35dog.speak(); // Outputs: Rover barks.

12. Modules:

Native support for importing and exporting functionalities in separate files

1// file: utils.js
2
3export function square(x) {
4
5  return x * x;
6
7}
8
9
10
11// file: main.js
12
13import { square } from './utils';
14
15console.log(square(3)); // Outputs: 9

13. Object literal shorthand:

Shorter syntax for defining object properties and methods

1const x = 2, y = 3;
2
3const obj = {
4
5  x,
6
7  y,
8
9  toString() {
10
11    return `{x: ${x}, y: ${y}}`;
12
13  }
14
15};
16
17console.log(obj.toString()); // Outputs: {x: 2, y: 3}

14. Iterators and for...of loop:

New iterable objects and a way to loop over them

1const iterable = ['a', 'b', 'c'];
2
3for (const value of iterable) {
4
5  console.log(value);
6
7} // Outputs: a, b, c

15. Generator functions:

Special type of function that can be stopped and resumed later

1function* idGenerator() {
2
3  let id = 0;
4
5  while (true) {
6
7    yield ++id;
8
9  }
10
11}
12
13
14
15const gen = idGenerator();
16
17console.log(gen.next().value); // Outputs: 1
18
19console.log(gen.next().value); // Outputs: 2

16. Array and Object methods:

New methods added to work with arrays and objects

1const array = [1, 2, 3, 4, 5];
2
3console.log(array.includes(3)); // Outputs: true
4
5
6const obj = {
7
8  a: 1,
9  
10  b: 2,
11  
12  c: 3
13
14};
15
16// Outputs: [['a', 1], ['b', 2], ['c', 3]]
17console.log(Object.entries(obj)); 

17. Proxy:

A special object that "wraps" another object and can intercept actions performed on the wrapped object

1const target = {};
2
3const handler = {
4
5  get: (obj, prop) => prop in obj ? obj[prop] : 0
6
7};
8
9
10
11const proxy = new Proxy(target, handler);
12
13console.log(proxy.nonExistingProperty); // Outputs: 0

These should give us a comprehensive overview of the changes and additions to ECMAScript in its latest versions.