Q&A
どうすれば「String型のプロパティ」と「Symbol型のプロパティ」の区別がつけられると思いますか。
{[SYM]: 4}ではなく、{SYM: 4}と書いたとして、このプロパティは「String型」と「Symbol型」のどちらと判定されると考えているのでしょうか。
お世話になります。
質問内容は、JavaScriptのプリミティブ型のシンボルについてです。
書籍からの抜粋ですが、
『const SYM = Symbol();
const o = {a: 1,b: 2,c: 3,[SYM]: 4,};』
というのがあります。
質問内容は、なぜシンボルのキーを[SYM]と書いているのかという点です。
その書籍の解説部分を見ても、『シンボルをプロパティに含むオブジェクトをリテラル表記するためで、[…]は「計算値によるメンバーアクセス演算子」である』と書かれています。
この「計算値によるメンバーアクセス演算子」はオブジェクトの値へのアクセス方法のブラケット記法をさしていると思いますが、そうだとしても内容が理解できないため、この考えが違っているのかもしれません。
そのあとの説明もあるのですが、この部分が分からないため、理解できていません。
知見ある方、どうかご教授よろしくお願いします。
（書籍名「初めてのJavaScript」第３版 オライリー社 P162）
追伸、
今１件、こちらのサイトで質問中でまだ自分の中で解決できていないためクローズにできていませんが、新たに質問を書かせてもらいました。
スレッドをいくつも立ててしまい申し訳ありません。
いつも回答ありがとうございます。
それは、String型と思います。
質問を重ねてしまいますが、それを区別するためにブラケット（Computed Property）で書く必要があるということでしょうか。
今でもなぜSymbolのプロパティがComputed Propertyで書く必要があるのかすっきりとは理解はできていません。
maisumakunさんに「そうとしか書けない」と教えていただいたので、Stringと区別するためにComputed Propertyを使用すると覚えておこうとは思っています。
文法上、String型とSymbol型は区別できる必要があります。
> それは、String型と思います。
そこまで理解できているのなら、Symbol型のプロパティをドット記法を書こうとしてみれば自ずとわかると思うのですが…。
どうすれば、ドット記法で書けると考えていたのでしょうか。
[SYM]と書いている時点で、SYMは文字列と考えていいですか？
ブラケット記法の中身は文字列と聞いたことがあるので
でもSYMは、シンボルですよね？
ドット記法では書けないが正解でいいですか。
ブラケット記法では、代入値がSymbol型なら、Symbol型のプロパティとして扱います。
代入値がSymbol型以外なら、String型に変換してString型のプロパティとして扱います。
ドット記法はString型のプロパティのみです。
> でもSYMは、シンボルですよね？
繰り返しますが、typeof演算子で確認してください。
console.log(typeof SYM);
この質問の回答をいただき、分かったことを自分用のメモ書きとして、また同じような疑問をもってこの質問にたどりついた方の少しでもお役に立てるように自分なりにまとめておきます。
私はJavaScriptの知識が浅いため間違っている箇所があるかもしれません。
このまとめで、なにか気づかれた点があればご教授いただけるとありがたいです。
【質問】なぜ、SymbolのプロパティがComputed Propertyで書く必要があるのか
まず、Computed Propertyとは
オブジェクトのキーなどをブラケット[…]で表記する方法
[…]の中身は、計算式（※１）か変数
Computed Propertyについては以下のサイトが分かりやすいと思います。
https://ginpen.com/2017/12/07/computed-property-name/
質問の回答として、
Symbolをオブジェクトのキーとして使用する時は、Symbolは変数に代入して（またはドット記法のSymbol.xxxとして）使用するため、 ブラケット[…]となる。
また、逆の視点からキーがStringかSymbolかの区別はブラケット[…]表記かどうかで区別する。
【補足】
１（※１）．Computed Propertyで書く計算式の例
[2*5]、['foo' + 'bar']など
２．ブラケット記法（オブジェクト名[キー]）では、
中身がSymbol型ならSymbol型のプロパティ
中身がSymbol型以外ならString型に変換してString型のプロパティとして扱う
ドット記法（オブジェクト名.キー） は、String型のプロパティのみ
３．Symbol型を指定するには「変数名」もしくは「Symbol.xxxx」のような式の書式でプロパティを指定する必要がある。
そのため、Symbolをキーとして使用する時[Symbol. xxxx]という書き方もできる。
４．型の確認は、typeof 〇〇
で行う。
以上になります。
回答いただいた方、大変ありがとうございました。
回答2件
0
ベストアンサー
なぜシンボルのキーを[SYM]と書いているのかという点です。
そうとしか書けないからです。
JavaScriptにシンボルリテラルは存在せず、シンボルを得る手段は式の結果としてのものしかありません。よって、オブジェクトリテラルにシンボルキーを混ぜ込むにはComputed Propertyを使うしか手段がありません。
なお、シンボルでなくても、Computed Propertyは使用できます。
js
1const a = { [2*5]: 'abc', ['foo' + 'bar']: 7 }
投稿2022/11/06 07:09
編集2022/11/06 07:12
総合スコア146674
> 内容が理解できないため
何がわからないか、もう少し詳しく説明していただけないでしょうか。
いつもすいません。ありがとうございます。
「Computed Property」について
https://ginpen.com/2017/12/07/computed-property-name/
こちらのサイトで調べてみました。
Computed Property自体知らなかったため「なるほど」と思いました。
この質問は実は、いつも回答者様に時間を取ってもらうのが申し訳なく、本日、有料の質問サイトに登録してほぼ同内容で質問したのですが、スプレッド構文の説明サイトを紹介されました。結局、解決できなかったため、こちらのサイトで質問しなおさせていただきました。
teratailのサイトでは、質問して10分くらいで解決するのでありがたいです。
これからもどうかよろしくお願いします。
『> 内容が理解できないため
何がわからないか、もう少し詳しく説明していただけないでしょうか。』
おかげさまでだいたい分かったのですが、しいて言うならなぜSymbolはComputed Propertyを使用するかという点です。Symbolは計算はしてないですよね？
> Symbolは計算はしてないですよね？
計算しなくても、「変数をオブジェクトリテラルのプロパティに入れ込む」ためにもComputed Propertyが必要です。
「変数を…」なんですか。
その説明の後段に、
『const o3 = {a: 1,b: 2,c: 3};
o3[SYM] = 4;』
というのが続きます。
この場合のSYMはconstもletも使用していませんが、変数扱いになりますか。
またo3[SYM]と書いた時点で、型はSymbolでしょうか？
質問を重ねてしまいすいませんm(__)m
@susumu-99 さん
「Computed Property」は著者が独自に呼称しているに過ぎません。
ブラケット記法で [] 内に置けるのは式(Expression)です。
https://262.ecma-international.org/13.0/#sec-property-accessors
Symbol型を指定するには「変数名」もしくは「Symbol.xxxx」のような式の書式でプロパティを指定する必要があります。
> この場合のSYMはconstもletも使用していませんが、変数扱いになりますか。
おそらく、前のコードのconst SYM = Symbol();を前提としたものでしょう（そうでないと、SYMは未定義ということになってしまいます）。
> またo3[SYM]と書いた時点で、型はSymbolでしょうか？
型はtypeof演算子で確認できます。
maisumakunさん、think49さんいつも丁寧なありがとうございます。
またあとでゆっくり考えさせてもらいます。
0
プロパティアクセサには二種類の文法があります。
対象のプロパティ "foo" がString型なら、どちらの書き方も可能です。
javascript
1object.foo; 2object['foo'];
しかし、Symbol型のプロパティは違います。
javascript
1'use strict'; 2const arrayLike = { 3 0: 'a', 4 1: 'b', 5 2: 'c', 6 length: 3, 7 [Symbol.iterator]: Array.prototype[Symbol.iterator] 8}; 9 10console.log(arrayLike.length); // 3 11console.log(arrayLike['length']); // 3 12console.log(arrayLike[Symbol.iterator]); 13console.log(arrayLike.Symbol.iterator); // TypeError: Cannot read properties of undefined (reading 'iterator')
arrayLike.Symbol.iterator は「String型のプロパティ "Symbol" -> String型のプロパティ "iterator"」を参照しようとします。
従って、Symbol型のプロパティはドット記法で書けません。
投稿2022/11/06 08:11
編集2022/11/06 08:23総合スコア18194
こちらに気づかず、うえの質問のコメントに書いてしまいました。
レベルが高くてあとでもう１度読み返します。
ありがとうございました。
今からthink49さんの回答を読み返すとかなり深いところまで教えていただいてるんですね。
分からなかった箇所がスッキリした感じがします。
JavaScriptっておもしろいですね！
あとECMA Scriptのサイトの紹介もありがとうございました。
maisumakunさんとベストアンサーの甲乙をつけがたいですが、今回は最初に回答いただいたmaisumakunさんをベストアンサーとさせていただきたいと思います。
いつも回答をくださり感謝しています。ありがとうございました。
この質問の回答をいただき、分かったことを自分用のメモ書きとして、また同じような疑問をもってこの質問にたどりついた方の少しでもお役に立てるように自分なりにまとめておきます。
私はJavaScriptの知識が浅いため間違っている箇所があるかもしれません。
このまとめで、なにか気づかれた点があればご教授いただけるとありがたいです。
【質問】なぜ、SymbolのプロパティがComputed Propertyで書く必要があるのか
まず、Computed Propertyとは
オブジェクトのキーなどをブラケット[…]で表記する方法
[…]の中身は、計算式（※１）か変数
Computed Propertyについては以下のサイトが分かりやすいと思います。
https://ginpen.com/2017/12/07/computed-property-name/
質問の回答として、
Symbolをオブジェクトのキーとして使用する時は、Symbolは変数に代入して（またはドット記法のSymbol.xxxとして）使用するため、 ブラケット[…]となる。
また、逆の視点からキーがStringかSymbolかの区別はブラケット[…]表記かどうかで区別する。
【補足】
１（※１）．Computed Propertyで書く計算式の例
[2*5]、['foo' + 'bar']など
２．ブラケット記法（オブジェクト名[キー]）では、
中身がSymbol型ならSymbol型のプロパティ
中身がSymbol型以外ならString型に変換してString型のプロパティとして扱う
ドット記法（オブジェクト名.キー） は、String型のプロパティのみ
３．Symbol型を指定するには「変数名」もしくは「Symbol.xxxx」のような式の書式でプロパティを指定する必要がある。
そのため、Symbolをキーとして使用する時[Symbol. xxxx]という書き方もできる。
４．型の確認は、typeof 〇〇
で行う。
以上になります。
回答いただいた方、大変ありがとうございました。
最後のコメントはトップに入れるつもりが間違えてここに入れてしまいました。
（あとでトップにも入れました。）
申し訳ありません、失礼しました。
あなたの回答
tips
プレビュー
