JavaScript Made Easy: Part 6

During Part 5, we were discussing operators more in-depth. I hope you took some time to learn these fundamentals. They are very important. If you feel like you have not mastered every concept to this point, it is a good time to go back through and prac…


This content originally appeared on DEV Community and was authored by David Tetreau

During Part 5, we were discussing operators more in-depth. I hope you took some time to learn these fundamentals. They are very important. If you feel like you have not mastered every concept to this point, it is a good time to go back through and practice on replit.

Now, we will move on to one of the most important parts of JavaScript. We will be discussing functions! There are several versions of functions and we will be discussing functions for the next several posts. There is a lot to them, and it is important that we fully understand them.

Functions

A function is a block of code that does something. It is designed to perform a specific task. The function below has the task of taking whatever two numbers you pass into it and adding them. This is a simple example. Functions can be more complex. Example:

/*
functions consist of the function keyword, 
function name, parameters (inside
parenthesis), statements inside 
curly braces
*/

function addTwoNumbers(num1, num2) {
   return num1 + num2;
}

/*
you also have to call the function
and pass in arguments for each parameter 
listed inside the parenthesis in
the function
*/
addTwoNumbers(2, 2); // returns 4

Notice the return keyword in the function. This could have also been written as a console.log(). However, return is meant to return a value from the function. Console.log() is meant to aide the developer in debugging and determining if a function is working. It is useful for testing purposes. While we are on the topic of functions, get used to the return keyword. Also, notice that the parameters inside the parenthesis in the function are separated by commas as well as the arguments in the function call. There can be more parameters and arguments, however, the example is shown with two.

Here's another example:

/*
notice the function name and parameters 
are self-describing. This function
has the purpose of multiplying 
whatever numbers you pass into it.
*/

function multiplication(num1, num2, num3) {
   return num1 * num2 * num3;
}

multiplication(1, 2, 3); //returns 6

Functions are not just for math and they don't always take parameters. You can make them do something specific by just calling their name and putting empty parenthesis behind it with no parameters listed. Here's an example:


function showMessage() {
   return "you called showMessage()"
}

showMessage();//returns "you called showMessage();"

You can also declare variables inside or outside a function. Variables inside a function are called local variables. Variables outside of a function are called outer variables or global variables. Here's an example:

let string1 = "Functions can use ";

function concatenateStrings() {
    let string2 = "inner and outer variables."

    return string1 + string2;
}

concatenateStrings();

Take some time to practice these first few functions. You can even try to make your own! Functions will get more complex as we go, so make sure you understand them.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily


This content originally appeared on DEV Community and was authored by David Tetreau


Print Share Comment Cite Upload Translate
APA
David Tetreau | Sciencx (2022-10-06T00:22:25+00:00) » JavaScript Made Easy: Part 6. Retrieved from https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/.
MLA
" » JavaScript Made Easy: Part 6." David Tetreau | Sciencx - Sunday May 2, 2021, https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/
HARVARD
David Tetreau | Sciencx Sunday May 2, 2021 » JavaScript Made Easy: Part 6., viewed 2022-10-06T00:22:25+00:00,<https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/>
VANCOUVER
David Tetreau | Sciencx - » JavaScript Made Easy: Part 6. [Internet]. [Accessed 2022-10-06T00:22:25+00:00]. Available from: https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/
CHICAGO
" » JavaScript Made Easy: Part 6." David Tetreau | Sciencx - Accessed 2022-10-06T00:22:25+00:00. https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/
IEEE
" » JavaScript Made Easy: Part 6." David Tetreau | Sciencx [Online]. Available: https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/. [Accessed: 2022-10-06T00:22:25+00:00]
rf:citation
» JavaScript Made Easy: Part 6 | David Tetreau | Sciencx | https://www.scien.cx/2021/05/02/javascript-made-easy-part-6/ | 2022-10-06T00:22:25+00:00
https://github.com/addpipe/simple-recorderjs-demo