What is JavaScript| 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 module.

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.

js console.log(restaurantName) //prints “Turtlehead Tacos” in your console

You can also assign new values to existing variables.

js restaurantName = “Turtlehead Tacos - Austin”

Oftentimes, a variables value will be changed through a function. Well cover functions more in depth in the following unit. 

JavaScript variables can hold a variety of data types, but youll 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. 

| **Data Type**        | **Description**    | 
| ------------- |-------------| -------------|
| number |  Integers (whole numbers) or floats (numbers with decimals) |
| string |  Text wrapped in quotation marks (") |
| boolean | true or false | 
| objects | A set of key/value pairs |
| array | A list of values, contained in brackets `[ ]` and separated by commas |

### 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:

js 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.

js 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 Technical Module](/tech106), you’ll see that the construct is very similar (JSON stands for JavaScript Object Notation!).

light bulb
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:

js 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 Search Frontend module to define how the data in the Knowledge Graph 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.

light bulb
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 brings up an important concept of 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.

JavaScript Resources

This is by no means a comprehensive overview of JavaScript - this is meant to allow you to dip your feet in the water and start getting comfortable with the JS we’ll use in the Search and Pages modules. If you’re interested in learning more, there are some great additional resources we’d recommend!

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 3

    What do we use JavaScript for?

    Error Success Question 2 of 3

    What is the keyword for defining a variable that can be reassigned a value?

    Error Success Question 3 of 3

    What is an object used for?

    Climbing that leaderboard! 📈

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect