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
– Roko C. Buljan, Commented Oct 12, 2016 at 22:48
shift() removes the first element in the array and returns it. It's inefficient though for what you're doing. — castletheperson
– castletheperson, Commented Oct 12, 2016 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
– Dora, Commented Oct 12, 2016 at 22:56

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

4 Comments

Dora Over a year ago

I like your first explanation more which directly answered how the shift() returns and removes the element. Thx for the eanswer~

Adamlive Over a year ago

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.

Roko C. Buljan Over a year ago

@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

Adamlive Over a year ago

@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!

Wajeeh Hasan · Accepted Answer · 2022-08-08 08:34:30Z

7

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

edited Aug 8, 2022 at 8:34

Wajeeh Hasan

1971 silver badge10 bronze badges

answered Oct 12, 2016 at 22:48

Michele Ricciardi

2,11716 silver badges17 bronze badges

Collectives™ on Stack Overflow

JavaScript - for Loop vs. Array shift

2 Answers 2

Using `for` loop (and `index`)

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

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using for loop (and index)

Using shift() (and while for example)

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using `for` loop (and `index`)

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