JavaScript Functions

A function is a predefined block of code that can be executed some time in the future as many time as desired. Functions are essential to programming, and a core component to creating reusable code. Functions are a very powerful way to speed up, organize and improve control workflow.

Function Declaration

Defining a custom function is can be accomplished in a few different ways, but the most common method is the function declaration.

The function declaration, defines a function by starting with the function keyword followed by the name of the function, a set of parentheses (()) and a set of curly braces ({}). The block of code to be executed, also known as the 'body' of the function, goes between the curly braces.

// defining the add function
function add () {
  console.log('add')
}

The body of a function will not execute until the function is invoked. Invocation will occur with the function's name is called with a set of parentheses.

// defining the add function
function add () {
  console.log('add')
}

// invoking the add function
add() // 'add'

The return Statement

The return statement is used to end a functions execution and specify the value to be returned. By default, if no return statement is used, a function will return undefined.

// defining the add function
function add () {
  return 'add'
}

// invoking the add function
console.log(add()) // 'add'

Function Parameters

A function parameter is like a variable that can accept a value during invocation. Parameters are declared when the function is defined and can be used anywhere inside the function body. A function can have multiple parameters.

When we call a function, we can pass values into it as a comma separated list inside the parentheses. These values are called arguments.

// defining the add function with parameters
function add (a, b) {
  return a + b
}
// invoking the add function and passing arguments
console.log(add(3, 5)) // 8

Function Scope

Function Scope is the concept that variables declared inside fo a function are ONLY accessible to that function. This is in contrast to variables declared outside of the function or block which are accessible from inside the function.

const max = 10 // has global scope

// defining the addToRandom function
function addToRandom (num) {
  // the variable max can be used inside the function
  const random = Math.floor(Math.random() * max) // has function scope
  return num + random 
}

console.log(addToRandom(1)) // a number between 1 and 10
// the variable random does not exist outside the function
console.log(typeof random) // undefined

Anonymous Functions

Sometimes functions are passed as arguments to other function calls. This can either be done anonymously...

//Standard anonymous function syntax
document.addEventListener('DOMContentLoaded', function (event) {
    console.log('The document is ready!')
})

...or by using a predefined function.

function response(event) {
    console.log('The document is ready!')
}

//Using a predefined function
document.addEventListener('DOMContentLoaded', response)

Notice that when passing the predefined function as an argument, the parentheses are omitted. This is to prevent the function from being called when the JavaScript runtime first encounters the line of code.