# Data Types

**Caitlyn**
<img src="https://camo.githubusercontent.com/419e0b12b852e0d830cd63c54355a4fc0c436a48/68747470733a2f2f6c68352e676f6f676c6575736572636f6e74656e742e636f6d2f7a585475374763485864363774734a757359483634306e7543645851476179583251696973462d497a6c367348757949485a573056713957394471306369584967506b466f4546357a336c3143416a724667584a2d657233564d5569464536424976654375516a384838307730784e756463526b4468716e4e4a6f2d75324b327a745f306c4c3033" alt="illustration of Caitlyn" width="250" height="250" data-canonical-src="https://lh5.googleusercontent.com/zXTu7GcHXd67tsJusYH640nuCdXQGayX2QiisF-Izl6sHuyIHZW0Vq9W9Dq0ciXIgPkFoEF5z3l1CAjrFgXJ-er3VMUiFE6BIveCuQj8H80w0xNudcRkDhqnNJo-u2K2zt_0lL03" style="max-width:100%;">

>Nice work on that last assignment. The client is happy and I am super impressed too :)

>So far we’ve learned about how to store information in variables, simple operators and how to add comments to our code.

>Ok, enough of the jibber jabber. Let’s keep moving!

## The Assignment

**Kyla**

>OMG! Thanks for getting the site working again. I can’t thank you enough. You are literally the best!!!

>I just noticed that some of the text isn’t displaying properly. The previous developer left some notes in the code, but never got a chance to fix them.

>Can you complete all of the TODO items in the comments?

>I think this will be a nice touch. Cheers! Kyla

## Skills Assessment
Okay, to deliver this feature we’ll need to learn about the various kinds of data you can encounter in JavaScript. Then we will need to know how to convert variables into other data types.

### Dive into data types
A data type is a kind of value that variables can have in a given programming language. It’s important to know what type of data you are working with when you are programming.

JavaScript has six data types: String Number Boolean Null Undefined Object

In this lesson, we'll explore the first five and save Object for later. The goal here is to give you a lay of the land, not for you to memorize all the information in this reading. We’ve already worked a bit with the Boolean, Number, and String datatypes, so we’ve already got a head start!

As we explore data types, we're going to make use of typeof(), which is a built-in command JavaScript provides to see the data type of a particular value. So if you run typeof 2 in a console, the result would be "number".

### Strings

Strings are a collection of characters enclosed with quotes. The quotes can be either single or double, but both must be the same kind — you can't open with a single and close with a double.

// declare a string with quotes
const this = 'that';
const that = "this";

Strings are used to represent text. Basically you can use any character from the Unicode character encoding scheme inside a JavaScript string. So you can put things like emoji and foreign characters into strings, but most of your strings will probably just contain plain old letters, numbers and punctuation.

#### coding challenge here

### Numbers

The number type in JavaScript is used to represent numbers. Big surprise, right? Both integer values (that is to say, whole numbers like 1, 2, 3, 10000000) and floating point decimal numbers (that is, numbers like 1.234999). Number with decimals are sometimes just called ‘floats.’

#### coding challenge here

### Booleans

Booleans signify truth and not truth (sometimes called falsity). A boolean has two possible values: true and false. Check out the Repl.it below. Before you run it, what do you expect it to console.log?

// declare a boolean
const loggedIn = true;

// evaluate a boolean
if (isAdmin) {
  console.log(‘The user is logged in.’);
}

if (!isAdmin) {
  console.log(‘The user is not logged in.’);
}

<iframe height="400px" width="100%" src="https://repl.it/@thinkful/booleans?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

### The not operator

In the example above, we set loggedIn to true, and we then have a block of code that runs if and only if the user is not logged in. The ! in !loggedIn inverts the Boolean value of the item to the right of it, so !false evaluates to true and !true evaluates to false.

We'll learn more about Booleans and If-Else in the checkpoint on application logic.

### Converting data types

In expressions involving numbers and string values with the + operator, JavaScript converts numeric values to strings.

// data coercion example
var stringVar = “Life was simpler when I was “;
var numVar = 12;

var combined = stringVar + numVar;
typeof combined; // => string
console.log(combined); // => Life was simpler when I was 12

<iframe height="400px" width="100%" src="https://repl.it/@thinkful/convertingDataTypes?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

The example above demonstrates that if you combine a number with a string using the + operator, the resulting value will be a string. This process of automatic conversion is called ‘coercion.’ That is, the number was coerced into a string. With all other operators, JavaScript does not convert numeric values to strings. For example:

// an unexpected result
'42' + 7 // "427"

<iframe height="400px" width="100%" src="https://repl.it/@thinkful/convertingDataTypesDemo2?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

This result is naturally confusing. To avoid this you should verify that you are working with the correct data types. The next section will show you how to do this.

### Converting strings to numbers

In the case that a value representing a number is in memory as a string, there are methods for conversion.

parseInt() This function parses a string argument and returns an integer.

parseFloat() The function parseInt only returns whole numbers, so if you are working with decimals use parseFloat().

// examples of converting 
parseInt(‘4’) // returns the number 4
parseInt(‘101 dalmatians') // returns the number 101 
parseInt(‘call 911') // returns NaN, must start with number 
parseFloat(‘3.14’) // returns the float 3.14

<iframe height="400px" width="100%" src="https://repl.it/@thinkful/parseInt-demo?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

### Feature Request: kylamusic.com

Some of the code on Kyla’s site isn’t working properly. Read the TODO notes and get.

// leave this part alone
var yearBorn = “2000”;
var currentYear = “2020”;
var kylaHeightMeters = 1.6;

// TODO get this to display Kyla’s age properly
var currentAge = currentYear - yearBorn;
var aboutKylaMessage = “Kyla is “ + currentAge + “.” 

// TODO height is being rounded down for some reason
parseInt(kylaHeightMeters)
var aboutKylaHeight = “Kyla is “ + kylaHeightMeters + “ tall.”

### Special Data Types

The two data types below play by their own rules. You won’t actually create these data types directly, but you may see them referenced in your console output and error messages.

#### null

null is a special value used to indicate that a variable has no value. It's not uncommon to see code that defaults to assigning null when other data is not available.

Be aware that if you run typeof null in JavaScript, you'll get an eyebrow-raising answer: "object". Even though null is a distinct data type, typeof says it's an object. This is a relic of a much earlier version of JavaScript that was not fixed in ES5 or ES6.

#### undefined

We encountered undefined in the previous assignment when we discussed declaring variables before assigning values to them. undefined is a special value that the browser assigns to variables when it first creates them in memory.

You should never directly set a value to undefined. It's fine to check if a variable is undefined, but you shouldn't do let foo = undefined;. If you want to represent the absence of a value, use null. Though it’s fairly common to assign the value of a variable when creating it, it’s also perfectly valid to declare a variable with no data. See below.

// examples of null and undefined
let example = null; // not a common practice
example; // null

let magicWord; // commonly practice
magicWord; // undefined