Basic Data Structures: Add Items Using splice()

Basic Data Structures: Add Items Using splice()
0

#1

Tell us what’s happening:
What is wrong in this code?

Your code so far


function htmlColorNames(arr) {
  // change code below this line
  let newColor = ['DarkSalmon', 'BlanchedAlmond'];
  arr.splice(0, 2, newColor);
  // change code above this line
  return arr;
} 
 
// do not change code below this line
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice


#2
  let newColor = ['DarkSalmon', 'BlanchedAlmond'];
  arr.splice(0, 2, newColor);

The above is your code.

Before your code runs, the arr looks like this:
[‘DarkGoldenRod’, ‘WhiteSmoke’, ‘LavenderBlush’, ‘PaleTurqoise’, ‘FireBrick’]

after your code, it will look like this:
[[‘DarkSalmon’, ‘BlanchedAlmond’], ‘LavenderBlush’, ‘PaleTurqoise’, ‘FireBrick’]

does it seem correct?


#3

This Stack Overflow post helped me with adding multiple array values.

The tl;dr version of that post is…

The first parameter to splice is the index to start with, the second is the number of elements to remove, the remainder are elements to insert. So if you insert the same number as were removed, you end up replacing them.

So a solution to this challenge is…

function htmlColorNames(arr) {
  // change code below this line
  arr.splice(0, 2, 'DarkSalmon', 'BlanchedAlmond');
  // change code above this line
  return arr;
} 

#4

If I’m not mistaken, we have exactly the same code:

function htmlColorNames(arr) {
// change code below this line
arr.splice(0, 2, ‘Darksalmon’, ‘BlanchedAlmond’);
// change code above this line
return arr;
}

Now it just so happens that mine doesn’t give me a check for the criteria:
``htmlColorNames should return [“DarkSalmon”, “BlanchedAlmond”, “LavenderBlush”, “PaleTurqoise”, “FireBrick”]

Is this really right, if so, is there a bug, or else; how to solve challenge?


#6

Here you should have used spread operator that is …newColor and it would work.


#7

Close, you’ve got 'Darksalmon'instead of 'DarkSalmon'.


#8

oh, my, lord.


Thank you!


#9

No problem. I’ve lost count of the number of times I’ve been pulling my hair out over something not working only to eventually realise it’s a typo.

Happy coding. :grinning:


#10

I have a question: why it is arr.splice(0,2) and not (0,1)?

Following the rules of arrays it supposed to be like this if you have to return.

I know the way you wrote is the right one but it is not entry in my head because the normal array rule of 0,1,2…


#11

The first argument passed to the splice method defines the index at which to start changing the array. In this case, the 0 means start changing the array at index 0 (the first element of the array). The second argument passed to the splice method defines how many items to remove. In this case, the 2 means two elements will be removed.

Read more about the splice method from MDN documentation.