# Session 1: JavaScript Usage, Basic Statements and Atomic Types
[slide online](https://hackmd.io/@e8KGkGmbTPWKGH_D_dy9DA/BygxVZlIo)
---
## Who am I?
- Web developer (mostly frontend)
- Main stack: React + Node
- Current location: Bogotá 🇨🇴 (UTC -5)
---
## Who are you?
- Goals
- Background
- Learning pain points
- Topics you find easy to learn
- Schedule
---
## Frontend usage
- DOM Manipulation
- Simple automation
- Framework based UI
- Data visualization
---
## Backend usage
- Node
- Express
---
## Scripting usage
- Node
---
## Basic Statements
```javascript
let someVariable;
const someConstant;
```
---
## Basic Statements
### Declaration vs initialization
```javascript
// declared
let someVariable;
someVariable = "some value";
// declared and initialized
let anotherVariable = "some other value";
```
---
## Basic statements
### Control flow > if
```javascript
if (condition) {
// code that runs if condition is met
}
```
---
## Basic statements
### Control flow > Equality operators
```javascript
if (a === b) {
// run if a equals b
}
if (a !== b) {
// run if a is NOT equal to b
}
```
---
## Basic statements
### Control flow > Relational operators
```javascript
if (a > b) {
// run if a is greater than b
}
if (a < b) {
// run if a is less than b
}
if (a >= b) {
// run if a is greater than or equal to b
}
if (a <= b) {
// run if a is less than or equal to b
}
```
---
## Basic statements
### Control flow > Logical operators
```javascript
if (conditionA && conditionB) {
// run if both conditionA and conditionB are met
}
if (conditionA || conditionB) {
// run if either conditionA or conditionB are met
}
```
---
## Basic statements
### Control flow > else
```javascript
if (conditionA) {
// run if conditionA is met
} else if (conditionB) {
// run if conditionA was NOT met AND conditionB is met
} else {
// run if NEITHER conditionA NOR conditionB were met
}
```
---
## Basic statements
### Control flow > Ternary operator
```javascript
let a;
if (conditionA) {
a = "conditionA met";
} else {
a = "conditionA NOT met";
}
```
...can be rewritten as:
```javascript
let a = conditionA ? "conditionA met" : "conditionA NOT met";
```
---
## Basic statements
### Control flow > Coalescing operator
```javascript
let a;
if (someValue === null || someValue === undefined) {
a = "default value";
} else {
a = someValue;
}
```
...can be rewritten as:
```javascript
let a = someValue ?? "default value";
```
---
## Basic statements
### Control flow > switch
```javascript
if (conditionA) {
// run if conditionA is met
} else if (conditionB) {
// run if conditionA was NOT met AND conditionB is met
} else {
// run if NEITHER conditionA NOR conditionB were met
}
```
---
## Basic statements
### Control flow > switch
...can be rewritten as:
```javascript
switch (condition) {
case conditionA:
// run when conditionA is met
break;
case conditionB:
// run when conditionB is met
break;
default:
// run if NEITHER conditionA NOR conditionB were met
}
```
---
## Basic statements
### Control flow > try ... catch
```javascript
try {
// something that could throw an error
} catch (theError) {
// do something with theError
}
```
---
## Basic statements
### Control flow > throw
```javascript
try {
throw new Error("Error Message");
} catch (theError) {
console.error(theError); // Error Message
}
```
---
## Basic statements
### Loops > while
```javascript
const n = 10;
let i = 0;
while (i < n) {
console.log(i);
i++;
}
```
---
## Basic statements
### Loops > do ... while
```javascript
const n = 10;
let i = 0;
do {
console.log(i);
i++;
} while (i < n);
```
---
## Basic statements
### Loops > break
```javascript
const n = 10;
let i = 0;
while (true) {
if (i === n) break;
console.log(i);
i++;
}
```
---
## Basic statements
### Loops > for
```javascript
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
---
## Basic statements
### Loops > continue
```javascript
for (let i = 0; i < 10; i++) {
if (i === 5) continue;
console.log(i);
}
```
---
## Types
<svg viewBox="0 0 320 300" style="max-width: 50vw; margin: auto;">
<g>
<circle cx="60" cy="80" r="40" fill="plum"/>
<circle cx="140" cy="80" r="20" fill="palegreen"/>
<circle cx="240" cy="80" r="60" fill="salmon"/>
</g>
<g>
<rect width="80" height="80" x="20" y="180" fill="palegreen" />
<rect width="40" height="40" x="120" y="200" fill="salmon" />
<rect width="120" height="120" x="180" y="160" fill="plum" />
</g>
</svg>
---
## Types
### Atomic types > Number
```javascript
const n = 10;
const negative = -40;
const rational = 1.234;
const negativeRational = -1.234;
```
---
### Atomic types > Number
#### Arithmetic operators
```javascript
// addition
console.log(3 + 2); // 5
// subtraction
console.log(3 - 2); // 1
// division
console.log(3 / 2); // 1.5
// multiplication
console.log(3 * 2); // 6
// modulo
console.log(3 % 2); // 1
// exponentiation
console.log(3 ** 2); // 1
```
---
### Atomic types > Number
#### Main methods
```javascript
const number = 4.223;
console.log(number.toFixed(1)); // 4.1
console.log(number.toString()); // "4.223"
```
---
### Atomic types > String
#### Literals
```javascript
const singleQuotesStrings = 'abcde';
const doubleQuotesStrings = "abcde";
let someVar = "c";
const templateLiteral = `ab${someVar}de`;
```
---
### Atomic types > String
#### Main properties
```javascript
const someString = "abcde";
console.log(string.length); // 5
```
---
### Atomic types > String
#### Main methods (Part 1)
- `<string>.at()`
- `<string>.includes()`
- `<string>.endsWith()`
- `<string>.indexOf()`
- `<string>.match()`
- `<string>.matchAll()`
_Read: [String methods at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods)_
---
### Atomic types > String
#### Main methods (Part 2)
- `<string>.repeat()`
- `<string>.replace()`
- `<string>.replaceAll()`
- `<string>.search()`
- `<string>.slice()`
- `<string>.split()`
_Read: [String methods at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods)_
---
### Atomic types > String
#### Main methods (Part 3)
- `<string>.substring()`
- `<string>.toLowerCase()`
- `<string>.toUpperCase()`
- `<string>.trim()`
- `<string>.trimStart()`
- `<string>.trimEnd()`
_Read: [String methods at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods)_
---
### Atomic types > Boolean
```mermaid
flowchart TD
b(Boolean) --is--> a(a representation of a logical truth value)
b --can be--> true
b --can be--> false
```
---
### Atomic types > Boolean
```javascript
console.log(2 > 1); // true
console.log(1 > 2); // false
console.log("a" === "a"); // true
console.log("a" === "b"); // false
const truthy = Boolean(1.5 + 1.5 === 3);
const falsy = Boolean(1.5 + 1.5 === "not a 3");
console.log(truthy); // true
console.log(falsy); // false
```
---
## Wraping up
- Topics covered
- What is JavaScript used for
- Basic statements
- Atomic types
- Exercises
- Next session
- Coming up...
- Schedule
---
{"metaMigratedAt":"2023-06-17T14:26:45.379Z","metaMigratedFrom":"YAML","title":"Session 1: JavaScript Usage, Basic Statements and Atomic Types","breaks":true,"contributors":"[{\"id\":\"7bc28690-699b-4cf5-8a18-7fc3fddcbd0c\",\"add\":3395,\"del\":24502}]"}