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

---

# 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();
  var sym2 = Symbol("foo");
  var sym3 = Symbol("foo");

sym3 === sym2; // false

var sym4 = Symbol("foo");
  typeof sym4;     // "symbol"

```

---

## Plain Object

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

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

// access property
  object.propA
  object.propB

// delete property
  delete object.propA
  delete object.propB

```

---
### Enumerate the properties of an object
 there are couple of native ways to list/traverse object properties:
### for...in 
  ```javascript
  var obj = {a:1, b:2, c:3};
      
  for (var prop in obj) {
    console.log("obj." + prop + " = " + obj[prop]);
  }
  // Output:
  // "obj.a = 1"
  // "obj.b = 2"
  // "obj.c = 3"
  ```
### Object.keys(o)
This method returns an array with all the own  (not in the prototype chain) enumerable properties' names ("keys") of an object o. 
```javascript
console.log(Object.keys(obj)); // ["a", "b", "c"] 
```
---
## 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

---
### indexOf() 
Method which returns the first (least) index of an element within the array equal to the specified value, or -1  if none is found.
```javascript
var arr = [2, 9, 5, 9]; 
arr.indexOf(2); // 0 
arr.indexOf(7); // -1
arr.indexOf(9); // 1

if (a.indexOf(7) === -1) {
  // element doesn't exist in array
}
```
### join()
Join the elements of an array into a string: 
```javascript
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(); // "Banana,Orange,Apple,Mango"
var anotherEnergy = fruits.join('+'); // "Banana+Orange+Apple+Mango"
```
---
# Date

```javascript
  var date = new Date(); // current date
  var now = Date.now() // current date as milliseconds
  ```
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date
 ---

---

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