JS I - Data Types, Variables, Conditionals, and Functions

Learning Goals

In this lesson we’ll cover:

  • JavaScript data types
  • What a variable is and how to use it
  • Adding variables to strings (concatenation and interpolation)
  • Operators and how to use them
  • Conditionals and when to use them
  • How to declare and call functions with or without parameters


JS Style Guide


  • 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]
  • 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
  • Statement An executable piece of code
  • Expression An executable piece of code that resolves to a single value. The result of which may be assigned to a variable.
  • Operator Symbols that are used to assign, compare, and perform operations
  • Conditional An expression that evaluates to true or false, or a control flow statement that executes code
  • Function A predefined and reusable group of behavior
  • Call/Invoke Running a function
  • Parameters The variables declared in a function definition
  • Arguments The variables passed to a function when it’s called/invoked

History of JavaScript

Way back in the early days of the web, Brendan Eich created JavaScript. Legend has it that he wrote it in 10 days in 1995 while was was working as an engineer at Netscape. The language was first released with Netscape 2 in 1996. The name ‘JavaScript’ was a oh-so-clever marketing push to try to pick up on the momentum of Sun Microsystem’s popular language Java, but instead it lead to years of confusion about the names of these two mostly unrelated programming languages. If you’d like to learn more about where JS came from, take a look here.

What is JavaScript and Why?

JavaScript was created to make the web more dynamic. It is an object-oriented scripting language made to run inside a host environment like a web browser and provide programatic control over the objects of 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 as well as handle the server-side extensions that connect with a database.

It’s a highly versatile and flexible language, and has become the most commonly used language of the web.

Now that we know a little bit about JavaScript, let’s talk about how to actually use it!

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 six primitive data types:

  • null
  • undefined
  • Boolean
  • Number
  • String
  • Symbol (new in ECMAScript 6 we do not need to worry about this one)

Let’s go over what each of these is.

Null Data Type

The datatype null only has one value which is null. It is used to show an intentional absence of a value. This is often used when creating a variable that could have a value later.

Undefined Data Type

The datatype undefined only has one value which is undefined. A variable which has not been assigned a value has a datatype of undefined. A function returns undefined unless another value is returned.

Boolean Data Type

A boolean has one of two values: true or false. Think of it like a light switch: it’s either on or off.

Booleans can be very useful to help determine which part of a script should be run (as in conditionals, which we will talk about later).

Numeric Data Type

This data type handles numbers. In JavaScript, numbers are written without commas so three thousand four hundred and seventy five would be written like this:


Numbers can also be negative and decimals (also called “floats”), so we can write -3475 and 0.5

Note that we do not enclose a number data type in quotes.

In JavaScript, there is no distinction between integer and floating-point values; a JavaScript number can be either. This is an important distinction to remember, since other programming languages support multiple data types for numbers.

String Data Type

The string data type handles letters and other characters. It is always enclosed in quotes, and looks like this:

"I am a string!"

You can use either single or double quotes to wrap a string, but the opening and closing quotes need to match. A good rule of thumb is to pick a type of quote to use and then be consistent in it’s use throughout a project.

Strings can be used for any kind of text. We use them regularly to add text to a page.

Your Turn

Let’s take a couple of minutes to pair up and explain these the following data types to your neighbor: null, undefined, boolean, number, and string. Take turns, and make sure both of you have a chance to explain. This is to practice using the vocabulary and talking about code. Practice using your console to show the different data types.

Variables in JavaScript

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

A variable is, at its most simple, a declaration. It’s made up of two parts: the variable keyword, var, and the variable name, which can be whatever you choose. Let’s see what that looks like in the console:

var myVariableName;

We see that we have the variable keyword, and we’ve set the variable name to myVariableName.

When we write a very simple variable like this, it’s called declaring the variable.

