Introduction to Functions in JavaScript

Functions are one of the fundamental concepts in JavaScript. The MDN web docs define functions in JavaScript as similar to a procedure - a set of statements that perform a task/calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

Functions in JavaScript are a group of reusable code that can be called anywhere in the program. Functions eliminate the need to write the same code over and over again. JavaScript has many built-in functions such as alert, confirm, console.log among others. A developer can also create their own custom functions.

To run/execute a function, it must be invoked or called.

The Structure of a function:

function cubed (number){
    return (number * number)
}

cubed(3)

// returns 9

A function is defined using the JavaScript keyword function.
A function name, which is the name of the function. In the case above the function name is cubed. It is the convention to name JavaScript functions using camelCase.
A function parameter will be after a variable name and is contained in parenthesis (). The parameter in the above function is number.
Statements - which define the value returned by the function/contain the tasks to be performed by the function. They are contained in curly brackets {}. In the function above, the function statements are within the curly brackets {}.

P.S: A function is called/executed using the function name and passing an argument in the function. In the above function, the function is called on line four where it is called with the name cubed(3), and the argument is passed in the parenthesis.

In the above points, we have used the names parameters and arguments. It is important to differentiate between these two. A parameter is found after the function name and it appears in the function declaration. An argument, on the other hand, is found where the function is called. In the example above the argument is the number 3.

A function should have the return keyword to capture the value evaluated once the function has executed its code block. If the return keyword is omitted, the function returns undefined.

function cubed (number){
    (number * number)
}

let x =cubed(3)
console.log(x)

// returns undefined

function cubed (number){
    return (number * number)
}

cubed(3)

// returns 9

How to declare a function in JavaScript:

There are various ways to declare a function in JavaScript. These are:

a) Function declarations

b) Function expressions

Function declarations

A function declaration is declared as follows:

function sum(n){
    return (n + n)
}

A function declaration is a named function and is defined by the function keyword. A function declaration is called by the name of the function; in the case above the function name is sum.

Function expressions

A function expression is declared as follows:

a) Where the function is declared as a variable and the function itself does not have a name. This is called an anonymous function expression. This type of function can take a parameter. It is invoked/called using the variable name. In the case below, the function is called with the variable name cubed and when this function is called, it returns the value of 16.

const cubed = function (number){
    return (number * number)

}

cubed(4)

// returns 16

b) Where the function is declared as a variable and the function has a function name. This is a named function expression. It is also invoked/called using the variable name. In the case below, the function is called with the variable name area and when this function is called, it returns the value of 12.

const area= function calculate(a, b){
    return (a * b )
}

area(3, 4)

// returns 12

From the example above, it is important to note a function can take more than one parameter and these are separated by commas i.e. (a, b). When the function is called, two arguments are passed in the function call.

Conclusion

Functions are a very fundamental part of JavaScript. I hope this article introduces you to JavaScript functions and inspires you to further explore the power of functions and the multiple ways they are used in JavaScript.

Alice Githui's Blog