Add Items Using splice()

Here is My code , What is the problem?

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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

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

Hi, you are pushing an array inside and array, Thats why doesnĀ“t pass. You should push strings.

I tried this:

let newColor = ā€˜DarkSalmonā€™;
let newColor2= ā€˜BlanchedAlmondā€™;
arr.splice(0,0,newColor);
arr.splice(1,2,newColor2);
return arr;

3 Likes

Yes ! Thanks ! You Are right
But i tried this !
function htmlColorNames(arr) {
// change code below this line
let newColor1 = ā€˜DarkSalmonā€™;
let newColor2 = ā€˜BlanchedAlmondā€™;
arr.splice(0,1,newColor1);
arr.splice(1,1,newColor2);

// change code above this line
return arr;
}

2 Likes

I came up with this. Doesnā€™t seem right, but it works.

arr.splice(arr, 0+2, ā€˜DarkSalmonā€™, ā€˜BlanchedAlmondā€™);

4 Likes

This is the correct metthod according to the practise test . All code in one line , brilliant :slight_smile:

Hi , According to the test the solution should be ,

arr.splice(htmlColorNames, 0+2, "DarkSalmon", "BlanchedAlmond");

arr.splice (0,2,ā€˜DarkSalmonā€™, ā€˜BlanchedAlmondā€™)

2 Likes

Hey. Can you explain to me whatā€™s going on here please?
Why is htmlColorNames the first parameter, where the index where the removal of elements will start should be at? Itā€™s not a function call, right?

2 Likes

Hi

We have defined a function, htmlColorNames, which takes an array of HTML colors as an argument.

You are passing these colors to a function as the only parameter.

Modify the function using splice() to remove the first two elements of the array and add ā€˜DarkSalmonā€™ and ā€˜BlanchedAlmondā€™ in their respective places.

Inside that function htmlColorNames( ) you are to use splice toā€¦

  • remove the first two colors
  • insert two new colors ( ā€˜DarkSalmonā€™ and ā€˜BlanchedAlmondā€™) in their place

array.splice( indexCut, numberToCut, comma separated list of items to add at the same place as cut);

I hope this helps some

2 Likes

Thank you for your reply!
Iā€™m still confused by us calling htmlColorNames inside htmlColorNames() :sweat_smile:

Ahh. Thatā€™s the problem.

You donā€™t. Just call it once as below

function htmlColorNames(arr) {
  // change code below this line

//do something with splice here to change arr per instructions
// remove first two colors, add those other two colors in their place
//all on one line

  // change code above this line
  return arr;  // return changed array
} 
 
// do not change code below this line
htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']);

So why is this written as the correct solution? Doesnā€™t this one call htmlColorNames inside itself?

arr.splice(htmlColorNames, 0+2, "DarkSalmon", "BlanchedAlmond");

OK - came in mid-thread. (I thought this was another thread actually.)

Passing that parameter to splice does absolutely nothing except somehow resolve to 0. Iā€™m assuming that anything that the function cannot resolve to a valid number defaults to zero. So, while this works in this case it is NOT a solution.

These all work too (in this case)

arr.splice('test',2,'DarkSalmon','BlanchedAlmond')
arr.splice(false,2,'DarkSalmon','BlanchedAlmond')
arr.splice(4%2,2,'DarkSalmon','BlanchedAlmond')
arr.splice([1,2,3,45],2,'DarkSalmon','BlanchedAlmond')
arr.splice({name:"Bob"},2,'DarkSalmon','BlanchedAlmond')

ā€¦and there is provision for numbers beyond last index. They just get tacked onto the end.

arr.splice(100,2,'DarkSalmon','BlanchedAlmond');

returns [ ā€˜DarkGoldenRodā€™,
ā€˜WhiteSmokeā€™,
ā€˜LavenderBlushā€™,
ā€˜PaleTurqoiseā€™,
ā€˜FireBrickā€™,
ā€˜DarkSalmonā€™,
ā€˜BlanchedAlmondā€™ ]

2 Likes

Oh! Alright, this strangely makes sense.
Thank you so much! :+1:
It just confused me it being in the ā€˜correctā€™ solution and thought I was missing something.

1 Like

Sometimes the built in defaults and optional parameters that are both convenient and defensive can bite you in the butt. This was one of those cases.

Consider this situation below
If only checking an array of one item we would think this a solution but we really just got lucky (or unlucky).

map passes three parameters whether you use them or not. Element, index and array.

parseInt takes a second parameter (that we rarely use) the ā€˜radixā€™ that determines if weā€™re parsing to base10, base8, etc. The default is base10 so zero defaults to base10.

In this case the second optional parameter passed from map became the second optional argument of parseInt. 0 defaults to base10 so the first element passed.

const arrOfOne = ["5"];
console.log(arrOfOne.map(parseInt));  //[5]  // looks legit!

const arr = ["1","2","3"];
console.log(arr.map(parseInt)); //[ 1, NaN, NaN ]  // WHAT?

console.log(arr.map(el => parseInt(el)));  //[ 1, 2, 3 ] //explicit parameter list
console.log(arr.map(el => parseInt(el,0))); //[ 1, 2, 3 ] //explicit radix
console.log(arr.map(el => parseInt(el,10))); //[ 1, 2, 3 ] //explicit radix
console.log(arr.map(parseFloat)); //[ 1, 2, 3 ] // takes only one parameter



Hi, @bluebird008! Iā€™m having a little trouble understanding the solutionā€¦

arr.splice(htmlColorNames, 0+2, "DarkSalmon", "BlanchedAlmond");

So the 0+2 Iā€™m not sure I understand it when I use the MDN Array.prototype.splice() reference page that @alhazen1 provided . Is the + used because htmlColorNames has been called inside the ( )?

I understand that 0 is the starting point and 2 is how many weā€™re deleting/replacing.

Iā€™m making the assumption that the new colors show up at the beginning because the deletion started at 0.

1 Like

At first I tried
arr.splice(0, 1, ā€˜DarkSalmonā€™, ā€˜BlanchedAlmondā€™);

but then I changed it to
arr.splice(0, 2, ā€˜DarkSalmonā€™, ā€˜BlanchedAlmondā€™);

and it worked, but still I donā€™t understand why 0, 1 doesnā€™t remove the first two elements. In the previous lesson the solution was arr.splice (1, 2) and it actually removed 2 elements!

First Post, hope iā€™ve done this right!
Couldnā€™t see solution here so in case youā€™re stuckā€¦
This worked for me.

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

  // change code above this line
  return arr;
} 
 
// do not change code below this line
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));

You can also use spread operator, this is more convenient:

arr.splice(0,2,...['DarkSalmon', 'BlanchedAlmond'])
1 Like

I found this thread because I am on this challenge currently, and I understood from the previous challenge that the .splice() method takes up to three arguments. It was not conveyed that the third argument is a comma separated list that can be confused with more than three arguments. I was trying

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

and by finding this thread, I came across

and

These both helped me to see what I believe was lacking in understanding from the materials provided in the challenges. I was trying to pass in an array because I thought only one ā€œargumentā€ could come after the second comma of the list of arguments passed into the .splice() method

I would recommend further clarification be added in regards to the .splice() method parameters.