JS: Data Types & Variables

Learning Goals

• List the primitive data types used in JavaScript
• Create and use variables to store values
• Add variables to strings (concatenation and interpolation)

Vocabulary

• Data Type A kind of data, defined by the values it can hold and the operations that can be done on it
• Primitive type A kind of data type. Primitives in Javascript are [string, number, boolean, null, undefined, symbol]. Also know as a simple data type
• Variable A container for a value. The main building block for all programming
• Declare Creating a new variable (distinct from assignment)
• Assignment Assigning a value to a variable
• Concatenation The binding of multiple strings together using the + string operator
• Interpolation The process of injecting a variable directly into a string.
• Template literal Template literals are string literals that provide an easy way to interpolate a variable or expression into a string.

What is JavaScript?

JavaScript was created to make the web more dynamic. It is a scripting language made to run inside a host environment - like a web browser! It provides programmatic control over the objects in that environment. For example, when you click a button and you want something about the webpage to change, you will use JavaScript.

JavaScript can be client-side and server-side, meaning that it can be used to control user-facing interfaces (e.g. browsers) as well as handle the server-side extensions that connect with a database.

It’s a highly versatile and flexible language, favoring configuration over convention. This means that, when you’re working in JavaScript, there are TONS of different ways to accomplish the same task. Sometimes one is better than another, but often there’s not One Right Way to do something. JavaScript has become the most commonly used language of the web!

Data Types

There are different data types in JavaScript. It’s important to understand what type of data you’re dealing with as you’re writing code, and knowing the types of data are available to you is the first step.

Javascript has seven primitive data types:

• Boolean
• undefined
• null
• Number
• String
• Symbol (new in ECMAScript 6; we won’t focus on this in Mod 1)
• BigInt (new in ECMAScript 2020; you don’t need to know this at this time)

Pro Tip: Remember these with the acronym BUNNSS (just ignore BigInt for now)

Saving and Naming Information with Variables

As we’re writing code, there are many times when we want to be able to store a value so that we have the ability to reuse it in multiple places. Writing the same thing over and over is a pain, and it’s common to need to have access to the same information more than once. A variable allows us to do that!

What is a variable?

A variable is a place to store values. When we write scripts (a set of instructions for a computer to follow), we need to temporarily store small pieces of data. We store that data in variables. “Variable” is a good name for this concept because it indicates the stored data can change (or vary) each time a script is run.

When you declare a variable (similar to declaring a function), you’re creating a statement. A variable is made up of two parts: the variable keyword, var (a special word that the JavaScript interpreter knows is used to create a variable), and the variable name, which can be whatever you choose. Let’s see what that looks like in the console:

var myVariableName;

Variables: Assigning Values

Notice when we first create a variable, its value is undefined because it doesn’t have a value yet. This is because we have to set a value!

Let’s learn how to add a value. Create a bestTVShow variable and assign a value to it all at once:

var bestTVShow = "Great British Baking Show";

• Step 1: declare a variable and assign it a value
• Step 2: call the variable

Variables: Re-assigning Values

Variable is a good name for this concept because it indicates the stored data can change (or vary) each time a script is run.

At times, you will want to change the value a variable holds. One real-world example is a users age. When a user signs up for the app and provides their birthday and age, they don’t expect to have to go back in every year to inform the app they have reached their birthday and turned another year older; they expect the app to “know” that.

Here’s the syntax for re-assigning a variable:

var age = 31;

age = 32;

On the first line, we see the variable declaration and initial assignment. Below, we see age = 31. Syntactically, there are many similarities. The main difference is, we do not use the keyword var.

Using Variables Together

Now that we know about different data types and have values assigned to both of our variables, let’s dive into using them together!

var quantity = 3;
var mythicalCreature = " unicorns";
var creatureCount = quantity + mythicalCreature;

We have a variable called “creatureCount” and assign the value as our quantity and our mythicalCreature. Looking at creatureCount, we’ll notice the value is "3 unicorns". The reason this works even though the first value is a number and the second is a string, is a result of type coercion. JavaScript is essentially trying to help us by converting the number into a string so we can combine the two together.

Adding Variable Values to Strings

There are two different methods to add values to strings.

1. Concatenation

In the example above, we used a + as a string operator to combine the values of two different variables. This is called concatenation, which is a series of values linked together.

We can concatenate HTML tags, text, numbers, and variable values. Let’s revisit our example above to create a more readable phrase as the value of our creatureCount variable:

var quantity = 3;
var mythicalCreature = "unicorns";

var creatureCount = "I have " + quantity + " very fancy " + mythicalCreature;

In this instance, we’re concatenating multiple values including two strings and a variable in order for the sentence to come out as "I have 3 very fancy unicorns". This can make our string more dynamic depending on what value is in the variable.

2. Interpolation

Another way of adding values to strings is through template literals. Template literals are special strings that allow us to interpolate information. They use back ticks instead of normal quotes and use a combination of a dollar sign followed by curly braces. ie. ${quantity} ${mythicalCreature} Note: The back tick can be found on the key next to the number 1 on your keyboard (it shares a key with ~).

We can interpolate HTML tags, text, numbers, and variable values. Let’s revisit our example above to create a more readable phrase as the value of our creatureCount variable:

var quantity = 3;
var mythicalCreature = "unicorns";

var creatureCount = `I have ${quantity} very fancy ${mythicalCreature}`;

This is very useful when we want to append data to our webpage, because it means we can write out an entire HTML tag and add the data from our variable.

Wrap Up

We’ve worked through a lot of content - some of which may be new, some is review. Let’s take a minute to reflect.

Additional Resources & Practice

• JS Style Guide
• JavaScript Playground lets you experiment more with these concepts.