---
# System prepended metadata

title: React勉強会_vol.3
tags: [勉強会中のメモ]

---

# React勉強会_vol.3

###### tags:`勉強会中のメモ`

## 前回まででなにかしら共有タイム（もしあれば）

## 今日やったこと

### JavaScript基礎

`2-6. 配列やオブジェクトの便利な構文`から！

* プロパティ名のショートハンド
    * Reactではよくでてくるらしい

```javascript=
const baz = 65536;
const obj2 = { baz };
console.log(obj2); // { baz: 65536 }
```

* 分割代入

```javascript=
const obj = { name: 'Kanae', age: 24 };
const { name, age } = obj;
console.log(name, age); // Kanae 24

// いちいち const name = obj.name;しない
```

* スプレッド構文
    * 配列やオブジェクトの名前の前に ... をつけることでその中身が展開される
    * 関数のレストパラメータ構文と同じ

```javascript=
const obj1 = { a: 1, b: 2, c: 3, d: 4 };
const obj2 = { ...obj1, d: 99, e: 5 };　// これ！
console.log(obj2); // { a: 1, b: 2, c: 3, d: 99, e: 5 }
```

* これようわからん。。

```javascript=
const user = {
    id: 1,
    name: 'Patty Rabbit',
    email: 'patty@maple.town',
    age: 8,
};
const { id, ...userWithoutId } = user;
```

#### this

* 受け取る側で明示する

* よーわからん..

```javascript=
> const dump = function () { console.log('`this` is', this); };
> const obj = new dump();
`this` is dump {}
> obj
dump {}
> dump.prototype
dump {}
> obj !== dump.prototype // obj は dump.prototype とアドレスを共有しない新規のオブジェクト
true
```
new演算子について：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new