JavaScript has added many useful features over the years. These features make code shorter, cleaner, and easier to work with.
In this chapter, we will look at some features commonly used in modern JavaScript.
Template Literals
Template literals make it easier to create strings that contain variables. They use backticks instead of quotes.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Template Literals</title>
</head>
<body>
<h1>Template Literals</h1>
<script>
let name = "Aman";
let age = 15;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);
</script>
</body>
</html>
Output:
My name is Aman and I am 15 years old.${} is used to put a variable inside the string.
Destructuring
Destructuring gives you an easy way to take values from an array or object and store them in variables.
Array Destructuring
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Destructuring</title>
</head>
<body>
<h1>Array Destructuring</h1>
<script>
let colors = ["Red", "Green", "Blue"];
let [first, second, third] = colors;
console.log(first);
console.log(second);
console.log(third);
</script>
</body>
</html>
Output:
Red
Green
BlueYou can also use destructuring with objects.
Object Destructuring
<!DOCTYPE html>
<html>
<head>
<title>Object Destructuring</title>
</head>
<body>
<h1>Object Destructuring</h1>
<script>
const student = {
name: "Aman",
age: 15
};
const { name, age } = student;
console.log(name);
console.log(age);
</script>
</body>
</html>
Output:
Aman
15Spread Operator
The spread operator ... allows you to expand the values of an array or object.
Example with an Array
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Spread Operator</title>
</head>
<body>
<h1>Spread Operator</h1>
<script>
let fruits = ["Apple", "Mango"];
let moreFruits = [...fruits, "Banana", "Orange"];
console.log(moreFruits);
</script>
</body>
</html>
Output:
["Apple", "Mango", "Banana", "Orange"]The ...fruits takes the values from the first array and puts them into the new array.
Rest Operator
The rest operator also uses ..., but it collects multiple values into one array.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Rest Operator</title>
</head>
<body>
<h1>Rest Operator</h1>
<script>
function addNumbers(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
console.log(addNumbers(10, 20, 30));
</script>
</body>
</html>
Output:
60Here, ...numbers collects all the values passed to the function into an array.
Default Parameters
A function can have a default value for a parameter. If no value is given, JavaScript uses the default value.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Default Parameters</title>
</head>
<body>
<h1>Default Parameters</h1>
<script>
function greet(name = "Guest") {
console.log("Hello " + name);
}
greet("Aman");
greet();
</script>
</body>
</html>
Output:
Hello Aman
Hello GuestThe second function call does not provide a name, so "Guest" is used.
Optional Chaining
Sometimes you need to access a property that may not exist. Optional chaining ?. lets you safely access that property without causing an error.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Optional Chaining</title>
</head>
<body>
<h1>Optional Chaining</h1>
<script>
const student = {
name: "Aman",
address: {
city: "Delhi"
}
};
console.log(student.address?.city);
console.log(student.contact?.phone);
</script>
</body>
</html>
Output:
Delhi
undefinedWithout ?., trying to access a property that does not exist can cause an error.
Modules
As a JavaScript project grows, keeping all the code in one file can become difficult. Modules let you divide your JavaScript code into separate files and use the code where you need it. For example, you can create a file called math.js:
export function add(a, b) {
return a + b;
}
Then use it in another JavaScript file:
import { add } from "./math.js";
console.log(add(10, 20));
Output:
30When using modules in HTML, add type="module":
<script type="module" src="app.js"></script>
Modules become especially useful when working on larger JavaScript applications.
Key Points
- Template literals make strings with variables easier to write.
- Destructuring extracts values from arrays and objects.
- Spread
...expands values. - Rest
...collects multiple values. - Default parameters provide fallback values.
- Optional chaining
?.safely accesses properties. - Modules help divide large JavaScript programs into separate files.
These features are used regularly in modern JavaScript and will also be useful when you move to frameworks such as React.js.
Frequently Asked Questions (FAQs)
Q1. What are Modern JavaScript features?
Modern JavaScript features are newer language features that make JavaScript code cleaner, shorter, and easier to maintain. Common examples include template literals, destructuring, spread and rest operators, optional chaining, and modules.
Q2. What is JavaScript Destructuring used for?
JavaScript Destructuring allows you to extract values from arrays or objects and store them directly in variables. It provides a simple way to work with structured data.
Q3. Why are JavaScript Modules useful?
JavaScript Modules divide code into separate files, making larger applications easier to organize, maintain, and reuse. The export and import keywords allow code to be shared between files.
Q4. How does optional chaining work in JavaScript?
Optional chaining uses ?. to safely access a property that may not exist. Instead of throwing an error when the property is missing, JavaScript returns undefined.
Q6. Why are Modern JavaScript Features important for web development?
Modern JavaScript Features are widely used in current web development because they make code easier to write and maintain. They are also useful when working with libraries and frameworks such as React.js.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
