Functions

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value. Functions are a way to create "reusable" blocks of code that can be "called" from anywhere within your code block, and used as many times as needed.

• - W3Schools Functions
• - MDN Functions
• - Geeks4Geeks Functions

In JavaScript, functions are considered "first-class objects", because they can be passed to other functions, returned from functions, and assigned to variables and properties. They can also have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called.

There are several types of functions that serve different purposes. The main types include named functions, anonymous functions, and arrow functions.

Different Function Types

Declaration

• A Function Declaration is the traditional way to define a function. It starts with the function keyword, followed by the function name and any parameters the function needs. eg:
•  
  • function add( a, b ) {
    • console.log( a + b );
  • }
  • // Call the function
  • add( 2, 3 );

Expression

• A Function Expression is another way to define a function. Here, the function is defined inside a variable, and the function's value (its returned value) is stored within that variable. Here, the whole function is an expression and the returned value is stored in the variable. We use the variable name to call the function. eg:
•  
  • const add = function ( a, b ) {
    • console.log( a + b );
  • }
  • // Call the function
  • add( 2, 3 );

Key Differences: Function Declaration vs. Function Expression

• Function Declaration: The function is defined and can be called anywhere in the code (even before it’s defined, due to something called "hoisting").
• Function Expression: The function is defined as part of an expression (usually assigned to a variable), and it can only be called after the line where it’s defined.

Returning Data

When we process our data in a function, we may wish to output our results for use within our code. We do this with the return statement. In the above example we used "console.log()" within the function to output our results to the console. We could also return the results and output it outside of the function, like so:

• const add = function ( a, b ) {
  • return ( a + b );
• }
• // Call the function
• console.log( add( 2, 3 ) );

• // Call the function
• let addition = add( 2, 3 )
• console.log( addition );

Returning Multiple Outputs

You can also return multiple pieces of data from a function, but it has to be returned, and called, in either an array, or an object, like so:

• const add = function ( a, b ) {
  • return [ a, b, ( a + b ) ];
  • - or -
  • return { a, b, ( a + b ) };
• }

• // Call the function
• let [ a, b, c ] = add( 2, 3 );
• - or -
• let [ a, b, c ] = add( 2, 3 );

Arrow Functions

An arrow function is a shorter syntax for writing functions in JavaScript. Introduced in ES6, arrow functions allow for a more concise and readable code, especially in cases of small functions. Unlike regular functions, arrow functions don't have their own this, but instead, inherit it from the surrounding context.

• • Arrow functions are written with the => symbol, which makes them compact.
  • They don't have their own this. They inherit this from the surrounding context.
  • For functions with a single expression, the return is implicit, making the code more concise.
  • Arrow functions do not have access to the arguments object, which is available in regular functions.
  • Like any variable, an arrow function can be declared using const, var or let. However it is a best practice to use const with arrow function unless we have a strong reason to reassign them.
•  
  • let add = ( a, b ) => a + b;
  • // Call the function
  • console.log( add( 3, 2 ));