Javascript - Loop through array backwards with forEach

let arr = [1, 2, 3];

arr.slice().reverse().forEach(x => console.log(x))

will print:

3
2
1

arr will still be [1, 2, 3], the .slice() creates a shallow copy.

Just use a for loop. Start at the end of the array and go backwards from there.

const array = ['blastoff', 1, 2, 3];

for (let index = array.length - 1; index >= 0; index--) {
  const element = array[index];
  console.log(element);
}

Since ECMAScript 2023 there are some array methods that iterate backwards, like for instance findLast. As long as in the callback you don't return a truthy value, it will visit all elements from end to start:

const array = ['alpha', 'beta', 'gamma'];

array.findLast(elem => console.log(elem));

As commented below, be aware that find* methods also visit empty slots, while forEach doesn't. This could be important when you are dealing with a sparse array. To exclude visiting empty slots, add a check that the iterated index exists:

array.findLast((elem, i) => {
    if (i in array) console.log(elem);
});

Even before ECMAScript 2023 there was a similar array method that has a reverse counter part, reduce comes together with reduceRight:

const array = ['alpha', 'beta', 'gamma'];

array.reduceRight((_, elem) => console.log(elem), null);

When using it for the requested purpose, make sure to provide a second argument. It can be null or anything else. Also note that the callback function has as first argument the accumulator, which you don't need for this purpose.

If including a library is an option:

Lodash: forEachRight.

You've asked (my emphasis):

Is there a way to loop backwards through an array using forEach (not any other kind of loop, I know how to do with with a for / standard ways) and without actually reversing the array itself?

No, there isn't. forEach only processes forward through the array. So you'd have to do something else, which you've said in your question was out of scope.

You could use a for loop, of course, or write your own forEachRight, but again your question was very clear about requiring forEach, specifically. So the answer to the question is: No.

I would just use a for loop for this, but you've said you want to use forEach. The only way to use forEach without making a copy of the array that I can think of is to use a Proxy. I don't recommend it, not least because Proxy objects are notoriously slow, but it looks like this:

const rexAllDigits = /^\d+$/;
function createReversedGetProxy(a) {
    const pa = new Proxy(a, {
        get(target, key, receiver) {
            if (typeof key !== "string" || !rexAllDigits.test(key)) {
                return Reflect.get(target, key, receiver);
            }
            const index = target.length - key - 1;
            return Reflect.get(target, index, receiver);
        },
    });
    return pa;
}

Then use createReversedGetProxy(a).forEach(/*...*/);

Live Example:

const rexAllDigits = /^\d+$/;

function createReversedGetProxy(a) {
    const pa = new Proxy(a, {
        get(target, key, receiver) {
            if (typeof key !== "string" || !rexAllDigits.test(key)) {
                return Reflect.get(target, key, receiver);
            }
            const index = target.length - key - 1;
            return Reflect.get(target, index, receiver);
        },
    });
    return pa;
}

const a = ["one", "two", "three"];
createReversedGetProxy(a).forEach((v) => console.log(v));
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

Bending the question rules a bit, you could write your own forEachRight. In general it's best to avoid modifying built-in prototypes, so this would be best as a freestanding function you pass the array into:

function forEachRight(array, callback) {
    for (let index = array.length - 1; index >= 0; --index) {
        if (index in array) {
            callback(array[index], index, array);
        }
    }
}

function forEachRight(array, callback) {
    for (let index = array.length - 1; index >= 0; --index) {
        if (index in array) {
            callback(array[index], index, array);
        }
    }
}
const a = ["one", "two", "three"];
forEachRight(a, (v) => console.log(v));
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

That said, you could put it on Array.prototype, it's just not generally good practice; if you do, be sure to make it non-enumerable by using Object.defineProperty or similar, not simple assignment:

Object.defineProperty(Array.prototype, "forEachRight", {
    value(callback) {
        for (let index = this.length - 1; index >= 0; --index) {
            if (index in this) {
                callback(this[index], index, this);
            }
        }
    },
    enumerable: false,   // false is the default, but including here for emphasis
    configurable: true,
    writable: true,
});

