After this lesson, students will be able to:

• Describe the concept of a "data type" and how it relates to variables
• Describe use cases of different "data types"
• Declare, assign to, and manipulate data stored in a variable
• Explore and use a programming or markup language's standard library and built-in functions (iterators, datatype/array methods)
• Iterate over and and manipulate values in an array
• Describe how arrays are used to store data

Before this lesson, students should already be able to:

• Describe briefly what JavaScript is
• Be comfortable with a text editor such as SublimeText or Atom

From the Wikipedia:

In computer science and computer programming, a data type is a classification identifying one of various types of data that determines: the possible values for that type, the operations that can be done on values of that type, the meaning of the data and the way values of that type can be stored.

Data types are really similar across many different languages:

We'll elaborate on all of these - except Booleans - talk about how they differ in JavaScript, show you some built-in methods for each type and then give you time to practice some of the methods to manipulate data.

From the Mozilla Developer Network: "JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements...Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation."

For this lesson, we're going to use the Chrome Developer Tools Console shell. Open a Chrome window and type cmd+opt+j to open the console.

To get an idea of the type of data we're working with, we can use typeof(). Let's try it out in the console with the following:

typeof(37) === 'number';
=> true

typeof({}) === 'object';
=> true

typeof('hi there') === 'string';
=> true

typeof() returns a string with the type of the operand, or expression of the object you're looking at.

In more low-level languages, numbers are divided into two classes or objects:

• Integers

   ..., -1,0, 2, 3, 4, 5, ...

• Floats (or Decimal numbers)

   2.718, 3.14, .5, .25, etc

All numbers in JavaScript are "double-precision 64-bit format IEEE 754 values" - read this as "There's really no such thing as an integer in JavaScript." You have to be a little careful with your arithmetic if you're used to math in other programming languages. Let's take a look at what happens when we do this:

0.1 + 0.2
=> 0.30000000000000004

In JavaScript, these data points are the same type of object, which it calls Numbers, so if you know floats and integers do not go looking for them.

Operators are used to work with data in JavaScript. The standard arithmetic operators - that you've been learning since grade school - are supported, including addition, subtraction, modulus (or remainder) arithmetic and so forth. Check it out:

1 + 2
=> 3

2 - 5
=> -3

5 / 2
=> 2.5

6 * 2
=> 12

JavaScript can be a little cheap with the number of operations it allows you to do. For example, how is someone supposed to square a number or cube a number easily? Luckily there is a special Math object with some very useful methods.

• Taking a number to some power? Then just use Math.pow

// 3^2 becomes
Math.pow(3,2)
=> 9
// 2^4 becomes
Math.pow(2,4)
=> 16

• Taking a square root

// √(4) becomes
Math.sqrt(4)
=> 2

• Need a random number? Then use Math.random.

// The following only returns a random decimal
Math.random()
=> .229375290430
/**
  The following will return a
  random number between 0 and 10
*/
Math.random()*10

• Since Numbers can be Floats or Integers we often want to get rid of remaining decimal places, which can be done using Math.floor.

// Remove the decimal
Math.floor(3.14)
=> 3
Math.floor(3.9999)
=> 3

Strings are collections of letters and symbols known as characters, and we use them to deal with words and text in JavaScript. Strings are just another type of value in Javascript.

"John"
"Jane"
"123"

To find the length of a string, access its length property:

"hello".length;
=> 5

There's our first brush with JavaScript objects! Did I mention that you can use strings like objects, too?

Strings have other methods as well that allow you to manipulate the string and access information about the string:

"hello".charAt(0);
=> "h"

"hello, world".replace("hello", "goodbye");
=> "goodbye, world"

"hello".toUpperCase();
=> "HELLO"

Types of values like Number or String are not very useful without being able to form Expressions or Combinations.

Try your favorite number operators as expressions:

  1 + 1
  => 2
  2 - 1
  => 1

You can also create expressions with strings using the plus operator +:

  "Hello, " + "world!"
  => "Hello, world!"

This is not the same thing as addition. It is another operation called String Concatentation using the same symbolic operator.

You can convert a string to an integer using the built-in parseInt() function. This takes the base for the conversion as an optional second argument, which you should always provide:

parseInt("123", 10);
=> 123

parseInt("010", 10);
=> 10

This will be important later when we're taking user input from the web and using it on our server or in our browser to do some type of numeric calculation.

parseInt("FA4542", 16);
=> 16401730

parseInt("111", 2);
=> 7

Similarly, you can parse floating point numbers using the built-in parseFloat() function which uses base 10 always unlike its parseInt() cousin.

parseFloat("11.2");
=> 11.2

parseFloat("1" + Math.PI);
=> 13.141592653589793

You can also use the unary + operator to convert string values to numbers:

+"42";
=> 42

The parseInt() and parseFloat() functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to NaN if there is any invalid character in it.

A special value called NaN (short for "Not a Number") is returned if the string is non-numeric:

parseInt("hello", 10);
=> NaN

NaN is toxic: if you provide it as an input to any mathematical operation the result will also be NaN:

