JavaScript Functions

Functions contain block scope that holds a particular task (action) to be reused anywhere in a program (script) - when called or invoked.

See one of the syntaxes of a function below:

Syntax:

function functionName(para1, ..., paraN) {
    // statements
};

// calling, invoking, executing or running a function below
functionName(arg1, ..., argN); 

The syntax above contains the following:

1.) Function head: Contains the function keyword, function, the function name, functionName, and parameters in the parentheses, (para1, ..., paraN).

Parameters are like variables that hold values.

Function head that does not require parameters for the function body, the parentheses can be blank.

function functionName() {...}

2.) Function body: The function body is whatever in the curly braces {}. One or more variables, statements, or expressions in the function body are locally scoped - the exception is the var variables.

3.) Function caller: Function callers are reusable but globally scoped. It's actually called the calling function.

In the syntax above, the function caller is functionName(arg1, ..., argN). Function callers invoke, run, execute or call a function.

Syntax:

functionCaller = functionName(arg1, ..., argN);
functionCaller;

Arguments are values to a parameter.

See the example below:

const currentAge = 3; // Global Variable

function getAge(birthYear, currentYear) {
    const currentAge = currentYear - birthYear; // Local variable
    console.log(currentAge);
};

const myAge = getAge(1993, 2050); // function caller in an expression
console.log(currentAge); // 3

myAge; // 57

/*
57
3
*/

The parameters in the parentheses are declared in the function body already. That is no need to use let or const to redeclare the variable in the function body.

In the example above, currentAge is a local variable; while myAge is a global variable.

Local variables are in the function body (local scope), while global variables are outside the function body (global scope).

There are four ways of creating functions:

1. Function Declaration
2. Function Constructor
3. Function Expression
   • Anonymous Function
   • Arrow Function

Function declaration

To create or declare a function, it looks like syntax below:

function name(parameters) {
  // function body statements
}

See the example below:

function getAge() {
  let birthYear = 1993; 
  let currentYear = 2050;
  const currentAge = currentYear - birthYear;
  console.log(currentAge);
};

const myAge = getAge(); // function caller in an expression

myAge;

The code snippet above is the same as shown below:

function getAge(birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(currentAge);
};

const myAge = getAge(1993, 2050);

myAge;

For functions that contain more than three parameters, it is advisable to use rest parameter

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript - MDN.

Function declaration hoisting

Declarations moved to the top of the current scope are called Hoisting.

See examples below:

// called function before declaration
console.log( getMessage('John', 2055, 2150) ); 

function getMessage(name, birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(`${name} is ${currentAge} years old.`);
};

Below shows how the engine interprets the code above.

function getMessage(name, birthYear, currentYear) {
  const currentAge = currentYear - birthYear;
  console.log(`${name} is ${currentAge} years old.`);
};

console.log( getMessage('John', 2055, 2150) ); 

Function Constructor

A function constructor is used to create a function.

The syntax below is possible because functions are first-class objects in JavaScript.

const calcArea = new Function ("length", "width", "return length * width");

const area = calcArea(4.3, 3.1);

console.log(`The area is ${area} m²`);

Syntax:

function = new Function ([arg1, arg2, ...argN], functionBody);

The new keyword instantiates a new Function object.

The example above is the same below:

function calcArea(length , width) {
  return length * width;
  // console.log('Statements after the return statement get ignored!')
}

const area = calcArea(4.3, 3.1);

console.log(`The area is ${area} m²`);

Statements after the return statement get ignored! The return statement returns a value from a function.

Function constructor does not support hoisting.

Let's see another example that simply prints a result to the console.

See the example below:

const greet = new Function('console.log("Good day!")');

greet(); // Good day!

The new Function is not common but it turns any string into a function — receiving a new function from a server for execution.

See below:

const str = ... dynamically receive code from a server ...

const func = new Function(str);
func();

Other features of Functions

Return

The return keyword and console.log object are both used in a function body to print results to the console when calling the function.

The return keyword helps return a value from a function call to a global or local scope.

See the example below:

function calcSum(a=4, b=5) {
    const result = a + b;

    return result;
}

calcSum();
const sum = calcSum()

function showMessage() {
    console.log(`The sum is ${sum}.`); 
}

showMessage(); // The sum is 9.

If console.log() was used in place of the return keyword, it returns no value or undefined in a different function or local scope.

See the example below:

function calcSum(a=4, b=5) {
    const result = a + b;

    console.log(result); // 9
}

calcSum();
const sum = calcSum()

function showMessage() {
    console.log(`The sum is ${sum}.`); 
}

showMessage(); // The sum is undefined.

The example above shows we can have a function in another function. It is called Higher Order Function. We will see it in use more later.

Default Parameter

Values can be assigned to parameters before been called. These types of parameters avoid mistakes of not defining a parameter (undefined).

See the example below:

function getName(name='Bello') {
    return(`My name is ${name}.`);
}

console.log( getName() ); // My name is Bello.

When a default parameter gets created, there is no need to pass an argument to a function.

The default parameter(s) can be over-ridden if the calling function contain argument(s).

function getName(name='Bello') {
    return `My name is ${name}.`;
}

console.log( getName('John') ); // My name is John.

The old code style of creating default parameters before ECMAScript 2015 is shown below:

function getName(name) {
    if (name === undefined) {
        name = 'Bello'
    }

    return `My name is ${name}.`
}

console.log( getName() ); // My name is Bello.

We will treat function expressions in the next article.

TechStack Media | Bluehost

• Get a website with a free domain name for 1st year and a free SSL certificate.
• 1-click WordPress install and 24/7 support.
• Starting at $3.95/month.
• 30-Day Money-Back Guarantee.