# Session 2: Basic Structured Types
[slide online](https://hackmd.io/@e8KGkGmbTPWKGH_D_dy9DA/BkXqKSmIj#/)
---
## Array
```javascript
const empty = [];
const names = ["Louis", "Frank", "Amy"];
const scores = [23, 34, 42, 55, 22];
const matrix = [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1],
];
const mix = [1, "whatever", [[1, 0], []]];
```
---
## Array
### Getting and setting items
```javascript
const point = [1.2, 3.2, 1.8];
console.log(point[0]); // 1.2
console.log(point[1]); // 3.2
console.log(point[2]); // 1.8
point[2] = 2.3;
console.log(point[2]); // 2.3
```
---
## Array
### Destructuring
```javascript
const [x, y, z] = [1.2, 3.2, 1.8];
console.log(x); // 1.2
console.log(y); // 3.2
console.log(z); // 1.8
```
---
## Array
### Spreading
```javascript
const a = [0, 1];
const b = [2, 3];
const c = [...a, ...b];
console.log(c); // [0, 1, 2, 3]
```
---
## Array
### for ... of
```javascript
const point = [1.2, 3.2, 1.8];
for (const coord of point) {
console.log(coord);
}
```
---
## Array
### Static methods
- `Array.from(<arrayLike>[, <mapFn>[, <this>]])`
- `<mapFn>`: `(element, index) => newElement`
- `Array.isArray(<possibleArray>)`
- `Array.of(<items>)`
---
## Array
### Static methods
```javascript
console.log(Array.from("abc")); // ['a', 'b', 'c']
console.log(Array.from(Array(3))); // [ , , ]
console.log(Array.from(Array(3), (_, i) => i + 1)); // [1, 2, 3]
console.log(Array.of(1, 2, "c")); // [1,2,'c']
console.log(Array(1, 2, "c")); // [1,2,'c']
```
---
## Array
### Main instance properties
- `<array>.length`
- ```javascript
const names = ["Louis", "Frank", "Amy"];
console.log(names.length); // 3
```
---
## Array
### Main instance methods
- `<array>.at(<index>)`
- `<array>.fill(<value>[, <start>[, <end>]])`
---
## Array
### Main instance methods
```javascript
const names = ["Louis", "Frank", "Amy"];
console.log(names.at(-1)); // "Amy"
console.log(names.fill(1, 0, 1)); // [1, "Frank", "Amy"]
console.log(names.fill([])); // [[], [], []]
```
---
## Array
### Main instance methods
- `<array>.filter(<filterFn>)`
- `<filterFn>`: `(element[, index[, array]]) => boolean`
- `<array>.forEach(<fn>)`
- `<fn>`: `(element[, index[, array]]) => any`
- `<array>.map()`
- `<mapFn>`: `(element[, index[, array]]) => newElement`
---
## Array
### Main instance methods
- `<array>.reverse()`
- `<array>.sort([<compareFn>])`
- `<compareFn>`: `(a, b) => number`
- > 0: sort a after b
- < 0: some a before b
- === 0: keep original order
---
## Array
### Main instance methods
- `<array>.every(<testFn>)`
- `<testFn>`: `(element[, index[, array]]) => boolean-ish`
- `<array>.includes(<value>)`
- `<array>.some(<testFn>)`
- `<testFn>`: `(element[, index[, array]]) => boolean-ish`
---
## Array
### Main instance methods
- `<array>.join([<separator>])`
- `<array>.flat([<depth>])`
- `<array>.reduce(<reducer>, <initialValue>)`
- `<reducer>`: `(accumulated, currentItem[, idex[, array]]) => newAccumulated`
---
## Array
### Main instance methods
- `<array>.slice([<start>[, <end>]])`
- `<start>` and `<end>` can be negative
- creates copy
- `<array>.concat(arrays...)`
---
## Array
### Main instance methods
- `<array>.pop()`
- `<array>.push(items...)`
- `<array>.shift()`
- `<array>.unshift(items...)`
---
## Objects
```javascript
const emptyObject = {};
const player = {
name: "Michael Jordan",
stats: {
points: 32292,
rebounds: 6672,
assists: 5633,
},
teams: ["Chicago Bulls", "Washington Wizards"],
};
```
---
## Object
### Getting values
```javascript
const someObject = {
someKey: "some value",
anotherKey: {
a: "value A",
},
};
console.log(someObject.someKey); // 'some value'
console.log(someObject[someKey]); // 'some value'
console.log(someObject.anotherKey.a); // 'value A'
someObject["anotherKey"].a; // 'value A'
```
---
## Object
### Setting values
```javascript
const someObject = {
someKey: "some value",
anotherKey: {
a: "value A",
},
};
someObject.someKey = 1;
console.log(someObject.someKey); // 1
someObject.anotherKey.b = "value B";
console.log(someObject.anotherKey.b); // 'value B'
```
---
## Object
### Valid keys and values
```javascript
const someDerivedKey = "theKey";
const obj = {
0: "value 0",
[someDerivedKey]: -1,
derivedValue: condition ? "met" : "not met",
stringKey: [
{ x: 0.2, y: 1.1 },
{ x: -1.2, y: 2.1 },
],
"another string key": "value",
};
// notice that obj.key can only be used for string keys with no spaces
```
---
## Object
### Destructuring
```javascript
// basic destructuring
const { teams } = player;
// renaming
const { name: playerName } = player;
// nested
const {
stats: { points, assists, rebounds },
} = player;
```
---
## Object
### Spreading
```javascript
const user = {
name: "John",
lastName: "Doe",
email: "email@example.com",
};
const clone = { ...user };
```
---
## Object
### Spreading
```javascript
const prevState = {
theme: "light",
user: "email@example.com",
};
const update = {
theme: "dark",
highContrast: true,
};
// notice that the order matters
const nextState = {
...state,
...update,
};
```
---
## Object
### in
```javascript
const expense = { amount: 1, unitPrice: 2.22 };
if (!(totalPrice in expense)) {
const { amount, unitPrice } = expense;
expense.totalPrice = amount * unitPrice;
}
console.log(expense.totalPrice);
```
---
## Object
### for ... in
```javascript
const user = {
name: "John",
lastName: "Doe",
age: 42,
};
for (const key in user) {
console.log(`${key} has value: ${obj[key]}`);
}
```
---
## Object
### Main static methods
- `Object.entries(<object>)`
- `Object.freeze(<object>)`
- `Object.fromEntries(<entries>)`
- `Object.keys(<object>)`
- `Object.values(<object>)`
---
## Set
```javascript
const array = [1, 1, 2];
const set = new Set(array);
console.log(array);
console.log(set);
```
---
## Set
### Instance properties
- `<set>.size`
---
## Set
### Main instance methods
- `<set>.add(<item>)`
- `<set>.clear()`
- `<set>.delete(<item>)`
- `<set>.has(<item>)`
- `<set>.values()`
---
## Set
### Main instance methods
- `<set>.forEach(<fn>)`
- `<fn>`: `(<value>[, <value> [, <set>]]): void`
---
## Wraping up
- Topics covered
- Array
- Object
- Set
- Exercises
- Next session
- Coming up...
- Schedule
---
{"metaMigratedAt":"2023-06-17T14:40:56.532Z","metaMigratedFrom":"YAML","title":"Session 2: Basic Structured Types","breaks":true,"contributors":"[{\"id\":\"7bc28690-699b-4cf5-8a18-7fc3fddcbd0c\",\"add\":10192,\"del\":3722}]"}