How do I use shift inside a loop?

Question

When I run this code:

var a = ['a','b','c'];
var b = ['a','b','c'];

for(i = 0; i <= a.length-1; i++){
    b.shift();
    console.log(b);
}

I expected this output:

['b','c']
['c']
[]

But I get this output:

[]
[]
[]

Why?

And how do I get my expected output?

I do get your desired output.. I guess the console.log isn't a console.log in your current code. — Johan, Dec 26 '11 at 12:13
Your code is working correctly for me. What you've specified as expected output is exactly what i get when i run your code from Firebug console. In Chrome console, i'm getting the same output as what you're getting. So looks like an issue in Chrome? — techfoobar, Dec 26 '11 at 12:14
Hmm.. Interesting.. Looks like Chrome's console.log caches the output and flushes it out together after the loop! If you do a shift() and log (not in the loop), you'll get the correct output. But if you put it in a loop, it prints out the final value of b in all three cases! — techfoobar, Dec 26 '11 at 12:16
It's a webkit "issue" with console.log, there are other references to it here on so. Another "fix" is to use tostring() in your log — J. Holmes, Dec 26 '11 at 12:18

Guffa · Accepted Answer · 2011-12-26T12:34:53.967

8

This is a known problem in Chrome. It's because the console.log doesn't make a copy of what you want to display, it just stores the reference.

As the log isn't updated immediately, but once your function ends and the browser updates the user interface, the log will show the current state of the b variable, not the state when each console.log call was made.

To get the desired ouput you would have to make a flash copy of the state of the variable for each console.log call:

console.log(b.toString());

edited Dec 26 '11 at 12:34

answered Dec 26 '11 at 12:14

Guffa

687,336
108
737
1,005

Maybe worth noting that Firebug's console behaves differently. I guess it creates a copy of whatever is passed and then prints it. – techfoobar Dec 26 '11 at 12:19
To retain the array-semblance inside of the console, you can create another array copy by calling `array.slice()` – Zirak Dec 26 '11 at 12:45
Note: The same happens in Opera – Bergi Dec 26 '11 at 13:07
Note: The same happens in Firefox developer tools. – henrijs Nov 27 '14 at 10:32

score 1 · Answer 2 · answered Dec 26 '11 at 12:15

1

This is a side-effect of the console.log statements not being printed as the statements are executed. Note that if you replace your console.log with alert, the code works as expected.

answered Dec 26 '11 at 12:15

Jon Newmuis

25,722
2
45
57

score 0 · Answer 3 · edited May 23 '17 at 10:08

0

Or change the log paramater to be an expression as per my answer to Javascript Funky array mishap

console.log ('' + b);

edited May 23 '17 at 10:08

Community

1
1

answered Dec 26 '11 at 12:42

HBP

15,685
6
28
34

How do I use shift inside a loop?

3 Answers3