JavaScript Functions | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• What is a JavaScript Function
• Different ways to declare JavaScript Functions

What is a JavaScript function?

Functions allow you to define a task or a series of steps that must be taken given a set of parameters.

An example of a simple function is below:

// Defining the function:
function joinName(firstName , lastName) {
    return firstName + " " + lastName;
}

// Calling the function:
joinName(“John”, “Doe”) // output would be “John Doe”

• function is a keyword to define the function
• joinName is the name of the function
• (firstName, lastName) are parameters of the function. These are the inputs provided when you use the function later.
• { } - the brackets contain the actions to be carried out
• return gives us a value of the two parameters joined together with a space in between

This function would take two parameters and join them into a string with a space separated between them.

Functions allow you to simplify repeatable steps within your code.

What are the different ways to define a function?

Long Form - This is the traditional way to define a function. The function keyword indicates you are defining a function. The following is the name of the function, with any parameters you will pass to the function in parentheses.

//long form
function joinName(firstName, lastName) {
  return firstName + “ “ + lastName;
}

Arrow Notation - This shorthand allows you to define a function as a variable. This shortens the notation slightly. In this case, you define any parameters you need in the parentheses and use the => to define the actions the function will take. If you have just one parameter, you do not need the parentheses. If you have no parameters, you still need to include empty parentheses ().

//arrow notation - function statement
const joinName = (firstName, lastName) => {
return firstName + “ “ + lastName;
}

const joinName = firstName => {
return firstName + “ “ + “Smith”;
}

const joinName = ()  => {
return “John” + “ “ +  “Smith”;
}

Shorthand - This is a faster way to write a function using arrow notation if it all can fit on one line. This can improve the readability of your code and will remove the need to explicitly return a value.

//shorthand
const joinName = (firstName, lastName) => firstName + “ “ + lastName;

Template Literals - These allow you to more easily add variables to strings. Rather than constructing a string by adding substrings like the above example, we can insert where the ‘dynamic’ elements should go by indicating them as ${parameter name}.

//template literals
const joinName = (firstName, lastName) => `${firstName} ${lastName}`