Why do I keep getting an array inside an array when using push()?

Question

I am trying to understand MDN's documentation on .push() and .apply() because I'm having an issue where I am ending up with an array inside an array in a project. I have set up some experimental code to illustrate my problem.

Can anyone explain why the array contents inside foo() print within another array? I am not understanding why it isn't printing one array for both console.log()instances.

var animals = [];
var chickens = 'chickens';
var cows = 'cows';

animals.push(cows);
animals.push(chickens);

console.log(animals); // > Array ["cows", "chickens"]

function foo(...animals) {
  console.log(animals); // > Array [["cows", "chickens"]] <-- why is this one inside another array?
};

I thought using .apply() would solve the problem but it I couldn't get it to work. For example...

animals.push.apply(animals, cows);
animals.push.apply(animals, chickens);

// Error: second argument to Function.prototype.apply must be an array

Thats what ... does.. in the same way as just using arguments its going to be an array, so you passed in one argument it will be in animals[0] which is the value you passed in, pass in 2 your see 2 elements. — Lawrence Cherone
– Lawrence Cherone, Commented Apr 20, 2019 at 2:23
This is what ... spread/rest operator does. Check details stackoverflow.com/questions/31048953/… — Vikas
– Vikas, Commented Apr 20, 2019 at 2:34

Jack Bashford · Accepted Answer · 2019-04-20 02:31:00Z

4

Because ... (rest/spread syntax) makes a new array out of the passed arguments - so making an array out of ["chickens", "cows"] will result in [["chickens", "cows"]]. Solve this by removing the ... in foo.

var animals = [];
var chickens = 'chickens';
var cows = 'cows';

animals.push(cows);
animals.push(chickens);

console.log(animals); 

function foo(animals) {
  console.log(animals); 
}; 

foo(animals);

.as-console-wrapper { max-height: 100% !important; top: auto; }

answered Apr 20, 2019 at 2:31

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Derek Over a year ago

Also, naming the function parameter the same as the global variable can cause confusion.

Jack Bashford Over a year ago

Yes @Derek, however it will always work because JavaScript looks for variables with the same name in the current scope first before moving outwards one layer - so local variables in a function would take precedence over global variables of the same name.

Ajay Gupta Over a year ago

Yes, simply called as "Variable Shadowing". But in any case, @Derek is right, naming the parameter the same as a variable will surely lead to confusion.

Ele · Accepted Answer · 2019-04-20 02:50:38Z

3

Read about this -> Rest parameters

// "Rest parameters" receives the arguments which is 
// a like array object, and uses its indexes for creating an array.
function fn(...params) {
  console.log(params);
} 

fn("Ele", "From", "Stack"); // Multiple params will be spread as indexes of the array.
fn(["Ele", "From", "Stack"]); // In this case, one param (an array) will be used as the only index in the array.
fn(); // In this case, an empty array will be generated.

.as-console-wrapper { max-height: 100% !important; top: 0; }

On the other hand, the function apply, the second param should be an array which depicts the arguments

Array.push.apply(animals, [cows, chickens]);

edited Apr 20, 2019 at 2:50

answered Apr 20, 2019 at 2:44

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

Why do I keep getting an array inside an array when using push()?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related