Fundamentals: Part 3 (v1)

Fundamentals: Part 3 (v1)

Functions

Things are about to get really exciting. So far you have been writing an impressive amount of code to solve various problems, but that code has not been as useful as it could be. Imagine taking one of your scripts and bundling it into a little package that you could use over and over again without having to rewrite or change the code. That’s the power of functions, and they’re used constantly in programming languages, and of course, in JavaScript.

Study

We’ll begin by this short introduction to JavaScript function by Mosh Hamedani and then move on to the reading material that goes in-depth. Try to pause the video, and code along with Mosh, as he describes these basic function concepts.

Watch this recording of our live session with Paulin de Naupois which introduces JavaScript functions.

Duration: 100 minutes

Do you have any questions regarding the concepts and code presented in the videos? Leave your questions and comments on the comments section at the bottom of the page.

Now, we’ll get more serious with a couple of intensive articles.

  1. Start by reading this article Function Basics from Javascript.info. We’ve mentioned this before, but JavaScript has changed a bit over the years and functions have recently received some innovation. This article covers one of the more useful new abilities: ‘default parameters’. (NOTE: The last "task" at the end of this lesson uses loops, which you will learn about in the next lesson. Don’t worry about that one.)

  2. Finally, read about Function Expressions in JavaScript to give you a little more context, and read this article about Arrow Functions for an introduction to a relatively new feature in modern JavaScript called the arrow function.

Arrow functions are useful but not crucial, so don’t worry about them too much just yet. We include them here because you are likely to encounter them as you move forward, and it’s better that you have at least some idea of what you’re looking at whenever they crop up.

  1. Read this article about return values.

  2. Let’s discuss parameters and arguments in the context of the following example function:

function favoriteAnimal(animal) {
   console.log(animal + " is my favorite animal!")
}
favoriteAnimal('Goat')

In JavaScript, parameters are the items listed between the parentheses in the function declaration. Function arguments are the actual values we decide to pass to the function. In the example above, the function definition is written on the first line: function favoriteAnimal(animal). The parameter, animal, is found inside the parentheses. We could just as easily replace animal with pet, x, or blah. But in this case, naming the parameter animal gives someone reading our code a bit of context so that they don’t have to guess what animal may eventually contain.

By putting animal inside the parentheses of the favoriteAnimal() function, we are telling JavaScript that we will send some value to our favoriteAnimal function. This means that animal is just a placeholder for some future value. But what value are we sending?

The last line, favoriteAnimal('Goat'), is where we are calling our favoriteAnimal function and passing the value Goat inside that function. Here, Goat is our argument. We are telling the favoriteAnimal function, "Please send ‘Goat’ to the favoriteAnimal function and use ‘Goat’ wherever the ‘animal’ placeholder is."

Because of the flexibility that using a parameter provides, we can declare any animal to be our favorite. Feel free to experiment with the code on your own and replace Goat with your favorite animal. Notice how we can change the argument to anything we like? Try changing animal in the function declaration and in the function body, too. What happens when you do?

  1. Take this interactive tutorial and learn more about the difference between declaring variables with the var keyword and using the let keyword (Preferred way). For now, you can omit the last section (Declaring with const) as it describes concepts that you are not yet familiar with. If you feel adventurous, you try it!

Function vs Block Scopes

Don’t forget to practice before leaving this interactive tutorial.

  1. Finally, take a look at this lengthy MDN article. Pay special attention to the sections on ‘Function Scope’. Scope is a topic that commonly trips up both beginner and intermediate coders, so it pays to spend some time with it up front. See if there are sections in the article that supplement the previous resources.

You can open this Codepen demo and hover over the functions and variables in the code to see them colored depending on the scope they belong to.

Code Smell (Alert)

The wikipedia article on Code Smells, describes them as follows: In computer programming, a code smell is any characteristic in the source code of a program that possibly indicates a deeper problem.

At this point, and since we are introduced to functions, you need to watch the following video and keep the suggestions and rules mentioned in it in your course notebook (try using pen and paper on some of the notes. They will greatly improve your learning efficiency. Keeping a digital version of the notes, also comes in handy.). From now on, and whenever you are creating functions, keep these best practices in mind and try to avoid code smells.

Smelly code and long functions Duration: 3 minutes

After watching the video, continue by reading the following article by Martin Fowler*

*You definitely want to bookmark Martin Fowler’s site and follow him online.

The arguments object

Watch this video from an SHA Live Session (25.11.2020) which explains the arguments object which is accessible inside functions declared with the function keyword.

What you’ll learn:

  • What is the arguments object?
  • What is its type?
  • Can it be used as an argument?
  • What are its use cases?
  • Is it helpful if it is converted into an Array?
  • What type of data types does the arguments object accept? (In short: any value)

Duration: 25 minutes

How do you convert the arguments object into an Array?

function a(){
	const arrArg = Array.from(arguments);
	console.log( arrArg.reverse() );
}
a(1,2,3);

References:

Assignment

Follow the instructions found in the Exercises Repository and sumbit your assignment.

UPDATED: 13.03.2021

  • [13.03.2021] Added Colored Scope Codepen demo
  • Adding video about the arguments object