### 2章 React学習に必要なJavaScriptの知識
- アロー関数
- オブジェクトの返却は()をつける
```js
const person = (firstName, lastName) => ({
// objectで返すときは()をつけないとエラーになる
first: firstName,
last: lastName
});
```
- デストラクチャリング
```js
const sandwitch = {
bread: "dutch crunch",
meat: "tuna",
}
const { bread, meat } = sandwitch;
console.log(bread, meat) // dutch crunch tuna
```
- returnなしでもOK
- オブジェクトリテラル
- スプレッド構文
### 第3章 JavaScriptにおける関数型プログラミング
Reactは関数型
- renderという高階関数に、DOM構造を渡していく
```js
const { render } = ReactDom;
const Welcome = () => (
<div id="welcome">
Welcome
</div>
);
render (<Welcome />, document.getElementById("target"))
```
#### 関数型プログラミングの基本概念
- イミュータブルなデータ
- オブジェクトや配列はコピーしてから使う
- オブジェクトは`Object.assign`を使う
- スプレッド構文を使うとさらに完結
```js
function reateColor(color, rating) {
return Object.assign({}, color, { rating });
}
// 上と同じ
function reateColor = (color, rating) => ({
...color,
rating
})
```
- 配列への追加は、`Array.concat`を使う
```js
const addColor = (title, array) => array.concat({title})
```
- 純粋関数→アプリケーションの状態を変更したりしない
- 関数は少なくと1つの引数を受け取らなければならない
- 関数は値もしくは他の関数を戻り値として返却しなければならない
- 関数は引数や関数外では定義された変数に直接変更を加えてはならない
```js
const frederick = {
name: "frederick",
canRead: false,
canWrite: false
}
const selfEducate = person => ({
...person,
canRead: True,
canWrite: True
})
// 元々のfrederickに副作用をもたらすことなく、値がtrueになった新たなobjectを返す
selfEducate(frederick)
```
- データの変換はビルトイン関数を使う(受け取った配列をコピーして別の配列として返す)
- join
- map
- reduece
- filter
- objectから配列を得るときは、Object.keys
```js
const schools = {
a: 10,
b: 2,
c: 5
}
const schoolArray = Object.keys(schools).map(key => ({
name: key,
wins: schools[key]
}))
// [
// {
// name: a,
// wins: 10
// },
//]
```
- カリー化
```js
const userLogs = userName => message =>
console.log(`${userName} -> ${message}`);
const log = userLogs('granddpa23');
```