ウェルノウン Symbol
Symbol.iterator などを使って動作をカスタマイズします。
「ウェルノウン Symbol」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ウェルノウンシンボル
ウェルノウンシンボルは、Symbol オブジェクトに保存された組み込みシンボルです。反復処理や変換など、言語機能に対するオブジェクトの動作をカスタマイズできます。
console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toPrimitive)Symbol.iterator
Symbol.iterator は、for-of ループやスプレッド構文でオブジェクトを反復処理する方法を定義します。組み込みの配列や文字列には、すでに実装されています。
const arr = [10, 20]
const it = arr[Symbol.iterator]()
console.log(it.next().value)オブジェクトを反復可能にする
Symbol.iterator メソッドを追加し、next メソッドを持つイテレーターを返すようにすると、任意のオブジェクトを for-of ループで使えるようになります。
const range = {
from: 1,
to: 3,
[Symbol.iterator]() {
let cur = this.from
const last = this.to
return {
next() {
return cur <= last ? { value: cur++, done: false } : { value: undefined, done: true }
}
}
}
}
for (const n of range) {
console.log(n)
}スプレッドで反復処理する
Symbol.iterator はスプレッド構文も制御するため、カスタムの反復可能オブジェクトを配列に展開できます。
const nums = {
[Symbol.iterator]() {
let i = 0
return { next() { return i < 3 ? { value: i++, done: false } : { value: undefined, done: true } } }
}
}
console.log([...nums])Symbol.toPrimitive
Symbol.toPrimitive を使うと、数値、文字列、またはデフォルトのコンテキストで、オブジェクトがプリミティブ値へ変換される方法を制御できます。
const money = {
amount: 50,
[Symbol.toPrimitive](hint) {
if (hint === "number") return this.amount
return "$" + this.amount
}
}
console.log(+money)
console.log(money + "")ヒント引数
変換ハンドラーは number、string、default のいずれかのヒントを受け取るため、それぞれの状況に適した値を返せます。
const obj = {
[Symbol.toPrimitive](hint) {
return hint
}
}
console.log(+obj)
console.log(obj + "")
console.log(String(obj))Symbol.toStringTag
Symbol.toStringTag を使うと、デフォルトの toString がオブジェクトに対して返すテキストをカスタマイズできます。カスタムの型ラベルに便利です。
const widget = {
[Symbol.toStringTag]: "Widget"
}
console.log(Object.prototype.toString.call(widget))Symbol.hasInstance
Symbol.hasInstance を使うと、クラスやオブジェクトで instanceof 演算子の動作をカスタマイズできます。
class Even {
static [Symbol.hasInstance](num) {
return num % 2 === 0
}
}
console.log(4 instanceof Even)
console.log(3 instanceof Even)組み込み機能も使っている
配列、マップ、セット、文字列はすべて Symbol.iterator を実装しています。そのため、for-of やスプレッド構文を自然に利用できます。
const set = new Set([1, 2, 3])
console.log([...set])重要な理由
ウェルノウンシンボルは拡張ポイントです。特別扱いすることなく、オブジェクトを組み込みの言語操作に自然に統合できます。
const list = {
items: ["a", "b"],
[Symbol.iterator]() {
return this.items[Symbol.iterator]()
}
}
for (const x of list) {
console.log(x)
}ウェルノウンシンボルを見つける
Symbol オブジェクトは、これらを静的プロパティとして公開しています。必要な場所で Symbol.iterator や Symbol.toPrimitive のように参照できます。
console.log(typeof Symbol.iterator)
console.log(typeof Symbol.toStringTag)
console.log(typeof Symbol.hasInstance)クイックチェック
ウェルノウンシンボルに関する知識を確認しましょう。
まとめ
まとめ: ウェルノウンシンボルは言語の動作をカスタマイズします。
- Symbol.iterator は for-of とスプレッド構文を制御します
- Symbol.toPrimitive はヒントによる変換を制御します
- Symbol.toStringTag はオブジェクトにラベルを付けます
- Symbol.hasInstance は instanceof の動作をカスタマイズします
const r = { [Symbol.iterator]() { let i = 0; return { next() { return i < 2 ? { value: i++, done: false } : { value: 0, done: true } } } } }
console.log([...r])よくある質問
「ウェルノウン Symbol」レッスンは無料ですか？
はい。「ウェルノウン Symbol」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「ウェルノウン Symbol」で何を学びますか？
Symbol.iterator などを使って動作をカスタマイズします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ウェルノウン Symbol」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。