JavaScript 101-#5 – Functions Pt1

In the last post we finished data types by exploring objects. Today, we will take a look at functions and how to create them. Data types are great to play with, but only until you get to know functions. So, let’s dive in!

Functions are blocks of code. You can imagine them like variables on steroids. Functions can store all data types we previously talked about, variables and also another functions. Creating functions can be done in two ways. First is to use “var” keyword followed with name of the function – like when you are creating a variable – then followed with equal sign, keyword “function”, parentheses and curly brackets. Block of code is then written inside the curly brackets.

JavaScript:

var function1 = function() { … };
var function2 = function() { … };

Functions can also take an argument. Arguments are input data our functions work with. Number of arguments depends only on your fantasy. You can create function that takes ten arguments or zero. Arguments are written between parentheses and divided by comma.

JavaScript:

var function1 = function(arg1) { … };
var function2 = function(arg1, arg2, arg3) { … };

Names of arguments are random and you can use any words you want, however it is good practice to use words describing what the argument should be.

JavaScript:

var function1 = function(name, age) { … }; // function that take name and age as argument

Second way to create function is to omit the “var” keyword and equal sign and begin with “function” keyword instead.

JavaScript:

function example1() { … };
function example2(year, time) {};

When you want to use function, write the name of the function followed with parentheses. If your function takes some arguments, write them inside those parentheses. Strings are written inside quotes. Quick note … When you are creating function, you are using word “arguments” and when you later want to use them, you are using word “parameters”. So, “arguments” for situation when you create function and “parameters” for calling (using) these functions. There is no big difference between those two words they are the same, however you will often see other programmers using first or second of these words, so you better be prepared. Another word to your geek dictionary is “calling”. When you use some function or method (function created inside object.), you are “calling” them.

JavaScript:

function example1() { … }; // creating function example1
function example2(name, age) { … }; // creating function example 2 that takes two arguments
example1(); // calling function example1
example2(“Thomas”, 28); // calling function example2 with two arguments – string “Thomas” and integer 28

This is important! When calling a function, always write parameters in correct order. The function does only what you programmed it to do. For example, if first argument is a string and second is a number and you call the function with parameters in switched order – number as first and string as second – function will use them in that order instead of the right one.

JavaScript:

function introduction(name, age) {
 alert(“Hi I'm “ + name + “ and I'm “ + age + “ years old.”); // concatenating of data types and variables will be discussed in next part
};
// Correct order
introduction(“Alex”, 23); // Result - “Hi I'm Alex and I'm 23 years old.”
// Wrong order
introduction(23, “Alex”); // Result - “Hi I'm 23 and I'm Alex years old.”

See, the function doesn’t care about the order, it just do what you told it to do. I know, stupid example, but still better than “Hello word” or “foo bar”.

As you saw, you can use any methods (like alert() or console.log() etc.) inside functions as well. Creating variables inside functions (or methods) is exactly same as outside them. However, in case of variables and functions inside another functions, there is something called scope we have to talk about. I will introduce it briefly to you and continue more in-depth in next part.

In basic term scope is set of variables you can access and use. When you declare some variable (outside the function) it is called “global variable” and you can access it in any any time and in any function.

JavaScript:

var animal = ”elephant”; // global variable

If you declare variable inside a function, it is called “local variable”. This variable can be used only inside that particular function. It doesn’t exist outside it.

JavaScript:

// this will work
function bike() {
 var brand = “Yamaha”;
 alert(brand);
};
bike(); // Result - “Yamaha”
// this will NOT work
function city() {
 var name = “Tokyo”; // local variable accessible only inside function
};
alert(name); // Result – error

Summary

Let’s cut it here so you can organize what we talked about today. In next part we will talk more about scope and also use data types with functions to create some complex snippets of code. Thank you for your time and attention. If you have troubles with understanding any part, please write a comment or contact me directly on links bellow. You feedback is very important for me and it will help to increase the quality of post. AD

You also add few new words into your dictionary as well – integer (whole number), calling (using function), argument (when declaring function) and parameters (when calling function), global and local variable.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal