How To Create a Function in JavaScript

Creating functions in JavaScript is an essential skill for writing clean, efficient, and reusable code. Functions allow you to define tasks once and use them multiple times, making your programs easier to manage and maintain. Whether you’re building a simple script or a complex application, understanding how to create functions will help you structure your code and avoid repetition. This guide will walk you through the steps to create and use functions effectively in JavaScript.

In this section, we’ll cover the following topics:

Writing Your First Function

Now that you have an idea of what functions are and why they're useful, let's dive into creating your very first function in JavaScript.

In this section, we’ll cover how to define a function, what syntax you need to use, and how to execute it.

How to Create a Function (Step-by-Step)

To create a function in JavaScript, you need to follow this basic syntax:

function functionName() {
  // code to be executed
}

• function keyword: This tells JavaScript that you are defining a function.
• functionName: This is the name you give to your function, which you will use to call it later.
• Code block: The code inside the curly braces {} is what the function will execute when it's called.

Example: A Simple Function that Prints a Message

Here’s an example of a basic JavaScript function:

function sayHello() {
  console.log("Hello, world!");
}

In this example, the function sayHello doesn’t take any inputs, but it prints the message "Hello, world!" to the console. To run the function, simply call it like this:

sayHello(); // This will print "Hello, world!" in the console

Using Functions

Once you’ve created a function, the next step is learning how to use it. Functions are designed to be called (or invoked) whenever you need them, and they can also accept inputs to work with.

In this section, we'll explore how to call a function and pass information into it.

How to Call (Use) a Function

To call a function in JavaScript, you simply use the function's name followed by parentheses:

functionName();

If the function requires parameters, you’ll include them inside the parentheses.

Passing Information to a Function (Arguments)

Functions can accept inputs, called arguments. You pass arguments to a function when calling it, and they are used inside the function to perform tasks.

Here’s an example of a function that takes two numbers as arguments and adds them together:

function addNumbers(a, b) {
  return a + b;
}

To use the addNumbers function, you would call it like this:

let result = addNumbers(5, 3); // result will be 8

In this case, the function accepts two arguments a and b and returns their sum.

Returning Information from a Function

Functions can return values after performing their task. This is useful when you want the result of a function to be used elsewhere in your code.

In this section, we'll discuss how to return values and why this is important.

Using the return keyword

The return keyword is used to send a value back from a function. When a function hits a return statement, it stops executing and sends the result back to the caller.

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

In this example, the function multiplies two numbers and returns the result.

Storing the return value in a variable

Here’s an example of storing a return value:

function subtractNumbers(a, b) {
  return a - b;
}

let result = subtractNumbers(10, 4); // result will be 6

The function subtractNumbers returns the difference between two numbers, and we store that returned value in the variable result.

Function Expressions

In addition to the basic function declaration, JavaScript provides an alternative method for defining functions known as function expressions. Function expressions allow you to define a function and assign it to a variable. These can be created using let, const, or even var, each with slightly different behavior.

Creating a Function Expression with let

You can also create functions using the let keyword, which defines a function as a variable. Here's an example:

let greet = function () {
  console.log("Hello from a function expression!");
};

In this example, greet is a variable that holds a function expression. You can call it like any other function:

greet(); // Prints: "Hello from a function expression!"

Creating a Function Expression with const

A function expression can also be assigned to a const variable. This ensures that the function reference cannot be reassigned, adding an extra layer of protection:

const sayGoodbye = function () {
  console.log("Goodbye!");
};

Creating a Function Expression with var

You can use var to define a function expression, though it is generally avoided in modern JavaScript due to its function-scoped behavior, which can lead to unexpected bugs. Here's an example:

var square = function (x) {
  return x * x;
};

While this works similarly to let and const, the var keyword has a broader scope, which can sometimes cause conflicts or unintended behavior. For this reason, it’s recommended to use let or const for function expressions in most cases.

Reference links:

Functions - JavaScript | MDN

JavaScript Functions - W3Schools