本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
4.1 オブジェクト
知らない単語
-
プリミティブとは
- 複雑な構造を形作る際の構成要素や基本的な構造や要素の事
-
文字列リテラルとは
- プログラミング言語で記述される、0文字以上の連続した文字列を表す定数
学んだこと
-
オブジェクト
オブジェクトは簡単に言うと特殊な機能を持つ連想配列である
オブジェクトは波括弧 {…}とプロパティから成る
プロパティは「key:value」のペアで、keyは文字列で、valueは何でも良い -
書き方
プロパティを「key: value」のペアの形式で {...} に置くと
let world = { // オブジェクト
name: "Bill", // キー "name" に値 "Bill" が格納される
age: 30 // キー "age" に値 30 が格納される
};
コロンの前がキー、コロンの右が値である -
角括弧
複数語のプロパティの場合、ドットを使用するとエラーになるので、任意の文字列で動作する「角括弧表記」を使う
エラーのコード
user.likes world = false;
正しい書き方
let user = {};
user["likes world"] = false;
- プロパティ名の制限
変数はfor, let, return などの予約語とは使えないが、オブジェクトプロパティではこの制限は無い
let hello = {
for: 2,
let: 4,
return: 6
}
などと書ける
感想
- オブジェクトプロパティで、予約語が使えない事は知らなかった。予約語を変数名にする事はなかなか無いと思うが、忘れないようにしたい。
4.2 オブジェクト参照とコピー
知らない単語
- マージとは
- 複数のファイルやデータを、決められたルールに従って統合する事
学んだこと
- 参照による比較
2つのオブジェクトが等しいのは、同一のオブジェクトである場合のみ
例えば、下記はaとb同じオブジェクトを参照しているため、それらは等しいということになる
let a = {};
let b = a; // 参照のコピー
alert( a == b ); // true, 両方の変数は同じオブジェクトを参照
alert( a === b ); // true
-
クローンとマージ, Object.assign
オブジェクト変数のコピーは、同一オブジェクトへの参照をもう1つ作る
オブジェクトを複製する必要がある場合も参照によるコピーで十分である -
ネストされたクローン
「本当のコピー」(クローン)を作るには、Object.assign を使ったコピーをするか、 「_.cloneDeep(obj)」のような deep cloning関数を使う必要がある
感想
- 変数をコピーしたり、それを引数として渡すと、オブジェクトではなく、参照がコピーされるというのは重要なので、勘違いしないように覚える。
4.3 ガベージコレクション
知らない単語
- ガベージコレクションとは
- コンピュータプログラムが動的に確保したメモリ領域のうち、不要になった領域を自動的に解放する機能
学んだこと
-
到達性
端的に言うと、グローバル変数は様々な所から参照されるから開放されない
ファンクションの中の値も使用中は開放されない -
連結されたオブジェクト
例えばこのようなコードがある
function marry(man, woman) {
woman.husband = man;
man.wife = woman;
return {
father: man,
mother: woman
}
}
let family = marry({
name: "John"
}, {
name: "Ann"
});
図で表すと下図のようになる
ゴミ箱マークの部分は消えても参照できるので問題無い事がわかる
- 到達不可能な島
下図は独立しているので、ゴミ箱を削除しても問題ない事がわかる
family = null;
感想
- どこのオブジェクトを削除しても参照できるかすぐに判断できるようにしたい。
4.4 オブジェクトメソッド, "this"
知らない単語
-
オブジェクトリテラル
- オブジェクトの値の事
-
コンテキスト
- 利用者の意図や状況、環境などの総体を表す
学んだこと
-
メソッド
classの中に定義する関数の事、それ以外はfunction -
this
自分自身、変数の中などでもう1回自分を呼び出したい時にドットで呼び出す
例えば
let user = {
name: "John",
age: 30,
sayHi() {
alert( user.name ); // エラーにつながる
}
};
というコードの場合「alert」の呼び出しで、「user.name」でなく「this.name」を使わなければエラーになってしまうので「this」がある
- アロー関数は「this」を持たない
アロー関数は特別で、「this」を持たない
このような関数で「this」を参照した場合、外部の関数から取得される
下記のコードでは、arrow()は、外部の user.sayHi() メソッドから「this」を使う
let user = {
firstName: "Ilya",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // Ilya
感想
- 「this」の使い方を間違えないように気をつける。ドットで呼び出すのは初めて知った。
最後に
オブジェクトの意味や役割をしっかり理解できていなかったので、この章で理解が深まったと思う。
また、「this」を使う時はどの変数に付けるかなど間違えないようにする。