Modern JavaScript ES6 array methods. Specifically, we'll be exploring the fantastic quartet: map(), forEach(), filter(), and reduce(). These methods are your trusty companions for unleashing the power of arrays in JavaScript. Let's embark on this enlightening journey together! 🚀🚀🚀

What are methods in Javascript and why do we use them?

Javascript methods are like tools working with objects. They're like properties that store special functions, which help do things with objects. Whether you're changing how a webpage looks, dealing with what users do, or doing tricky math, these methods make it much easier to work with stuff in your code. If you want to become even better at building websites, learn how to use JavaScript methods.

In this article, we will be looking at four of the modern Javascript Es6 array methods: forEach(), filter(), reduce(), and map(). These methods are your trusty companions for unleashing the power of arrays in JavaScript.

The JavaScript map() Method 🗺️

The .map method. A powerful tool that allows us to traverse an array and execute a designated function on each of its elements. The result? A brand-new array brimming with transformed counterparts of the original items.

Example-

codeconst numbers = [1, 2, 3, 4, 5];

// Using a dedicated function
function double(x) {
  return x * 2;
}
const newNumArray = numbers.map(double);
console.log(newNumArray); // Output: [2, 4, 6, 8, 10]

// Embracing the allure of an anonymous function
const anotherNumbers Array = numbers.map((x) => {
  return x * 3;
});
console.log(anotherNumbersArray); // Output: [3, 6, 9, 12, 15]

In the above, two examples within the map method.

In the first example, we defined a function outside the map method. The function we defined takes in the command we want to happen to each of the items in the array. The second example sees us using an arrow function to define our function call directly inside the method.

The JavaScript forEach() method

The forEach()method is like having a personal assistant that helps you go through each item in an array and do something with it. It's like giving a task to your assistant, and they make sure it's done for every item.

Example-

codeconst colors = ['red', 'blue', 'green'];

// Using a regular function
function printColor(color) {
  console.log(`Color: ${color}`);
}

colors.forEach(printColor);

// Using an arrow function
colors.forEach((color) => {
  console.log(`Color: ${color}`);
});

In this example, we have an array called colors containing three color names. We want to print each color to the console. The forEach() method comes to our aid, marching through each color and executing the printColor function (or arrow function) for each one.

Output-

codeColor: red
Color: blue
Color: green

The JavaScript reduce() method

The reduce(), is like a wise wizard that takes an array of values and performs a special kind of magic to reduce them into a single value. It's perfect for when you want to accumulate or combine elements in a really cool way.

Example -

scriptCopy codeconst numbers = [1, 2, 3, 4, 5];

// Using a regular function
function addNumbers(sum, number) {
  return sum + number;
}

const total = numbers.reduce(addNumbers, 0);
console.log(total); // Output: 15

// Using an arrow function
const multipliedTotal = numbers.reduce((product, number) => {
  return product * number;
}, 1);
console.log(multipliedTotal); // Output: 120

In this example, we possess an array of numbers. Our quest is to either sum or multiply these numbers into a single ultimate value. With the reduce() method as our spellbook, we concoct two magical formulas: addNumbers and an arrow function. Armed with an initialValue, we perform our wizardry.

When the code is conjured, you'll witness:

For addition: Total sum = 15
For multiplication: Total product = 120

The reduce method does a scalar operation on the array, which is a vector. In a scalar operation (addition, multiplication, subtraction, or division) of a vector (array), only one value is returned.

The JavaScript filter() method

The filter() method is your trusty helper when you want to sift through an array and pick out only the elements that meet your specific criteria. It's like having a magical sieve that leaves behind only the gems you're interested in.

example -

javascriptCopy codeconst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Using a regular function
function isEven(number) {
  return number % 2 === 0;
}

const evenNumbers = numbers.filter(isEven);
console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]

// Using an arrow function
const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});
console.log(oddNumbers); // Output: [1, 3, 5, 7, 9]

In this example, we possess an array of numbers ranging from 1 to 10. Our mission is to separate the even numbers from the odd ones, forming two distinct arrays. With the filter() spell at our fingertips, we craft the isEven function and a captivating arrow function, each invoking its own enchantment.

Output-

Even numbers: [2, 4, 6, 8, 10]
Odd numbers: [1, 3, 5, 7, 9]

And with that, we conclude today's article! Your visit has been a delight, and I trust that you've enjoyed perusing these words as much as I've relished penning them. Until our paths cross again, take care and may the joy of this read linger with you.