0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】関数とオブジェクト⑲ Symbol

Posted at

#はじめに

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

前回の記事

#目的

  • 関数とオブジェクトについての理解を深める

#本題
###1.Symbol

Symbolとはプロパティの重複を避けるために必ず一意の値を返す関数

####例1

Symbolの使い方

// Symbolを定義
// コンストラクター関数とは違い、new演算子を使わない
const a = Symbol();
// Symbol()と出力される
console.log(a);
// 文字列や数値も引数として渡せる
const b = Symbol("hello");
// Symbol(hello)と出力される
console.log(b);
// 例えば同じ値を別な変数に入れると
const c = Symbol("hello");
console.log(c);
// 下記の結果はfalseとなる
console.log(b === c);
// 一意の値なのでそれぞれ別な値として識別される
// Symbolはプリミティブ型のひとつなので、typeofで確認するとsymbolというデータ型となる
console.log(typeof c);

####例2

どのように利用されているのか


// new演算子を使用して文字列を作る
const str = new String("Jun");
console.log(str);
// 下記のように記述するとSymbolをキーにしたプロパティがプロトタイプに格納される
String.prototype[s] = function(){

}
// 出力結果の中にSymbol(hello): ƒ () が追加される
String.prototype[s2] = function(){

}
// このようにしても同じ名前のプロパティが格納されているが、別々のプロパティとして認識される

####例3

より詳しい使い方

const s = Symbol("hello");
const s2 = Symbol("hello");
console.log(typeof s);

const str = new String("Jun");
console.log(str);
String.prototype[s] = function(){
  // returnでhello とthis(外で定義した値)を返す
  return "hello " + this;
}

const jun = "Jun";
// Symbolを使っているので、ドット記法ではなくブラケット記法で書く
console.log(jun[s]());
// hello junと出力される

今日はここまで!

#参考にさせて頂いた記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?