Performance Between Direct Key Access And Object Destructuring

What is the most efficient code from below. Code 1 const { type, size, } = props; console.log(type); Code 2* console.log(props.type); I read in an article there will be perf

Solution 1:

If you see the transpiled code for the destructing part, you can find that a new variable is being set.

For example:

const {
  type,
  size,
} = props;

gets converted to

var type_1 = props.type; // dummy_name
var size_1 = props.size;

So, an extra variable is being set and relatively higher memory consumption. However, the difference in performance is very less.

Solution 2:

In this case definitely the second option (strictly this case).

There are cases where you'll sacrifice a little bit if efficiency for some readability and that's easy to judge for most people.

see the performance difference is very small but it's there.

URL: https://jsperf.com/destructuring-performance