JavaScript "cache" vs "memory"

Question

If you search for how to cache a variable in JS on Stackoverflow, you'll find answers pointing to cookies or local storage for example.

On the other hand, the word "cached" is often used as such: "cache the length of the array so we don't have to compute it every time".

Surely we are not caching the length in cookies or local storage. My question is:

Where is the location of the "cached" length? Is it in memory? If so, why are we using the word "cached"?

Answer 1

This is an extremely overloaded question, and it appears you are confusing a fair few concepts here. Hopefully this helps:

To your question "Where is the location of the "cached" length? Is it in memory?" any variable given some value is stored at a particular location in memory. In JavaScript, variables assigned to primitive types such as a number or string are copied to new memory location (pass by value), while object literals contain the value of a reference to a particular object's location in memory (pass by reference). What's the difference between passing by reference vs. passing by value?

Your question "cache the length of the array so we don't have to compute it every time" essentially boils down to optimizing a particular algorithms performance by taking advantage of variables known to be constant throughout the scope of the algorithm. i.e. the array.length look up takes slightly longer than determining the value of a single variable.

"Caching" in the context of "cookies or local storage" can be interpreted as storing or persisting some data for a period longer than the lifetime of the application instance. E.g. A user object in a database, which is fetched when a user logs in. This sort of data is generally persisted to a solid medium like a hard drive, although there are numerous exceptions and can be quite complicated.

also:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

Pass Variables by Reference in Javascript

Answer 2

Caching an array length means saving the length of an array in a simple variable that a loop doesn't have to call array length routine per every iteration.

The code below has to calculate the length of the array in every iteration. This might be little costly.

var total = 0;
for (var i = 0; i < myArray.length; i++) {
    total += myArray[i];
}

In contrary the below code is caching the array length to a simple variable (memory). So, technically, the loop has to only check the value of a memory pointer per iteration.

var total = 0;
for (var i = 0, len = myArray.length; i < len; i++) {
    total += myArray[i];
}

You can get a slight edge in performance by caching. Here is a performace comparison for above cases.

You can find the original article here.