What is JavaScript | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• What is JavaScript and why is it important?
• Simple JavaScript Concepts

What is JavaScript?

JavaScript (JS) accounts for the dynamic elements of a website. JS allows you to define variables, store data, execute functions, as well as define any interactivity on a site. Search is built upon a JavaScript library that defines the functionality and layout of all components, which you’ll learn more about in the Search data mapping unit.

JavaScript Variables

Just like in any computer programming language, variables are used to store data. In JavaScript, variables are defined with the keyword let. You can define their value at declaration, meaning when you create the variable, or you can set it afterwards.

//declare variable and then define value
let restaurantName;
restaurantName = "Turtlehead Tacos"; 

//declare and define in same line
let restaurantName = "Turtlehead Tacos";

Once you create your variable, you can then use that variable later on.

console.log(restaurantName) //prints "Turtlehead Tacos" in your console

You can also assign new values to existing variables.

restaurantName = "Turtlehead Tacos - Austin"

Oftentimes, a variable’s value will be changed through a function. We’ll cover functions more in depth in the following unit.

JavaScript variables can hold a variety of data types, but you’ll mostly be working with numbers, strings (text), booleans, objects and arrays. Unlike some programming languages, you do NOT have to define the data type when you declare the variable.

Const Variables

You may also see us use const in JavaScript used in Search and Pages instead of let. This is called a constant - it is like a variable, but cannot be reassigned a new value after declaration.

JavaScript Arrays

Arrays are used to store a list of things. Anything you can store in a variable, you can also add to an array.

A simple example is below:

let colors = ["Red", "Blue", "Yellow"]

You can access an element of an array by referring to it by its index. Index count starts at 0, so the first item in an array will be at position 0.

console.log(colors[0]) //prints Red to the console
console.log(colors[1]) //prints Blue to the console
console.log(colors[2]) //prints Yellow to the console

JavaScript Objects

A JS object is a set of key-value pairs used to define attributes of a given thing. If you take the JSON module , you’ll see that the construct is very similar.

Although JS and JSON objects have similar notation, take note of the differences. JS does not require quotations around keys, for example, and is a bit more forgiving with comma placements.

A simple Javascript object might look like the below:

const restaurantDetails = {
name: "Turtlehead Tacos",
yearFounded: 1995,
numberOfLocations: 57, 
website: "https://turtleheadtacos.com",
manager: {
    fullName: "Casey Jones",
    title: "Senior Manager"
  }
}

We can use these objects to store data in a structured way to define features of something. You’ll see us use JavaScript objects in the Result Cards module to define how the data in the Content maps to different sections of a results card. Again, we can define many things as the ‘value’ of a key.

To refer to a property in an object, we use dot notation. For example, referring to restaurantDetails.name will give you the value of “Turtlehead Tacos”.

You can use this to get properties of nested objects as well. Let’s say we wanted to get the fullName of the manager - we could simply refer to it as restaurantDetails.manager.fullName.

To be able to access a property of an object, that object has to exist. For example, if we tried to access restaurantDetails.manager.fullName, but there was no restaurantDetails.manager object, we would get an error. This is known as null-checking - making sure that the object (and property of that object) exists before using its value. You’ll learn more about how to null-check in Search in the Search Data Mappings module .

Want to learn more?

This module will get you comfortable with the JS we’ll use in the Search and Pages tracks. If you’re interested in learning more, here are some other great resources:

• Codecademy
• W3Schools
• MDN
• Wes Bos