javascript - Performance between direct key access and object destructuring - Stack Overflow

admin管理员组

文章数量:1398802

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 performance impact when you read key value pairs deep below in an object. I know accessing one level is not a huge performance impact. But I want to know from above code examples (Code 1 and Code 2) which will be faster and efficient.

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 performance impact when you read key value pairs deep below in an object. I know accessing one level is not a huge performance impact. But I want to know from above code examples (Code 1 and Code 2) which will be faster and efficient.

• javascript
• reactjs

Share Improve this question Follow asked Dec 27, 2017 at 9:13 RyxleRyxle 89088 silver badges2121 bronze badges 6

• jsperf. – Sirko Commented Dec 27, 2017 at 9:15
• Your sample code 2 will be faster, as you are not creating any extra memory to store values. – Chandre Gowda Commented Dec 27, 2017 at 9:16
• Why not just ....run a benchmark yourself? This might be of use: npmjs./package/benchmark – Kamil Solecki Commented Dec 27, 2017 at 9:17
• @Ryxle check your javascript code in jsperf. – zabusa Commented Dec 27, 2017 at 9:22
• @zabusa I created a jsperf test. Please check jsperf./performance-of-object-destructuring/1 – Ryxle Commented Dec 27, 2017 at 9:37

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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.

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./destructuring-performance

In Browser and on my local node application. destructing wins! the difference was bigger in the browser, But if the transpilers are messing with the js code , then there are chances that destructuring might have a negative impact on the "build" time.

const user = {
  name: 'John',
  age: 30,
  email: '[email protected]',
};

console.time('Direct Key Access');
for (let i = 0; i < 1000000; i++) {
  const name = user.name;
  const age = user.age;
  const email = user.email;
  
  // Perform an operation with the values
  const result = `${name} is ${age} years old and their email is ${email}`;
}
console.timeEnd('Direct Key Access');

console.time('Destructuring');
for (let i = 0; i < 1000000; i++) {
  const { name, age, email } = user;
  
  // Perform an operation with the values
  const result = `${name} is ${age} years old and their email is ${email}`;
}
console.timeEnd('Destructuring');

本文标签： javascriptPerformance between direct key access and object destructuringStack Overflow