Why do these ways of returning arrays differ in Javascript?

Question

I have two examples:

function myFunction(arr, size) {
  // Break it up.
 var newArray = [];

  var tempArray = arr.splice(0,1);
 newArray.push(arr.splice(0,1));
 console.log(newArray);

  return arr;
}

myFunction(["a", "b", "c", "d"], 2);

And this one:

function myFunction(arr, size) {
  // Break it up.
 var newArray = [];

  var tempArray = arr.splice(0,1);
 newArray.push(tempArray);
 console.log(newArray);

  return arr;
}

myFunction(["a", "b", "c", "d"], 2);

The main difference being the line:

 newArray.push(arr.splice(0,1)); // Or newArray.push(tempArray);

Why does the first example return Array[1] and the second example return ["a"]?

I was expecting to get ["a"] regardless of which way I went, can someone possibly help me understand what is happening here?

I was just trying to take the first element of the array by splicing (which I believe returns an array of the removed elements) and push this array onto my "newArray" so I can ultimately have an array containing nested arrays holding each character. I.e. [["a"],["b"],["c"]...]

EDIT: Please ignore the "size" parameter. EDIT2: Sincere apologies. I'm not worried about the return statement. Stupid of me to forgot to mention. I'm looking at my console.log output. When I run the script and look at the console, that's when I'm getting Array[1] or ["a"].

You're splicing twice in the first example. splice is destructive. — Dave Newton
– Dave Newton, Commented Oct 16, 2016 at 1:03
Your functions aren't returning Array[1]. The first one returns ['c', 'd'] the second one returns ['b', 'c', 'd'] — JoeMoe1984
– JoeMoe1984, Commented Oct 16, 2016 at 1:11
In response to your console log scenario. Here are my console log of the first function [['b']] and for the second [['a']] — JoeMoe1984
– JoeMoe1984, Commented Oct 16, 2016 at 1:15

Gerardo Furtado · Accepted Answer · 2016-10-16 01:16:54Z

2

This is the most important information you need to have in mind: splice changes the original array (read this: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice).

So, let's see your first function. This line:

var tempArray = arr.splice(0,1);

Changes arr, as expected. But, when you do this in the next line:

newArray.push(arr.splice(0,1));

You are changing arr again!

Your second function, on the other hand, changes arr just once:

var tempArray = arr.splice(0,1);
newArray.push(tempArray);

In a nutshell: just count how many times you have a splice in your first function (2 times, changing the original array twice) and how many times you have a splice in your second function (1 time, changing the original array only once).

EDIT: regarding the console.log, newArray is an array with an array, and that's why sometimes you see Array[1]. Do this:

console.log(newArray[0]);

And now you'll see ["a"], ["b"] or whatever.

edited Oct 16, 2016 at 1:16

answered Oct 16, 2016 at 1:03

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

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

3 Comments

yoonsi Over a year ago

Okay that makes sense, but why do I get Array[1]? What does Array[1] even mean? If I'm splicing twice then why don't I get ["b"]?

Gerardo Furtado Over a year ago

You are not getting ["a"]. You are getting ["c", "d"] in the first function and ["b", "c", "d"] in the second function.

yoonsi Over a year ago

Sorry I should have been more specific. I'm not worried about the actual return for now. I'm just looking at the console.log() output. I'll update my question.

Collectives™ on Stack Overflow

Why do these ways of returning arrays differ in Javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related