This content originally appeared on DEV Community and was authored by Pranav Bakare
ES6 (ECMAScript 2015)
ES6 (ECMAScript 2015) introduced several new features and improvements to JavaScript, enhancing its functionality and making code more efficient and easier to write. Here are some of the key ES6 features with examples:
1. Let and Const
let and const introduce block-scoped variables, replacing var which has function-scoping.
Example:
let name = 'John';
const age = 30;
if (true) {
let name = 'Jane'; // block-scoped variable
console.log(name); // Output: Jane
}
console.log(name); // Output: John
2. Arrow Functions
A shorter syntax for writing functions. It also lexically binds the this context.
Example:
const add = (a, b) => a + b;
console.log(add(5, 3)); // Output: 8
3. Template Literals
Template literals allow embedding expressions inside string literals, improving string concatenation and making multi-line strings easier to write.
Example:
const name = 'John';
const greeting = `Hello, ${name}!`; // Using backticks
console.log(greeting); // Output: Hello, John!
4. Destructuring Assignment
Destructuring allows for unpacking values from arrays or properties from objects into distinct variables.
Example:
// Array Destructuring
const [a, b] = [1, 2];
console.log(a); // Output: 1
// Object Destructuring
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Output: Alice
5. Default Parameters
Functions can have default parameter values that are used if no arguments are provided or if undefined is passed.
Example:
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!
greet('John'); // Output: Hello, John!
6. Spread and Rest Operators (...)
Spread expands an array or object into individual elements, while rest combines individual elements into an array.
Example:
// Spread Operator
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // Output: [1, 2, 3, 4]
// Rest Operator
function sum(...args) {
return args.reduce((acc, curr) => acc + curr);
}
console.log(sum(1, 2, 3)); // Output: 6
7. Promises
Promises make it easier to work with asynchronous code by avoiding callback hell.
Example:
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Success!'), 1000);
});
myPromise.then(result => console.log(result)); // Output: Success!
8. Classes
ES6 introduced a class-based syntax for defining objects and inheritance, making JavaScript more familiar to developers from other OOP languages.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const john = new Person('John', 30);
john.greet(); // Output: Hello, my name is John.
9. Modules (Import/Export)
ES6 allows you to split your code into reusable modules using export and import.
Example:
// module.js
export const greet = () => console.log("Hello");
// main.js
import { greet } from './module';
greet(); // Output: Hello
These features significantly improved the development experience in JavaScript, making the language more powerful, readable, and maintainable.
This content originally appeared on DEV Community and was authored by Pranav Bakare
Pranav Bakare | Sciencx (2024-09-17T19:32:25+00:00) ES6 Javascript Features. Retrieved from https://www.scien.cx/2024/09/17/es6-javascript-features/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.