For Loop through an array in backward direction in JavaScript

There are several methods to loop through the array in JavaScript in the reverse direction:



1. Using reverse for-loop

The standard approach is to loop backward using a for-loop starting from the end of the array towards the beginning of the array.

var arr = [1, 2, 3, 4, 5];

for (var i = arr.length - 1; i >= 0; i--) 
    console.log(arr[i]);



2. Using Array.prototype.reverse() function

We know that forEach goes through the array in the forward direction. To loop through an array backward using the forEach method, we have to reverse the array. To avoid modifying the original array, first create a copy of the array, reverse the copy, and then use forEach on it. The array copy can be done using slicing or ES6 Spread operator.

var arr = [1, 2, 3, 4, 5];

arr.slice().reverse()
    .forEach(function(item) 
            console.log(item);
);

Alternatively, you can use the Object.keys() method to get keys:

var arr = [1, 2, 3, 4, 5];

Object.keys(arr).reverse()
        .forEach(function(index) 
            console.log(arr[index]);
);



3. Using Array.prototype.reduceRight() function

The reduceRight() method executes the callback function once for each element present in the array, from right-to-left. The following code example shows how to implement this.

var arr = [1, 2, 3, 4, 5];

arr.reduceRight((_, item) => console.log(item), null);

That’s all about looping through an array backward in JavaScript.

Source :- https://www.techiedelight.com/loop-through-array-backwards-javascript/


Source link

You are an array

Javascript always has some surprises in store. for example, typeof [] return object and not array. This has historical reasons. But this can be very confusing

How can you then properly check if something is an array?



Constructor

For example, you could check if the constructor is an array.

([]).constructor === Array // true
(new Array).constructor === Array // true
().constructor === Array // false
(true).constructor === Array // false
(null).constructor === Array // TypeError
(undefined).constructor === Array // TypeError

As you can see this has a problem. With null and undefined a TypeError is thrown.

You could catch this for example with a try/catch.

try 
  (undefined).constructor === Array // true
 catch(e) 

But you don’t want that.



Exotic

There is also this exotic possibility to check if it is an array. You can missuse the toString() method for this.

Object.prototype.toString.call([]).indexOf('Array')!==-1
     // => true
Object.prototype.toString.call().indexOf('Array')!==-1
     // => false
Object.prototype.toString.call("").indexOf('Array')!==-1
     // => false
Object.prototype.toString.call(null).indexOf('Array')!==-1
   // => false
Object.prototype.toString.call(true).indexOf('Array')!==-1
   // => false Object.prototype.toString.call(undefined).indexOf('Array')!==-1
   // => false

But it doesn’t just look awkward, it is awkward.



instanceOf

Alternatively, the instanceof operator, which is also known from other languages, can of course be used here.

[]  instanceof Array // => true
 instanceof Array // => false
"" instanceof Array // => false
null instanceof Array // => false
true instanceof Array // => false
10 instanceof Array // => false
undefined instanceof Array // => false

Already looks pretty good. But there is also a problem here.

All these checks work only if the array was created by the original array constructor in the current environment.

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeArray = window.frames[window.frames.length-1].Array;
const array = new iframeArray(1,2,3); 

Here the two array instances do not match.

array instanceof Array; // false

But there is a real solution.



Array.isArray

For these reasons, since ECMAScript 5 there is a method Array.isArray().

This also works with different instances.

Array.isArray([])  // => true
Array.isArray(Array.prototype)  // => surprise; true
Array.isArray() // => false
Array.isArray("") // => false
Array.isArray(null)  // => false
Array.isArray(true)  // => false
Array.isArray(undefined)  // => false

If it (isArray) is supported, it is the solution!

hope you enjoy it!



References


Source link

5 JavaScript Array methods you need to know!

While building applications you would have noticed yourself using Array’s a lot. So let’s take a look at the 5 Array methods.

To show you all the methods with examples, I am going to create a simple Array with some fruits and their prices-

const fruits = [
   
    name: "Mango",
    price: 3,
  ,
  
    name: "Apple",
    price: 5,
  ,
  
    name: "Banana",
    price: 10,
  ,
];



1. Map

A map function is similar to loop and if you are a React developer you probably have seen this function be used quite a lot. So let’s understand this properly with an example-

function getFruitNames() 
  return fruits.map((fruit) => fruit.name);


console.log(getFruitNames());

The getFruitNames maps through the fruits Array and returns the name of each fruit. So if we run the function it will return an Array with all the fruit names-

['Mango', 'Apple', 'Banana']



2. Filter

If you want to filter some products out based on some conditions like getting the fruits that cost more than 4 then we will use the filter function to do so. This is how you use a filter function-

function getCostlyFruits() 
  return fruits.filter((fruit) => fruit.price > 4);


console.log(getCostlyFruits());

This function returns-

[
   name: "Apple", quantity: 5 ,
   name: "Banana", quantity: 10 ,
];



3. Reduce

Reduce lets you add up a bunch of numbers inside an Array, in a very easy way.

The Math GIF

Let’s see it in action-

function getTotalCost() 
  return fruits.reduce((acc, fruit) => acc + fruit.price, 0);


console.log(getTotalCost());

So the first parameter is the number formed by adding the previous numbers and the second parameter is the amount that will get added to the first value. The 0 that you see at the end can be replaced with the number you want the count to start with.

This function outputs a number, in this case- 18



4. Find

If you want to find fruit based on its price or by its name, then this is the method you are looking for.

function getFruitByName(name) 
  return fruits.find((fruit) => fruit.name === name);


console.log(getFruitByName("Mango"));

This will return the Mango object when run-

 name: 'Mango', price: 3 



5. Includes

This method lets you check if there is an item in that Array. Suppose I want to check if banana is present in the fruits Array. If it is present then it will return true, otherwise false. You can’t check items inside an object in the Array, so I am going to use the Array with the names from our getFruitNames function-

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Orange"));

This will return false as Orange isn’t inside the fruits Array, but if we try Apple then it would return true

const fruitNames = getFruitNames();

console.log(fruitNames.includes("Apple"));

Hope you found this useful. If you have any questions, drop them down in the comments. Until next time Peace ✌️

Useful Links-

CodePen

Connect with me


Source link