Freecodecamp: Requesting several new lessons regarding functions in the Basic JavaScript Track

[revisualize]

Description

Greetings, as many of you know, I am extremely active in the Gitter HelpJavaScript chat.

Over the year that I've been helping people learn JavaScript in the help chatroom, I've started to notice more and more and more of a trend.

People do not understand function in their complete context. And utilizing function is a HUGE part of programming, especially with JavaScript.

I know that there are these lessons:
"Write Reusable JavaScript with Functions".
"Passing Values to Functions with Arguments" - change this lesson to just use 1 parameter

However, when people get to "Convert Celsius to Fahrenheit" they don't understand that celsius is a parameter. Then things really go down hill at Word Blanks and multiplyAll. Or even Stand In Line that there are two parameters to the function. (Everyone wants to use testArr as their variable value.)

Maybe we can try to find a way to introduce functions a little easier. Or just write better text to explain the process?

I'm requesting several new lessons to the Basic JavaScript Track:

1. Create a lesson that demonstrates if your function doesn't have a return statement. It will return undefined
2. Creating another lesson that deals with creating a function from scratch with a unique parameter
   2.a. Create a function with a parameter. Calling the function by name and with an argument.
3. Creating a function with two parameters and how to use those parameters in the function.
   3.a. How to make a function call with two arguments.

Further down the track,

1. Create a function with a single parameter that also has an inner function with its own parameter.
2. Create a function with two parameters that also has an inner function that has its own parameter.
3. Using the return value of a function to supply a value to a variable. (This will help allow people to understand the return values of JavaScript Methods.)
4. Discuss the arguments object in detail and how it applies to passing in more values than the function has parameters allocated.

1. Try and find a way to show that each function (with an inner function) has its own unique arguments object reference

Here's some text and code that I paste into chat often to help explain this topic:

See: https://gist.github.com/revisualize/f5e812aa0838f24ea04220d22b79ab8d
See: https://gist.github.com/revisualize/3fb92987929aa5932c0bf33d229b28f6
See: https://gist.github.com/revisualize/ced4a3a6611c6c74bcab34a07eaa4ebf
I paste these links into the Gitter Chat ALLLLLLL the time to help people with these lessons and the issues that they are experiencing.

Parameters are like variables that represent the values that get passed into your function from the function call.

Notice how the variables level and score in the function definition addScore are called parameters.
However, when we invoke the function like in:
addScore(3, 10) or addScore(6, 20)
the values are called arguments. Here is an important lesson:
You define a function with parameters, you call a function with arguments.

Another example of this:

function hello(fName, uName) {
     return "Hello " + fName + " " + uName + ", How is your day?";
}
hello("Joseph", "@revisualize"); // "Hello Joseph @revisualize, How is your day?"
hello("Bella", "@bellaknoti"); // "Hello Bella @bellaknoti, How is your day?"
hello("Andy", "@dirn"); // "Hello Andy @dirn, How is your day?"

You can use the fName and uName parameters just like a variable inside of your function.

Yet another example:

function addThree (num) {
    var result;
    result = num + 3;
    return result;
}

So, when we make the function call of:

addThree(10);

You're calling the function addThree You're also passing a value 10 as an argument.
In the function declaration of function addThree (num) { You see that there is a parameter defined of num
When we do addThree(10) then the value of the parameter num is passed the argument value of ... 10
Then if you follow the code through.. result = num + 3; ... and we know the value of num is 10.
Therefore, if we follow through the function we end up with ... result = 10 + 3; then result = 13; then we return the result.
...
If you then make another function call...

addThree(39);

You can use the same function to follow the operation:
When we do addThree(39) then the value of the parameter num is passed the argument value of ... 39
Then if you follow the code through.. result = num + 3; ... and we know the value of num is now 39.
Therefore, if we follow through the function we end up with ... result = 39 + 3; then result = 42; then we return the result.

If you make the function call of addThree(21) the value of num inside the function is 21.
If you make the function call of addThree(1000) the value of num inside the function is 1000.
If you make the function call of addThree(123456) the value of num inside the function is 123456.

You can see how the parameter is used like a variable inside of the function.
And you can do mathematical operations to the parameter and assign the value to the variable result.

Other important things to remember:
A function can have zero parameters. You still have to use the parentheses to define it.
A function might have no return statements. In this case, we say that the function returns undefined.

[Chrono79]

At the very least, a reordering of Passing Values to Functions with Arguments before using functions is needed, if more challenges are added to make people understand how to use them, fine.
Maybe a related challenges section would be useful too, because people tends to pass the challenges and don't remember/understand why/how they worked. Seen that happen a lot with Stand in Line and Word Blanks. My two cents.

[QuincyLarson]

@revisualize Awesome - we would welcome additional coding challenges that better clarify JavaScript functions. Would you be interested in helping us design some, and coming up with explanation copy and tests?

We are in the process of QA'ing a lot of new challenges in our beta curriculum, and this would be a great time to add your new proposed challenges.

All of our JavaScript challenges are located in https://github.com/freeCodeCamp/freeCodeCamp/tree/staging/seed/challenges/02-javascript-algorithms-and-data-structures

[tommygebru]

I agree, running into the challenge Word Blanks often in the chatroom, I have to explain 2 concepts:
1) concatenation (and linked explanation)
2) parameters (and linked explanation)

