TypeScript 入門の記録（３５）プロを目指す人のためのTypeScript入門（２０）（続）オブジェクトとは

今週もTypeScript入門の続きです。先週「オブジェクトとは」の途中だったので、続きから。

（続）オブジェクトとは

先週は、プロパティ名の指定方法のバリエーションを学習して、プロパティ名に計算結果をプロパティ名に適用する動的なプロパティ名を指定できるという自由さを体験したところで時間切れでした。今日は、オブジェクトのプロパティアクセス（値の取得と代入）から再開します。

オブジェクトのプロパティアクセス（値の取得と代入）

オブジェクトのプロパティには、式.プロパティ名という構文でアクセスします。これは直感的でわかりやすいです。もう1種類、アクセスするプロパティ名を動的に決めてアクセスする場合の構文は、式["プロパティ名"]です。こちらの構文は、前回の「オブジェクトは連想配列である」という説明とも一致しています。

プロパティのアクセスと動的なプロパティ名の確認

プロパティアクセスの方法が2種類あることを学習したところで、実はconsole.log(…)も、consoleのlogプロパティに関数が入っていて、関数呼び出し構文で関数を呼び出すことができるという解説が。プロパティには関数も割り当てることができるってことですね。

オブジェクトのプロパティとconst

さて、プロパティアクセスの例を実際に実行してみて、const userのプロパティageをインクリメントできているのに違和感がありました。「これ、const user って宣言されているのに代入できるの？」
その答えが、この節のコラムで解説されていて、オブジェクトそのものに代入はできないが、const 宣言されたオブジェクトのプロパティは再代入可能なんですね。まぁ、値の入れ物であるオブジェクトがconst定義されていると考えれば、その中身は再代入（入れ替え）可能ですね。ただ、オブジェクトをconst定義した場合にプロパティを書き換えが忌避される傾向にあるそうです。const で定義したプロパティを書き換えられないようにしたい場合には、読み取り専用プロパティを使うと良いようです。

スプレッド構文

オブジェクトの作成時にプロパティを別のオブジェクトのプロパティからコピーする構文が利用できます。便利～。クラスの継承に似ている気がしましたが、もっとシンプルですね。複数の既存オブジェクトに同じプロパティ名が存在する場合は、後から参照される方が採用されます。CSSで同じ属性値を複数定義したときに後の方で上書きされるのと似ている気がしました。

テキストのとおりにconsole.log(obj3)とすると[Object,Object]と出力された

テキストの例を実行してみたところ、console.log(`obj3 = ${obj3}`)は、obj3 = [object Object] と出力されたので、各プロパティ値を出力するように書き換えて再実行してみました。実際にどう出力されるか確認するの重要。obj1.bar: 456ですが、…obj1,…obj2 なので、obj2.bar:-999が適用されていました。では、これの順番を変えてみると良さそうです。試します。 

obj3を{…obj2,…obj1};と入れ替えてみた

期待どおり、obj2.bar 456 の方が採用されています。

スプレッド構文は初めて使いましたが、オブジェクトを構成する要素の組み合わせを表現できるので、うまく使うとプログラムの内容がわかりやすくできそうな気がしました。

さて、今日の学習はここまでにします。この続きは、また次の週末の予定です。