How to use Loops, Array.from, Map, Filter, and Reduce in JavaScript 🚀

👋 In this article, I will show you how to use some of the most useful and powerful features of JavaScript: loops, Array.from, map, filter, and reduce. These features can help you manipulate data, create new arrays, and perform calculations with ease. 😎

Let's get started!

What are loops? 🔁

Loops are a way of repeating a block of code multiple times until a certain condition is met. For example, if you want to print the numbers from 1 to 10, you can use a loop like this:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

The for loop has three parts: the starting value (let i = 1), the ending condition (i <= 10), and the increment (i++). The loop will run as long as the condition is true, and each time it will increase the value of i by one.

There are other types of loops in JavaScript, such as while, do...while, and for...of, but they all have the same basic idea: repeat something until something else happens.

What is Array.from? 📦

Array.from is a method that creates a new array from an array-like or iterable object. For example, if you have a string like "hello", you can use Array.from to turn it into an array like ["h", "e", "l", "l", "o"]. Here's how:

let str = "hello";
let arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]

Array.from can also take a second argument, which is a function that maps each element of the original object to a new value. For example, if you want to turn the string "hello" into an array of ASCII codes, you can use Array.from like this:

let str = "hello";
let arr = Array.from(str, (char) => char.charCodeAt(0));
console.log(arr); // [104, 101, 108, 108, 111]

Array.from is useful when you want to convert something that is not an array into an array, so you can use array methods on it.

What is map? 🗺️

Map is a method that creates a new array by applying a function to each element of an existing array. For example, if you have an array of numbers like [1, 2, 3], and you want to double each number, you can use map like this:

let nums = [1, 2, 3];
let doubled = nums.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

The map method takes a function as an argument, which receives the current element (num) and returns a new value (num * 2). The map method does not change the original array; it returns a new one.

Map is useful when you want to transform each element of an array into something else.

What is filter? 🧹

Filter is a method that creates a new array by filtering out the elements of an existing array that do not match a certain condition. For example, if you have an array of numbers like [1, 2, 3], and you want to keep only the even numbers, you can use filter like this:

let nums = [1, 2, 3];
let even = nums.filter((num) => num % 2 === 0);
console.log(even); // [2]

The filter method takes a function as an argument, which receives the current element (num) and returns a boolean value (num % 2 === 0). The filter method does not change the original array; it returns a new one.

Filter is useful when you want to remove some elements of an array based on a condition.

What is reduce? 🔥

Reduce is a method that reduces an array to a single value by applying a function to each element of the array and accumulating the result. For example, if you have an array of numbers like [1, 2, 3], and you want to sum them up, you can use reduce like this:

let nums = [1, 2 ,3];
let sum = nums.reduce((acc, num) => acc + num, 0);
console.log(sum); // 6

The reduce method takes two arguments: a function and an initial value. The function receives two parameters: the accumulator (acc) and the current element (num). The function returns a new value for the accumulator, which is used in the next iteration. The initial value (0) is the starting value for the accumulator.

Reduce is useful when you want to combine all the elements of an array into a single value.

Conclusion 🎉

In this article, you learned how to use loops, Array.from, map, filter, and reduce in JavaScript. These features can help you manipulate data, create new arrays, and perform calculations with ease. 😎

I hope you enjoyed this article and learned something new. If you have any questions or feedback, feel free to leave a comment below. Happy coding! 👋