Enea Xharja Logo

JavaScript Functions

Write Reusable JavaScript with Functions

In JavaScript, we can divide our code into reusable parts called functions.

In order to create a function, we use the reserved keyword function, followed by the name we want to give to that function, like reusableFunction() and a set of curly braces.

The code between the curly braces will be executed every time the function is called.

We can call or invoke a function by using its name followed by parentheses, like: reusableFunction();.

Example:

js
1function reusableFunction() {
2 console.log('🙋‍♂️ 🌎');
3}
4
5reusableFunction();

Passing Values to Functions with Arguments

When we create a function, we usually define it along with one or more parameters. A parameter is a variable that behaves like a placeholder for the values that we'll input to the function when it's called. Arguments, instead are the actual values that we pass as input into a function when it's called.

js
1function addNumbers(number1, number2) {
2 console.log(number1 + number2);
3}
4
5addNumbers(1, 2); // 3

Global Scope and Functions

In JavaScript, scope represents the visibility of a variable.

If a variable is defined outside of a function block, it has a Global scope, and it can be seen everywhere in our code. If we use a variable without the var keyword, it'll also be created automatically in the global scope. This can lead to some unintended consequences in our code so it's important to always declare variables with var.

In the example below, we can see that the variable myGlobalVariable is defined outside a function and therefore it belongs to the global scope. Moreover, also the anotherGlobalVariable inside the function functionOne() belongs to the global scope, since it has been declared without using the var keyword.

Considering that both the variables are defined in the global scope, they can be accessed everywhere in our code, that this is why the function functionTwo() has access to them.

js
1var myGlobalVariable = 10;
2
3function functionOne() {
4 anotherGlobalVariable = 5;
5}
6
7function functionTwo() {
8 var output = '';
9 if (typeof myGlobalVariable != 'undefined') {
10 output += 'myGlobalVariable: ' + myGlobalVariable;
11 }
12 if (typeof anotherGlobalVariable != 'undefined') {
13 output += ' anotherGlobalVariable: ' + anotherGlobalVariable;
14 }
15 console.log(output); // myGlobalVariable: 10 anotherGlobalVariable: 5
16}

Note: In JavaScript, we use the typeof operator to check the type of a variable.

Local Scope and Functions

When a variable is declared within a function, it has a local scope. Thus, it will only be visible within that particular function.

Example:

js
1function myLocalScope() {
2 var myName = 'Enea';
3 console.log(myName);
4}
5myLocalScope(); // "Enea"
6
7console.log(myName); // Uncaught ReferenceError: myName is not defined

Global vs. Local Scope in Functions

We might come across a case in which we have both a local and a global variable with the same name. In this scenario, the local variable prevails over the global variable.

Example:

js
1var clothes = 'T-Shirt';
2
3function myOutfit() {
4 var clothes = 'Sweater';
5
6 return clothes;
7}
8
9myOutfit(); // "Sweater"

Return a Value from a Function with Return

We talked before about arguments, as the values that we input in a function. In order to get an output however, we need to use the return keyword.

Example:

js
1function timesFive(num) {
2 return num * 5;
3}
4
5timesFive(1); // 5
6timesFive(2); // 10
7timesFive(3); // 15

Understanding Undefined Value returned from a Function

If we want to get an output from a function, we use the return keyword. However, a function can be created also without a return statement. In this case, when we call the function, it'll still process the inner code but it'll return undefined.

Example:

js
1var sum = 0;
2
3function addThree() {
4 sum = sum + 3;
5}
6addThree(); // undefined

Assignment with a Returned Value

When we use the assignment operator (=) in JavaScript, everything to the right of the equal sign is resolved before the value is assigned.

This means that we can use the value returned from a function and assign it to a variable.

Example:

js
1var mySumValue = 0;
2
3function sum(num1, num2) {
4 return num1 + num2;
5}
6
7mySumValue = sum(2, 3); // 5

Stand in Line (Queue)

In Computer Science, a queue represents a first-in-first-out (FIFO) data structure, where new items are added at the back of the queue and old items are removed from the front of the queue.

We can recreate this concept in JavaScript using arrays and function, like in the example below:

js
1var testArr = [1, 2, 3, 4, 5];
2
3function nextInLine(arr, item) {
4 arr.push(item);
5 return arr.shift(); // returns the removed element
6}
7
8console.log('Before: ' + testArr);
9console.log(nextInLine(testArr, 6)); // 1
10console.log('After: ' + testArr);

Here, the nextInLine function takes an array (arr) and a number (item) as arguments. We add the number to the end of the array and then, remove the first element of the array.

© 2021 Enea Xharja