Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
ES2015: Latest version of JavaScript
ES2015, also known as ECMAScript 6, is the latest version of JavaScript that was officially released in June 2015. It brings a number of new features and improvements to the language, making it easier to write more efficient and maintainable code. In this tutorial, we will take a look at some of the most significant changes and additions that were introduced in ES2015, and how they can be used to write better JavaScript.
New Feature: Let and Const Declarations
ES2015 introduces two new ways to declare variables: let and const. The let keyword is used to declare variables that can be reassigned later in the code, while the const keyword is used to declare variables that cannot be reassigned after they are initialized.
One of the main advantages of using let and const over the traditional var keyword is that they are block-scoped, rather than function-scoped. This means that a variable declared with let or const is only accessible within the block in which it was declared.
Syntax
The syntax for declaring a variable with the let keyword in JavaScript is as follows −
let variableName = value;
The syntax for declaring a variable with the const keyword is similar, but with the const keyword instead of let −
const variableName = value;
Example
Here's an example of how let and const can be used −
<html>
<body>
<p id="print"></p>
<p id="print1"></p>
<p id="print2"></p>
<script>
// Example of let variable
let x = 5;
x = 6; // valid
{
let x = 7;
document.getElementById("print").innerHTML = x; // 7
}
document.getElementById("print1").innerHTML = x; // 6
// Declare a constant with `const`
const numStars = 100;
// Attempting to reassign a constant throws an error
try {
numStars = 50;
} catch (err) {
document.getElementById("print2").innerHTML = err;
}
</script>
</body>
</html>
This can help to prevent accidental variable name clashes and make your code easier to understand and reason about.
New Feature: Arrow Functions
Another important new feature in ES2015 is the introduction of arrow functions. An arrow function is a shorthand notation for defining a function. It is defined using the => operator and has a number of benefits over traditional function expressions and declarations.
Syntax
The basic syntax for an arrow function is as follows −
(parameters) => { statements }
Arrow functions have a more concise syntax and do not have their own this binding, which can help to prevent issues with this being set to the wrong value.
<html>
<body>
<p id="print"></p>
<script>
// Arrow function syntax
let add = (a, b) => {
return a + b;
};
document.getElementById("print").innerHTML = add(2,3);
</script>
</body>
</html>
New Feature: Template Literals
ES2015 introduces a new way to create strings, called template literals. Template literals use backticks (`) instead of quotes (' ' or " ") and allow you to include expressions inside of the string by enclosing them in `${}`. This can make it easier to build strings that contain dynamic data.
Example
<html>
<head>
<title>Example</title>
</head>
<body>
<p id="demo"></p>
<script>
let name = 'John';
let age = 30;
// using computed property names
let person = {
['first' + 'Name']: name,
['age' + (age > 18 ? 'Old' : 'Young')]: age,
greet() {
document.getElementById("demo").innerHTML= `Hello, my name is ${this.firstName} and I am ${this.ageOld} years old.`
}
};
person.greet(); // logs "Hello, my name is John and I am 30 years old."
</script>
</body>
</html>
New Feature: Enhanced Object Literals
ES2015 also introduces several enhancements to object literals, which make it easier to create and work with objects.
Syntax
let property1 = "value1",
property2 = "value2";
let obj = {
property1,
property2,
[property3]: "value3"
}
Some of the key features include −
Example
Property shorthand − When a variable has the same name as a property, you can use shorthand to assign its value.
<html>
<body>
<p id="print"></p>
<script>
let x = 5;
let y = 6;
let z = 7;
let obj = {x, y, z};
document.getElementById("print").innerHTML = JSON.stringify(obj);
</script>
</body>
</html>
Example
Computed property names − You can use expressions to dynamically assign property names.
<html>
<body>
<p id="print"></p>
<script>
let prop = 'name';
let obj = {
[prop]: 'John'
};
document.getElementById("print").innerHTML = JSON.stringify(obj);
</script>
</body>
</html>
Example
Method properties − You can use shorthand to define methods within an object literal.
<html>
<body>
<p id="print"></p>
<script>
let obj = {
add(a, b) {
return a + b;
}
};
document.getElementById("print").innerHTML = obj.add(1, 2);
</script>
</body>
</html>
These new enhancements allow you to write more concise and expressive code when working with objects, making it easier to create and manipulate objects with ES2015.
New Feature: Destructuring
ES2015 introduces a new feature called destructuring, which allows you to easily extract values from arrays and objects and assign them to variables. This can make it easier to work with data structures, such as extracting values from an object or array, or swapping values between variables.
Syntax
Here is the syntax for object destructuring −
let [var1, var2, ...rest] = array;
Example
<html>
<head>
<title>Destructuring Example</title>
</head>
<body>
<p id="output"></p>
<script>
let arr = [1, 22, 3];
let [a, b, c] = arr;
// use innerHTML to display the values of a, b, and c
document.getElementById("output").innerHTML = `${a}, ${b}, ${c}`;
</script>
</body>
</html>
Example
Destructuring can also be used to extract nested properties, or to provide default values for properties that may be missing.
<html>
<head>
<title>Destructuring Example</title>
</head>
<body>
<p id="output"></p>
<p id="output1"></p>
<script>
//example 1
let obj = { x: { y: { z: 1 } } };
let { x: { y: { z: value } } } = obj;
document.getElementById("output").innerHTML = value;
//example 2
let { x: x = 1, y: y = 22, z: z = 34 } = {};
document.getElementById("output1").innerHTML = `${x}, ${y}, ${z}`;
</script>
</body>
</html>
Conclusion
In conclusion, ES2015 is the latest version of JavaScript, it brings a number of new features and improvements to the language, such as the new let and const declarations, arrow functions, template literals, enhanced object literals and destructuring, which make it easier to write more efficient and maintainable code. With ES2015, developers can write more concise and expressive code, which can make it easier to create and manipulate data. All these new features and improvements make JavaScript more powerful than ever before.
329 Views
