loading

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. Answers is built upon a JavaScript library that defines the functionality and layout of all components, which you’ll learn more about in the Answers 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.

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.

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

light bulb
Tip
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 Answers Front End 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
Tip
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 Answers in the Answers 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 Answers 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?

    You're a star! ⭐️

    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
Splash Loading