JavaScript ES7 (2016)

ECMAScript 2016 (ES7) was a relatively small update to JavaScript compared to ES6, but it introduced two very useful features that simplify common programming tasks. These features improve performance, readability, and convenience for developers.

In this tutorial, we’ll cover:

1. Overview of ES7
2. Key Features with examples
3. A simple mini-project (model) using ES7 features

---

🔍 What Is ES7?

Released in 2016, ES7 (also known as ECMAScript 2016) focused on incremental improvement, adding just two major features:

• Array.prototype.includes()
• The exponentiation operator **

These additions made JavaScript more intuitive and allowed developers to write cleaner and more expressive code.

---

1. Array.prototype.includes()

The .includes() method checks whether an array contains a certain element. It returns true or false.

✅ Why it’s useful:

Before ES7, you had to use .indexOf() and check if the result was -1 to determine if a value existed in the array.

🧪 Syntax:

javascriptCopyEditarray.includes(valueToFind, fromIndex);

• valueToFind: The value to search for
• fromIndex (optional): The index to start the search from

🧾 Example:

javascriptCopyEditconst fruits = ["apple", "banana", "mango"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape"));  // false

Before ES7:

javascriptCopyEditconsole.log(fruits.indexOf("banana") !== -1); // true

The .includes() method is more readable and concise.

---

2. Exponentiation Operator (**)

This operator allows you to raise a number to the power of another number.

✅ Why it’s useful:

Previously, we had to use the Math.pow() function.

🧪 Syntax:

javascriptCopyEditbase ** exponent

🧾 Example:

javascriptCopyEditconsole.log(2 ** 3); // 8
console.log(5 ** 2); // 25

Before ES7:

javascriptCopyEditconsole.log(Math.pow(2, 3)); // 8

The ** operator is shorter, cleaner, and easier to read.

---

💡 Real-World Model: Student Grade Checker (Using ES7)

Let’s build a small script using both ES7 features — a student grade checker. This app checks if a grade exists in a list and performs a basic calculation on it.

🧩 Problem:

You have a list of grades. You want to:

• Check if a certain grade exists.
• Square the grade for comparison or analysis.

🧪 Code Example (Model):

javascriptCopyEdit// List of student grades
const grades = [65, 75, 80, 90, 100];

// Grade to check
const targetGrade = 90;

// Check if the grade exists using ES7 .includes()
if (grades.includes(targetGrade)) {
  console.log(`Grade ${targetGrade} is in the list.`);
  
  // Raise grade to the power of 2 using the exponentiation operator
  const gradePower = targetGrade ** 2;
  console.log(`Square of ${targetGrade} is ${gradePower}.`);
} else {
  console.log(`Grade ${targetGrade} not found.`);
}

🖥 Output:

csharpCopyEditGrade 90 is in the list.
Square of 90 is 8100.

This is a very practical use case — checking data and applying calculations — and it shows how ES7 makes the code more elegant.

---

🌟 Why Learn ES7?

Even though ES7 only introduced two new features, they are:

• Frequently used in everyday coding
• More readable than older alternatives
• Fully supported in modern browsers and JavaScript engines

They also help you write cleaner, modern JavaScript, especially useful when working in frontend frameworks (React, Vue) or back-end systems (Node.js).

---

🧠 Summary

Feature	Description	Example
.includes()	Checks if array contains a value	[1, 2].includes(2)
Exponentiation (**)	Raises number to a power	3 ** 2 // 9

---

✅ Conclusion

JavaScript ES7 may be a small update, but the improvements it brought are big in terms of clarity and convenience. The includes() method and the exponentiation operator ** are great tools that you’ll likely use in almost every project. They make your code easier to read, shorter, and less error-prone.

Keep practicing these features by using them in small projects or converting older JavaScript code to use ES7 syntax!