JavaScript - for Loop vs. Array shift

Question

I have two functions, they do look alike but what I don't really understand is when inside the for-loop, since the input is an array, why doesn't the array need any index to call the first array?

I have an array of...

var puzzlers = [
function(a) { return 8 * a - 10; },
function(a) { return (a - 3) * (a - 3) * (a - 3); },
function(a) { return a * a + 4; },
function(a) { return a % 5; }
];

I'm trying to loop through the array with an input. The result of the first function will then be used as the next function's input then the first array will be removed.

This is what I wrote...

function applyAndEmpty(input, queue)
{
    var length = queue.length;
    for(var i = 0; i < length; i++)
    {
        input = queue[0](input);
        queue.shift();
    }
    return input;
}

The above does give me the answer but then I see that there's another way of writing it which is

var applyAndEmpty = function(input, queue)
{
    var length = queue.length;
    for(var i = 0; i < length; i++)
    {
        input = queue.shift()(input);
    }
    return input;
};

What I don't understand is the part input = queue.shift()(input).

Doesn't the queue need an index?

No. If you know what `shift()` does - And that's executing a function from your array and removing it from the Array stack. — Roko C. Buljan, Oct 12 '16 at 22:48
`shift()` removes the first element in the array and returns it. It's inefficient though for what you're doing. — 4castle, Oct 12 '16 at 22:51
@4castle omg! thx thx I totally forgot that it returns the element that it doesn't just remove it. totally got it thx thx a lot — Dora, Oct 12 '16 at 22:56

score 15 · Accepted Answer · edited Jun 20 '20 at 09:12

15

So you're basically asking what shift does and here you go:
What you can do using for(var i=0;... you can do using shift() (quite similar but not!)

Using `for` loop (and `index`)

var array = [
  function(){return "a";},
  function(){return "b";}
];
  
for(var i=0; i<array.length; i++){
    console.log( array[i]() );  
    // "a"
    // "b"
}

console.log(array.length); //2       !!Still there!!!

Using `shift()` (and `while` for example)

var array = [
  function(){return "a";},
  function(){return "b";}
];
  
while(array.length){                // while array has length
    console.log( array.shift()() );  // execute and remove from array
    // "a"
    // "b"
}

console.log(array.length); //0   !!!Empty array due to shift()!!!

So basically it removes a key from your Array and returns it.
As long as that array has keys it will loop until it's empty.

The difference between the two is drastic:
The for loop in example 1. will loop but not alter your original array.
Using shift() in example 2. you're (using and) removing your Array keys one by one.

Read more about Array manipulation:

Array.prototype.shift 1 <-- [2,3,4]
Array.prototype.unshift 5 --> [5,2,3,4]
Array.prototype.push [5,2,3,4,6] <-- 6
Array.prototype.pop [5,2,3,4] --> 6

and other Methods

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 12 '16 at 22:55

Roko C. Buljan

196,159
39
305
313

1

I like your first explanation more which directly answered how the `shift()` returns and removes the element. Thx for the eanswer~ – Dora Oct 12 '16 at 23:16
Is there a purpose for the double-parenthesis after `shift()()` or is it a typo? I don't want to blindly edit out a syntax I didn't know about. – Adamlive Dec 08 '17 at 05:59
1

@Adamlive `array.shift()` does just a shift without executing the actual key function. `array.shift()()` instead shifts **and** executes the function (which is returned thanks to `shift()` from out `array` of functions). - Logically, if your array does not contains functions the second parens couple is not needed – Roko C. Buljan Dec 08 '17 at 10:45
1

@RokoC.Buljan Ah, I did not read the question very well. I skipped to your answer because it was so clean and neatly formatted and had the info I needed. Thank you! – Adamlive Dec 08 '17 at 15:09

score 7 · Answer 2 · edited Aug 08 '22 at 08:34

You can simplify the logic using Array.reduce

Here how you can do that:

var puzzlers = [
function(a) { return 8 * a - 10; },
function(a) { return (a - 3) * (a - 3) * (a - 3); },
function(a) { return a * a + 4; },
function(a) { return a % 5; }
];

function runPuzzler(inputValue){
   return puzzlers.reduce(function(prev, curr){
       return curr(prev);
   },inputValue);
}

Output :

EachArrayValues::100
EachArrayValues::200
EachArrayValues::0
EachArrayValues::400
EachArrayValues::500
EachArrayValues::-50
Negative value found, ie -50

JavaScript - for Loop vs. Array shift

2 Answers2

Using for loop (and index)

Using shift() (and while for example)

Using `for` loop (and `index`)

Using `shift()` (and `while` for example)