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"?

The word "cached" means that it is stored in memory (normally RAM but can also be HDD) for later use, it is normally something that needs to be calculated once and then accessed many times, so the wording works for both cases, even if the syntax, usage and implementation are different. — Timo Huovinen, May 04 '16 at 05:50

score 8 · Accepted Answer · edited May 05 '16 at 05:01

8

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

edited May 05 '16 at 05:01

Charlie

22,886
11
59
90

answered May 04 '16 at 05:51

andrsnn

1,591
5
25
43

yes, you are right, I find the different contexts which the word "cached" used confusing, but I'm glad I asked because the answers have already been very helpful, thanks! – PDN May 04 '16 at 05:53
Absolutely! Your question certainly has value. Let me know if I can elaborate on anything. I will add additional links. – andrsnn May 04 '16 at 05:54
1

@andrsnn Your *elaboration* code snippet adds too much insignificant weight to your answer. Every variable allocates a **memory** space, RAM, buffer... If you allocate to **memory** the result of an expensive computation, or an expensive function Object reference you actually leverage other processes (CPU, GPU...) used by the **Browser**. **LocalStorage** or **Cookies** or any other technology for data storage are again handled by the Browser. The space is usually a sandboxed environment on the **disk**. For that purpose the term **"stor(ag)e"**. is always used. Anything else are misspells. – Roko C. Buljan May 04 '16 at 06:20
@andrsnn than there's another use of the term *"cache"*, and that's when the Browser caches things. Images, pages, scripts etc etc. In this case disk space is again used. Just adding some thoughts. – Roko C. Buljan May 04 '16 at 06:21
@RokoC.Buljan Hmm that seems fair, I will remove it but keep the link as this is an extremely broad question and it seems the poster could use some clarification. – andrsnn May 04 '16 at 06:25

Charlie · Answer 2 · 2016-05-05T06:17:14.230

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.

ES2015 also allows you to use `let` for block scoping instead of using `var` to declare those variables which won't be used after the loop is done. — mugabits, May 04 '16 at 22:22

JavaScript "cache" vs "memory"

2 Answers2