JS Data Types

class: center, middle

.title[
Front-end training
# JS Data Types
]

---

# Agenda

## Primitives
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ES6)

## Objects
- Plain Object
- Array
- Date
- Map (ES6)
- WeakMap (ES6)
- Set (ES6)
- WeakSet (ES6)

---

# Primitives

Primitives Are Immutable, they cannot be changed. Each change will create new instance of primitive.

## Boolean
  logical entities `true` or `false`
## Null
  In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. The meaning of a null reference varies among language implementations.

---

## Undefined
  each unassigned variable will have value `undefined`

```javascript
  // x has not been declared before
  if (typeof x === 'undefined') { // evaluates to true without errors
     // these statements execute
  }

if (x === undefined) { // throws a ReferenceError

}
  ```

```javascript
  var x;
  if (typeof x === 'undefined') {
     // these statements execute
  }

if (x === undefined) {
     // these too
  }
  ```
---

## Number

According to the ECMAScript standard, there is only one number type: the double-precision 64-bit binary format IEEE 754 value (number between `-(253 -1)` and `253 -1`). There is no specific type for integers. In addition to being able to represent floating-point numbers, the number type has three symbolic values: `+Infinity`, `-Infinity`, and `NaN` (not-a-number).

To check for larger or smaller values than `+/-Infinity`, you can use the constants `Number.MAX_VALUE` or `Number.MIN_VALUE` and starting with ECMAScript 6, you are also able to check if a number is in the double-precision floating-point number range using `Number.isSafeInteger()` as well as `Number.MAX_SAFE_INTEGER` and `Number.MIN_SAFE_INTEGER`. Beyond this range, numbers in JavaScript are not safe anymore.

```javascript
  > 42 / +0
  Infinity
  > 42 / -0
  -Infinity
  ```
---

## String

JavaScript's String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index `0`, the next at index `1`, and so on. The length of a String is the number of elements in it.

```javascript
  var str = "";
  var str1 = '';
  var str2 = 'string';

str2[0]; // character 's'
  str2.length; // 6
  ```
---

## Symbol (ES6)

A Symbol is a primitive data type whose instances are unique and immutable. In some programming languages they are also called atoms.

```javascript
  var sym1 = Symbol(); // TypeError
  var sym2 = Symbol("foo");
  var sym3 = Symbol("foo");

sym3 === sym2; // false

var sym4 = Symbol("foo");
  typeof sym4;     // "symbol"
  var symObj = Object(sym);
  typeof symObj;  // "object"

```

---

## Plain Object

```javascript
  var object = {};
  var object1 = new Object();

// assign property
  object.propA = 1;
  object['propB'] = 1;

// access property
  object.propA
  object.propB
  ```

---

## Array

Array is a list of values with 0 based index.

```javascript
  var arr = [];

// array can hold any type of values
  arr.push(1);
  arr.push({});
  arr.push([]);
  arr.push(true);

arr.length // 4

// access to values is 0 based index
  arr[0] // 1
  ```
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

---

# Date

```javascript
  var date = new Date(); // current date
  var now = Date.now() // current date as milliseconds
  ```

---

# Map (ES6)

```javascript
  var myMap = new Map();

var keyString = "a string",
      keyObj = {},
      keyFunc = function () {};

// setting the values
  myMap.set(keyString, "value associated with 'a string'");
  myMap.set(keyObj, "value associated with keyObj");
  myMap.set(keyFunc, "value associated with keyFunc");

myMap.size; // 3

// getting the values
  myMap.get(keyString);    // "value associated with 'a string'"
  myMap.get(keyObj);       // "value associated with keyObj"
  myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get("a string");   // "value associated with 'a string'"
                           // because keyString === 'a string'
  myMap.get({});           // undefined, because keyObj !== {}
  myMap.get(function() {}) // undefined, because keyFunc !== function () {}
  ```
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

---

# WeakMap (ES6)

```javascript
  var wm1 = new WeakMap(),
      wm2 = new WeakMap(),
      wm3 = new WeakMap();
  var o1 = {},
      o2 = function(){},
      o3 = window;

wm1.set(o1, 37);
  wm1.set(o2, "azerty");
  wm2.set(o1, o2); // a value can be anything, including an object or a function
  wm2.set(o3, undefined);
  wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps!

wm1.get(o2); // "azerty"
  wm2.get(o2); // undefined, because there is no value for o2 on wm2
  wm2.get(o3); // undefined, because that is the set value

wm1.has(o2); // true
  wm2.has(o2); // false
  wm2.has(o3); // true (even if the value itself is 'undefined')

wm3.set(o1, 37);
  wm3.get(o1); // 37

wm1.has(o1); // true
  wm1.delete(o1);
  wm1.has(o1); // false
  ```
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

---

# Set (ES6)

The Set object lets you store unique values of any type, whether primitive values or object references.
  ```javascript
  var mySet = new Set();

mySet.add(1);
  mySet.add(5);
  mySet.add("some text");
  var o = {a: 1, b: 2};
  mySet.add(o);

mySet.has(1); // true
  mySet.has(3); // false, 3 has not been added to the set
  mySet.has(5);              // true
  mySet.has(Math.sqrt(25));  // true
  mySet.has("Some Text".toLowerCase()); // true
  mySet.has(o); // true

mySet.size; // 4

mySet.delete(5); // removes 5 from the set
  mySet.has(5);    // false, 5 has been removed

mySet.size; // 3, we just removed one value
  ```
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

---

# WeakSet (ES6)

The WeakSet object lets you store weakly held objects in a collection.
  ```javascript
  var ws = new WeakSet();
  var obj = {};
  var foo = {};

ws.add(window);
  ws.add(obj);

ws.has(window); // true
  ws.has(foo);    // false, foo has not been added to the set

ws.delete(window); // removes window from the set
  ws.has(window);    // false, window has been removed
  ```
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet

---

# Practice

1. Create a page with textarea and a button

2. Go to http://mockaroo.com/ and generate some data
  - Add field with name favorite_color and Type Color
  - Rows: 100
  - Format JSON
  - Click Preview
  - Copy to generated data to textarea
  - Display statistics (from 3.) on data below in any format (preferably table)

3. Lets find out something about generated data
  - How many Female and Male
  - How many favorite unique colors
  - How many each of color
  - What is the most favorite color
  - Find out not unique names first_name if there are such

---

# Links

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
- https://toddmotto.com/understanding-javascript-types-and-reliable-type-checking/
- http://mockaroo.com/