Javascript

Javascript Functions Introduction

A function in Javascript is a way to do a very specific thing, which you can run many times over in your code. Functions are useful for pieces of code you reuse over and over again. Within functions, we have a different scope. As such, we will also be covering scope in this tutorial.

Functions

Consider you are writing a program, and want to keep adding 5 to a specific number over and over again, and if the number is more than 200, then multiply it by Pi. Functions allow us to do this and then run it easily again and again. If we want to write that function, we'd do something like this:

javascript Copy
// Call our function addFiveThenPi, and give it a number variable. function addFiveThenPi(number) { // Add 5 to the number let newNumber = number + 5; // If newNumber is more than 200, then multiply it by PI. if(newNumber > 200) { newNumber *= Math.PI; } // The output of this function is newNumber, so we return it. return newNumber; }

To define a function, we use the keyword function, followed by the name of our function and round brackets, i.e. function addFiveThenPi(). Within the round brackets, we can define variables which can be defined when we call our function. We then have the thing the function does within the curly brackets {}.

Usually a function has a return value, which we define by saying return newNumber. That means, after running the function, we will get an output of whatever the value of newNumber is. For our function above, we can call or run it by doing:

javascript Copy
let calculateVariable = addFiveThenPi(5);

The above will do 5, multiplied by 5 (i.e. 25) - and since this is less than 200, it won't multiply it by Pi. We can call this function multiple times, i.e:

javascript Copy
let example1 = addFiveThenPi(5); let example2 = addFiveThenPi(100); let example3 = addFiveThenPi(200);

This gives us flexibility to run a complicated set of instructions multiple times. Since we have used a return value, we can also use it in if statements, i.e.:

javascript Copy
if(addFiveThenPi(10) < 1000) { console.log('Well done!'); }

Other ways to write functions

Javascript has a few other ways to write functions. Let's take a look.

As a variable

This uses variable notation, but is otherwise similar to what we did before:

javascript Copy
const myFunction = function(number) { // Contents of the function goes here }

As an anonymous function

These functions don't have names, but can only be ran once. They look like what we've got below. In this example, we pass 5 as the value of number:

javascript Copy
(function(number) { // Content of the function goes here })(5);

Arrow notation

This is a simpler way of writing functions in Javascript.

javascript Copy
const myFunction = (number) => { // Function goes here }

Arrow functions don't have this or super, so when you call this inside of them, you will get the this of its parent.

If you only have one line in an arrow function, you don't need brackets for the variables, and the piece after the arrow is automatically returned, i.e. this will return number * 10:

javascript Copy
const myFunction = number => number * 10;

Similarly, the below is valid:

javascript Copy
const myFunction = (x, y) => x * y;

Scope

Scope is how we determine if certain variables can be referenced or not, based on where we are writing them. Functions have a closed scope, meaning things inside of them cannot be used outside of them. For example:

javascript Copy
let myFunction = function() { let number = 2; }

In the above code, number cannot be called outside of myFunction. If you do try, it will be undefined. However, in the below example, since number is declared outside of the function, it can be called both within the function, and outside of it:

javascript Copy
let number = 2; let myFunction = function() { // We could use "number" here } // And we can also use "number" here

As such, anything in the global, i.e. at the top level, outside of any functions or conditional statements, can be referred and called within functions and conditional statements. One exception to that is variables defined with let. let variables are only valid within blocks, i.e. curly bracket sections {}.

javascript Copy
let i = 1; if(1 === 1) { let i = 2; // i will be 2 console.log(i); } // i will be 1 console.log(i);

Therefore you need to be careful in checking which block you have defined your let variables in, to ensure they are still valid.

Global This

Finally, within Javascript, there is the concept of a global object. For the web browser, this is window. We can attach variables to this global scope, so we can always reference them, i.e.:

javascript Copy
window.myVariable = 5; console.log(window.myVariable);

Although window exists in front end javascript, it does not in Web Workers or in Node.JS.

  • In Node.JS, the global object can be referred to as globalThis, instead of window.
  • In Web Workers, the global object can be referred to as self, instead of window.
Last Updated Thursday, 24 June 2021

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email