Zero to Hero React Tutorials - Part 7: JavaScript ES6/ES7 Methods

Introduction

Welcome back to the “Zero to Hero React Tutorials” series! In the last article, we explored Function Currying, learning how functions can be broken down into smaller, reusable units. Now, let’s dive into ES6 and ES7 methods, which significantly improve JavaScript’s readability, efficiency, and developer experience.

By the end of this article, you’ll understand:
✅ Key ES6 and ES7 methods every JavaScript developer should know.
✅ How these methods simplify common coding tasks.
✅ Practical real-world use cases.

What Are ES6 and ES7 Methods?

JavaScript ES6 (ECMAScript 2015) and ES7 (ECMAScript 2016) introduced powerful methods to make coding more efficient. Let’s explore them with examples!

🟢 Essential ES6 Methods

1️⃣ Array.prototype.find()

Finds the first element in an array that satisfies a condition.

const numbers = [10, 25, 40, 55];  
const result = numbers.find(num => num > 30);  
console.log(result); // Output: 40

✔ Useful for searching in arrays without looping manually.

2️⃣ Array.prototype.includes()

Checks if an array contains a specific value.

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

✔ Great for existence checks in an array.

3️⃣ String.prototype.startsWith() & endsWith()

Checks whether a string starts or ends with a specific substring.

const message = "Hello, world!";  
console.log(message.startsWith("Hello")); // Output: true  
console.log(message.endsWith("!")); // Output: true

✔ Useful for validating inputs or filtering strings.

4️⃣ Arrow Functions (=>)

A shorter syntax for functions.

const greet = name => `Hello, ${name}!`;  
console.log(greet("Samith")); // Output: Hello, Samith!

✔ More concise than traditional functions.

5️⃣ Object Destructuring

Extracts values from objects easily.

const user = { name: "John", age: 25 };  
const { name, age } = user;  
console.log(name, age); // Output: John 25

✔ Saves time when working with complex objects.

6️⃣ Template Literals ( )

Allows multi-line strings and variable interpolation.

const name = "Alice";  
console.log(`Hello, ${name}! Welcome to ES6.`);

✔ Readable and avoids messy string concatenation.

🟢 Essential ES7 Methods

1️⃣ Array.prototype.includes() (Introduced in ES7)

ES7 made includes() available for arrays (not just strings!).

const numbers = [1, 2, 3, 4];  
console.log(numbers.includes(3)); // Output: true

✔ Simplifies array membership checks.

2️⃣ Exponentiation Operator (**)

Replaces Math.pow() for exponentiation.

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

✔ Shorter and more readable than Math.pow(2, 3).

Real-World Use Cases

🔹 Filtering and Searching Data Efficiently

Using .find() and .includes() to quickly search in large datasets.

const users = [  
  { name: "Alice", age: 30 },  
  { name: "Bob", age: 25 }  
];  

const user = users.find(u => u.name === "Bob");  
console.log(user); // { name: "Bob", age: 25 }

✔ Avoids loops and makes search operations faster.

🔹 Simplifying API Responses with Destructuring

Handling API data efficiently.

fetch("https://api.example.com/user")  
  .then(response => response.json())  
  .then(({ name, email }) => console.log(name, email));

✔ Extracts data directly, improving code readability.

🔹 Generating Dynamic Messages with Template Literals

const user = { name: "John", age: 28 };  
console.log(`User ${user.name} is ${user.age} years old.`);

✔ Avoids concatenation mess like "User " + user.name + " is " + user.age.

When NOT to Use These Methods?

🚫 Overusing destructuring can reduce clarity in large objects.
🚫 Arrow functions do not have their own this, which may cause issues in event handlers.
🚫 Template literals can cause unintended whitespace formatting issues.

Interview Questions & Answers

1️⃣ What are some key ES6 features?
ES6 introduced arrow functions, template literals, destructuring, and the find() method for arrays.

Get Samith Aberathne’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

2️⃣ How does the .includes() method improve search operations?
It simplifies searching in arrays and strings without using indexOf().

3️⃣ What is the exponentiation operator (**), and when was it introduced?
It’s a shortcut for Math.pow() and was introduced in ES7 (2016).

4️⃣ Why are template literals better than string concatenation?
They improve readability and support multi-line strings and variable interpolation.

5️⃣ What’s the difference between .find() and .filter()?
.find() returns the first matching element, while .filter() returns all matching elements.