Functions in JavaScript

Zeeshan SafdarZeeshan Safdar
3 min read

A function is a block of organized, reusable code that is used to perform some action. There are multiple ways to define functions in JavaScript. Here we will look at function declarations and function expressions.

Function Declaration

The standard way of defining a function in JavaScript is a function declaration, also called function definition or function statement.

It consists of the function keyword, the name of the function, and a comma-separated list of parameters in round brackets. This is followed by the function body (collection of statements that defines what a function does) wrapped in curly brackets.

function someName(param1, param2, param3) {
  // ...
}

In JavaScript, a function is invoked (called) by stating the function name followed by parentheses that contain the arguments.

someName(arg1, arg2, arg3);

Parameters

When working with parameters inside the function body, be aware of possible side effects.

  • Values of primitive data types are immutable. The original value is never affected by what happens to the argument in the function body.

  • For all other values (objects, arrays, functions), a reassignment will not affect the original value. However, if you modify such an argument (e.g. add a key to an object), that also modifies the original value that was passed in.

By default, all parameters defined in the function declaration are optional in JavaScript. If you provide fewer arguments than there are parameters, the missing arguments will be undefined inside the function. In many cases, it makes sense to assign a more appropriate default value than undefined. This can be done by specifying default parameters directly in the function definition.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

Return Statement

A return statement ends the function execution and specifies a value to be returned to the function caller. A function can have multiple return statements.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

The result of a function that returns no value or does not have a return statement is undefined. There are no implicit returns in JavaScript.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

In JavaScript, you can only return exactly one value. If you want to pass more information, you need to combine it into one entity first, usually into an object, or an array.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Function Expression

A function declaration is a standalone statement. But sometimes it is helpful to define a function as part of another expression, e.g., in an assignment, as a function parameter (callback) or as value in an object. This can be done with a function expression. It has the same syntax as a function declaration, only that the function name can be omitted to create an anonymous function.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Learn More

Credits: Exercism

0
Subscribe to my newsletter

Read articles from Zeeshan Safdar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Zeeshan Safdar
Zeeshan Safdar

An accomplished front-end developer with a strong background in creating visually stunning and user-friendly websites and web applications. My deep understanding of web development principles and user-centered design allows me to deliver projects that exceed client expectations. I have a proven track record of success in delivering projects on time and to the highest standards, and I am able to work well in a team environment and am always looking for new challenges to take on.