Data Types

Timing	Type	Topic
10 min	Opening	What is a Data Type?
15 min	Codealong	Data Types
15 min	Codealong	Variables and Keywords
10 min	Introduction	Intro to Arrays
15 min	Codealong	Working with Arrays
25 min	Codealong	Accessing Values in Arrays
25 min	Codealong	Array Helper Methods
25 min	Codealong	Iterating through an Array
25 min	Lab	Independent Practice For Arrays
10 min	Lab	Homework: Mad Libs
5 min	Conclusion	Final Questions and Exit Tickets

Learning Objectives

After this lesson, students will be able to:

Describe the concept of a "data type" and how it relates to variables.
Declare, assign to, and manipulate data stored in a variable.
Create arrays and access values in them.
Iterate over and manipulate values in an array.

Preparation

Before this lesson, students should already be able to:

Be comfortable navigating between folders on the command line.
Run JavaScript on the command line using Node.js and use basic variables.

Last class, we worked on using basic commands in the terminal, writing JavaScript, and working with Git and GitHub. Check with students to make sure that everyone is comfortable with the materials covered in the last class.

Take a look at some simple keyboard shortcuts to practice: CLI Shortcuts

What is a Data Type? (10 min)

Let's jump into today's lesson—data types—where we’ll learn the basics of JavaScript and how to exchange data.

Building an app requires the exchange of data—and it all starts with data types. But what are data types? In computer science and computer programming, a data type is a classification identifying one of various types of data. Using data types, we can determine 1) the possible values for that type; 2) the operations that can be performed on values of that type; 3) the meaning of the data; and 4) the way values of that type can be stored.

You might have already encountered data types. Data types hold many similarities across different languages:

Data Type	Description	Example
Strings	Single words or sentences surrounded by double or single quotes	`"lots of kittens"`, `'lots of kittens'`
Integers	Whole numbers, with no delimiter	`42`, `1024`
Floats	Decimals, with no delimiter	`3.14`, `3.0`
Booleans	Represents either true or false	`true`, `false`
Arrays	Collections of Data	[ Superman, Batman, Spider-Man]
Objects	------	-----

We'll now elaborate on Strings, Integers, and Floats (the others will come later)and explain how they differ in JavaScript, show you how to work with each type, and get some practice using “helper methods” to manipulate this data.

Citation: Wikipedia

Working with Data in JavaScript

JavaScript contains a standard library of objects, including Array, Date, and Math, as well as a core set of language elements, such as operators, control structures, and statements; client-side JavaScript extends this core language by providing 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.

Note: This is a good point to provide examples of browser-based JavaScript applications. Open an example application form on the General Assembly website and pull up the source code to show students how client-side JavaScript works.

Citation: Mozilla Developer Network

Datatypes (15 min)

For this lesson, we're going to use the terminal and Node to run some basic scripts to understand the types of data we're working with. Open the terminal and type in node.

Part 1: `typeof( )`

We don’t yet know what type of data we're working with, so let’s ask the computer. To do this, we can use typeof(). Let's try it out in the terminal 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.

Note: At this point we haven't explained exactly what objects are. Provide a brief overview of objects as a collection of properties, and of a property as an association between a key and a value. Objects in JavaScript are used in two ways: >1. As simple structured data store, similar to arrays—the main difference being that instead of accessing values by index, we access them by a key. >2. As a fundamental programming paradigm that helps us structure and categorize our code. More about objects in the second half of this class.

Part 2: Numbers

Numbers are divided into two classes or objects:

Integers (a.k.a. "whole numbers")
```
 ..., -1,0, 2, 3, 4, 5, ...
```
Floats (or Decimal numbers)
```
 2.718, 3.14, 0.5, 0.25, etc.
```

All numbers in JavaScript are "double-precision 64-bit format IEEE 754 values". In other words, there's really no such thing as an integer in JavaScript. In this case, you have to be a 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 JavaScript calls Numbers--so don't be surprised when typeof( ) doesn't return 'float' and 'integer.'

Part 3: Arithmetic Operators

We use operators to work with data in JavaScript. The standard arithmetic operators—which you have been learning since grade school—are supported here, including addition, subtraction, division, and so forth. Check it out:

1 + 2
=> 3

2 - 5
=> -3

5 / 2
=> 2.5

6 * 2
=> 12

Part 4: Special Number Operators

JavaScript is slightly limited regarding the number of operations it allows you to perform. For example, it doesn’t enable you to easily square a number or cube a number. Fortunately, a special Math object with some very useful methods is available.