Object.defineProperty(Array.prototype, "forEachRight", {
    value(callback) {
        for (let index = this.length - 1; index >= 0; --index) {
            if (index in this) {
                callback(this[index], index, this);
            }
        }
    },
    enumerable: false,
    configurable: true,
    writable: true,
});
const a = ["one", "two", "three"];
a.forEachRight((v) => console.log(v));
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

Alternatively, I can think of two options which just use precursors to using forEach (so, they don't use a for loop or other kind of loop). I don't know if those would be out of scope or not, so here they are:

1. Copy the array and reverse the copy, then use forEach on it

2. Use Object.keys to get the indexes, reverse that, then use forEach on it (which will loop through the indexes, not the values, but then we can look them up)

Here's #1:

slice copies the array (shallow copy, so not likely to be expensive), then we reverse it, then forEach:

const a = ["one", "two", "three"];
a.slice().reverse().forEach(function(entry) {
    console.log(entry);
});
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

Here's #2:

We use Object.keys to get the array indices (using filter if you store non-element properties in your arrays), reverse that, and then loop through the result:

const a = ["one", "two", "three"];
Object.keys(a).reverse().forEach(function(index) {
    console.log(a[index]);
});
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

Both of those create temporary arrays, so the Proxy approach may be better from a memory perspective, but slower at runtime. None of these is better than a simple for, though.

Just for fun, here's a benchmark:

const rexAllDigits = /^\d+$/;

const tests = Array.from({ length: 4 }, (_, index) => {
    const a = Array.from({ length: rnd(index % 2 === 0 ? 4000 : 400) }, () =>
        rnd(100000)
    );
    const sum = a.reduce((a, v) => a + v, 0);
    return {
        a,
        expected: sum,
    };
});

function createReversedProxy(a) {
    const pa = new Proxy(a, {
        get(target, key, receiver) {
            if (typeof key !== "string" || !rexAllDigits.test(key)) {
                return Reflect.get(target, key, receiver);
            }
            const index = target.length - key - 1;
            return Reflect.get(target, index, receiver);
        },
    });
    return pa;
}

function forEachRight(array, callback) {
    for (let index = array.length - 1; index >= 0; --index) {
        if (index in array) {
            callback(array[index], index, array);
        }
    }
}

function rnd(max) {
    return Math.floor(Math.random() * max);
}

function withProxy(a, expected) {
    let sum = 0;
    createReversedProxy(a).forEach((v) => (sum += v));
    if (sum !== expected) {
        throw new Error(`Error in test, got ${sum}, expected ${expected}`);
    }
}

function withSlice(a, expected) {
    let sum = 0;
    a.slice()
        .reverse()
        .forEach((v) => (sum += v));
    if (sum !== expected) {
        throw new Error(`Error in test, got ${sum}, expected ${expected}`);
    }
}

function withForEachRight(a, expected) {
    let sum = 0;
    forEachRight(a, (v) => (sum += v));
    if (sum !== expected) {
        throw new Error(`Error in test, got ${sum}, expected ${expected}`);
    }
}

// This goes forward, not backward; it's just here to give us something to compare to
function withForEach(a, expected) {
    let sum = 0;
    a.forEach((v) => (sum += v));
    if (sum !== expected) {
        throw new Error(`Error in test, got ${sum}, expected ${expected}`);
    }
}

// Out of scope for the question, but again, something to compare to
function withFor(a, expected) {
    let sum = 0;
    for (let index = a.length - 1; index >= 0; --index) {
        sum += a[index];
    }
    if (sum !== expected) {
        throw new Error(`Error in test, got ${sum}, expected ${expected}`);
    }
}

const btnRun = document.getElementById("btnRun");
btnRun.addEventListener("click", () => {
    btnRun.disabled = true;

    setTimeout(() => {
        console.log("Running");
        
        const suite = new Benchmark.Suite();

        suite
            .add("forEach backward with proxy", () => {
                for (const { a, expected } of tests) {
                    withProxy(a, expected);
                }
            })
            .add("forEach backward with slice", () => {
                for (const { a, expected } of tests) {
                    withSlice(a, expected);
                }
            })
            .add("forEachRight", () => {
                for (const { a, expected } of tests) {
                    withForEachRight(a, expected);
                }
            })
            .add("forEach forward", () => {
                for (const { a, expected } of tests) {
                    withForEach(a, expected);
                }
            })
            .add("Backward with for", () => {
                for (const { a, expected } of tests) {
                    withFor(a, expected);
                }
            })
            .on("error", () => {
                console.log("*** Error ***");
            })
            .on("cycle", (...args) => {
                console.log("...");
            })
            .on("complete", function () {
                console.log("Results (higher cycles/second = faster):");
                const results = Array.from(this);
                let longest = 0;
                for (const { name } of results) {
                    longest = Math.max(longest, name.length);
                }
                for (const { name, hz } of results) {
                    console.log(`${name.padEnd(longest)}: ${hz} cycles/second`);
                }
                console.log("Fastest is: " + this.filter("fastest").map("name"));
                btnRun.disabled = false;
            })
            // run async
            .run({ async: true });
    }, 50);
});

.as-console-wrapper {
    max-height: calc(100% - 2rem) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
<input type="button" id="btnRun" value="Run Test">

Side note: Here's what I mean about using filter if you have non-element properties on your array:

const a = ["one", "two", "three"];
a.nonElementProperty = "foo";
Object.keys(a).filter(function(name) {
    return String(+name) === name;
}).reverse().forEach(function(index) {
    console.log(a[index]);
});
console.log("Proof that a is not, itself, reversed: " +
            JSON.stringify(a));

As yet the browsers do not seem to have optimised the Array.forEach function. With not much effort you can write a simple polyfill that out performs the Array.forEach method by at least 10 to 1.

So you can create your own Array.revEach and have it outperform the native Array.forEach, thought I hope that the browsers address the very slow performance of Array.forEach soon and make the need to polyfill actual existing methods not necessary.

For Array.revEach out performs Array.forEach running 17 times faster on "Chrome 46.0.2490.22 beta-m"

if (Array.prototype.revEach === undefined) { 
    Object.defineProperty(Array.prototype, 'revEach', { 
        writable : false,
        enumerable : false,
        configurable : false,
        value : function (func) {
            var i;
            var len = this.length-1;
            for (i = len; i >= 0; i--) {
                func(this[i], i, this);
            }
        }
    });
}

Just to add the actual official polyfill modified to reverse. Comments show my changes.

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
// Modified by Blindman67 to revEach
if (!Array.prototype.revEach) {   // name changed
  Array.prototype.revEach = function(callback, thisArg) { // name changed
    var T;  // k defined where len was
    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }
    var O = Object(this);
    var k = (O.length >>> 0)-1;  // set k (counter) ToUint32
                                 // len var removed
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }
    if (arguments.length > 1) {
      T = thisArg;
    }
    while (k >= 0) {  // reverse condition
      var kValue;
      if (k in O) {
        kValue = O[k];
        callback.call(T, kValue, k, O);
      }
      k--;  // dec counter
    }
  };
}