Rules for Naming Variables

  • Names must begin with a letter, dollar sign, or an underscore. They cannot begin with a number.
  • Names can contain any of the above characters plus a number, but you cannot use a dash (-) or a period (.) within the name.
  • You cannot use keywords or reserved words (such as var or for).
  • All variables are case sensitive.
  • Use names that describe the kind of information you plan to assign the variable.
  • If your variable is made up of more than one word, then use camel case for every word AFTER the first word, which should be lower case ie. thisIsMyVariableName.

Your Turn (in the console)

Declare 2 variables, one named “quantity” and one named “mythicalCreature”

Variable Values: Assignment

So, we have our variable. Now what? 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 that value! Let’s add a value to a excellentHuman variable:

var excellentHuman = "Fred Rogers";

We’ve added a couple of things to our variable. Let’s go through them:

After our var keyword (a special word that the JavaScript interpreter knows is used to create a variable) and our variable name, we have an equals sign, =. That’s called the assignment operator, because we use it to assign a value to our variable declaration.

Let’s test these additions in the console.

Okay, let’s ask the console to give us the value of our variable. How do we do that?

  • Step 1: declare the variable and it’s value
  • Step 2: call the variable
  • Step 3: dance for joy at seeing our assigned value of “Fred Rogers”

Until you’ve added the assignment operator and the variable value, the variable is considered undefined.

Your Turn (in the console)

  • Assign values to your “quantity” and “mythicalCreature” variables.
  • What data type did you assign as the value in your “quantity” and “mythicalCreature” variables?
  • Create three more variables, and give them each different data types (numbers, strings, booleans)

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!

So far, we have:

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

Let’s make a new variable called “creatureCount” and assign the value as our quantity and our mythicalCreature.

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

Open up the console in your browser, enter these in, and see what you get! Now change the value of your quantity variable and ask the console for the creatureCount value again.

Your Turn (in the console)

Make 4 new variables. Assign values with numeric data types to two of them, and string data types to the others. See what happens when you combine the two numeric variables together vs what happens when you combine the two string variables.

Adding Variable Values to Strings

There are two different ways to add values to strings.

  1. Via concatenation
  2. Via interpolation

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.

Template literals are special strings that allow us to interpolate information. They use backticks instead of normal quotes and use a combination of a dollar sign followed by curly braces. ie. ${quantity} ${mythicalCreature}

We can concatenate or 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";

// using concatenation
var creatureCount = "<p>I have " + quantity + " very fancy " + mythicalCreature + "</p>"

// using a template literal
var creatureCount = `<p>I have ${quantity} very fancy ${mythicalCreature}</p>`

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.

One important thing to keep in mind is that template literals are not as widely supported as concatenation.


A script is a series of instructions that a computer can follow one by one. Each individual instruction is known as a statement. Each statement in JavaScript is followed by a semicolon.

Example statements:



An expression results in a single value. Expressions can use operators to create this single value. Here are some example expressions:

This expression results in “apple”


This expression results in 5

2 + 3


Expressions rely on operators to calculate their single value. There are 5 basic types of operators to get you started:

  1. Assignment operators assign a value to a variable. (hint: you’ve got these down already) var color = 'magenta';
  2. Arithmetic operators perform basic math. var addTwo = 2 + 2;
  3. String operators combine strings. var greeting = 'Hello! ' + 'Nice to meet you.';
  4. Comparison operators compare two values and return a true or false. var buy = 3 > 5; // Value of buy is false
  5. Logical operators combines expressions and return a Boolean value of true or false. var buy = (5 > 3) && (2 < 4);

Your Turn

Turn to your neighbor and explain what expressions, operators, and statements are. Take turns, and be sure you both have a chance to explain all three.


Sometimes we want to perform an action based on some kind of condition. In English, we can say “If this thing is true, then do that.” To do this in JavaScript, we can write conditionals to take a certain path in our program.

To use conditionals, we first need to use expressions, operators, and statements.

Basic Conditional Structure

Let’s now look at the basic structure of a conditional:

