javascript Symbolの使い方

2020.09.25
javascript
javascript

javascriptで、ES6で追加された新しいプリミティブ型であるSymbolの簡単な使い方を記述してます。

1. 環境
2. Symbolの使い方

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

Symbolの使い方

まずは、type ofで、Symbolのデータ型を確認してみます。

const hoge = Symbol();
console.log(typeof hoge);

1 2	const hoge = Symbol(); console.log(typeof hoge);

実行結果は「symbol」となります。

Symbolは、同じ名前で利用しても、毎回新しいオブジェクトを生成するため、必ずユニークとなります。

const sym1 = Symbol("hoge");
const sym2 = Symbol("hoge");
console.log(sym1 === sym2); // false

const sym1 = Symbol("hoge");

const sym2 = Symbol("hoge");

console.log(sym1 === sym2); // false

コンソールに出力すると、まったく同じにように見えます。

const sym1 = Symbol("hoge");
const sym2 = Symbol("hoge");

console.log(sym1);
console.log(sym2);

const sym1 = Symbol("hoge");

const sym2 = Symbol("hoge");

console.log(sym1);

console.log(sym2);

実行結果

また、Symbolは、オブジェクトのプロパティとしても利用できます。

const hoge = Symbol();
const obj = {
  [hoge]:"hoge"
};
 
console.log(obj[hoge]); //hoge

const hoge = Symbol();

const obj = {

[hoge]:"hoge"

};

console.log(obj[hoge]); //hoge

ただし、getOwnPropertyNamesで取得しても、表示されません。

const hoge = Symbol("hogehoge");

const obj = {
  foo:"foo",
  [hoge]:"hoge",
  bar:"bar",
};
 
console.log(Object.getOwnPropertySymbols( obj ));

const hoge = Symbol("hogehoge");

const obj = {

foo:"foo",

[hoge]:"hoge",

bar:"bar",

};

console.log(Object.getOwnPropertySymbols( obj ));

実行結果

symbolのプロパティを取得する場合は、以下となります。

const hoge = Symbol("hogehoge");

const obj = {
  foo:"foo",
  [hoge]:"hoge",
  bar:"bar",
};
 
console.log(Object.getOwnPropertySymbols( obj ));

const hoge = Symbol("hogehoge");

const obj = {

foo:"foo",

[hoge]:"hoge",

bar:"bar",

};

console.log(Object.getOwnPropertySymbols( obj ));

実行結果

javascript Symbolの使い方

環境

Symbolの使い方

javascript URLをエンコードする 2020.09.25

Ruby on Rails scaffoldを使用してCRUDを作成する 2020.09.25