2. Data Structure

Objective: By the end of this checkpoint, you will have a better understanding of different DataTypes in JavaScript.

Key Terms

  • strings
  • numbers
  • Boolean
  • null
  • undefined
  • Symbol
  • Object
  • NaN
  • Infinity
  • Method
  • Array

Strings

A string is a series of characters.

Any data that contains text will be represented by a string. The name string likely originated from early programmers who were reminded of beads on a string.

A string can be wrapped in double quotes (" ") or single quotes (' ').

Note: Single quotes are what you would usually call an apostrophe ('), not to be confused with a backtick (`), which is located to the left of 1 on the keyboard.

As long as both ends of the string match, there is no difference between the two. Theyโ€™re simply different ways of writing a string.

But what if I want to write Iโ€™m in a single quoted string, or quote someone in a double-quoted string? Wonโ€™t that break the string?

It will and there are two options to combat that. You can safely use the opposite type of quotes. For example:

"Hey man, I'm a doctor, not a torpedo technician!"

This uses single quotes within a double quoted string.

Another example:

'"Do. Or do not. There is no try." - Yoda'

This uses double quotes in a single quoted string.

To remain consistent, itโ€™s important throughout a project to choose one style for structuring strings. Another alternative is to use a backslash (\) to escape the string. Illustrations using the backslash (\) approach for the examples above are:

'Hey man, I\'m a doctor, not a torpedo technician!'

"\"Do. Or do not. There is no try.\" - Yoda"

We can apply strings to variables. Letโ€™s use my greeting example.

let greeting = "Oh hi, Mark!";

Strings can also be linked together in a process known as concatenation. Variables and strings can be joined together using the plus (+) symbol.

let greeting = "Oh hi, " + "Mark" + "!";

This returns “Oh hi, Mark!”

Note that an empty space is also a character in a string. In the example below, weโ€™ll see how concatenation can be useful.


This setup using variables also returns "Oh hi, Mark!"

Now all the strings are represented by variables which can change. If youโ€™ve ever logged into an app (such as your email) and were greeted with your name, you can see how your name is just a string in a variable in the email system.

 

Numbers

A number is a numerical value.

Numbers do not have any special syntax associated with them like strings do. If you were to place a number in quotes, for example: "5", it wouldnโ€™t be considered a number, but a character in a string. A number can be whole or a decimal (known as a float) and can have a positive or negative value.


A number can be up to 15 digits. For instance:

let largeNumber = 999999999999999; // a valid number

You can do regular Math arithmetic operations with numbers: addition (+), subtraction (-), division (/), and multiplication (*).

For example:

let sum = 2 + 5; // returns 7

let difference = 6 - 4; // returns 2

You can also do Math arithmetic operations with variables. To illustrate:


We will next look at two other special number types.

 

NaN

NaN means “Not a Number”, even though itโ€™s technically a number type. NaN is the result of attempting to do impossible math with other datatypes. For example:

let nope = 1 / "One"; // returns NaN

In this case, we are attempting to divide a number by a string, it results in NaN.

 

Infinity

Infinity is also technically a number. It can be achieved by either trying to divide by 0 or calculating a number too large. For instance:

let beyond = 1 / 0; // returns Infinity

 

Boolean

A Boolean is a value that is either true or false.

Boolean values are very commonly used in programming for when a value might switch between yes and no, on and off, or true and false. Booleans can represent the current state of something that is likely to change.

For example, weโ€™d use a Boolean to indicate whether a checkbox is checked or not. For example:

let isChecked = true;

Often, Booleans are used to check if two things are equal, or if the result of a math equation is true or false. Take a look at the following:


Note: A single equals sign (=) applies one value to another. A double (==) or triple equals sign (===) checks if two things are equal.

 

Undefined

An undefined variable has no value.

With the let keyword, weโ€™re declaring a variable, but until a value is assigned to it, itโ€™s undefined. For example:

let thing; // returns undefined

If you donโ€™t declare the variable with let, itโ€™s still undefined. For instance:

typeof anotherThing; // returns undefined

 

Null

Null is a value that represents nothing.

Null is the intentional absence of any value. It represents something that doesnโ€™t exist and is not any of the other datatypes. For example:

let empty = null;

 

The difference between undefined and null is rather subtle. But the main distinction is that null is an intentionally empty value.

Symbol

A Symbol is a unique and immutable data type.

A Symbol is a new primitive datatype that emerged with the latest JavaScript release (ES6). Its main feature is that each Symbol is a completely unique token, unlike other datatypes which can be overwritten.

This is an advanced and little-used datatype so we wonโ€™t go into further detail on this topic in this lesson. But it is useful to know that it exists. Here is an example:

let sym = Symbol();

 

Objects

An object is a collection of name/value pairs.

Any value that isnโ€™t simply a string, number, Boolean, null, undefined, or Symbol is an object.

You can create an object with a pair of curly braces ({}). For example:

let batman = {};

Objects consist of properties and methods. Properties are what the object is and methods are what the object does. Returning to the book analogy, properties are like nouns and adjectives, while methods are like verbs.

Property Method
batman.firstName batman.fight()
batman.location batman.jump()

We can apply some properties to the batman object using name/value pairs (sometimes referred to as key/value pairs). They will be comma-separated and written as propertyName: propertyValue. For example:

Note: The last item in a list of object properties does not end in a trailing comma (,).

As you can see, we can apply any primitive data type as a value in an object. We can retrieve an individual value with a dot (.).

batman.firstName; // returns Bruce, a string

We can also retrieve the value with the straight bracket notation ([]).

batman["firstName"]; // returns Bruce, a string

A JavaScript property name must be a valid JavaScript string or numeric literal. If the name begins with a number or contains a space, it must be accessed using the bracket notation. You can learn more about this topic in this article.

A method performs an action. Here is a simple example:

Instead of a simple datatype as the value, we now have a method. The method is concatenating firstName and lastName for this object and returning the result. In the example, this is the same as batman because itโ€™s inside the object ({}).

batman.secretIdentity();

This returns Bruce Wayne since it’s a concatenation of two properties.

A method is indicated by parentheses (()).

 

Arrays

An array stores a list into a single variable.

Since an array contains more than one value, itโ€™s a type of object.

You can create an array with a pair of straight brackets ([]).

let ninjaTurtles = [];

Arrays do not contain name/value pairs. For example:

You can get an individual value by referencing the index of the array. In programming, counting starts at zero, so the first item in a list will always be [0]. For example:

let leader = ninjaTurtles[0]; // assigns Leonardo to the leader variable

You can see how many items there are in an array with the length property.

ninjaTurtles.length; // returns 4