---
tags: ironhack, lecture,
---
<style>
.markdown-body img[src$=".png"] {background-color:transparent;}
.alert-info.lecture,
.alert-success.lecture,
.alert-warning.lecture,
.alert-danger.lecture {
box-shadow:0 0 0 .5em rgba(64, 96, 85, 0.4); margin-top:20px;margin-bottom:20px;
position:relative;
ddisplay:none;
}
.alert-info.lecture:before,
.alert-success.lecture:before,
.alert-warning.lecture:before,
.alert-danger.lecture:before {
content:"👨🏫\A"; white-space:pre-line;
display:block;margin-bottom:.5em;
/*position:absolute; right:0; top:0;
margin:3px;margin-right:7px;*/
}
</style>
# JS | Data Types in JavaScript-boolean, undefined & null and Immutability
## Learning Goals
After this lesson you will be able to:
- Use boolean as data type
- Use undefined and null as a data types
- Understand primitives and immutability
- Understand `value` vs. `reference` in JavaScript
## A boolean as data type
Some questions can only be answered with two possibilities: `yes` or `no`. For example:
- Are you going out tonight? `No`
- Will you learn a lot of new stuff at Ironhack? `Yes`
- Do you like your TAs? Hell, `yes`!
These answers are the equivalent of the boolean values in programming.
:::info
A **Boolean** or **bool** expression can result in the value of either **TRUE** or **FALSE**.
:::
Booleans are often used in conditional statements, but we will come to that in a bit. Let's first get familiar with **logical operators**.
### Boolean logic operators
We use logical operators to combine two (or more) conditions and depending on the conditions and the logical operator(s), we will get as a result a **true** or a **false**.
We have three different logical operators:
- **or**,
- **and** and
- **not**.
#### OR Operator (`||`)
:::info lecture
Table de vérité :
| a | b | a \|\| b |
| - | - | -------- |
| ❌ | ❌ | ❌ |
| ❌ | ✅ | ✅ |
| ✅ | ❌ | ✅ |
| ✅ | ✅ | ✅ |
```
a || b est ✅ SSI a ou b est ✅
```
:::
The *or* operator, represented by `||`, returns `true` if **one of the evaluated expressions is `true`**.
:::info
```javascript
expr1 || expr2
```
:::
If `expr1` or `expr2` is `true`, the result will be `true`. If they both are `false`, the result of the expression will be `false`.
```javascript
true || true // => true
true || false // => true
false || true // => true
false || false // => false
false || (4 > 2) // true
```
#### AND Operator (`&&`)
:::info lecture
Table de vérité :
| a | b | a && b |
| - | - | ------ |
| ❌ | ❌ | ❌ |
| ❌ | ✅ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
```
a && b est ✅ SSI a et b sont ✅
```
:::
The **and** operator, represented by `&&`, returns true just if **all the evaluated expressions are true**.
:::info
```javascript
expr1 && expr2
```
:::
If `expr1` and `expr2` are `true`, the result will be `true`. If one of the expressions is `false`, the result will be `false`. If both expressions are `false`, of course, the result will be `false`.
```javascript
true && true // => true
true && false // => false
false && true // => false
false && false // => false
true && (4 > 2) // => true
```
:::info
#### A short-circuit evaluation 🤓
As logical expressions in JavaScript are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:
```
false && (anything) is a short-circuit evaluated to false.
true || (anything) is a short-circuit evaluated to true.
```
The rules of logic guarantee that these evaluations are **always correct**.
:::
:::info lecture
Default operator:
```jsx
name = name || 'John'; // default to 'John' if `name` false
```
💂🏻♂️Guard operator
```jsx
quete = 🕳douves && 🏰murailles && 🐲dragon && '👸🏻' // '👸' SSI douves et murailles et dragon sont VRAIs
```
<iframe height="450" style="width: 100%;" scrolling="no" title="👸🏻" src="//codepen.io/abernier/embed/vYBVeBB/?height=450&theme-id=32929&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/abernier/pen/vYBVeBB/'>👸🏻</a> by Antoine BERNIER
(<a href='https://codepen.io/abernier'>@abernier</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
https://codepen.io/abernier/pen/vYBVeBB
:::
#### NOT Operator (`!`)
:::info lecture
Table de vérité :
| a | !a |
| - | - |
| ❌ | ✅ |
| ✅ | ❌ |
```
!a est ✅ SSI a est ❌
```
:::
Here we have to mention nothing less important - the **not** operator. It's used to negate the value of an expression.
:::info
```javascript
!expr1
```
:::
If the expression is **true**, the result will be **false**, and vice versa.
```javascript
!true // => false
!false // => true
!(4 > 2) // => false
```
Keep these rules in mind, you will be using them quite a lot ✅
## An undefined as data type
:::info lecture
Toute variable non-assignée vaut implicitement `undefined`
:::
:::info
**`undefined`** is primitive value automatically assigned to variables when they are declared.
:::
```javascript
let name;
console.log(name); // <== undefined
```
## A null as data type
:::info lecture
`null` est utilisé comme valeur pour signifier qu'une variable **n'a explicitement pas de valeur**.
:::
In computer science, a **null** value represents a reference that points, generally intentionally, to a nonexistent address, meaning the variable that hasn't been even declared yet.
However, in JavaScript, `null` is often used to represent `value unknown` variables:
```javascript
let name = null;
console.log(name); // <== null
```
You will often use this value when checking if a variable has even been declared or when you intentionally want to reassign the value of some variable to *null* because of some changes in its status in your application. (this is just hypothetically speaking, it will be more clear later through the course)
## Immutability
:::info lecture
Qu'appelle t-on une primitive ?
---
<span style="font-size:500%;">🦴</span>
Sont dîtes **primitives** les types de valeurs suivantes :
- `undefined`, `null`, `NaN`, `true`/`false`, `Infinity`
- une `"chaine"` de texte
- les nombres `12.81` ou `9`
:::
:::warning lecture
Les tableaux et objets ne sont donc pas des primitives.
:::
:::info lecture
Une propriété de ces valeurs primitives est qu'elle <b>ne peuvent être modifiées</b>. On dit que ces valeurs sont **immuables** ou "immutable" en english.
NB: Par ex, on ne pourra pas dire que 3 vaut maintenant 4 😆. On le comprend facilement pour les nombres.
:::
As we said at the very beginning, all primitive data types are **immutable**.
:::info
Immutability means that once one of the primitive values is created, it can't be modified.
:::
:::info lecture
On le comprend facilement pour les nombres ou `undefined` (oui on peut pas changer la valeur de `undefined`), mais **c'est le cas aussi pour les `"chaines"`** :
:::
Let's explain this:
```javascript
let city = "paris";
console.log(city[0]); // <== p
city[0] = "P"; // ❌
console.log(city); // <== paris
```
<span style="font-size:500%;">😲</span>
:::info lecture
On ne peut pas modifier la valeur elle-même ! Quand on crée la valeur `"paris"`, elle sera toujours `"paris"` :smile:
Et comme 3 vaudra toujours 3.
:::
---
Don't get confused here because **values are immutable** but variables are mutable which means you can reassign them:
:::info lecture
Par contre, attention, si on ne peut pas changer les valeurs elles-mêmes, **on peut par contre bien sûr changer la valeur d'une variable** : en l'assignant à une autre valeur, comme par ex ici, une autre primitive :
:::
```javascript
let city = "paris";
console.log(city); // <== paris
// ✅ we CAN re-assign our variable to another value
city = "berlin";
console.log(city); // <== berlin
// ❌ but still CANNOT change the value "berlin"
city[0] = "B";
console.log(city); // <== berlin
```
:heavy_check_mark: You can see from the previous example that you can reassign the variable with a new value but you can't alter the existing value. As you can see, when we practiced the string methods, each of them returned a new string and the original string stayed untouched.
:::info lecture
Ici, `.slice` nous retourne une autre valeur et ne modifie pas la valeur `"Don't be sad, be happy!"` :
:::
```javascript=
const message = "Don't be sad, be happy!";
console.log(message.slice(0,3)); // <== Don
console.log(message); // <== Don't be sad, be happy!
```
---
:heavy_multiplication_x:
:::info lecture
Pour les nombres c'est évident qu'on ne peut pas changer la valeur de 9.
:::
Numbers are immutable as well - but that is more a common sense, right? Obviously, if number "5" is of value "5", it will stay forever the same value - you can't change it.
Immutability is a very important topic in JavaScript and we will come back to it a bit later in this module when we talk about Objects. Objects (and arrays) are mutable data types by default and we will see what that means in a couple of learning units.
## Summary
## Extra Resources
- [MDN - Logical Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators)
- [MDN - undefined as data type](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
- [MDN - null as data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)
- [MDN - Difference between null and undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null#Difference_between_null_and_undefined)
- [MDN - Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)
Sign in with Wallet
Connect another wallet