Also I see that the lack of understanding is reflected in other challenges as well for example, Stand In Line, Testing Objects for Properties, Return a Value from a Function with Return, or Using Objects for Lookups.

Return a Value from a Function with Return
This challenge introduces and explains the concept of arguments, however it does NOT explain a parameter in the same respect, I believe in the map it doesnt explain a parameter even farther down in more difficult challenges with objects.

Using Objects for Lookups
This reminds me that the challenge (Using Objects for Lookups) should possibly be modified...

The instructions includes the word "table" to describe an "object", I find that confusing as I have never heard it described in this manner, before or after this challenge.

Thanks for sharing this @revisualize !! 🎉 🎉

Update: Will try to make an issue for the "object" > "table"

[QuincyLarson]

@tommygebru Awesome - thanks for this feedback. Would you be interested in creating challenges that explained these concepts? If possible, it's always better to introduce a concept as part of a dedicated coding challenge, rather than just linking to some random explanation on the MDN or a similar page.

[revisualize]

@QuincyLarson @tommygebru Creating new lessons for freeCodeCamp is something that currently isn't in my wheelhouse. I help out in chat when I can. Which is usually on my lunch breaks at work, on the ride home from work via the bus or if I have 45min to an hour to help out while I'm working on my personal projects. I think it would be great to learn the skill set needed to create expansive educational material. However, I have other focus' in my life at this time. I'm willing to assist anyone that wants to take the lead. I posted this only because of the massive influx of questions and confusions in the HelpJavaScript chat where people clearly don't understand the usage of functions and function returns.
Also, I'm seeing more and more people not understanding that JavaScript methods are functions. Ergo, they have a return value.

[QuincyLarson]

@revisualize OK - no worries. I have a few people who may be moving forward with these new challenges. Thanks for everything you're doing to help campers in chat. I know how busy you are, and I really appreciate everything you're doing for our community!

[DusanSacha]

@QuincyLarson I would love to be part of the people who are 'moving forward' with these new javascript challenges. Do you have any workflow in how to design the new challenges? Or just through PRs?

[QuincyLarson]

@DusanSacha Yes - here's a guide: https://github.com/freeCodeCamp/CurriculumExpansion/blob/master/challenge-style-guide.md

You can create a pull request to freeCodeCamp's Staging branch with your new challenges. I'm happy to answer any further questions you may have. @HKuz is the real expert here, as she's created tons of challenges and audited the tests for many of them.

[DusanSacha]

Sorry about delay on this issue, I agreed on creating new challenges, however I was kind of busy and today I saw that some challenges covering this issue were already created in #15617.

@Manish-Giri
Did you create Return a Value from a Function with Return and Assignment with a Returned Value ?

Maybe I could create one challenge that _demonstrates if your function doesn't have a return statement. It will return undefined_, since it was also requested in this issue.

[QuincyLarson]

@DusanSacha We would still welcome your proposed function-focused challenges. We're making some minor changes to the hardest challenges in the JavaScript section, but this doesn't remove the need for your new challenges. Will you have time to design and implement them?

[DusanSacha]

@QuincyLarson
Just to make it clear. I created a list of proposed challenges from the first post in this issue. I striked through the proposals which, I think, are already solved in other challenges. I will work on the missing challenges.