NaN + 5;
=> NaN

You can test for NaN using the built-in isNaN() function:

isNaN(NaN);
=> true

JavaScript's numeric operators are +, -, *, / and % and all work as you expect and should have practiced during your prework.

JavaScript distinguishes between:

• null a value that indicates a deliberate non-value
• undefined indicates an uninitialized value — that is, a value that hasn't even been assigned yet

Variables are used to store data types into the memory of the computer so that they can be referenced later.

New variables in JavaScript are declared using the var keyword.

If you declare a variable without assigning any value to it, its type is undefined.

var a;
=> undefined

So let's try assigning a value to variable:

var name = "Alex";
=> undefined

name
=> "Alex"

Having made some expressions it becomes evident we want to store these values.

var myNumber = 1;
// or also

var myString = "Greetings y'all!"

The main note to make here is that these variables should always have the var keyword and use camelCase

Values are assigned using =, and there are also compound assignment statements such as += and -=:

var x = 1;
=> 1

x += 5
=> 6

You can use ++ and -- to increment and decrement, respectively. These can be used as prefix or postfix operators.

In Javascript we just discussed two types of values we can use. We call these values objects, which for now just means that in addition to storing some data you also get to use some helpful methods when you are working with them.

• If you want to turn a number into a string you can use a helpful method called toString.

(1).toString()
=> "1"
/*
  be careful though,
  since numbers can be floats
  javascript might
  misunderstand you.
*/
1.toString()
=> Float Error
// but the following works
1..toString()

Unfortunately, strings and numbers are not enough for most programming purposes. What is needed are structures of data that we can use efficiently, such as Arrays.

Arrays are great for:

• Storing data
• Enumerating data, i.e. using an index to find them
• Quickly reordering data

Arrays, ultimately, are a data structure that is similar in concept to a list. Each item in an array is called an element, and the collection can contain data of the same or different types. In JavaScript, they can dynamically grow and shrink in size.

var friends = ['Moe', 'Larry', 'Curly'];
=> ['Moe', 'Larry', 'Curly']

Items in an array are stored in sequential order, and indexed starting at 0 and ending at length - 1.

// First friend
var firstFriend = friends[0];
 => 'Moe'
// Get the last friend
var lastFriend = friends[2]
=> 'Curly'

We can even use strings like arrays:

var friend = "bobby bottleservice";
// pick out first character
friend[0]
//=> 'b'
friend.length

Using the JavaScript Keyword new, is one way of creating arrays:

var a = new Array();
=> undefined

a[0] = "dog";
=> "dog"

a[1] = "cat";
=> "cat"

a[2] = "hen";
=> "hen"

a
=> ["dog", "cat", "hen"]

a.length;
=> 3

A more convenient notation is to use an array literal:

var a = ["dog", "cat", "hen"];

a.length;
=> 3

The length method works in an interesting way in Javascript. It is always one more than the highest index in the array.

So array.length isn't necessarily the number of items in the array. Consider the following:

var a = ["dog", "cat", "hen"];
a[100] = "fox";
a.length; // 101

Remember: the length of the array is one more than the highest index.

If you query a non-existent array index, you get undefined:

var a = ["dog", "cat", "hen"];
=> undefined

typeof a[90];
=> undefined

Arrays come with a number of methods. Here's a list of some popular helpers:

• a.toString() - Returns a string with the toString() of each element separated by commas.

• a.push(item1, ..., itemN) - Push adds one or more items to the end.

• a.reverse() - Reverse the array.

• a.shift() - Removes and returns the first item.

• a.unshift([item]) - Prepends items to the start of the array.

• a.pop() - Removes and returns the last item.

Remember, though, you'll never remember every method. Explore the the full documentation for array methods and other helper methods given to you for different objects (like Math, Date, String, etc).

Iterating through the elements of an array, one at a time, is a very common practice in programming.

We can use a for loop to iterate over the elements of an array like this:

var teams = ['Bruins', 'Cal Bears', 'Ravens', 'Ducks'];
for (var i = 0; i < teams.length; i++) {
    console.log(teams[i]);
}

JavaScript arrays have several advanced iterator methods.

Several of these methods require a function be supplied as an argument, and the code you write in the function will be applied to each item in the array, individually.

As an example, lets look at the forEach method that we can use instead of a for loop to iterate the elements:

var teams = ['Bruins', 'Cal Bears', 'Ravens', 'Ducks'];
teams.forEach(function(el) {
    console.log(el);
});

This function would return:

Bruins
Cal Bears
Ravens
Ducks
undefined

Notice how much clearer this syntax is than that of the for loop?

Here are some other iterator methods for you to research and practice with:

• Array.every()
• Array.some()
• Array.filter()
• Array.map()

Note: This can be a pair programming activity or done independently.

Take a look at the starter-code and work through each exercise using the comments provided to console log the correct information.

• Describe use cases of different "data types".
• Why is iterating important when working with stored data?

Feel free to read more from Mozilla about JavaScript fundamentals.