DEV Community

yogini16
yogini16

Posted on

ECMAScript 6 (ES6)

ECMAScript 6 (ES6) is the sixth major version of the ECMAScript programming language. It was first standardized in June 2015, and it introduced several new features and improvements to the language. Some of the main features of ES6 include:

Arrow functions: shorthand syntax for defining anonymous functions

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

Constants: using the keyword const to declare variables that cannot be reassigned

const name = "Yogini";
name = "Yogi"; // TypeError: Assignment to constant variable.

Template literals: using backticks (`) to create strings that can include expressions and newline characters

const name = "Sun";
console.log(
Hello, ${name}!); // "Hello, Sun!"

Destructuring: a concise way to extract data from arrays and objects

const person = { name: "Sun", age: 25};
const { name, age } = person;
console.log(name); // "Sun"
console.log(age); // 25

Classes: a new syntax for creating objects and inheritance

`class Student{
constructor(name, std) {
this.name = name;
this.std= std;
}

sayHello() {
    console.log(`Hello, my name is ${this.name} and I study in ${this.std} class.`);
}
Enter fullscreen mode Exit fullscreen mode

}

const newStudent = new Person("Sun", 25);
newStudent.sayHello(); // "Hello, my name is Sun and I study in 8 class."`

Modules: a new way to organize and reuse code by exporting and importing functions, variables, and classes between different files

Ex. math.js
`export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}`

index.js
`import { add, subtract } from './math.js';

console.log(add(1, 2)); // 3
console.log(subtract(5, 2)); // 3`

In this example, we have two files: math.js and index.js. The math.js file exports two functions, add and subtract, which can be used to perform basic arithmetic operations. The index.js file imports these functions using the import statement and uses them to perform calculations.

Promises: a new way to handle asynchronous operations

`const promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5) {
resolve("success");
} else {
reject("failure");
}
}, 1000);
});

promise.then(result => console.log(result))
.catch(error => console.log(error));`

Generators: a new way to create functions that can be paused and resumed

`function* numbers() {
yield 1;
yield 2;
yield 3;
}

const iterator = numbers();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3`

Map and Set: new data structures for storing keys and values

`const map = new Map();
map.set("name", "Sun");
map.set("age", 25);
console.log(map.get("name")); // "Sun"
console.log(map.size); // 2

const set = new Set();
set.add("apple");
set.add("orange");
console.log(set.has("apple")); // true
console.log(set.size); // 2`

Default parameters: a way to provide default values for function parameters

function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5)); // 5
console.log(multiply(5, 2)); // 10

These are just some of the main features of ES6, but there are many other improvements and additions to the language as well.

It's worth noting that not all browser support all the features, but you can use tools like Babel to transpile your code to an older version of javascript that is supported by most browsers.

Keep in mind that ES6 is now known as ES2015, and there are other versions like ES2016, ES2017, and so on.

Top comments (0)