1. Create a lesson that demonstrates if your function doesn't have a return statement. It will return undefined
2. Creating another lesson that deals with creating a function from scratch with a unique parameter; Create a function with a parameter. Calling the function by name and with an argument.
3. Creating a function with two parameters and how to use those parameters in the function; How to make a function call with two arguments.
4. Create a function with a single parameter that also has an inner function with its own parameter.
5. Create a function with two parameters that also has an inner function that has its own parameter.
6. Using the return value of a function to supply a value to a variable. (This will help allow people to understand the return values of JavaScript Methods.)
7. Discuss the arguments object in detail and how it applies to passing in more values than the function has parameters allocated.
8. Try and find a way to show that each function (with an inner function) has its own unique arguments object reference

[QuincyLarson]

@DusanSacha Awesome - these are great things to cover. I agree with your approach here.

As for 7 and 8, we will need to figure out a way to convey these things interactively.

Can you start working on designing these challenges? https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/CONTRIBUTING.md

[DusanSacha]

@QuincyLarson after communication with @HKuz we decided to re-purpose this old thread to review new challenges.

I have just posted a new draft "Understanding Undefined Value returned from a Function" for review in there.
I am going to work on the others mentioned challenges as well.

[DusanSacha]

@QuincyLarson
In this thread we were discussed 5 new JS challenges. Only one of them has been done so far.
I was planing to design the other ones after #15751 is finished. Should I re-open this issue for the purpose?

[QuincyLarson]

@DusanSacha Yes. I'll re-open it. We're eager to accept your pull request once you've addressed the feedback and gotten CI passing. Since you're already up to speed on these, I think you are the best person to create the other 4 challenges as well. Would you be interested in doing that? You could add them as a subsequent PR, or add them to your current PR and we can squash the subsequent commits. Up to you 😄

[DusanSacha]

@QuincyLarson Yes. I would love to desing the new challenges! I am going to create a new PR for it. Thank you!

[Masd925]

I have also spent a lot of time on the help forums explaining people about functions, function calls, parameters, arguments, and return values. I have also given considerable amount of thought on how these things can be explained. What I have found to be the problem is that parameters and arguments cannot be fully explained without mentioning the concept of an execution context. Without it, every explanation is incomplete and somewhat confusing. That is because there are two things here. The code, where the function declaration is, and the execution context where the function code is executed and parameters become variables that hold the passed arguments.

[QuincyLarson]

@Masd925 can you think of an interactive way (through coding in the browser) to introduce concepts of execution context? We don't want a lecture video or a wall of text in the middle of these challenges, so we would need for such concepts to blend in with the other challenges.

[QuincyLarson]

@DusanSacha Thanks! Have you had time to work on any of these yet?

[Masd925]

I think it would be enough to have a simple function declaration and maybe two function calls after that. Then a couple of sentences of text that explains parameters, arguments and the execution context. That might fit into some existing challenge perhaps.

[QuincyLarson]

@MAF27 Great! That sounds reasonable. It's fine for it to span multiple challenges if you think it's necessary to drive home the point. Do you want to start creating the challenges?

[Masd925]

I think there is already a challenge that explains parameters and arguments: Passing Values to Functions with Arguments. The description could be rewritten to include the concept of an execution context and hopefully make it a bit clearer what parameters and arguments are.

[Chrono79]

Yes, there is. But it's after (at least in the current FCC map) the challenges that use the concept of parameters and arguments, that's why I asked for a change of order so it is properly introduced.

[DusanSacha]

@QuincyLarson no, I haven't worked on these challenges yet. I am going to work on drafts during this weekend.

[QuincyLarson]

@DusanSacha OK - thanks for the update :)

[QuincyLarson]

@revisualize We just launched the new curriculum and learning platform: https://learn.freecodecamp.org

Would you still be interested in helping design some new challenges that reinforce understanding of functions?

[moT01]

Closing as stale.

[RandellDawson]

@moT01 I actually have been working on this issue, so I would like it to be reopened.

[moT01]

Let me know if you need any help or extra opinions.

[RandellDawson]

@moT01 On second thought, let's close this because we have improved many challenges, but they are not yet in production. Once the changes have been deployed to production, we can check the analytics on many of the early challenges involving use of functions, to see if campers are still taking as long as they use to.