array.forEach has 3 parameters. You can use these to effectively forEach backward.

var arr = [1, 2, 3];

    arr.forEach(function(x, index, the_array) {
        let x_prime = the_array[the_array.length-1-index]
        console.log(x_prime);
    })

will print

3
2
1

This can be accomplished relatively concisely using the reverse method, the forEach method, and (if using ES6) the arrow function

var someArray = ["a","b","c","d"];
someArray.reverse().forEach(arrayItem =>
    console.log(arrayItem)
)

If you are not using ES6, the solution is about the same, just without the arrow function.

var someArray = ["a","b","c","d"];
someArray.reverse().forEach(function(arrayItem) {
    console.log(arrayItem)
})

Both will print to the console:

d
c    
b
a

There are many ways to achive this task.

1. Firsly we can use Array.reduceRight() method

[1,2,3,4,5].reduceRight((total,item) => {
 console.log(item);
 // Do somthing here and remember the return statement
 return item;
},0)


Output: 5,4,3,2,1

the reduceRight method traverse an array in right to left manner and we can get advantage of it.

,but always keep in mind that you have to return something to keep going this loop until the length is reached.

2. As a second method we can use Array.reverse()

this method first format the array in reversed manner then returns it, and now you can iterate in reverse manner.

[1,2,3].reverse().map(n => console.log(n));
Output: 3,2,1

