Functions Copy

Introduction to Functions

Up until now you have being writing code to solve various problems. However the code you were writing wasn’t useful. In other words you couldn’t take it and use it over and over again without having to rewrite it. So what would be nice is to write a block of code and use it wherever we want! Here is where the functions come handy. Functions are a very important concept and they are used in many programming languages.

Learning Objectives

  • Functions:
    • What is a function?
    • Functions declaration & function expression syntax .
    • Function parameters & arguments.
    • How to invoke(call) a function, pass parameters and return values?
    • return statement.
    • What is the difference between return & console.log?
    • JavaScript Scope (Block scope,Function scope & Global scope).
    • What an Arrow function is?

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. Keep in mind that JavaScript has changed a bit over the years and thus 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. Don’t worry about it since you will learn about it in the next lesson. )

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

Arrow functions are useful but not crucial. So don’t worry if you don’t understand them. However you are going to encounter them as you move forward and thus it’s better that you have at least some idea of what you’re looking at.

  1. Read this article about return values.

  2. Now we will see what parameters and arguments are in the context of the following example function:

function favoriteColor(color)) {
   console.log(color + " is my favorite color!")
}
favoriteColor('Purple')

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 favoriteColor(color). The parameter, color, is found inside the parentheses. We could just as easily replace color with animal, car, or blah.

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

The last line, favoriteColor('Purple'), is where we are calling our favoriteColor function and passing the value Purple inside that function. Here, Purple is our argument. We are telling the favoriteColor function, "Please send ‘Purple’ to the favoriteColor function and use ‘Purple’ wherever the ‘color’ placeholder is." As you can see the use of a parameter provide us with the flexibility to declare any color to be our favorite.

Feel free to experiment with the code on your own and replace Purple with your favorite color. Furthermore you can change the argument color in the function declaration and in the function body and see what happens.

  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 is tricky to both beginner and intermediate coders. For this reason it is a good idea 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:

Back to Lesson