JavaScript Tutorial Series - Functions

Functions are used to enclose a block of code which performs a single task. Functions should be kept fairly small. If a function gets too large, that could be a sign it is doing more than a single task and should be broken down into multiple functions, each doing a different task that when used together, perform the main task. Functions may return values by using the return keyword. In JavaScript, functions may be written in several ways.

One way is to use the function keyword:

function wearAJacket(temperature) {
    if (temperature < 50) {
        return true;
    }
    
    return false;
}

This is called a function declaration. The above function defines a function with the name wearAJacket. A variable called temperature is passed in to it. The statements inside the function perform a test using if functions to determine if the caller should wear a jacket or not. The function returns true if the temperature value is below a predefined threshold, false otherwise. Function declarations are hoisted to the top of the code it is contained in. This means you can define it where you want and invoke it above or below where it is defined.

Another way is to define a function as a variable:

const wearAJacket = function (temperature) {
    if (temperature < 50) {
        return true;
    }
    
    return false;
}

This is called an function expression. An optional name may be added after the function keyword. Adding a name can be helpful when debugging. The function expression performs the same task as the function expression example. Function expressions are not hoisted to the top of the code it is contained in. This means you can only invoke it below where it is defined.

ES6 now supports arrow functions. These can be written as:

const wearAJacket = (temperature) => {
    if (temperature < 50) {
        return true;
    }
    
    return false;
}

This looks similar to a function expression, but does not use the function keyword. There is also an arrow made up of the equal sign and greater than sign.

Functions need to be explicitly called in order to run. Invoking a function is done the same, no matter how they are implemented.

const result = wearAJacket(75);
console.log(result);

The name of the function is called with the parameters being passed into it. With ES6, functions may also define default parameter values. Example:

const wearAJacket = (temperature = 80) => {
    if (temperature < 50) {
        return true;
    }
    
    return false;
}

const result = wearAJacket();
console.log(result);

Invoking the function without a parameter uses the default value within the function.

Calling a function with parentheses invokes the function. Calling a function with just it's name will not invoke the function.

const result = wearAJacket;
console.log(result);

It assigns the result variable to the wearAJacket, so that calling result with parentheses will run the code inside the wearAJacket function. This is how callbacks are passed, including setting an event handler callback as below:

someDomElement.onclick = wearAJacket;

This defines a click handler that, when activated, will call the wearAJacket function.

Implementation:

Inside the javascript_tutorial.js file created in the JavaScript set up tutorial, add the following lines that are in bold:

// JavaScript Tutorial

/*
* This file will add JavaScript
* to a website.
*/

(function() {
  let doc = document;
  let defaultLocation = [-86.7816, 36.1627]; // longitude, latitude


  function init() {

    let locationStr = '';
    for (let i = 0, num = defaultLocation.length; i < num; i++) {
      locationStr += defaultLocation[i];
      if (i === 0) {
        locationStr += ', ';
      }
    }

    console.log('Setting weather for location: ' + locationStr);

  }



  init();    


})();  

This puts the block of code that displays the locationStr using the defaultLocation in its own function called init. It is then invoked by calling init with parentheses. Notice the function at the top surrounded by the open parenthesis:

(function() {


})();

This is called an immediately invoked function expression (IIFE). It is executed automatically, once. This is useful for putting initialization code into a file, so that it is run when the file is loaded, which is what this code is doing.

The JavaScript tutorial series starts with this post. (paid links)
More JavaScript