Learning JavaScript Functions

Welcome to Learning JavaScript Functions!

In this lesson, we will be covering the basics of functions.

 

By the end of this lesson, you should be able to:

 

What you'll need for this course:

 

Links to programs used:

Google Chrome (Browser) - https://www.google.com/chrome/browser/desktop/
Brackets (Editor) - http://brackets.io/

Part 1: Functions Background

Introduction to Functions

Introduction Video

(Right click and open in new tab)

https://youtu.be/NQNK6Yq7rgM

Functions Breakdown

This is a breakdown of the elements shown inside the example in the video. We are focusing mainly on the function element, highlighted in purple.

Click on the the floating information hot spots to get more information on the breakdown.

Next is a short quiz following the material you've just covered.

Question 1. Fill in the missing word in this statement!

In order for the program to know you are creating a function, it first needs to be defined using a 

Question 2. Fill in the missing word in this statement!

Consider this line of code:

function createThis (  )
{
     do something...
}

What is the name given for anything placed in the parentheses after the function name?  

Question 3. Multiple Choice

  • The code is the parameters of the function.
  • The code is the name of the function.
  • This is the code that will be executed when the function is called.

Consider this code:

function myFunction()

{
      alert("Say something")
}

What is the purpose of the code inside the curly braces?

For this question, just select the correct answer!

Part 2: Functions in depth.

Introduction

In this lesson, we will be mainly exploring functions more in depth,discussing the use of parameters.

Functions with parameters.

How parameters are passed in to a Function.

Please watch this video first:

https://youtu.be/DXEuo3TVMzU


As explained in the video, parameters can be named when a function is declared, passing them to be used in the executable code.

In the image of a block of code below, you can use the information hot spots to get a detailed explanation of how the parameters are passed along and assigned with values.

But why do parameters need to be placed in the functions parentheses?

You may have asked this question, why not just have them in the code for execution and then assign their value as before?

  • It is important to have the parameters inside the parentheses because without doing so, they don't exist otherwise.
  •  Just as declaring a variable, if you try and use a variable without giving it an assignment for existence, it can't be used elsewhere because the code doesn't know what its purpose is.

Why do we need the () operator?

To begin, please watch this video:

https://youtu.be/g2GnPthG7IA


  • The () operator works to invoke the functions result.
  • While the name of the function e.g. myCalculation refers to the function object.
  • But what happens without the () operator?
  • Without the () operator, the function result will not be returned and instead return the entire function definition.

Use the hot spots on the image below for details on what happens when the function definition is returned.


Using functions as variable values

Please watch this video first:

https://youtu.be/w0N80Yk-sNc


You can also use functions as variables values, placing a value to the parameter then using that parameter as part of the code.

Using the code image below as an example, you can see how the value of result is set later on when the function is invoked, then that value is used in the calculation performed in the functions code to be executed.

As before, use the image hot spots to find out more details about what is going on in the code.

Question 1. Fill in the missing word in this statement!

Consider this block of code:


function myCalculation(, )
{
    return intX * intY;
}
    
    alert(myCalculation(8,8));


There is something missing for this function perform properly, please enter the missing code in to the blanks.

 

Question 2. Multiple Choice.

  • The parameters haven't been set correctly.
  • There isn't a () operator in the alert statement to call the function return.
  • myIntx hasn't been set as a parameter.
  • myIntY has no value.

Consider this code below:

 

function simpleCalc(myIntX, myIntY)
{
    return myIntX * myIntX;
}
    
    alert(simpleCalc);
    

 

My result just printed out the definition of the function. Why is that?

Question 3. Fill in the missing word in this statement!

Consider this code:

 

function myCalculation(myNumber)
{
    return 5+5 +  (myNumber + 10);
}
    
    alert("The result to my calculation is " + 
);

 

//The result
"The result to my calculation is 30"

 

What would you need to add in to this line of code to allow the result to be correct?  

 

Part 3: Debugging

Syntax Errors.

As you may already know, a syntax error can be caused by either misspelling or incorrectly typing out the format of code that the program expects to read.

There are many possibilities of error that can be caused in alignment with syntax but we'll cover some of the more common issues in this section.


Have a look at the error caused below by a simple typing error.

Another common issue is that of the use of the semicolon.

Remember that the semicolon is used to signify the end of a line of code and are not used to end a function declaration.

Next, we have an error that goes with the understanding of how the return statement works.

Especially when attempting to get a value back to the invoking of a function, the return statement ends the function execution and returns the value back to that invocation.

Here you can see the result of what happens when return is not added when attempting to grab a value for adding to a function being called.

Overview and Final Assessment

Assessment.

Congratulations on completing the lesson.

 One final task to complete is an assessment of your understanding of the material. 

This assessment is meant to test your overall understanding of the entirety of the lesson so a good grasp of what has been taught so far is important before beginning.

Question 1: Multiple Choice.

  • Result has not been declared as a variable.
  • A semi-colon has been placed after the function declaration.
  • There is a semi-colon placed after the function declaration and there is no return statement to return value.
  • Incorrect spelling for the function name.
  • myAddition has been called earlier on in the code before it has been created.

Consider this code:

 

function myAddition(result);
    {
       result + 10;
    }

    alert("The result to my calculation is "+ myAddition(20));

 

When running this code, both an unexpected token error and the result will be undefined.

Why is that?

Question 2: Fill in the blanks.

Consider this code:

 

function myCalculation(,)
    {
        return X - Y;
    }
alert (myCalculation(20,13))

 

What is missing from this code to perform properly?

 

Question 3: Fill in the blanks.

Consider this code:

 

 myCalculation(, parameterY)
    {
        parameterX * parameterY;
    }
alert (myCalculation)

 

Elements are missing from this code block. Fill in the gaps to get this to work properly.

 

Question 4. Multiple Choice.

  • Misspelling in the function creation.
  • There is no return statement in the code execution.
  • The alert has not been used to call the function.
  • There is a misplaced semi-colon or too many semi-colon's.
  • Not enough parameter's declared in the function.
  • The curly braces have not been closed.

When running your code, your are met with this error:

Uncaught SyntaxError: (Line of code) Unexpected token   ';'

What is this error in reference to?

Question 5. Fill in the blanks.

Consider this function:

function myAlert()
    {
        alert ("Hello!");
    }

 

Although this function would work, what is missing for it to be used.

In order for it to be of any use it needs to be

Question 6. Fill in the blanks.

What is the name for the brackets used after declaring the function and giving it a name?

Answer:

What do you place in side these brackets?

Answer:

 

Question 7. Multiple Choice.

  • Allows the return statement to return a value.
  • A function will give you an error if not used.
  • A semi-colon will not work without them.
  • The function will return with double the value passed in to it.
  • The function definition will only be printed.
  • Value cannot be assigned to the parameters without them.

What is the purpose of the () operator when calling a function?

There is more than one potential answer.

Question 8. Fill in the blanks.

Here we have code that for many reasons won't work. Examine the code and then use the code for fixing blanks to make it a working version.

 

Broken code:

f1unctions (resultsX, intY);
    {
                 resultsX * resultsY;
    }

    alert(myAddition);

 

Code for fixing:

 (resultsX, );
    {
      resultsX * resultsY;
    }

alert(myAddition);

  

*Do not assign a value to any parameters.*

Final Words.

Congratulations on completing the course!