Taking a number to some power? 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()
=> 0.229375290430
/**
  The following will return a
  random number between 0 and 10
*/
Math.random()*10

Since Numbers can be Floats or Integers, we often need to delete remaining decimal places, which can be done using Math.floor.
```
// Remove the decimal
Math.floor(3.14)
=> 3
Math.floor(3.9999)
=> 3
```

Part 5: Strings

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

"John"
"Jane"
"123"

Variables and Keywords (15 min)

Variables are used to store data types in a computer’s memory, so that they can be referenced later.

Part 1: Always Use Var!

We declare new variables in JavaScript using the var keyword.

If you declare a variable without assigning a value to it, its type will be undefined.s

var a;
=> undefined

Let’s try assigning a value to variable:

var name = "Alex";
=> undefined

name
=> "Alex"

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

var myNumber = 1;
// or also

var myString = "Greetings y'all!"

Always remember that these variables should always have the var keyword and use camelCase

Part 2: Assignment Operators

Values are assigned using =; compound assignment statements, such as += and -=, can also be used:

var x = 1;
=> 1

x += 5
=> 6

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

To recap, we have discussed two types of values—or, objects—that store data and offer helpful computation functions.

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()

Introduction to Arrays (10 min)

You will find that strings and numbers are often not enough for most programming purposes. What is needed are collections of data that we can use efficiently. These are called Arrays.

Arrays are great for:

Storing data
Enumerating data (i.e., using an index to find them)
Quickly reordering data In essence, arrays compose 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, arrays can dynamically grow and shrink in size.
```
var friends = ['Moe', 'Larry', 'Curly'];
=> ['Moe', 'Larry', 'Curly']
```

Items in an array are stored in sequential order; they are indexed starting at 0 and ending at length - 1. JavaScript starts counting at zero, so the first position in the array will be [0], the second position in the array will be [1], and so forth.

// 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

Working with Arrays (15 min)

Using the JavaScript keyword new is one way of creating arrays:

Part 1: Var New

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

Part 2: Length Method

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.

Part 3: Getting Data from an Array

If you query a nonexistent array index, the result will be undefined:

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

typeof a[90];
=> undefined

Accessing Values in Arrays (25 min)

In this exercise, students will obtain and set array indices, as well as continue practicing with string concatenation. They will be populating two arrays: one with strings, one with numbers. Students will then return these strings and numbers from the arrays in order to create sentences.

Part 1: Creating Arrays Using the `new` Keyword and the Array Literal

Create two arrays: one using the new keyword; the other using an array literal.

The first array will contain String data values, representing goods a student consumes.
The second array will contain Number data values, representing the quantity of the respective good they consume on a daily basis.

First array (using new keyword)

var goods = new Array("water", "coffee")

Second array (array literal)

var quantity = [8, 2]

Note: Explain to the students the differences in array creation (new keyword vs. array literal):

    var a = [];        // these are the same
    b = new Array();   // a and b are arrays with length 0

    c = ['foo', 'bar'];           // these are the same
    d = new Array('foo', 'bar');  // c and d are arrays with 2 strings

    // these are different:
    e = [3];           // e.length == 1, e[0] == 3
    f = new Array(3);  // f.length == 3, f[0] == undefined
    b = new Array();   // a and b are arrays with length 0

Citation: StackOverflow

Part 2: Adding Elements to the Arrays

Use bracket notation to add values to the one of the arrays; use the .push() method for the other.

goods[2] = "soda"

quantity.push(8)

Note: Explain to the students the differences in adding (or setting) array values. What are the pros/cons of each approach?

Part 3: Accessing Elements from Arrays and Concatenating Them With Strings

Now it's time to access various combinations of the two arrays’ elements and concatenate their returned values.

  => 'Today, I consumed ' + quantity[0] + ' cups of ' + goods[0]
  => 'I am going to have ' + quantity[1] + ' cups of ' + goods[1] + ' tonight'

Array Helper Methods (25 min)

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

Note: You might want to demonstrate a few of these.

a.toString() - Returns a string with the toString() of each element separated by commas.
a.pop() - Removes and returns the last item.
a.push(item1, ..., itemN) - Adds one or more items to the end.
a.reverse() - Reverses the array.
a.shift() - Removes and returns the first item.
a.unshift([item]) - Prepends items to the start of the array.

You will likely not remember every method. Explore the full documentation for array methods and other helper methods provided for particular objects.

In this exercise, students will utilize their knowledge of array helper methods in order to decode a secret message.

Part 1: Array Creation and the `.push()` Method

