4

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.stack.imgur.com/prtHk.png

Whats being console.log in order:

  • randomCelebrity object
  • celebrities array before removing the used celebrity
  • the index of the current celebrity
  • washedupCelebs array to store the used celebrities
  • celebrities array after removing the current celebrity

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

Berman
  • 47
  • 4
  • 1
    why not take the index instead of the object. then you do not need to look up (this works). then why do you use more random parts while you have already a function for it? another question, for index or as key, you do not need a string. some more, do not trust the console, it may looks like time travel. – Nina Scholz Oct 13 '18 at 16:01
  • 2
    By the way, it's **Rita Ora** not **Rite Ora**. – ibrahim mahrir Oct 13 '18 at 16:10
  • 1
    ... what you see in the `> { .. }` line is how the object / array looked like *when you logged it*, what you see by clicking on the `>` is how the array looks *now* (the time travel Nina mentioned) – Jonas Wilms Oct 13 '18 at 16:11
  • @ibrahimmahrir oh jeez, I didn't even notice that. Well I would have when I received an empty image. I had to fix a few of them earlier. When you're trying to create 30 objects at 3am, you start to make mistakes lol. – Berman Oct 13 '18 at 16:13
  • @JonasWilms oh okay, I never experienced that before. Or at least noticed it until now. Is it safe to say, that everything seems in working order? – Berman Oct 13 '18 at 16:17
  • 1
    Here is a slightely [related issue](https://stackoverflow.com/q/42260524/9867451). – ibrahim mahrir Oct 13 '18 at 16:18
  • @berman yes exaclty. – Jonas Wilms Oct 13 '18 at 16:26
  • @ibrahim well that dupe is not really satisfying. Its not really a bug, and those answers are not really helpful. Maybe one of these threads can be modified to serve as a dupe target in the future – Jonas Wilms Oct 13 '18 at 16:33
  • 1
    @JonasWilms I did not suggest that it was a dupe. I know it's not a dupe. All I'm saying is that the two are related (they both boil down to the fact that the console is showing the wrong state of the object/array). – ibrahim mahrir Oct 13 '18 at 16:38
  • @Berman take a variable first to empty, and then call a function to get random object from stack then assign that to global variable. Then It'll be visible to all function you write for manipulation. – Abhishek Oct 13 '18 at 17:08
  • @ibrahim yeah but this is a common issue and therefore it might be good to start a common dupetarget. – Jonas Wilms Oct 13 '18 at 17:17

2 Answers2

3

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() );
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
0

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.

Faheem
  • 1,105
  • 11
  • 28
  • Yeah I'm starting to get that now, as Nina and Jonas mentioned, that 'time travel' thing. But I am somewhat familiar with Javascript, I'm not expert by any means, but I was never one to ever use the console to test my code. That's something I am starting to use more often. Unfortunately, this is my second semester taking it because of some teacher issues last semester. On top of C# Component Based Design. I kinda had to pick and choose my priorities. – Berman Oct 13 '18 at 16:19
  • In your example, the console will log 30 twice. – Jonas Wilms Oct 13 '18 at 16:26
  • Thanks, I've separated the console.logs to avoid confusion. The first one is without splice, the second of is with splice. – Faheem Oct 13 '18 at 16:30