Week 3: What’s Your (JavaScript) Type?

With JavaScript, we can add interactivity and logic to our web projects to make them more engaging and enjoyable to use. JavaScript represents the behavioral layer of the web development stack — with it, we can write code that reacts to a user’s on-page actions, collects, sends, and retrieve’s data from a server, or changes the look and functionality of our markup on the fly.

Like HTML and CSS, JavaScript runs natively in every major browser. In other words, you don’t need to install extra software or do anything special to get your code to run in a browser — it just works! This, combined with the fact that JavaScript can be utilized on both the front end (aka The Client, a user’s browser or computer) and back end (aka The Server, where data is stored, updated, and retrieved from) of web projects makes it one of the most popular programming languages for new developers to learn.

Before we get into all the fancy things we can do with JavaScript, we first need to understand how the language works “under the hood.” In this lesson, we’ll look at the basic types of data in JavaScript and how to store them in variables for re-use. We’ll also learn how to create and manipulate lists using arrays and model real world things using objects.

JavaScript Data Types

There are 7 basic data types in JavaScript:

• null
• undefined
• number
• string
• boolean
• object
• symbol

Both null and undefined are special data types. A value of null represents “unknown” or “empty,” and undefined simply refers to a value that has not yet been assigned. The symbol type is new addition to the data types list and represents a unique identifier. Since you aren’t likely to come across or work with the symbol type, our main focus will be on the remaining data types below.

Number

The number type is used to represent both whole numbers and decimals. We can perform mathematical operations with number types (multiplication, division, addition, subtraction, etc.). We’ll dive deeper into operators in Week 4.

String

The string type represents textual data. When we store strings in variables (which we’ll cover later in this lesson), we wrap the string value in either single or double quotes.

Boolean

The boolean type has only two values: true or false. It’s used in parts of our program that require yes/no input, and is also the result of a comparison in JavaScript (something we’ll be covering in Week 4).

Object

Each of the data types described above are called “primitive” data types. This is because they can only contain a single value at a time. The object type, on the other hand, is special. An object can contain multiple values stored in key-value pairs called properties. We’ll get into object syntax and how to work with them later in this lesson.

Working with Variables

Variables are containers for data. We use variables in JavaScript in order to store, change, and easily use and re-use strings, numbers, booleans, objects, etc. JavaScript is a dynamically (or loosely) typed programming language, meaning we don’t have to declare up front the type of data that a given variable will hold. It also means that JavaScript variables can hold different types of data at certain points in a script or program.

X changed from a string, to a number, to a boolean, and back to a string.

You can think of a variable in JavaScript as a box with something stored inside of it — in our case, a value. We can change what’s inside of the box, or leave the box empty. It’s important to note that the variable is not the value itself.

The blue boxes are variables, each containing a different data type | Image: MDN

Declaring & Initializing Variables

We declare — or create — a variable in JavaScript using the var keyword like so:

myVariable has been declared, but not initialized. It will return a value of “undefined”

let and const are two additional ways to declare variables in JavaScript, but we’re going to stick with good ol’ var in this course. It’s simple, easy to understand, and works in older browsers.

We’ve declared our myVariableName variable above, but we still need to initialize it. Initializing a variable simply means we assign a value to it. In the case of myVariableName, we’ve initialized the variable to a number data type with a value of 12:

What you name your variables is up to you, although it’s a good idea to use relevant variable names that indicate the values being stored (e.g. var userName = 'Frank'; is preferred over var x = 'Frank';). There are a handful of naming rules developers must following when it comes to JavaScript variables:

• Variable names must start with a letter
• Variable names can contain numbers, underscores, and the $ symbol
• Variable names are case sensitive (myvariable and myVariable are different)

Logging Variables in JavaScript

Now that we know what variables are used for and how to declare and initialize them, we want to see our variables at work! There are a few ways to output variables and other JavaScript code, but the one we’ll focus on is console.log().

All modern web browsers (and CodePen too!) provide built-in tools to help developers test and debug their code. Among the most useful is the Console, where we can “log” or “print” portions of our code in order to test functionality and confirm output. We do this via the console.log() method.

For example, if we wanted to log the value of myVariable to the console, we’d write:

Here are few more examples of fun stuff you can do in the console with JavaScript:

Variable Interpolation

We can pass the value of variables into strings by using the variable names as placeholders. This is called interpolation (specifically, string interpolation), and it makes our code more flexible and dynamic.

Arrays

We use arrays whenever we want to create a list of items or set of values. Arrays can store multiple items in a single variable, and each item can be a different data type. For example, an array might have a number, string, boolean, object, or even another array stored inside of it.

JavaScript arrays are wrapped in square brackets ([]), with multiple items separating by a comma.

Notice the final item in the items array — it’s referencing the fruits array. We can store arrays in arrays!

Adding, Removing, and Accessing Items in an Array

Items in arrays are zero-indexed. This means that the first item in an array is at index 0, the second item is at index 1, and so on. If we wanted to access the third item in our fruits array above, we’d use the following syntax:

We use bracket notation to access items by their index in an array

To get the total number of items in an array, we use the length property. We get back a number totaling the items in a given array.

We can also add and remove items to the end or beginning of an array using the following methods:

Objects

Objects in JavaScript are often used to represent “real world” things. An object’s properties are the “characteristics” of that object. For example, an object representing a person might look something like this:

The above is called ‘object literal’ syntax. It’s the easiest and most common way to create objects in JavaScript

Let’s breakdown the syntax and components of the above person object:

• We start by declaring a person variable to store our object
• After the assignment operator (=), we create a code block to house our properties using opening and closing curly braces like this: {};
• Inside the curly braces, we add properties to our object as key-value pairs separated by a colon (key: value)
• Properties in an object can hold any data type that we’ve covered so far, including strings, numbers, booleans, arrays, or even other objects.

Adding, Removing, and Accessing Items in an Object

There are two ways to add and access properties in an object: dot notation and bracket notation. Take a look at the syntax of each approach below to access the age property of our person object:

Both dot and bracket notation return the value of the age property in our person object

As you can see, both dot and bracket notation return the same value (33). So what’s the difference between the two approaches, and when should you use one versus the other? Dot notation can only be used on properties whose keys consist of alphanumeric characters (including _ and $ symbols). It can’t be used with property keys that begin with a number or include a dash (e.g. key-name).

Bracket notation, on the other hand, can be used to add and access any property key that’s of the string data type, including those that begin with numbers, include spaces and dashes, etc. Additionally, bracket notation can be used with variables, while dot notation can’t.

Say we wanted add some new properties to our person object:

Finally, to remove a property from an object, we use the delete keyword like this:

This will remove the works-from-home property in our person object

With the above properties added and removed, here’s what our updated person object now looks like:

Exercises

• Been There, Done That Exercise
• Shopping Trip Exercise
• All About Me Exercise

Resources

• JavaScript.com: High-level introduction to writing JavaScript.
• JavaScript Data Types: Awesome resource for learning more about the basic data types in JavaScript.
• The var statement: Overview of declaring and initializing variables in JavaScript using the var keyword.
• Outputting Text to the Console: Some ways to log strings, objects, and more to the console using console.log().
• Dot Notation vs. Bracket Notation: In-depth overview of the difference between these two methods of accessing and adding object properties.