3 Ways to Define JavaScript Functions

JavaScript is a programming language that the vast majority of websites use to perform client-side tasks. It is utilized in combination with HTML and CSS to create the layouts and functionality that we see on sites every day. A fundamental aspect of the functionality of JavaScript is defining functions, so let’s go over a few ways to define a JavaScript function.

Function Declaration

The most basic setup for defining a function in JavaScript is through function declaration. You simply declare the function, give it a name, and include the parameters.

function some_function(param1, param2) {
  // Insert code here
}

A basic function might add the two parameters together and return the result.

let x = add_params(2, 4); // x = 6
function add_params(param1, param2) {
  return param1 + param2;
}

Function Expressions

A function in JavaScript can also be defined using a function expression. Function expressions allow the option of creating an anonymous function, i.e., a function without a name.

let some_function = function(param1, param2) {
  // Insert code here
};

We can add the parameters together in a similar way.

let add_params = function(param1, param2) {
  return param1 + param2;
};
let x = add_params(2, 4); // x = 6

Function Declaration vs. Function Expressions

While both of these methods of defining a function ultimately lead to the same result, they have some key differences. For one, function declaration allows for a function to be defined at any place in your script and it is still able to be invoked. We can see that in the example above where the variable x is defined and the function add_params() is called before the function has even been declared. This is because function declarations are considered global and JavaScript prioritizes their declaration early on in its script execution. On the other hand, when you define a function using a function expression, any invocations of that function must occur after the function has been defined. This is because function expressions are not created until the script execution reaches them.

Arrow Functions

Function declarations and function expressions are the two main ways to define a function in JavaScript. However, JavaScript is a constantly evolving language and thus with the introduction of ES6, a major revision to JavaScript, we now have the ability to use arrow functions. Arrow functions are simply a method for writing functions using a shorter syntax.

let add_params = (param1, param2) => param1 + param2;
let x = add_params(2, 4); // x = 6

Arrow functions behave quite similarly to function expressions. In fact, the function above is effectively no different than the function we defined using a function expression. The main difference is that arrow functions allow us to omit the function keyword, so when the function is written in a single line like this, the value of the function is automatically returned, allowing us to also omit the return keyword. Arrow functions are a great option if you want to go the function expression route but also want clean and concise code. You should consider though that you lose some readability with arrow functions, as it’s not quite as clear what this function is accomplishing as opposed to the function expression version which is defined quite clearly.

JavaScript is a vast and complex programming language. Its functions are a vital tool we have to create simple or complex functionality for whatever purposes suit our needs. Functions can be named or anonymous. They can be saved as variables and passed as arguments to another function. They can be attached to events and triggered at certain moments or run on a predefined schedule. Once you learn to properly define functions, there are numerous options available to you to create any functionality you need. But one thing all functions have in common is the methods in which they are defined, and knowing how to use function declaration, function expressions, and arrow functions to define your own functions will set you up for an excellent start on your JavaScript journey. If you find you need more assistance with JavaScript development on your website, contact the web development experts at Hall.