JavaScript Functions - Understanding Scope & the Return Statement

JavaScript

In the previous article, we’ve made an introduction to JavaScript functions, including what a function is, what it does, how to define and call a function. If you’re new to JavaScript, I recommend to read it first and then come back here. 

In this post, we will focus on 2 additional concepts, which are really important for understanding functions: scope and the return statement.


What is Scope?

As you know in programming, we declare variables. Some variables can be accessed & used anywhere in our program, whereas others are only locally / partially accessible.

So what determines the accessibility of a variable is called scope in programming.

Scope determines the accessibility of variables.

There are a couple of scope types in programming but here you need to know 2 of them: Global and Local Scope.

Global Scope

A variable that has declared outside a function or a code block, is global. A global variable can be accessed from anywhere and also can be used directly inside functions.

let text = 'My first function';  // GLOBAL Variable

function print() {
  console.log(text);
}

print();

Here, “text”is a global variable and thus it is also accessible from inside the print ( ) function. So when we call the function, it should execute without any problems:

Local Scope

On the other hand, when we declare a variable inside a function, it will be locally accessible (only within the function) and cannot be accessed from outside. 

So a variable that declared inside a function will have a local (function) scope:

function print() {
  let text = 'My first function';  // LOCAL Variable
}

console.log(text);  // will throw an error

This time, if we try to access the local variable from outside, we will get an error:

“text” is defined locally and won’t be recognised outside

However, if we access the local variable inside its own function, we won’t have any problems:

function print() {
  let text = 'My first function';  // LOCAL Variable
  console.log(text);
}

print ();

Defining and using local & global variables in the right places will prevent errors and that’s why it is important to know the difference.


The Return Statement

Another important feature of functions is that they can return a value. For example, we can make a calculation inside the function and then it can return the result of the calculation:

function addition() {
  return 2+2;
}

console.log(addition());  // will show the returned value

or we can assign our function to a variable and the variable will get the returned value:

let result = function addition() {
  return 2+2;
}

console.log(result());  // will show the returned value

Moreover, using the return statement ends the function. This means any code after the return statement is invalid:

function addition() {
return 2+2;
console.log("you can't see me");
}
The function will run but ends execution right after the return keyword 

Therefore, we should place the return statement always at the end of the function.

The return statement ends function execution and specifies a value to be returned to the function caller. — MDN web docs


But there’s even more! We can also pass data to functions from outside and get back a value. This is known as function parameters & arguments. In the 3rd part, you will learn what they stand for and how to use them.

If you want to learn more about web development, feel free to subscribe to our newsletter.

Thank you for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *