Question

I have lot enough functions, which look like:

var functionName = function(e) {
  // 
};

where all the parameters are getting passed in in a single container e. Most times values are simple values (no functions), ex.:

{ parameter1: 1, parameter2: "Name", parameter3:{ subParameter1: "A"}}

But there’re times when I pass in functions as in: { p2:function(){...} }

I have two options when it comes to utilising parameter values:

Options 1: get parameter values from the chain, starting from e: e.parameter1, e.parameter3.subParameter1 etc.

Option 2: use cached parameter values:

var parameter1 = e.parameter1;
var subParameter1 = e.parameter3.subParameter1;

The second option improves readability but increases the number of vars and the size of the code base. On another hand it’s much drier when using long chains, i.e. e.p1.p2.p3 etc.

What reasoning should I use for choosing between those two options?

**Update 1 - the question sounds quite subjective, let me re-prase it.** 

I don’t mind using chains all the way, no local vars codebase is smaller, I can always figure out what’s what, are the any cases when caching is a must?

Answer 1

A combination, based on depth(e.p1 vs e.p1.sp2.ssp3) and frequency of use. Deeper sub-properties and high usage of any sub-property both benefit from caching.

Nested property look ups can get costly, and caching the value after executing the look up once is valuable if you’re going to use it a lot. This is only more efficient if you’re accessing a particular property on the chain more than once, and the more you access it, the more you benefit from caching.

If you only have one level deep(e.p1, e.p2, e.p3) and you’re only looking up each property value once, don’t bother.

If you’re accessing e.p1.sp2.ssp3 all throughout your function, cache it for sure.