if (expression) {
} else {

If the expression evaluates to true, then the statement(s) for that condition will run. Otherwise, if the expression is false, then the statement(s) will not run at all. The expression will usually contain an operator to make a comparison (that evaluates to true or false).

Some examples of expressions we could use for a conditional are:

  • myNum < 5
  • userCity === "Denver"
  • isTired === true

Now for some real conditional examples.

var cookie = "chocolate chip";

if (cookie === "chocolate chip") {
  alert("This cookie is a chocolate chip cookie!");
} else if (cookie === "oatmeal raisin") {
  alert("This is not a cookie :(");
} else {
  alert("I bet you wish you had a chocolate chip cookie");
var hoursOfSleep = 8;

if (hoursOfSleep < 6) {
  console.log('I am groggy.');
} else {
  console.log('I feel fantastic!');

Your Turn

Write a conditional that gives a different alert message based on your favorite kind of animal.


Functions are a way to group statements together to perform a specific task. Functions are reusable blocks of code. To create a function, you must give it a name and then write the statements required for the function to achieve its task inside the function’s curly braces. Let’s work through the pieces and parts of a function.

Anatomy of a Function:

function makeStatements() {
  var firstStatement = 'Pizza is amazing';
  alert('Pizza is AMAZING!');
  • You declare a function using the keyword function.
  • Since functions perform some action, it is generally a good idea to use and action verb in the function name. i.e. getSize, saveNote, generateRandomNumber.
  • You can name the function anything you want, but it must include a set of parentheses after the name, which can be empty or accept parameters.
  • You must follow the parentheses with a set of curly braces, which act as bookends to hold the set of statements you want the function to run when it is called.
  • Calling the function is quite easy. Simply type the function name with it’s parentheses and any associated parameters.

Invoke a Function:

// Invoke a function

When this code is read, makeStatements() is “invoked”, all three statements within the function’s body (those curly braces) get run.

Your Turn

Go ahead and declare the makeStatements function in the console (or a repl and then invoke it. What do you notice about the code as it is being run? What do you notice about the code being run if you swap the 2nd and 3rd statements?

Create your own functions in the console:

  • Write a function that declares a firstName variable and a lastName variable, then alerts the user with a message that incorporates the full name, and then logs a random number to the console.

  • Write a function that assigns three different math equations to three different variables, then log the sum of the values of all three variables.

  • Write a function that alerts the user with a message of “YO!”, and then logs to the console a sum of eight different integers.

Pass Information to a Function:

Sometimes you need to give a function some information in order for it to do its job. You can give that function the information it needs by providing parameters. These are bits of information that you identify with appropriately named labels (you get to decide the notation) inside the parentheses of your named function. The words you use for your parameters act like variables INSIDE the function, which means they serve as means to pass values.

Parameters vs. Arguments

Its a subtle difference. Basically, when you declare a function, and you stipulate the function will accept some bits of information, those are parameters. Then, when you pass the values of the parameters, those are called arguments. Like this:

// parameters named on declaration of function
function createDreamCar(make, model) {
  return "My dream car is a " + make + " " + model;

// arguments "Audi" and "R8" passed into a called function
createDreamCar("Audi", "R8");

Getting A Value from Functions:

Some functions return information to the code that called them. Wait - what? When a function performs a calculation, like 2 + 2, it will return the “answer” of 4, right? Yes, AND, you still have to tell it to do so. Let’s work with some return statements in functions with parameters in the console:

function addTwoNumbers(num1, num2) {
  return num1 + num2;

function addTwoNumbers(num1, num2) {
  num1 + num2;

function addTwoNumbers(num1, num2) {
  return num1 + num2;

function addTwoNumbers(num1, num2) {
  return num1 + num2;

The return statement ends function execution and specifies a value to be returned to the function caller. It looks like this:

// This is the formula:
return [expression];
// The expression to return. If omitted, undefined is returned instead. The [] are meant to show that the expression is dynamic.

When a return statement is called in a function, the execution of this function is stopped. If specified, a given value is returned to the function caller. If the expression is omitted, undefined is returned instead. The following return statements all break the function execution:

return true;
return false;
return x;
return x + y / 3;

Additional Practice

Lesson Search Results

Showing top 10 results