JavaScript Data Types

name: portada
layout: true
class: portada-slide, middle, right
---
# JavaScript Data Types
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# Data types

The following data types are supported:
- __Integer numbers__: `-10, -5, 0, 2, 5, 100`
- __Float numbers__: `-2.3, 0.1, 40.46, 200.54`
- __Strings__: `"València", "Peugeot 3008"`
- __Boolean values__: `true or false`

```
let x1 = 34;        // Written without decimals
let x2 = 34.00;     // Written with decimals
let name = "Pere"   // String
let raining = true  // Boolean value
```
[JavaScript Data Types](https://www.w3schools.com/js/js_datatypes.asp)

---
# Numbers: Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations
with multiple values.

| Operator | Description |
| - | - |
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| -- | Decrement |

.center[[W3Schools Arithmetic](https://www.w3schools.com/js/js_arithmetic.asp)]

---
# Numbers: Assignment Operators
Assignment operators are used to assign a value to a variable.

| Operator | Example | Same as |
| - | - | - |
| = | x = 5 ||
| += | x += 5 | x = x + 5 |
| -= | x -= 5 | x = x - 5 |
| *= | x *= 5 | x = x * 5 |
| /= | x /= 5 | x = x / 5 |
| %= | x %= 5 | x = x % 5 |
| **= | x **= 5 | x = x ** 5 |

.center[[W3Schools Assignment](https://www.w3schools.com/js/js_assignment.asp)]

---
# Comparison operators
Operators that can compare multiple numbers. They return a __boolean__
value (_true_ or _false_) indicatind if the comparison is met.

- __Numbers__: Natural ordering.
- __String__: [ASCIIbetical order](https://en.wikipedia.org/wiki/ASCII#Character_order)
  - `"Zero" < "alpha" => true;`

| Operator | Description |
| - | - |
| < | lower than |
| <= | lower or equal than |
| > | greater than |
| >= | greater or equal than |
| == | equal value |
| != | not equal |
| === | equal value and equal type |
| !== | not equal value or not equal type |

.center[[JavaScript Comparisons](https://www.w3schools.com/js/js_comparisons.asp)]

---
# Booleans
A datatype that store __true__ or __false__ values;

```js
let isRaining = false;
let isJavaScriptCool = true;

let age = 20;
let adult = age >= 18; // true
```
.center[[JavaScript Booleans](https://www.w3schools.com/js/js_booleans.asp)]
.center[[JavaScript Logical Operators](https://www.w3schools.com/js/js_comparisons.asp)]

---
# Booleans: NOT Operator
The __NOT__ operator reverses the logical value.

.center[NOT (.blue[!])]

| A | NOT |
| :-: | :-: |
| 0 | __1__ |
| 1 | __0__ |

```
let isRaining = false;
console.log(!isRaining); // true
```

---
# Booleans: AND and OR Operators
The __AND__ operator only returns _true_ when both values are _true_.

The __OR__ operator returns _true_ when any value is _true_.

.center[AND (.blue[&&]) .whitespace[ ] OR (.blue[||])]

| A | B | AND | OR |
| :-: | :-: | :-: | :-: |
| 0 | 0 | __0__ | __0__ |
| 0 | 1 | __0__ | __1__ |
| 1 | 0 | __0__ | __1__ |
| 1 | 1 | __1__ | __1__ |

```
let isRaining = false;
let isWet = true;

console.log(isRaining && isWet); // false
console.log(isRaining || isWet); // true
```

---
# Type conversions
- __ParseInt()__: Parses a value as a string and returns the first number as a integer.

```
parseInt("10"); // => 10
parseInt("10.00"); // => 10
parseInt("10.33"); // => 10
parseInt("34 45 66"); // => 34
parseInt(" 60 "); // => 60
parseInt("40 years"); // => 40
parseInt("He was 40"); // => NaN (Not a Number)
```
.center[[ParseInt](https://www.w3schools.com/jsref/jsref_parseint.asp)]

- __ParseFloat()__: Parses a value as a string and returns the first number as a float.

```
parseFloat(10); // => 10.00
parseFloat("10"); // => 10.00
parseFloat("10.33"); // => 10.33
parseFloat("34 45 66"); // => 34.00
parseFloat("He was 40"); // => NaN
```
.center[[ParseFloat](https://www.w3schools.com/jsref/jsref_parsefloat.asp)]

---
# Type conversions
- __String()__: Converts a value to a string.

```
String(new Date()); // => "Wed Jun 01 2022 10:40:54 GMT+0200 ..."
String("12345"); // => "12345"
String(12345); // => "12345"
```
.center[[String](https://www.w3schools.com/jsref/jsref_parsefloat.asp)]

---
# Srtings
.center[[JavaScript Strings](https://www.w3schools.com/js/js_strings.asp)]

.center[[JavaScript Strings Methods](https://www.w3schools.com/js/js_string_methods.asp)]

---
# Math functions
.center[[W3Schools Math Object](https://www.w3schools.com/js/js_math.asp)]