Data Types

Here are some of the most common data types in JavaScript:

Boolean (bool)

A boolean is a true/false statement. It equates in binary as 0 or 1. Booleans are great for tracking things that can be answered in a yes or no question, such as Is the user logged in.

Number

This encompass any and all numbers. That means anything from -inf to inf. You can convert a boolean or string with numbers only to a number with the parseInt(); function or the parseFloat(); function. Take note that if you have a decimal value, you may see some odd results at the end of the decimal if you add or subtract from it. This is because internally, JavaScript converts decimals to doubles in binary, and are known to have inaccuracies when preforming calculations with them. To counter this, you might want to round them (using Math.round()).

Strings

Strings are text, and the easiest to convert to, with the toString(); function. Strings must be wrapped in quotes.

Data Containers

JavaScript has a few ways to contain multiple types of data. The most common are listed below:

Array

Arrays store a collection of multiple items under a single variable name, and has members for performing common operations. They are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1. JavaScript's syntax requires properties beginning with a digit to be accessed using bracket notation instead of dot notation. It's also possible to quote the array indices (e.g., years['2'] instead of years[2]), although usually not necessary.
let fruits = ["apple", "peaches", "pears"];

Object

An object is a data container that allows for key:value assignment. An example is included below:

Now if you define that and then run console.log(person.inSchool)); you will get the value of false. You can also create more properties after initialization by just defining them as you would another variable. So if you wanted to add a property called gpa, you could just write person.gpa = 2.8;.

Keywords

var

This keyword declares function-scoped or globally-scoped variables, optionally initializing each to a value. (e.g. var x = 2;) There isn't too much of a reason to use the var keyword anymore, as you can use the let or const keywords instead for better access to variables.

let

This keyword declares re-assignable, block-scoped local variables, optionally initializing each to a value. (e.g. let magicString = "Wanna see magic?";)

const

This keyword declares block-scoped local variables. The value of a constant can't be changed through reassignment using the assignment operator, but if a constant is an object, its properties can be added, updated, or removed. (e.g. const unchangeable = true;)

function

This keyword defines a set of commands and other functions that can be called upon multiple times. You can either use the function declaration or arrow syntax.

Function Declaration Example

Arrow Function Example

Practice #1

This practice activity is designed to allow you to test out variables and functions. This should only take 5 minutes if you get the hang of it. There will be no answer key, but a solution will be available at the bottom of the page for you to view.

Instructions

In the first section of the unit, you learned about basic JavaScript keywords and how to use them. Now we will use them in a basic JavaScript runtime. You will create a variable, change its value, and declare a constant. Then you will declare a function with two parameters and call it to log an output.

Before you begin

Make sure you have a new HTML document and JavaScript file linked to the HTML document.

Need a template?

Use these files as templates if you would like.

index.html

script.js

Step 1

Create a variable using the let statement. Give it a creative name, assign it to 5, and then use the console.log(variable); to log the value. The console should log the value 5 when you run it.

Step 2

After the console.log(); statement, use the variable name and then += 5. The line should look like this: variable += 5;. Then add another console.log(); statement for the same variable.

Step 3

Write a declaration for a constant named add_this, and assign it the value of 2.

Step 4

Now we will create a function. Declare a function with the function keyword and give it the name of incrementNumber. Add two parameter variables, initial and incrementor. Then add a block statement ({ }). It should look like this:

Step 5

Now we're going to edit the block statement to return a value to the user. Start with the return keyword and then write initial + incrementor.

Step 6

Now that we have created the function, we need to call it. Write the function name, and then place the variable that you created at the start of this activity in the first parameter spot as the first argument, and the constant add_this as the second argument. It should look like this, fill in the blanks: console.log(incrementNumber(___, ___));

Submission

Please submit this activity per the direction of your teacher.

Solution

The solution's output is available below in our Fiddle editor. Use the button below to open the solution in the Fiddle Console.

Looking for results in your webpage?

You may need to open DevTools by pressing F12 or CTRL+SHIFT+I. You might also need to sign out of your web browser if you can't open your DevTools.

Math in JavaScript

JavaScript can preform math with built-in operators, + for addition, - for subtraction, * for multiplication, / for division, ** for exponents, and Math.sqrt() for finding square roots. There's more you can use the built-in math library for, but that is for another day.

Conditionals

aka if...then...else

There's something important that allows your website to make its own decisions, conditionals (also known as if...then...else statements). These statements will check if a condition is met, and then execute some commands if it is true. If it is not true, the browser will check for another if statement and check it, and if it is true, run it. If the browser runs through all the if statements in a conditionals block, and there's an else block, whatever is in there will be run.

Example (with if, else if, and else)

Comparators

You'll need an operator to check whether a statement is true or not, and that is where comparators come into play. The most common ones are listed below.

Equal to ==

This comparator will check if two values are equal.

Unequal to !=

This comparator will check if two values are not equal.

Greater than >

This comparator will check if the value on the left is greater than the value on the right. This only works with integers, doubles, and floats.

Less than <

This comparator will check if the value on the left is less than the value on the right. This only works with integers, doubles, and floats.

Greater than or equal to >=

This comparator will check if the value on the left is greater than or equal to the value on the right. This only works with integers, doubles, and floats.

Greater than or equal to <=

This comparator will check if the value on the left is less than or equal to the value on the right. This only works with integers, doubles, and floats.

Strict equality ===

This comparator will check if two values are equal and the same data type.

Strict inequality !==

This comparator will check if two values are unequal or different data types.

AND & OR

Sometimes you'll want to check for multiple conditions in one conditional statement. That's where AND as well as OR come in.

AND &&

The AND operator will check for multiple conditions to be true and will return true if all the conditions in the statement are true. Otherwise, it'll be false.

OR ||

The OR operator will check for multiple conditions, and return true if at least one of the conditions are true.