Freecodecamp: "up to three parameters" about function that in this challenge takes four parameters

[matkoniecz]

Describe your problem and how to reproduce it:

splice() can take up to three parameters? Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well

is poorly describing splice function, one would expect

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

call based on that, but real one is

arr.splice(0, 2, "DarkSalmon", "BlanchedAlmond");
Add a Link to the page with the problem:

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

Tell us about your browser and operating system:

• Browser Name: not applicable
• Browser Version: not applicable
• Operating System: not applicable

If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):

hopefully not necessary

[wanzulfikri]

From what I've read in MDN's Array.prototype.splice, it takes three parameters but the last parameter is variadic.

Maybe we can reword the following if it's unclear for some:

Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well.

[matkoniecz]

https://en.wikipedia.org/wiki/Variadic_function

In mathematics and in computer programming, a variadic function is a function of indefinite arity, i.e., one which accepts a variable number of arguments

So I think that "on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well"

would be better

I am not experienced with that terminology, but it seems to me that splice(0, 2, "DarkSalmon", "BlanchedAlmond") is called with four parameters rather than three, but these four parameters are transformed into three.

[matkoniecz]

https://en.wikipedia.org/wiki/Variadic_function

In mathematics and in computer programming, a variadic function is a function of indefinite arity, i.e., one which accepts a variable number of arguments

So I think that "on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well"

would be better

I am not experienced with that terminology, but it seems to me that splice(0, 2, "DarkSalmon", "BlanchedAlmond") is called with four parameters rather than three, but these four parameters are transformed into three.

Also, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice describes its parameters as "start (...) deleteCount (...) item1, item2, ..." - rather than describing it as a function with three parameters.

[wanzulfikri]

Good points.

I am not experienced as well and my understanding is probably wrong.

Maybe someone with more experience about the terminology can chime in.

[wanzulfikri]

So I think that "on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well"

Good one! This is much clearer.

[matkoniecz]

OK, I will submit PR (feel free to remind me to do that once https://github.com/freeCodeCamp/freeCodeCamp/pulls/matkoniecz is empty)

[RandellDawson]

@wanzulfikri I think your wording is better.

@matkoniecz I checked GitHub and could not find where you have submitted a PR with this new verbiage.

If anyone else would like to create a PR using @wanzulfikri's wording above, that would be great!

Thank you.

[lasjorg]

@RandellDawson Unless I'm blind, @wanzulfikri didn't suggest a change, the quote he gave is directly from the challenge. I think he just suggested what part of the text might be changed.

---

I think part of the problem is when you don't have a clear definition and understanding of the difference between a parameter and an argument.

1 parameter !== 1 argument.

I also think using parameter and argument interchangeably, which is done all the time, can cause quite a bit of confusion to people when first learning.

The third parameter takes a list as the argument:

15.4.4.12 Array.prototype.splice

Let items be an internal List whose elements are, in left to right order, the portion of the actual argument list starting with item1. The list will be empty if no such items are present.

Maybe just add that, "a list of":

Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents a list of one or more elements, to add them as well.

You can still misunderstand it to mean an array. It really isn't until you see the prototype method signature (if the annotation used makes sense, otherwise it is just confusing), or better yet an example of the method being used that you can really understand it.

Besides a change to the challenge text. I would also suggest the example given in the challenge be updated to add 2 hex colors, this would show the third parameter used as a list. Which is the required knowledge needed to pass the challenge.

[lasjorg]

Side note:

I think the way the challenge example code was written is potentially harmful to people just starting out learning. It really muddies the water and gives a wrong impression of how objects and the splice method works.

This is the example code:

function colorChange(arr, index, newColor) {
  arr.splice(index, 1, newColor);
  return arr;
}

let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];

colorScheme = colorChange(colorScheme, 2, '#332327');

It is effectively is doing this, but in my opinion hides that fact by returning the array and by capturing the return.

function colorChange(arr, index, newColor) {
  arr.splice(index, 1, newColor);
}

let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];

colorChange(colorScheme, 2, '#332327');

[RandellDawson]

Unless I'm blind, @wanzulfikri didn't suggest a change, the quote he gave is directly from the challenge. I think he just suggested what part of the text might be changed.

I should have said @matkoniecz's suggestion is different, because the current challenge states:

in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well.

which is different from his suggestion:

on addition to removing elements, we can use additional parameters, which represents one or more elements, to add them as well

I still don't like parameters here, they are placeholders. With the splice method any arguments passed after the first two are the extra elements do be inserted by the splice. I am not sure how best to convey this without using the arguments terminology, but since the challenge is about parameters, we need to come up with something.

@lasjorg Definitely think we need to refer to a list of arguments in the example you mention should be add and make it clear that a list is not an array which the current verbiage would almost indicate (third parameter), like it is a collection instead of just a listing of extra arguments.

[lasjorg]

It is definitely not additional parameters, it is one parameter accepting multiple arguments.

Here is my first stab at it.

Remember in the last challenge we mentioned that splice() can take up to three parameters? The third parameter is special, it can both take a single value, or a comma separated list of values as the argument. Each value represents one or more elements to add to the array.

Here is how you pass a single value to the third parameter:

splice(startIndex, deleteCount, value)

Here is how you pass a list of values to the third parameter:

splice(startIndex, deleteCount, value1, value2, value3, ...)

Example usage:

const numbers = [10, 11, 12, 12, 15]
const startIndex = 3;
const amountToDelete = 1;

// Start at index 3 (startIndex)
// Remove one element (amountToDelete)
// Add the numbers 13 and 14 at startIndex position
numbers.splice(startIndex, amountToDelete, 13, 14)

console.log(numbers); // returns [ 10, 11, 12, 13, 14, 15 ] 

