Data Types

In programming there is an important idea referred to as data types. Each variable or piece of information has a "type," and the computer handles different types of data differently. For example, a number and a word are different "types" of data and the computer will handle them in slightly different ways. Some important types of data in JavaScript are:

  • number
  • string
  • boolean
  • array
  • function
  • object

We will briefly explore each of these data types on this page.

Numbers

In JavaScript, numbers are... well, just numbers. They can be whole number values, negative numbers, or even decimals. The editor below shows a few different JavaScript numbers. 

var x = 5;
var y = -3;
var z = 2.56782;

print(x);
print(y);
print(z);

Strings

JavaScript "strings" are used for storing text data (such as words and sentences), and consist of zero or more characters inside of quotes (single or double!). For example, "John Doe" and 'hello' are both examples of strings. Strings are great for holding sentences or text information, and are used very regularly in web development and other computer fields. The editor below shows a couple variables that have string values. 

var yourName = "John Doe";
var sayHello = 'Hello!';

print(yourName);
print(sayHello);

Strings can also be wrapped inside of "backticks" which is the key at the top-left of your keyboard that looks like a backwards apostrophe. The expression `John Doe` has the same value as "John Doe". It seems like we have a lot of options for creating strings, but this last option is perhaps the most useful! Using backticks, we can put variable values into our strings. If we want to put the variable x in a string, wesimply place ${x} where we want x to be in the string. The editor below shows this in action! 

var yourName = "John Doe";

print(`Hello, ${yourName}!`);

We call this type of string, that uses backticks, "template strings" and placing values inside of them is referred to as "string interpolation". You can also place general JavaScript expressions inside of ${ } when using string interpolation.

Booleans

In JavaScript there is a data type referred to as a "boolean". A boolean value is a true/false value, so a boolean is either true or false. As we will see in later sections, booleans play a large role in programming - and many expressions evaluate to a boolean. As an example, the expression 5 > 3 has a value of true because 5 is indeed greater than 3. So 5 > 3 has a boolean value.

Arrays

"Arrays" are like ordered lists of data. Suppose you have a list of all of the ingredients you need to make a sandwich. You could store these ingredient names in an array. The editor below actually shows this! 

var ingredients = ["Bread", "Ham", "Cheese"];

print(ingredients);

Line (1) in the editor above defines a variable ingredients and sets its value to an array. We define arrays by putting the elements inside of square brackets, and separating each item with a comma. In the example above, ["Bread", "Ham", "Cheese"] is an array. When we look at an array, we can think of it as an ordered list - but the first element we see is considered the 0th element of the array. This is important! So we think of this array as:

  1. "Bread"
  2. "Ham"
  3. "Cheese"

To access the elements of an array, we again use square brackets - but we put them after the array's variable name. For example, ingredients[0] will get the 0th element of the ingredients array. Do you remember what ingredient that is? The editor below shows this in action. 

var ingredients = ["Bread", "Ham", "Cheese"];

print( ingredients[0] );
print( ingredients[1] );
print( ingredients[2] );

To change the value of an array element, we use similar syntax. We specify what array element we would like to change, and then we tell the computer what value to give it. Suppose that you'd like turkey on your sandwich, instead of ham. The editor below shows how you can change the ingredients array to show this. 

var ingredients = ["Bread", "Ham", "Cheese"];
print(ingredients);

// Now change to turkey
ingredients[1] = "Turkey";
print(ingredients);

In programming, arrays are very important. Play with the code editors above to get a feel for how arrays work.

Functions and Objects

There are two more very important data-types in JavaScript (and most programming languages): functions and objects. These types of data are a little more sophisticated that the ones we just covered, so they will be covered in their own pages.

Activities

Activity: Printing Your Age

In the editor below do the following:

  1. Define a variable myAge and set it equal to your age.
  2. Define a variable message and set it equal to a string that tells the world how old you are. For example, if you are 22 then the string should say "Today I am 22!". (Hint: you might have to use ${myAge} somewhere in your code.)
  3. Print the message variable to the output using the print() command.
print('Your code here');

Activity: Favorite Numbers

In the editor below do the following:

  1. Define a variable favoriteNumbers and set it equal to an array of your 5 favorite numbers.
  2. Print the first element in the favoriteNumbers array to the output using the print() command.
  3. Print the last element in the favoriteNumbers array to the output using the print() command.
print('Your code here');