Should I declare a variable or access object method?

Question

Which is the better practice and why?

Declare a variable:

exampleFunction(requestData: Object) {
  const username = requestData.username;

  doSomething(username);
}

Or access the object property directly?

exampleFunction(requestData: Object) {
  doSomething(requestData.username);
}

What if the code I use is over 50 lines long and the variable is used multiple times. Should I use the variable 'username' multiple times or use 'requestData.username' multiple times?

Answer 1

V8 Javascript Engine performs some optimization pre-processing the code and checking if some variable can be deleted or if there's some regular pattern in the code, in order to reduce the execution payload.

For this reason, there are no memory issues in using a form or another, at least using V8 engine (for example, Chrome or NodeJS).

Even if this optimization isn't performed, it's just a pointer or a primitive variable, so it won't cost more than few bytes.

It's different if we talk about the cost of transmitting code. We know that JavaScript isn't a compiled language and it needs to reach the client's computer to be executed, so every space, indentation, semicolon, will cost in order of time used to transfer.

To reduce this cost, you can uglify and minify your code, but usually this type of optimization isn't performed.

Finally, it's impossible to think a scenario where it can make a difference, so I advise you to use the form that you think it's more readable and no matter of other parameters.

Answer 2

By refactoring of Martin Fowler is a technique (Replace Temp with Query).

after that you will go to second variant

cloneFullProject(requestData: Object) {
  doSomething(requestData.username);
}

But it is smell too (Middle Man).

As a conclusion in this example, it is better to remove this method altogether :)

However, there are cases when is preferable first example. For instance: you have several methods that take requestData.username parameters.

exampleFunction(requestData: Object) {
  const username = requestData.username;

  doSomething1(username);
  doSomething2(username);
  ...
}

And in this case temporary variable is justified

Answer 3

First option pros:

1. Readable code
2. You can debug and validate value before passing to another method

First option cons:

1. It will create unnecessary variables and consume more memory

Answer 4

First of all you are referencing an object, not cloning it. The right way of cloning is throug Object.assign() or lodash (or similar) _.cloneDeep(), or spread operator or whatever.

Please refer to typescript - cloning object for more info about cloning.

Coming to the question, when you have a single variable to work both has the same readability in a such short method.

Just because the method is so short I would prefer the latter one, as reading a single line of code explain what property of the object I'm passing to my method instead of reverse-reading the code.

For my own taste and general opinion destructuring is the cleanest way another programmer would expect from your code:

const { username, var1, var2 }  = requestData;

Answer 5

Primarily, it is an opinion based question. So, the answer given below is my point of view.

• In the first case, you need an extra variable which is not actually required as you don't process it further in the same block. So, I recommend the second one with direct property access in your scenario & is more readable too.
• If you have a scenario where your actual code is over 60 lines long (or so) and the variable is used multiple times in different places, you can use the first case with an extra variable, so that you'll find it easy to process it with less/ safe typing.