Add Items Using splice()

Add Items Using splice()
0

#1

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


#2

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

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;
}


#4

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

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


#5

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


#6

Hi , According to the test the solution should be ,

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

#7

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


#8

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?


#9

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


#10

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


#11

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']);

#12

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

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


#13

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ā€™ ]


#14

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.


#15

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




#16

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.


#18

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!


#19

If you have a specific question about your own solution for this challenge, please use the Ask for Help button located on the challenge instead of tagging onto the end of another posterā€™s topic.

Thank you.


#20

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']));

#21

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

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