Functions in JavaScript Explained

Richard Rembert - Sep 15 '22 - - Dev Community

Functions can be thought of as one of the core building blocks of our JavaScript programs. A function is simply a set of statements designed to perform a particular task — which is executed whenever it is invoked (or “called”).

In this article we’re going to take a look at defining functions, function expressions, calling functions, scope, nesting, closures, the arguments object, function parameters & arrow functions!

Defining Functions

A function definition (otherwise known as a function declaration, or function statement) will always begin with the function keyword. What follows is the name of our function, any parameters enclosed in parenthesis, and then our JavaScript statements (enclosed in { }) which are executed when our function is called.

Let’s see an example:

function multiply(a, b) {
  return a * b;
}
Enter fullscreen mode Exit fullscreen mode

Our function multiply takes two parameters (a and b). Included in-between the curly braces is a statement that returns the result of the first parameter a multiplied by the second parameter b.

Function Expressions

There is another way to define a function, known as the function expression. These types of functions can actually be anonymous. They don’t need to be given a name.

For example, our previous multiply function could’ve also been defined like so:

let multiply = function(a, b) { return a * b; };
let x = multiply(2,2); // x returns 4
Enter fullscreen mode Exit fullscreen mode

A typical use case for function expressions might be when passing a function as an argument to another function.

We can also define a function based on a condition. For example, the following function defines addItem only if num equals 1:

let addItem;
if (num === 1) {
  addItem = function(shoppingList) {
    shoppingList.item = 'Apples';
  }
}
Enter fullscreen mode Exit fullscreen mode

Calling Functions

When we define a function all we’ve done is given it a name & specified what to do when the function executes. So to actually run the function, we’ll need to call it within our program!

To call our earlier function multiply, we could invoke it as follows:

multiply(2,2);
Enter fullscreen mode Exit fullscreen mode

Here we’re calling our function which is set to receive two arguments with the arguments of 2 and 2. The function executes and runs its statements which returns the result of 4(2 multiplied by 2).

Functions need to be in scope when they are called, but the function declaration can be hoisted (appear below the call in the code), like so:

console.log(multiply(2,2));
/* ... */
function multiply(a,b) { return a * b; }
Enter fullscreen mode Exit fullscreen mode

The scope of a function is the function in which it is declared, or the entire program if it is declared at the global level.

Note: This only works with function declarations, not function expressions!

Function Scope

When variables are defined inside a function they cannot be accessed anywhere outside of that function. As that would be outside the scope. However, a function is able to access all variables and functions defined inside the scope in which it is defined. So a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access.

Let’s see an example:

// These variables are defined globally (global scope)
let a = 10,
    b = 3,
    name = 'Bruce';
// This function is defined globally 
function multiply() {
  return a * b;
}
multiply(); // returns 30
// Working with a nested function
function multiplyAssign() {
  let a = 20,
      b = 6;

  function add() {
    return name + ‘ received’ + (a * b);
  }

  return add();
}
multiplyAssign(); // returns "Bruce received 120"
Enter fullscreen mode Exit fullscreen mode

Nesting Functions and Closures

So you can nest a function within a function! The nested (inner) function is private to its containing (outer) function. It also forms a closure. A closure is an expression (usually a function) that can have free variables together with an environment that binds those variables (it “closes” the expression).

And as a nested function is a closure, it’s able to “inherit” the arguments and variables of its containing function.

As follows:

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41
Enter fullscreen mode Exit fullscreen mode

Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function!

Closures

As we now know, we can nest our functions and JavaScript will give the inner function full access to all the variables and functions defined inside the outer function (as well as all variables & functions that it has access to).

However, the outer function does not have access to the variables and functions defined inside the inner function! A closure is created when the inner function is somehow made available to any scope outside the outer function.

Let’s see an example:

// The outer function defines a "name" variable
let user = function(name) {   
  let getName = function() {
    return name;             
    // The inner function can access the "name" variable of the  outer function
  }
// Return the inner function, and expose it to outer scopes
return getName;            
}
makeAdmin = user('Richard Rembert');

makeAdmin(); // returns "Richard Rembert"
Enter fullscreen mode Exit fullscreen mode

The Arguments Object

The arguments of any function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:

arguments[i]
Enter fullscreen mode Exit fullscreen mode

Here i is the first number of the argument, starting at zero. So, the first argument passed to a function would be arguments[0]. The total number of arguments would be arguments.length.

Using the arguments object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function, and then access each argument using the arguments object.

For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

function myConcat(separator) {
   let result = ''; // initialize list
   let i;
   // loop through arguments
   for (i = 1; i < arguments.length; i++) {
      result += arguments[i] + separator;
   }
   return result;
}
Enter fullscreen mode Exit fullscreen mode

