Skip to content

Data Types

Data stored in variables are always of a certain type. When operating on data in JavaScript, the results will depend on the types of the operands (the variables on either side of the operator) used in the expression.

Given the prompt "add 40 and 2," the results are predictable because both operands, 40 and 2, are of the type number. However, a request to "add 40 and elephant" may not have an obvious result, because... "elephant" is obviously not a number.

While it is important to be aware of these data types, you do not have to specify the type when declaring variables in JavaScript (as you do in some other languages). JavaScript is a dynamically typed language, meaning that types are automatically inferred based on the assigned value.

There are 8 different data types in JavaScript:

  1. Number
  2. String
  3. Boolean
  4. Object
  5. Null
  6. Undefined
  7. BigInt
  8. Symbol

For this class, you will be working primarily with the first four - Number, String, Boolean, and Object.

You should also be familiar with the Null and Undefined types, as they may appear in error messages during troubleshooting.

The BigInt and Symbol types are a bit more esoteric and likely will not be relevant to your work in this class, but they are included below for completeness.

Number

const myNumber = 42;

String

A string is a sequence of one or more text characters. When declaring a string variable, surround the value with double quotes, as seen below.

const myMessage = "Hello, my name is Eric.";

Boolean

The boolean type has only 2 possible values: true or false. These values are not strings, so they do not require double quotes.

const isRaining = false;

const isSunny = true;

Object

An object stores collections of data in key:value pairs. Objects can be very complex and powerful, but a simple example might describe the properties of an item, like a car or laptop. In this case, each key on the left describes the category of the stored value on the right.

const myLaptop = {
  manufacturer: "Apple",
  model: "MacBook Air",
  year: 2020,
  processor: "M1",
  color: "Space Gray"
};

Notice the following characteristics, which are crucial for declaring objects:

  • The key:value pairs are enclosed by curly braces {}.
  • Keys are named, but they not require double quotes since they are not technically strings.
  • The key and value are separated by a colon :.
  • Each key:value pair is separared by a comma ,.

You can reference individual values of an object using dot notation.

myLaptop.manufacturer; // returns "Apple"
myLaptop.year; // returns 2020

Null

Null represents an empty or unknown value.

<button id="play-button">Play</button>

<p>Lorem ipsum blah blah blah.</p>

const myElement = document.querySelector("#does-not-exist");

console.log(myElement); // logs null

Undefined

Undefined often occurs if a variable is declared but not assigned a value.

const myVariable;

console.log(myVariable); // logs "undefined"

BigInt

As the name suggests, the BigInt type is used to store very large integer values. The standard number type is accurate up to 15 digits, so BigInt is required for larger values. To declare a BigInt, add an n to the end of the value.

const largeNumber = 999999999999999; // 15 digits
console.log(largeNumber); // logs 999999999999999

const wrongNumber = 9999999999999999; // 16 digits
console.log(wrongNumber); // logs 10000000000000000, no longer accurate

const bigNumber = 9999999999999999n; // 16 digits with an n at the end declares as BigInt
console.log(bigNumber); // logs 9999999999999999n, which is accurate

console.log(bigNumber + 1); // causes a TypeError since we're trying to add a BigInt and a number

console.log(bigNumber + 1n); // logs 10000000000000000n, which is accurate

Symbol

Symbols are a relatively new primitive data type in JavaScript. Every symbol is unique, even if they are created with the same description.

const symbol1 = Symbol("hello");
const symbol2 = Symbol("hello");
// symbol1 is not equal to symbol2

Symbols are often used to prevent clashes between property names (the keys) in objects. They likely will not be useful for your work in this class or appear in any example code.

Example Code

Try changing the variable values in the JavaScript below.

When using the console with embedded CodePen examples, you should open the Pen in its own window by clicking Edit On CodePen and then clicking the Console button in the CodePen editor.

See the Pen Data Types (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.