Zenn
Open23

JavaScript/TypeScript勉強メモ

JavaScript
hayaohayao

eventのプロパゲーションを説明できるようになりたい。

hayaohayao

オブジェクト

プロパティの集合

プロパティ

key : value　の組

数値

IEEE 754標準で規定された64ビット浮動小数点形式

文字列

16ビット値の列
UTF 16エンコーディング

Symbol

文字列でないプロパティ名

hayaohayao

条件付きプロパティアクセス (ES2020)

式?.識別子

JavaScriptではnullとundefinedだけがプロパティを持たない値。
nullとundefinedに対して通常のプロパティアクセスを使った場合、TypeErrorがスローされていまう。

条件付き呼び出し (ES2020)

関数名?.()

first defined 演算子 (??)

aに副作用が内場合、以下は等価

a ?? b
(a !== null && !== undefined) ? a : b

`||`演算子は最初にfalseと評価されない演算子を返す
hayaohayao

ループ

for/of

イテラブルなオブジェクトに対して使う

for/in

プロパティをループ

hayaohayao

オブジェクト

順序付けされていないプロパティの集合

オブジェクト自身のプロパティ以外に他のオブジェクトからプロパティを継承することができる。
この継承対象になるオブジェクトをプロトタイプという。

プロパティ属性

プロパティはプロパティ属性を持つ

  • 書き込み可属性
  • 列挙可属性
  • 再定義可属性

デフォルトでall ok.

生成法

  • オブジェクトリテラル
  • new演算子
  • Object.create()

ほぼすべてのオブジェクトがプロトタイプをもつが(__proto__プロパティを持つということ？)、prototypeプロパティをもつオブジェクトは比較的少数。

プロトタイプをもたないオブジェクトの例 Object.prototype
←他には？

hayaohayao

プロトタイプ

オブジェクトに関連付けられたオブジェクト

newとコンストラクタ呼び出しを使って生成されたオブジェクトはプロトタイプとしてコンストラクタ関数のprototypeプロパティを使う。

Object.create()

第一引数をオブジェクトのプロトタイプとして使用し、新しいオブジェクトを生成する。

メソッドの簡略記法

let square = {
  area: function() { return this.side : this.side }
  side: 10
}

let square = {
  area(): { return this.side : this.side }
  side: 10
}
hayaohayao

配列

配列のインデックス 32ビットの整数値

配列の生成

Array.of()

引数で指定した値をもつ配列を返す

Array.from()

イテラブルなオブジェクトを指定

配列イテレーターメソッド

forEach()

第一引数に関数を渡す
要素ごとに指定された関数を呼び出す。
その関数には配列要素の値、配列要素のインデックス、配列自身を渡す

  • map
  • filter
  • find
  • findIndex
  • every
  • some
  • reduce
  • reduceRight
  • flat
  • flatMap
  • concat
  • push
  • pop
  • shift
  • unshift
  • slice
  • splice
  • fill
  • copyWithin
  • indexOf
  • lastIndexOf
  • includes
  • sort
  • reverse
hayaohayao

関数

アロー関数

  • 関数が定義された環境のthisキーワードを継承する
  • 呼び出しコンテキストで定義されない
  • prototypeプロパティをもたない

thisはキーワード

省略可能なパラメータとデフォルト値

fucntion foo(o, a = [] ) {
}

残余パラメータ

function foo(first, ...rest) {
}
hayaohayao

callとapply

call()やapply()を使うことで、あるオブジェクトのメソッドであるかのように関数を呼び出せる。

callとapplyは引数の渡し方が違う

bind

オブジェクトに関数をbindする

Reactのクラスコンポーネントでよく使われていたっぽい。

関数の部分適用にも使える

hayaohayao

クラス

同じプロトタイプオブジェクトからプロパティを継承する一覧のオブジェクトをクラスという。

hayaohayao

モジュール

実装のカプセル化

  • クラス、オブジェクト、クロージャを使ったモジュール
  • require()を使ったNodeモジュール
  • export import import()を使ったES6モジュール
hayaohayao
  • クラス、オブジェクト、クロージャを使ったモジュール
  • require()を使ったNodeモジュール

関数を返す無名関数を定義してその場で実行することでvisibilityをコントロール

// returnされたものだけ使える
const stat  =(fucntion() {
      //....
      return { mean, stddev };
}());
hayaohayao

ES6モジュール

普通のJavaScriptスクリプトの場合、変数や関数、クラスをトップレベルに宣言した場合、すべてのスクリプトで共有されりグローバルなコンテクストに含まれる。モジュールを使った場合、ファイルごとに独自のプライベートなコンテキストを持つ。

  • export
  • expoert default

exportしたものは
import { ~~ } from './ '
export defalutしたものは
import (名前は自由) from './'
みたいにimportする。

import()

動的インポート
Promiseオブジェクトが返される
動的インポートが完了するとPromiseがfullfilledになる。
静的importでimport *と記述したときと同じようなオブジェクトが生成される。

import.meta.url

hayaohayao

非同期JavaScript

非同期関数の難しさ

エラー処理

Promiseではエラーを扱う方法が標準化されている。

Promise

満たされた状態
失敗した状態

解決された状態
解決される　= コールバックから値が戻される

戻された値がプロミスでなかったら、即座に満たされる。
戻された値がプロミスなら、満たされない

hayaohayao

Webブラウザ上のJavaScript

WindowオブジェクトのhistoryプロパティにそのウィンドウのHistoryオブジェクトが格納される

Historyオブジェクト

ドキュメントのリスト
forward() back()

hayaohayao
hayaohayao
hayaohayao
hayaohayao

イベントループの理解

https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://www.youtube.com/watch?v=cCOL7MC4Pl0

タスクやマイクロタスクを処理したりDOMを処理してレンダリングしたりする単一のループ（＝イベントループ）が存在する。

fetchがネットワークアクセスしたり、タイマーの起動などは別のスレッドで行われる

イベントループの振る舞い

タスクキューにタスクがあれば、1つ取り出し実行する。
マイクロタスクキューのタスクが無くなるまで、1つずつ取り出し実行する。
描画を更新する。
タスクキューに余裕がある場合は RequestIdleCallback の仕様に基づきバックグラウンドタスクをキューに積む。
最初に戻る。

https://zenn.dev/qnighy/articles/345aa9cae02d9d
から引用