Which approach to delete the first element of an array in js provides better performance?
Assume we have this array:
let fruits = ['Apple', 'Orange', 'Banana', 'Lemon'];
1. shift approach
let a = fruits.shift();
2. splice approach
let [b] = fruits.splice(0, 1);
3. slice approach
let c;
[c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)]
4. Destructuring approach
let d;
[d, ...fruits] = fruits;
Please mention the reasons why one one these approaches is faster than another.
I did some tests in jsbench.me & perf.link but I ran the exact same tests multiple times and everytime I got 180 degrees opposite results.
I know this things are different from one environment and engine to another so I want to know which one is better in Chrome V8 engine.
In my experience, the .shift() method is the easiest to use. But if you want to know the exact code speed, I tested every method with console.time() and console.timeEnd().
Mostly, the .shift() method is the fastest. You may ask why? Well, it doesn't redeclare any variables as the others are redefined. You only have on varibale, which is automatically returned when calling the shift() method. Especially the last two examples are the slowest. They are redefining two variables, one is assigned two times (c, d). One time, just with let and the other time when declaring.
Here's the code I used for testing, feel free to edit it.
function speedTest(times) {
for (var i = 0; i < times; i++) {
console.log(i + 1);
let fruits = ['Apple', 'Orange', 'Banana', 'Lemon'];
console.time('shift');
let a = fruits.shift();
console.timeEnd('shift');
resetFruits();
console.time('splice');
let [b] = fruits.splice(0, 1);
console.timeEnd('splice');
resetFruits();
console.time('slice');
let c;
[c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)];
console.timeEnd('slice');
resetFruits();
console.time('destructuring');
let d;
[d, ...fruits] = fruits;
console.timeEnd('destructuring');
resetFruits();
function resetFruits() {
fruits = ['Apple', 'Orange', 'Banana', 'Lemon'];
}
}
}
speedTest(4);I recommend posting the snippet into your own code, as stack overflow isn't showing correct results in this snippet.
Also, not only the code execution speed is fast, but typing array.slice() is faster then for example typing out the whole destructuring code.
I hope I was able to help you out :)