But the disadvantage of this method is that if you have thousands of entries in array then it may affect your performance.

3. Third and the most easiest way it to use classical for loop

let array = [1,2,3,4,5];
let start = array.length;
for(;start >= 0;start--){
  // travese in right to left manner
  console.log(array[start])
}

What about:

const array = [1, 2, 3];
const revArray = [...array].reverse() // won't affect the original array
revArray.forEach(x => console.log(x)) // 3, 2, 1

One liner:

[...array].reverse().forEach(x => console.log(x)) // 3, 2, 1

With index var:

[...array].reverse().forEach((val, index) => {
  const revIndex = array.length - i - 1
  console.log(revIndex) // 0, 1, 2
  console.log(revIndex) // 2, 1, 0
  console.log(val) // 3, 2, 1
})

My solution is to use a "readable" for loop:

for (let index = array.length; index > 0; ) {
    index--;
    // do stuff
}

Personal preference. For me, it adds a certain symmetry to forward loops. Lots of coders go with for (let index = array.length - 1; index >= 0; index--) {...}

Here's a version that uses a generator function:

function* reverseIterate(array) 
{
  for (let i = array.length - 1; i >= 0; i--)
    yield array[i];
}

let foods = ["apple", "banana", "cherry", "date", "eggplant", "figs"];

for (let item of reverseIterate(foods))
  console.log(item);

Since July 2023 you can use array.toReversed().forEach().
This will not affect the original array since .toReversed() returns a new array.

const list = ['Hello', 'World'];

list.toReversed().forEach(item => console.log(item))

Read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

If anyone is interested, here are time tests for the viable answers (might take a second to run):

• findLast, reduceRight - @trincot
• reverseForLoop -> @Alex K
• sliceReverse -> @naartjie
• objectKeys -> @T.J. Crowder
• indexingForEach -> @grabbag

var results = [];
var loops = [];
const iterations = 5;

function testLoop(name, loop, iteration) {
    if(!results[iteration])
      results[iteration] = []
    var array = []
    for(let i = 0; i < 10000; i++) {
        array.push(i);
    }
    var start = window.performance.now();
    loop(array);
    var end = window.performance.now();
    results[iteration].push(name + " took " + (end - start) + "ms");
}

loops.push({name: 'findLast', func: array => array.findLast(elem => console.log(elem))});

loops.push({name: 'reverseForLoop', func: array => {
    for(let i = array.length - 1; i >= 0; i--) {
        console.log(array[i]);
    }
}});

loops.push({name: 'sliceReverse', func: array => {
    array.slice().reverse().forEach(x => console.log(x));
}});

loops.push({name: 'reduceRight', func: array => {
    array.reduceRight((_, elem) => console.log(elem), null);
}});

loops.push({name: 'objectKeys', func: array => {
    Object.keys(array).reverse().forEach(function(index) {
        console.log(array[index]);
    });
}});

loops.push({name: 'indexingForEach', func: array => {
    array.forEach(function(x, index, the_array) {
        let x_prime = the_array[the_array.length-1-index]
        console.log(x_prime);
    })
}});

for(let i = 0; i < iterations; i++) {
    for(let j = 0; j < loops.length; j++) {
        testLoop(loops[j].name, loops[j].func, i);
    }
}

console.clear();
console.log("\n")

for(let i = 0; i < results.length; i++) {
  console.log("iteration "+ (i+1))
   for(let j = 0; j < results[i].length; j++) {
       console.log(results[i][j]);
   }
   console.log("\n")
}