Exploring ES6 JavaScript Array Methods
Welcome to my blog post on ES6 JavaScript array methods! In this article, we will dive into some of the most useful array methods introduced in ES6 (ECMAScript 2015). We'll also include TypeScript code examples where applicable and provide challenges for you to test your knowledge.
Let's get started!
Introduction
ES6 brought several powerful array methods that make working with arrays more efficient and expressive. These methods provide convenient ways to manipulate, iterate, and transform arrays. In this article, we'll cover the following array methods:
-
map(): Transform each element of an array and create a new array. -
filter(): Filter elements of an array based on a condition. -
reduce(): Reduce an array to a single value by applying a callback function. -
forEach(): Perform an action on each element of an array. -
find(): Find the first element in an array that satisfies a condition. -
some(): Check if at least one element in an array satisfies a condition. -
every(): Check if all elements in an array satisfy a condition.
Now, let's explore each of these methods with code examples!
1. map()
The map() method creates a new array by applying a provided function to each element of the original array. It transforms the elements without modifying the original array.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const squaredNumbers: number[] = numbers.map((num: number) => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
Challenge: Using the map() method, create a new array that doubles each element of the following array: [2, 4, 6, 8, 10]. Store the result in a variable called doubledNumbers.
2. filter()
The filter() method creates a new array containing all elements that pass a provided condition. It helps to extract elements that satisfy specific criteria from an array.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers: number[] = numbers.filter((num: number) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
Challenge: Using the filter() method, create a new array that contains only the odd numbers from the following array: [10, 15, 20, 25, 30]. Store the result in a variable called oddNumbers.
3. reduce()
The reduce() method applies a provided function to reduce an array to a single value. It iterates over the array, accumulating the result of each iteration.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const sum
= numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const sum: number = numbers.reduce((acc: number, num: number) => acc + num, 0);
console.log(sum); // Output: 15
Challenge: Use the reduce() method to calculate the product of the elements in the following array: [2, 3, 4, 5]. Store the result in a variable called product.
4. forEach()
The forEach() method executes a provided function once for each array element. It allows performing an action on each element without creating a new array.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
// Output:
// 1
// 2
// 3
// 4
// 5
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
numbers.forEach((num: number) => console.log(num));
// Output:
// 1
// 2
// 3
// 4
// 5
Challenge: Using the forEach() method, print the squares of the numbers in the following array: [1, 2, 3, 4, 5].
5. find()
The find() method returns the first element in an array that satisfies a provided condition. It stops searching as soon as it finds an element that matches the condition.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((num) => num % 2 === 0);
console.log(firstEvenNumber); // Output: 2
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const firstEvenNumber: number | undefined = numbers.find((num: number) => num % 2 === 0);
console.log(firstEvenNumber); // Output: 2
Challenge: Use the find() method to find the first element greater than 3 in the following array: [1, 2, 3, 4, 5]. Store the result in a variable called result.
6. some()
The some() method checks if at least one element in an array satisfies a provided condition. It returns true if any element matches the condition, otherwise false.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((num) => num % 2 === 0);
console.log(hasEvenNumber); // Output: true
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const hasEvenNumber: boolean = numbers.some((num: number) => num % 2 === 0);
console.log(hasEvenNumber); // Output: true
Challenge: Use the some() method to check if the following array contains any negative numbers: [1, 2, -3, 4, 5]. Store the result in a variable called hasNegative.
7. every()
The every() method checks
if all elements in an array satisfy a provided condition. It returns true if all elements match the condition, otherwise false.
// JavaScript
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // Output: true
// TypeScript
const numbers: number[] = [1, 2, 3, 4, 5];
const allPositive: boolean = numbers.every((num: number) => num > 0);
console.log(allPositive); // Output: true
Challenge: Use the every() method to check if all elements in the following array are greater than 0: [1, 2, 3, 4, 5]. Store the result in a variable called allGreater.
Conclusion
ES6 JavaScript array methods offer powerful ways to manipulate and transform arrays. In this article, we explored the map(), filter(), reduce(), forEach(), find(), some(), and every() methods. We covered their basic usage, provided code examples in JavaScript and TypeScript, and included challenges for you to solve.
Now it's your turn to put your knowledge into practice! Solve the challenges, experiment with the code examples, and further explore these array methods.
Challenge Answers
Here are the answers to the challenges:
-
map()Challenge Solution:
const numbers = [2, 4, 6, 8, 10];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [4, 8, 12, 16, 20]
-
filter()Challenge Solution:
const numbers = [10, 15, 20, 25, 30];
const oddNumbers = numbers.filter((num) => num % 2 !== 0);
console.log(oddNumbers); // Output: [15, 25]
-
reduce()Challenge Solution:
const numbers = [2, 3, 4, 5];
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // Output: 120
-
forEach()Challenge Solution:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num * num));
// Output:
// 1
// 4
// 9
// 16
// 25
-
find()Challenge Solution:
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find((num) => num > 3);
console.log(result); // Output: 4
-
some()Challenge Solution:
const numbers = [1, 2, -3, 4, 5];
const hasNegative = numbers.some((num) => num < 0);
console.log(hasNegative); // Output: true
-
every()Challenge Solution:
const numbers = [1, 2, 3, 4, 5];
const allGreater = numbers.every((num) => num > 0);
console.log(allGreater); // Output: true
Stay tuned for the next part of this series, where we'll explore more advanced techniques and additional array methods.
Top comments (3)
Great article!
I think you should include
.at()method too! It is a new method for arrays!The
at()method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.Example:
Read More on MDN Docs
Awesome !
I think that would be a great method to add to the list. I planned on making a series on array methods, so I’ll add this method in the next blog post.
Thanks 💪🏽🙏🏽
Sounds great! Awaiting... ✨
Happy Coding :)