Overview of Functions in JavaScript for Beginners

The JavaScript Language

JavaScript as one of the core technology of the Web, alongside HTML and CSS, is a high-level, interpreted language that supports dynamic typing, prototype-based object-orientation and first-class functions. Moreover, it is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
Reference: Java Script

Use of Functions

A function is a block of code that performs a specific task or action. It takes in inputs, called parameters or arguments, and returns an output. Functions are used to organize code, improve readability, and promote code reusability. Functions can be thought of as mini-programs within a larger program. They can be called and executed multiple times from different parts of the program and be used to perform complex operations or calculations.

In JavaScript, for example, a function is defined using the function keyword, followed by the function name, parentheses for parameters (if any), and curly braces to enclose the code block. Here's a simple example of a JavaScript function that adds two numbers:

function addNumbers(num1, num2) {
  return num1 + num2;
}

In this example, the function addNumbers takes in two parameters num1 and num2. It then adds them together using the + operator and returns the result.

Functions can be called by their name followed by parentheses, and the values passed as arguments inside the parentheses. For example:

let result = addNumbers(5, 3);
console.log(result); // Output: 8

Here, the function addNumbers is called with the arguments 5 and 3, and the returned result is stored in the variable result. The console.log statement then outputs the result to the console.

Types of Functions in JavaScript

In JavaScript, there are several types of functions that can use based on your specific needs. Here are some common types of functions:

Named Functions: These are standard functions that have a name and can be defined using the function keyword. For example:

function multiply(num1, num2) {
  return num1 * num2;
}

Anonymous Functions: These functions do not have a name and are assigned to a variable or used as a callback function. They are defined using the function keyword without a name. For example:

let greet = function(name) {
  console.log(`Hello, ${name}!`);
};

Arrow Functions: Introduced in ES6, arrow functions provide a more concise syntax for writing functions. They are often used for shorter, one-line functions. For example:

let square = num => num * num;

Higher-Order Functions: These functions take one or more functions as arguments or return a function as a result. They are used for functional programming paradigms and can provide powerful abstractions. For example, the map, filter, and reduce functions are higher-order functions.

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(num => num * 2);

Constructor Functions: These functions are used to create objects using the new keyword. They typically have an uppercase first letter to indicate that they should be used with the new keyword.

Side-by-Side Comparison of different Types of Functions

To illustrate the differences and commonalities in syntax between above-mentioned types of functions, the following example uses the same functionality i.e. addition of two numbers.

// Named Function
function addNamedFn(num1, num2) {
  return num1 + num2;
}

// Anonymous Function
let addAnonymousFn = function(num1, num2) {
  return num1 + num2;
}

// Arrow Function
let addArrowFn = (num1, num2) => {
  return num1 + num2;
}

// Arrow Function (short)
let addArrowFn = (num1, num2) => num1 + num2);

A named function begins with the key word ‘function’, which declares the function, is common to many programming languages and typically the firs type of function that someone new to programming might encounter. This is followed by the ’name’ given to the specific function being defined, after which are parentheses which enclose the parameters, which are passed as arguments into the function, in this case the numbers num1 and num2. The actual content or body of the function, which is what it does after being called is enclosed by curly brackets. Here as in all cases shown it is the return of addition of num1 and num2.

An anonymous function differs in that there is no name given to the function. Therefore it can be used inline or as a callback right away or if used in other places it needs to be assigned to a variable, which serves as a pointer to the location in memory where the variable is held and can be accessed. The ‘let’ key word is followed by the specific variable name given here. Note that after function keyword there is no function name but just a pair of parentheses with parameters followed by curly brackets with the return statement.

An arrow function is a neat feature that recently was added to JavaScript. Instead of using the function keyword, here the ‘=>’ symbol/ operator is used, which indicates the arrow function. One of the benefits of arrow function is that it can often be shortened and be abbreviated to one line like shown above. Note that no curly brackets are required for a one-line statement and that the typically mandatory return statement is not necessary to make the result available outside of the function or to perform the same task.

Conclusions

As shown there is quite some flexibility to the programmer in using the various types of functions to performing the same task. This article is only touching on those concepts at a high-level for awareness but there is certainly much more details to explore. Arrow functions and anonymous functions are often used as short-hand implementation (fewer lines of code) and/ or when the function is called directly (call-back or inline). Note that neither of those allow for hoisting, which is a feature that is available only to named functions, which can be called regardless of where they are defined as long as they are declared.