はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

反復処理についての理解を深める

本題

1.for...inと列挙可能性

列挙可能性(enumerable)とはディスクリプターの一種

for...inとは

列挙可能プロパティに対して、順不同で反復処理を行う
プロトタイプチェーン内も列挙対象となる
自分自身に設定されているプロパティのみを列挙したい場合はhasOwnPropertyメソッドを使う
Symbolは列挙の対象にはならない

例1

基本的なfor...inの書き方

// オブジェクトを定義
const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3'
}

// for..inを記述
for(let key in obj){
	// このkeyの値にはprop1,prop2,prop3の値(プロパティ)が入っている
	console.log(key);
	// keyを元にobjの値を取得すると
	console.log(key, obj[key]);
	// prop1 value1...と出力される
}

例2

オブジェクトのプロトタイプに対して独自のメソッドを追加した場合

// オブジェクトを定義
const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3'
}

// オブジェクトのプロトタイプのhelloメソッドを定義
// このように書くとhelloメソッドまで出力される
Object.prototype.hello = function(){}

// 上記のhelloメソッドまで出力させないようにenumerableを追加する
// definePropertyを使う
// 第一引数はメソッドが格納されているprototype、第二引数はメソッド名、第三引数は設定値
Object.defineProperty(Object.prototype, "hello", {
	// 列挙しない設定になる(出力結果から消える)
	enumerable: false
})

// 実際にディスクリプターを確認する
const a = Object.getOwnPropertyDescriptor(Object.prototype, "hello");
// 出力結果でenumerable: falseとなっていることがわかる
console.log(a);

// 試しにprop1を列挙対象から外してみるとコンソールからprop1が消える
Object.defineProperty(obj, "prop1", {
	enumerable: false
})

for(let key in obj){
	console.log(key, obj[key]);
}

例3

例２のようなやり方ではなくhasOwnPropertyを一般的には使う

// オブジェクトを定義
const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3'
}

Object.prototype.hello = function(){}

for(let key in obj){
	// 第一引数にkey情報を入れる
	// このkeyが反応し、自分自身(obj)のプロパティかどうか判断しif文でtrueの場合出力する
	if (obj.hasOwnProperty(key)){
		console.log(key, obj[key]);
	}
}

例4

Symbolを使用した場合

// 変数sにSymbolを入れる
const s = Symbol();

// オブジェクトの中にsも混ぜてあげる
const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3',
	// 変数をプロパティの値として使用する際は[変数]と表記する
	[s]: "value4"
}

for(let key in obj){
	// Symbolの値が出力されていない
		console.log(key, obj[key]);
}

// ディスクリプターで確認すると
const b = Object.getOwnPropertyDescriptor(obj, s);
// {value: 'value4', writable: true, enumerable: true, configurable: true}と出力され、enumerableがtrueとなっていることがわかる
console.log(b);

今日はここまで！

参考にさせて頂いた記事