JavaScript Array Methods()...6

JavaScript Array Methods()...6

·

10 min read

In this article we are going to learn about the following array methods:

  • .reduce(),
  • .reduceRight(),
  • .reverse(),
  • .some(),
  • .sort(),

Hellooo and Welcome to article #6 in the series JavaScript Array Methods(),

In this article, we're going to learn the basics of some array methods in JavaScript(syntax, purpose, as well as example snippets),

If you are new here and want to know some more array methods, I have a series on JavaScript Array Methods(), you can check it out here

Let's get started with array methods-

.reduce()

  • This method allows us to reduce an array into a single value.

  • sometimes there are situations where you may need to get the sum of all the numerical elements inside an array(one out of many situations) or some similar situation where you need to get one value out of all elements,

  • In these kinds of situations .reduce() method comes to the rescue, instead of writing a complex function, you can use the .reduce() method and do it simply,

  • Basically what it does is, it executes the passed function for each element in the array(executes from left to right) and returns a value of any type and stores that value in an accumulator) and uses this value from accumulator in the next iteration(in the execution for next element) and so on for all elements inside an array, and it returns the accumulator value at last as the final value,

  • Just like some other array methods it also does not calls the function for empty array elements and

  • It does not alter the original array elements,

Syntax

arrayName.reduce(function(acc, currentElementValue, currentIndex, arrayObject), initialValue)
  1. arrayName - the array to apply the method on,

  2. acc - the accumulator value returned on each execution of the function,

  3. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the filter method and it requires the following things:

    • currentElementValue: the value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,
  4. initialValue- (optional) A value to be passed to the method as the initial value to the function, if no value passed it will use the first element from the array as the initial value to the function,

Example Snippet

var numbers = [1, 2, 3, 4];
numbers.reduce((temp, num) => temp + num);
// returns 10

.reduceRight()

  • Well .reduceRight() method is similar to the .reduce() method the key difference is .reduceRight() method executes the function right to left where .reduce() method executes left to right,

  • This method allows us to reduce an array into a single value.

  • sometimes there are situations where you may need to get the sum of all the numerical elements inside an array(one out of many situations) or some similar situation where you need to get one value out of all elements,

  • In these kinds of situations .reduce() method comes to the rescue, instead of writing a complex function, you can use the .reduce() method and do it simply,

  • Basically what it does is, it executes the passed function for each element in the array(executes from right to left) and returns a value of any type and stores that value in an accumulator) and uses this value from accumulator in the next iteration(in the execution for next element) and so on for all elements inside an array, and it returns the accumulator value at last as the final value,

  • Just like some other array methods it also does not calls the function for empty array elements and

  • It does not alter the original array elements,

Syntax

arrayName.reduce(function(acc, currentElementValue, currentIndex, arrayObject), initialValue)
  1. arrayName - the array to apply the method on,

  2. acc - the accumulator value returned on each execution of the function,

  3. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the filter method and it requires the following things:

    • currentElementValue: the value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,
  4. initialValue- (optional) A value to be passed to the method as the initial value to the function to be used as an accumulator value, if no value passed it will use the first element from the array as the initial value to the function,

Example Snippet

var numbers = [1, 2, 3, 4];
numbers.reduceRight((temp, num) => temp + num);
// returns 10

.reverse()

  • This method simply reverses the order of the elements inside the array and returns the array in which the elements are placed in reverse order,

  • It changes the initial array,

  • it doesn't require any parameter,

Syntax

arrayName.reverse()

Example Snippet

const cars = ["BMW", "Jaguar", "Volvo", "Tesla"];
cars.reverse();
// returns ["Tesla", "Volvo", "Jaguar", "BMW"]

.some()

  • This method helps you to check whether any element inside an array pass a condition or not,

  • This condition is passed to the method as a function(condition function),

  • This method executes the function once for each element and the function returns true when the very first element inside the array pass the condition and stops the execution for further elements,

  • And then the method returns true when it encounters true from the condition function otherwise it returns false if no true returned from the function,

Syntax

array.some(function(currentElementValue, currentIndex, arrayObject), thisValue)
  1. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the filter method:

    • currentElementValue: the value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,
  2. thisValue- (optional) A value to be passed to the method as a 'this' value to the function.

    • "undefined" is the default value of thisValue, if you omit this parameter, the value 'undefined' will be passed.

.sort()

  • This method is used to sort the elements inside an array in both- ascending or descending order,

  • Initially, it considers each element in the array as a string,

  • For example, if you want to sort numbers inside an array, you have to provide a function known as compare function otherwise it will sort the numbers incorrectly,

  • Let's see how it works, assume you have two numbers([10, 5]) in an array and you want to sort them, the sort method will give you ([10, 5]) as a sorted array because '10'(as a string) will be smaller than '5' because 1(as the first letter in a string) is smaller than 5(as another string),

  • but by providing the compare function we can set our own sorting algorithm and use the sort method in an easy and useful way to sort the numbers,

  • It changes the initial array,

Syntax

arrayName.sort(compareFunction);
  1. arrayName - the array to apply the method on,

  2. compareFunction - a function to define or set an algorithm we want to sort the elements with,

compareFunction Syntax

compareFunction(firstElement, secondElement){
// set of statements to compare the above values
}

Example Snippet

const numbers = [1, 5, 7, 3, 9, 2, 0, 4, 6, 8];
numbers.sort((num1, num2) => num1 - num2); // arrow function syntax
// returns  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]