[RandellDawson]

@lasjorg I like all but that last "Example usage". I think It makes the challenge unnecessarily long and you already have the best example above that part:

Here is how you pass a list of values to the third parameter:
splice(startIndex, deleteCount, value1, value2, value3, ...)

However, your example would be perfect for the hint section of the linked Guide article.

[lasjorg]

@RandellDawson My example (or something simple like it) would be used instead of the example code given in the challenge.

In my opinion, when first explaining a prototype method it should be simple and bare-bones. It should not have any complexity to it that is not needed. At least not in the first example given.

I can appreciate the example tries to be less abstract and more real-world, but there is a number of problems with it.

1. The use of a second function.

It just needlessly complicates the example, I don't think it is a good way to initially show how splice works.

1. How it is using the array.

Passing the reference, then changing the original array only to return it and overwrite the original array anyway. Not good, in my opinion.

1. How it is using splice.

It makes it look like the change to the array is local to the function and needs to be returned, when in fact that is not the case.

1. There is also another more subtle problem with the colorChange function.

When passing a list to the third parameter of splice as a variable (newColor), how you need to pass the list changes. It does not work as you might expect from looking at the original code.

function colorChange(arr, index, newColor) {
  console.log(newColor);
  arr.splice(index, 1, newColor);
}

let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];

/* To pass a list to splice using the newColor parameter, it has to be passed like so */
colorChange(colorScheme, 2, "'#332327', '#fff', '#eee'");

Anyway, long story short, I suggest we simplify the code example.

---

Side note: I think a deeper problem is how we seem to want the challenges to be "all-in-one". I truly believe starting super simple first and then in the next challenge, if deem necessary, giving a more complicated and "real-world" example, would be so much better.

Sorry for the wall of text.

[d-evans]

Sincere apologies if this is out of place, but I was rooting around for some places to make first contributions and came across this. Sometimes a lack of experience is the best form of insight, yes?

So, that said, I think that lasjorg is right about this:

Side note: I think a deeper problem is how we seem to want the challenges to be "all-in-one". I truly believe starting super simple first and then in the next challenge, if deem necessary, giving a more complicated and "real-world" example, would be so much better.

Furthermore, I think the example change suggested by lasjorg is also much clearer and easier to process:

`const numbers = [10, 11, 12, 12, 15]

const startIndex = 3;
const amountToDelete = 1;

// Start at index 3 (startIndex)
// Remove one element (amountToDelete)
// Add the numbers 13 and 14 at startIndex position
numbers.splice(startIndex, amountToDelete, 13, 14)

console.log(numbers); // returns [ 10, 11, 12, 13, 14, 15 ] `

I think that this example, paired with a clearer explanation of the material, would be sufficient. The other two examples lasjorg suggested become redundant in that case. The following would be enough to both explain the functionality of splice() being demonstrated and provide enough context to allow students to grasp its scope:

Remember in the last challenge we mentioned that splice() can take up to three parameters? Well, in addition to removing elements with the first two parameters, we can use that third parameter, comprised of one or more element(s), to add them as well. This can be incredibly useful for quickly switching out an element, or a set of elements, for another.

const numbers = [10, 11, 12, 12, 15]
const startIndex = 3;
const amountToDelete = 1;

numbers.splice(startIndex, amountToDelete, 13, 14)
/* the second entry of 12 is removed, and we add 13 and 14 at the same index */

console.log(numbers); // returns [ 10, 11, 12, 13, 14, 15 ]

Here we begin with an array of numerical values. Using splice(), we have taken an index at which to begin removing elements (3), the number of elements to be removed (1), and the values (13, 14) to be inserted at that same index. Note that the values passed in the third parameter are separated by commas, but require no additional formatting.

Because the examples in the lesson description do not have proper code formatting (red text on a gray background, with no markup), I find that comments can be very distracting and confusing, since it adds the task of processing the location of the comment notation and the scope it covers (changing the size of the window or frame can change how many lines the comments reach). It's better, then, to be reserved in how much of the example box is utilized for comments, and conscious of their length. As such, I've attempted to minimize their footprint in the example, and opted for a block comment when the comment stands alone.

Hope this is helpful somehow.

[RandellDawson]

@matkoniecz Thank you for your insight. We have dropped the ball on this one, but hopefully we can implement some kind of improvement in the near future.

FYI - You will be happy to know that PR https://github.com/freeCodeCamp/freeCodeCamp/pull/36077 is an attempt to address the lack of code formatting which has plagued the challenges for quite a long time.

[gryclmn]

As a first time contributor I would be happy to assist in any way I can here.

[RandellDawson]

@gryclmn We are still discussing exactly what needs to be done. Once we finalize the verbiage, we'll post here.

[letmelearncode]

Hi All, first timer here. trying to understand what needs to be done. Request someone to let me know how to proceed further on this issue. Thanks in advance.

[krishnadevz]

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']));
use this code this going to help you ok
if code runs then thumbs up follow to

[krishnadevz]

I hope by using above code issue is solved

thank you then close this issue

[lasjorg]

@krishnakakade1999 Did you actually read the issue and what it pertains to?

@RandellDawson Do we have any final verdict on this? I like what @d-evans came up with, do you have any objections?

[krishnadevz]

@RandellDawson yes i readed but arr.splice() function can take more than two values if still this issue is not solved then ask @beaucarnes @QuincyLarson

[ojeytonwilliams]

I also really like what @d-evans came up with. It's clear, concise and focused on what you can do with splice.

[RandellDawson]

@d-evans or anybody else want to create a PR implementing what @d-evans has proposed? We welcome such a PR.

[godcrampy]

Hi, beginner here. I am willing to make the changes proposed by @d-evans .

[RandellDawson]

@godcrampy Go for it!