You can pass any number of arguments into this function, and it’ll concatenate each argument into a string “list”:

myConcat(', ', 'fred', 'wilma', 'barney', 'betty');
// returns "fred, wilma, barney, betty, "
myConcat('; ', 'marge', 'homer', 'lisa', 'bart', 'maggie');
// returns "marge; homer; lisa; bart; maggie; "
myConcat('. ', 'jerry', 'kramer', 'elaine', 'george', 'newman');
// returns "jerry. kramer. elaine. george. newman. "
Enter fullscreen mode Exit fullscreen mode

Note: The arguments variable is "array-like", but not an array. It has a numbered index and a length property. However, it does not possess all of the array-manipulation methods.

Function Parameters

There are two kinds of function parameters: default parameters and rest parameters. Let’s now take a look at each.

Default Parameters

In JavaScript, parameters of functions will default to undefined. However, in some situations, it might be useful to set a different default value. This is where default parameters are useful.

It’s actually quite simple to implement:

function multiply(a, b = 1) {
  return a * b;
}

multiply(10); // 10
Enter fullscreen mode Exit fullscreen mode

You can simply put 1 as the default value for b in the function head.

Rest Parameters

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

In this example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example uses an arrow function, which we’ll look at next!

function multiply(multiplier, ...theArgs) {
  return theArgs.map(x => multiplier * x);
}

let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

Arrow Functions

An arrow function has a much shorter syntax compared to function expressions. For example, here is a regular function:

function funcName(params) {
  return params + 10;
}

funcName(2); // 12
Enter fullscreen mode Exit fullscreen mode

And here is the same function, expressed as an arrow function:

let funcName = (params) => params + 10

funcName(2); // 12
Enter fullscreen mode Exit fullscreen mode

The same function in just one line of code!

If we have no parameters, we express our arrow function like this:

() => { statements }
Enter fullscreen mode Exit fullscreen mode

And when we have just one parameter, the opening parenthesis are optional:

parameters => { statements }
Enter fullscreen mode Exit fullscreen mode

Finally, if you’re returning an expression, you can remove the brackets:

parameters => expression

// is the same as:

function (parameters){
  return expression;
}
Enter fullscreen mode Exit fullscreen mode

Note: Unlike a regular function, an arrow function does not bind this. Instead, this is bound to keep its meaning from its original context. We’ll be taking a closer look at the “this” keyword in an upcoming article!

Predefined Functions

It’s well worth noting that JavaScript has numerous built-in functions! And they’ll likely save you a lot of time, especially for common tasks. See:
Tutorials Point.

Summary

We’ve learned about defining functions, function expressions, calling functions, scope, nesting, closures, the arguments object, function parameters & arrow functions!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Image
Pemecahan Main Judi Online Anti Pailit
Image
What NOT To Do Within The Lawyers Asbestos Industry
Image
The Secret Secrets Of Asbestos Lawsuit Settlements
Image
What is SCIM Provisioning: In-Depth Guide [2024]

webdev, cloud, tutorial, authentication
Image
Spotify Customer Care Helpline Number -(+.9836891069))//Call ((+91-/7735273071)/// call now

webdev, javascript, beginners
Image
20 Reasons Why Asbestos Claim After Death Cannot Be Forgotten
Image
What's The Most Creative Thing That Are Happening With Car Key Lost
Image
KukuFm Customer Care Helpline Number -(+.9836891069))//Call ((+91-/7735273071)/// call now

webdev, javascript, beginners
Image
How To Select Mobile App Testing Platforms

webdev, testing, mobile, ai
Image
The Unspoken Path to Effective Bug Hunting: A Guide Beyond Tools and Techniques

bugbounty, webdev, beginners, testing
Image
Digi Finance Customer Care Helpline Number -(+.9836891069))//Call ((+91-/7735273071)/// call now

webdev, javascript, beginners
Image
MERN Stack vs. MEAN Stack: Which Full-Stack Solution is Best for Your Project?
Image
How to Downalod All Attachments from Outlook?
Image
꽁머니와 우주, 선택의 힘과 그 결과
Image
Credit Go Loan App Customer Care Helpline Number -(+.9836891069))//Call ((+91-/7735273071)/// call now

webdev, javascript, beginners
Image
teknik menang judi slots online untuk yang baru saja memulai
Image
What Is The Reason Asbestos Exposure Lawsuit Settlements Is Right For You
Image
bermacam usul saat memutuskan games slots online
Image
🚨💥 Top 5 Trending Open-source LLM Tools & Frameworks You Must Know About ✨🚀

webdev, programming, opensource, ai
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .