CODEWITHSUNDEEP
javascriptarrayssplice
Berman
Berman

Reputation: 47

Array object gets removed from list before splice() statement (JS)

DISCLAIMER: This is part of a lab assignment for school

Update: I want to keep this for reference in the future, so I will just delete the code portion. Thanks to everyone who helped! You were a big help

Assignment (Sum of it): Create a celebrity photo guessing game in HTML/JS using an array of 30 celebrity objects.

Current State: I'm at the part where the users guess gets checked. The users guess is called in function checkUserGuess(). If it matches, then I call displayOutPut("correct") or ("incorrect") as a parameter for the next function, function displayOutput(result). It takes the result parameter and checks it in the switch statement. For the sake of argument, the code I'm concerned about is in the "incorrect" case rather than "correct" since I don't know majority of these celebrities faces. I purposely get it incorrect for testing purposes.

(Celebrity randomly chosen: Charlie Chaplin)

Observation: (Per my screenshot) It seems that the celebrity array already has Charlie removed, although its reading in console that the Array has a size of 30. This is before I splice Charlie out of the array. The washedupCelebs array did receive Charlie. And, the third array shows the celebrity array with Charlie removed and the size changed to 29.

Screenshot: https://i.sstatic.net/prtHk.png

Whats being console.log in order:

Questions: Is there a reason that Charlie is removed before the splice takes place? Should I be concerned about this? I feel like its not a big deal, but I would rather get some opinions about it so I can move on. The functionality seems to work properly, but it looks like its bugged in some way.

Notes: - The off-chance a fellow classmate sees this post, I don't want them stealing my code. I will delete this post after a few hours as well for that same reason. - One more thing, I know my professor is a moderator on here so if you're seeing this, I'd be more than happy to delete it and email you personally about it. Not sure if you'd mind me doing this, seeing I'm not asking anybody to actually do the assignment for me.

Code:

REMOVED FOR POTENTIAL COPYING

Upvotes: 4

Views: 186

Answers (2)

Faheem
Faheem

Reputation: 1166

Looks like you are just starting with JS.

Well, everything looks fine to me.

The reason is that console.log is using REFERENCE to the array when logging in the console.

The celebrity is not removed from the code before splice.

When you are calling splice the celebrity is removed and all the console.log with the reference of that array shows the latest values.

console.log(celebrities.length) --> 30

.

console.log(celebrities.length) --> 29
celebrities.splice(index, 1);

I'll suggest you to run the code in the debugger to better understand what is happening.

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138257

TLDR: Don't trust the console.

If you log an object / array, it gets serialized (gets turned into a string) and that serialized version gets printed into the console:

  console.log([1, 2]); // [1, 2]

Now for longer arrays / nester objects, a full serialization might result in a very long string being printed and that would take time. Also that long string might not really be helpful (you can't see the tree in the forest). Therefore the console only serializes a small part of the array, e.g.

 Array(30) [...]

It just gives you the basic info, just the datatype (Array) the length (30) and the content gets omitted ([...]).

So actually there is no magic, before the splice the arrays length is 30 afterwards it is 29.

Now there is the helpful but confusing >. Because sometimes the abbreviated serialization is not enough for debugging, you need the full version. The thing is, by the time you click the >, the console doesn't know anymore how the object / array looked by the time you logged it.Therefore it serializes the current state of the object / array. Therefore in the unfolded part you see the spliced out version two times, as it was already spliced out by the time you clicked on >.

Now to get the serialized version at that time, either serialize it yourself:

 console.log( JSON.stringify(array) );

or clone the array to store its state:

 console.log( array.slice() );

Upvotes: 3

Related Questions