var message = []

message.push(8)
=> 1
message.push('r', 'e', 'b', 'm', 'u')
=> 6
message.push('n', 's', 'i', 'A', 'G', 'K')
=> 12

message
=> [ 8, 'r', 'e', 'b', 'm', 'u', 'n', 's', 'i', 'A', 'G', 'K' ]

Part 2: `.pop()`, `.shift()`, and `.unshift()`

message.pop()
=> 'K'

message.shift()
=> 8

message.unshift(1)
=> 11

Part 3: Array Reversal Using `.reverse()`

message.reverse()
=> [ 'G', 'A', 'i', 's', 'n', 'u', 'm', 'b', 'e', 'r', 1 ]

Note: Discuss how the .reverse() method mutates the array structure.

Part 4: Array `.join()`

The .join() method joins all elements of an array into a single string.

Citation: Mozilla

Note: The .join() method accepts an optional argument, the separator, which becomes a string that separates the array values. If no argument is supplied to .join(), the separator defaults to a comma.

message.join()
=> 'G,A,i,s,n,u,m,b,e,r,1'

message.join(' ')
=> 'G A i s n u m b e r 1'

Iterating through an Array (25 min)

Iterating through the elements of an array, one at a time, is a very common and useful 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]);
}

How is the following code different from the one above?

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

JavaScript arrays have several advanced iterator methods.

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

For example, we can use the forEach method 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

Do you 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()

Part 1: Evens and Odds

Create an array--evens--and populate it with the even numbers 2 - 10. Create an array--odds--and populate it with the odd numbers 1 - 9.

var evens = []
evens.push(2,4,6,8,10)
=> 5

var odds = []
odds.push(1,3,5,7,9)
=> 5

Part 2: `Array.every( )`

The .every() method tests whether all elements in the array pass the test implemented by the provided function. [Source]

evens.every(function (num) {
  return num % 2 === 0
})

=> true

evens.every(function (num) {
  return num % 4 === 0
})

=> false

Part 3: `Array.some( )`

The .some() method tests whether an element in the array passes the test implemented by the provided function. [Source]

evens.some(function (num) {
  return num % 4 === 0
})

=> true

Part 4: `Array.filter( )`

The .filter() method creates a new array with all elements that pass the test implemented by the provided function. [Source]

Note: .filter() does not mutate the array it is acting upon; while it does return a new array of filtered elements, this new array must be assigned to a new variable or returned to another function.

evens.filter(function (num) {
  return num > 5
})
=> [6, 8, 10]

evens
=>[ 2, 4, 6, 8, 10 ]

var bigNums = evens.filter(function (num) {
  return num > 5
})
=> undefined

bigNums
=> [6, 8, 10]

var smallNums = odds.filter(function (num) {
  return num < 5
})
=> undefined
smallNums
=> [1, 3]

Part 5: ‘Array.map( )’

The .map() method creates a new array with the results of calling a provided function on every element in this array. [Source]

Note: .map() does not mutate the array it is acting upon; while it does return a new array of filtered elements, this new array must be assigned to a new variable or returned to another function.

var timesFive = evens.map(function (num) {
  return num * 5
})
=> undefined

timesFive
=> [10, 20, 30, 40, 50]

var timesTen = odds.map(function (num) {
  return num * 10
})
=> undefined

timesTen
=> [10, 30, 50, 70, 90]

Arrays: Independent Practice

In the starter code, you'll find an array.js file. Use this to get some more practice in the console with arrays.

Homework: Madlibs (10 min)

Note: The Mad Libs homework exercise requires more advanced techniques, such as functions and DOM manipulation. In this class, you should walk students through the starter code and explain the goals of the exercise but let them know that they will not yet have the skills to complete it. The due date for the exercise should be set for some point after Lesson 6 (Intro to the DOM and jQuery). The idea is to give students a preview of what the first assignment will entail. If students would like to read about and practice more advanced topics before lesson 6, they should feel free to do so. Instructions for students are provided along with the starter code.

For this assignment, you'll create your own Startup Generator app. Open the files in the madlib with loops folder and start by reading the "instructions.md" file. You'll learn how to use helper methods and for loops. We have provided some starter code; while we haven't covered functions and DOM manipulation yet, this is a good chance for you to challenge yourself and get a head start on these topics.

Conclusion (5 min)

Review

Make sure the lesson objectives have been met.

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

Further Resources

Feel free to read more from Mozilla about JavaScript fundamentals.

nourah08 / 02-data-types Goto Github PK

02-data-types's Introduction