1638379320
JavaScriptでのオプションのチェーニングを作成する
オプションのチェーンは、JavaScriptの最新機能の1つです。この機能は重要ではないように思われるかもしれません。ただし、多くの時間、コード、および多くの頭痛の種を節約できます。このチュートリアルでは、この機能の概要、機能、およびより優れたJavaScriptコードを作成するための使用方法を学習します。
問題に挑む
オブジェクトを操作したことがありますか？そうすれば、次の問題に遭遇するのがいかに簡単かがわかります。オブジェクトがあるとしましょう。このオブジェクトにはいくつかのプロパティがあり、場合によってはいくつかのメソッドもあります。次に、これらのプロパティまたはメソッドのいくつかを操作するとします。
これを行うのは非常に簡単です。ドットまたは角括弧表記を使用して、任意のプロパティにアクセスできます。同じことがメソッドにも当てはまります。そのオブジェクトに存在しないプロパティまたはメソッドにアクセスしようとするとどうなりますか？存在しないプロパティにアクセスしようとすると、が表示されますundefined。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "location"
console.log(myObj.location)
// Output:
// undefined
より深くネストされているプロパティにアクセスしようとするとどうなりますか？何かオブジェクトがあると想像してください。このオブジェクトにはいくつかのプロパティが含まれています。これらのプロパティの1つの値もオブジェクトであると想定されています。このオブジェクトには、いくつかの追加のプロパティが含まれている必要があります。このネストされたオブジェクトが存在しない場合はどうなりますか？
その存在しないネストされたオブジェクトのプロパティにアクセスしようとするとどうなりますか？あなたは取得しませんundefined。代わりに取得するのはTypeErrorです。JavaScriptは、定義されていないオブジェクトのプロパティを読み取れないと文句を言います。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "location"
console.log(myObj.location)
// Output:
// undefined
// Try to access non-existing property "city"
// in non-existing object "location"
console.log(myObj.location.city)
// Output:
// TypeError: Cannot read property 'city' of undefined
「古い」方法で問題を解決する
この「古い」方法でこの問題を解決するには、論理積（&&）演算子を使用する必要があります。演算子を使用して、city存在しないオブジェクトの存在しないプロパティの問題を解決してみましょう。location&&
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "city"
// in non-existing object "location"
// using the && operator
console.log(myObj && myObj.location && myObj.location.city)
// Output:
// undefined
オプションのチェーンの簡単な紹介
ご覧のとおり、存在しないオブジェクトの存在しないプロパティの問題を&&演算子で解決するのは簡単です。このソリューションの欠点は、より多くのコードが必要になることです。作成する必要のあるコードの量は、取得する必要のある深さによって異なります。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Going down the rabbit hole
console.log(myObj && myObj.location && myObj.location.city && myObj.location.city.address && myObj.location.city.address.houseNumber)
// Output:
// undefined
オプションのチェーンのしくみ
オプションのチェーンのおかげで、そのコードはすべて不要になりました。オプションのチェーンが機能する方法は簡単です。いくつかのプロパティにアクセスするためにそれを使用するとします。アクセスしたいプロパティの前の部分がどちらundefinedかnullである場合、またはそれは評価を停止してを返しundefinedます。
このように言いましょう。オプションのチェーンを使用すると、JavaScriptは常に、アクセスするプロパティが存在する場合はその前にあるプロパティを最初にテストします。存在する場合、JavaScriptは、アクセスするプロパティに到達するまで次のプロパティに移動します。存在しない場合は、を返しundefinedます。
構文
オプションのチェーンの構文は非常に単純です。あなたがしなければならないのは?.演算子を使うことだけです。この演算子を使用する方法は、オブジェクトと、存在しない可能性のあるプロパティの前にあるドットの間に配置することです。たとえば、にアクセスする前にmyObj.myProp1?.myProp2、myProp1が存在することを確認しますmyProp2。
オプションのチェーンで問題を解決する
オプションのチェーンを使用して、city存在しないオブジェクトの存在しないプロパティの問題を解決することにより、オプションのチェーンがどのように機能するかを示しましょうlocation。この例では、存在しないプロパティにアクセスしようとしていましたcity。このプロパティは、存在しないプロパティ/オブジェクトに存在するはずlocationでした。
あなたがしなければならないことは、その中のlocationプロパティにアクセスしようとする前に、プロパティ/オブジェクトが実際に存在することを確認することです。これを行う?.には、locationプロパティの直後で、の前に演算子を配置します.city。だから、myObj.location?.city。これは正しく返されますがundefined、ではありませんTypeError。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "city"
// in non-existing object "location"
// using optional chaining
console.log(myObj.location?.city)
// Output:
// undefined
うさぎの穴を降りる
さらに深く掘り下げる必要がある場合でも、プロセスは同じです。?.存在しない可能性のあるオブジェクトプロパティの直後、およびアクセスするドットとプロパティの直前に演算子を配置するだけです。必要なプロパティの数に応じて、これを繰り返すことができます。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access "houseNumber" property
// that is supposed to be in "address"
// that is supposed to be in "city"
// that is supposed to be in "location"
console.log(myObj.location?.city?.address?.houseNumber)
// Output:
// undefined
オプションの連鎖と方法
プロパティの場合と同様に、オプションの連鎖演算子をメソッドでも使用できます。プロセスはプロパティの場合と同じです。あなたは置く?.存在しない可能性があり、オブジェクトのプロパティの後にオペレータ権を、そして右のドットやメソッドの前に、あなたは、呼び出したいです。
プロパティが存在しない場合は、を取得しundefinedます。存在する場合、JavaScriptはメソッドにアクセスしようとします。メソッドが存在する場合は、呼び出されます。それ以外の場合は、再び取得しundefinedます。
// Create an object
let myObj = {
name: 'Jack Trout',
email: 'jack@trou.ai'
}
// Try to call "sayHi()" method directly
console.log(myObj.methods.sayHi())
// Output:
// TypeError: Cannot read property 'sayHi' of undefined
// With the "?" operator:
// Try to call "sayHi()" method
// that is supposed to exist on "methods" property
// that is supposed to exist on "myObj" object
console.log(myObj.methods?.sayHi())
// Output:
// undefined
あなたができる別のことがあります。オプションの連鎖演算子を使用して、メソッドを呼び出す前にメソッド自体が存在するかどうかを確認できます。この場合、?.メソッドの呼び出しに使用される括弧の前に演算子を配置する必要があります。次に、別のドットを追加してから、かっこを追加する必要があります。
// Create an object
let myObj = {
name: 'Victoria Wales',
email: 'joe@saladino.io'
}
// Try to call "sayHi()" method directly
console.log(myObj.sayHi())
// Output:
// TypeError: myObj.sayHi is not a function
// With the "?" operator:
// Check if "sayHi()" method exists before you call it
// that is supposed to exist on "methods" property
// that is supposed to exist on "myObj" object
console.log(myObj.sayHi?.())
// Output:
// undefined
// Or if the method is nested
console.log(myObj.methods?.sayHi?.())
// Output:
// undefined
?.呼び出したいものがメソッドでない場合にメソッドを呼び出すために演算子を使用することは機能しません。たとえばsayHi、それがメソッドではなく、プロパティであるとしましょう。?.演算子を使用して呼び出そうとすると、JavaScriptはTypeErrorそれsayHiが関数ではないと言ってスローします。
したがって、呼び出したいメソッドが実際にメソッドであることを確認してください。それ以外の場合でも、JavaScriptがエラーをスローすることになります。
// Create an object
let myObj = {
sayHi: 'Hi'
}
// Try to call property "sayHi"
console.log(myObj.sayHi?.())
// Output:
// TypeError: myObj.sayHi is not a function
オプションの連鎖とブラケット表記
?.角かっこ表記を使用してプロパティにアクセスする場合にも、演算子を使用できます。この場合、?.演算子はオブジェクト名の直後に移動します。次にドットが表示され、その後に角かっことプロパティ名が表示されます。
// Declare new variable and set it to null
const myObj = null
// Try to access "name" property on null value directly
console.log(myObj['name'])
// Output:
// TypeError: Cannot read property 'name' of null
// With the "?" operator:
console.log(myObj?.['name'])
// Output:
// undefined
このアプローチは、配列内のアイテムにアクセスする場合にも機能します。これは、配列がオブジェクト内に存在することを前提としています。通常、オブジェクト内に存在しない配列内のアイテムにアクセスすると、別のになりTypeErrorます。?.オペレータは、あなたがこの問題を回避することができます。
// Declare empty object
let myObj = {}
// Try to access item inside an array
// that is supposed to exist inside "myObj"
console.log(myObj.languages[3])
// Output:
// TypeError: Cannot read property '3' of undefined
// With the "?" operator:
console.log(myObj?.languages[3])
// Output:
// undefined
未定義の変数
オプションの連鎖は、既存の変数でのみ機能します。未定義の（存在しない）変数で使用しようとすると、JavaScriptは常にReferenceError。をスローします。したがって、?.演算子はここであなたを助けることができないので、あなたが扱いたい変数が存在することを確認してください。
// Try to access property in undefined variable
console.log(myUndefVar.myProp)
// Output:
// ReferenceError: myUndefVar is not defined
// With "?" operator:
console.log(myUndefVar?.myProp)
// Output:
// ReferenceError: myUndefVar is not defined
結論：JavaScriptのオプションのチェーンとその仕組み
オプションのチェーンは、理解しやすく、使いやすく、しかも非常に便利な機能の1つです。より少ないコードを記述しながら、多くの時間と頭痛の種を節約できます。このチュートリアルが、オプションのチェーンとは何か、それがどのように機能し、どのように使用するかを理解するのに役立つことを願っています。
この記事が気に入ったら、今後の投稿を見逃さないように購読してください。
リンク: https://blog.alexdevero.com/optional-chaining-javascript/
What is GEEK
Buddha Community
1638379320
JavaScriptでのオプションのチェーニングを作成する
オプションのチェーンは、JavaScriptの最新機能の1つです。この機能は重要ではないように思われるかもしれません。ただし、多くの時間、コード、および多くの頭痛の種を節約できます。このチュートリアルでは、この機能の概要、機能、およびより優れたJavaScriptコードを作成するための使用方法を学習します。
問題に挑む
オブジェクトを操作したことがありますか？そうすれば、次の問題に遭遇するのがいかに簡単かがわかります。オブジェクトがあるとしましょう。このオブジェクトにはいくつかのプロパティがあり、場合によってはいくつかのメソッドもあります。次に、これらのプロパティまたはメソッドのいくつかを操作するとします。
これを行うのは非常に簡単です。ドットまたは角括弧表記を使用して、任意のプロパティにアクセスできます。同じことがメソッドにも当てはまります。そのオブジェクトに存在しないプロパティまたはメソッドにアクセスしようとするとどうなりますか？存在しないプロパティにアクセスしようとすると、が表示されますundefined。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "location"
console.log(myObj.location)
// Output:
// undefined
より深くネストされているプロパティにアクセスしようとするとどうなりますか？何かオブジェクトがあると想像してください。このオブジェクトにはいくつかのプロパティが含まれています。これらのプロパティの1つの値もオブジェクトであると想定されています。このオブジェクトには、いくつかの追加のプロパティが含まれている必要があります。このネストされたオブジェクトが存在しない場合はどうなりますか？
その存在しないネストされたオブジェクトのプロパティにアクセスしようとするとどうなりますか？あなたは取得しませんundefined。代わりに取得するのはTypeErrorです。JavaScriptは、定義されていないオブジェクトのプロパティを読み取れないと文句を言います。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "location"
console.log(myObj.location)
// Output:
// undefined
// Try to access non-existing property "city"
// in non-existing object "location"
console.log(myObj.location.city)
// Output:
// TypeError: Cannot read property 'city' of undefined
「古い」方法で問題を解決する
この「古い」方法でこの問題を解決するには、論理積（&&）演算子を使用する必要があります。演算子を使用して、city存在しないオブジェクトの存在しないプロパティの問題を解決してみましょう。location&&
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "city"
// in non-existing object "location"
// using the && operator
console.log(myObj && myObj.location && myObj.location.city)
// Output:
// undefined
オプションのチェーンの簡単な紹介
ご覧のとおり、存在しないオブジェクトの存在しないプロパティの問題を&&演算子で解決するのは簡単です。このソリューションの欠点は、より多くのコードが必要になることです。作成する必要のあるコードの量は、取得する必要のある深さによって異なります。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Going down the rabbit hole
console.log(myObj && myObj.location && myObj.location.city && myObj.location.city.address && myObj.location.city.address.houseNumber)
// Output:
// undefined
オプションのチェーンのしくみ
オプションのチェーンのおかげで、そのコードはすべて不要になりました。オプションのチェーンが機能する方法は簡単です。いくつかのプロパティにアクセスするためにそれを使用するとします。アクセスしたいプロパティの前の部分がどちらundefinedかnullである場合、またはそれは評価を停止してを返しundefinedます。
このように言いましょう。オプションのチェーンを使用すると、JavaScriptは常に、アクセスするプロパティが存在する場合はその前にあるプロパティを最初にテストします。存在する場合、JavaScriptは、アクセスするプロパティに到達するまで次のプロパティに移動します。存在しない場合は、を返しundefinedます。
構文
オプションのチェーンの構文は非常に単純です。あなたがしなければならないのは?.演算子を使うことだけです。この演算子を使用する方法は、オブジェクトと、存在しない可能性のあるプロパティの前にあるドットの間に配置することです。たとえば、にアクセスする前にmyObj.myProp1?.myProp2、myProp1が存在することを確認しますmyProp2。
オプションのチェーンで問題を解決する
オプションのチェーンを使用して、city存在しないオブジェクトの存在しないプロパティの問題を解決することにより、オプションのチェーンがどのように機能するかを示しましょうlocation。この例では、存在しないプロパティにアクセスしようとしていましたcity。このプロパティは、存在しないプロパティ/オブジェクトに存在するはずlocationでした。
あなたがしなければならないことは、その中のlocationプロパティにアクセスしようとする前に、プロパティ/オブジェクトが実際に存在することを確認することです。これを行う?.には、locationプロパティの直後で、の前に演算子を配置します.city。だから、myObj.location?.city。これは正しく返されますがundefined、ではありませんTypeError。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access non-existing property "city"
// in non-existing object "location"
// using optional chaining
console.log(myObj.location?.city)
// Output:
// undefined
うさぎの穴を降りる
さらに深く掘り下げる必要がある場合でも、プロセスは同じです。?.存在しない可能性のあるオブジェクトプロパティの直後、およびアクセスするドットとプロパティの直前に演算子を配置するだけです。必要なプロパティの数に応じて、これを繰り返すことができます。
// Create an object
let myObj = {
name: 'Joe Saladino',
email: 'joe@saladino.io'
}
// Try to access "houseNumber" property
// that is supposed to be in "address"
// that is supposed to be in "city"
// that is supposed to be in "location"
console.log(myObj.location?.city?.address?.houseNumber)
// Output:
// undefined
オプションの連鎖と方法
プロパティの場合と同様に、オプションの連鎖演算子をメソッドでも使用できます。プロセスはプロパティの場合と同じです。あなたは置く?.存在しない可能性があり、オブジェクトのプロパティの後にオペレータ権を、そして右のドットやメソッドの前に、あなたは、呼び出したいです。
プロパティが存在しない場合は、を取得しundefinedます。存在する場合、JavaScriptはメソッドにアクセスしようとします。メソッドが存在する場合は、呼び出されます。それ以外の場合は、再び取得しundefinedます。
// Create an object
let myObj = {
name: 'Jack Trout',
email: 'jack@trou.ai'
}
// Try to call "sayHi()" method directly
console.log(myObj.methods.sayHi())
// Output:
// TypeError: Cannot read property 'sayHi' of undefined
// With the "?" operator:
// Try to call "sayHi()" method
// that is supposed to exist on "methods" property
// that is supposed to exist on "myObj" object
console.log(myObj.methods?.sayHi())
// Output:
// undefined
あなたができる別のことがあります。オプションの連鎖演算子を使用して、メソッドを呼び出す前にメソッド自体が存在するかどうかを確認できます。この場合、?.メソッドの呼び出しに使用される括弧の前に演算子を配置する必要があります。次に、別のドットを追加してから、かっこを追加する必要があります。
// Create an object
let myObj = {
name: 'Victoria Wales',
email: 'joe@saladino.io'
}
// Try to call "sayHi()" method directly
console.log(myObj.sayHi())
// Output:
// TypeError: myObj.sayHi is not a function
// With the "?" operator:
// Check if "sayHi()" method exists before you call it
// that is supposed to exist on "methods" property
// that is supposed to exist on "myObj" object
console.log(myObj.sayHi?.())
// Output:
// undefined
// Or if the method is nested
console.log(myObj.methods?.sayHi?.())
// Output:
// undefined
?.呼び出したいものがメソッドでない場合にメソッドを呼び出すために演算子を使用することは機能しません。たとえばsayHi、それがメソッドではなく、プロパティであるとしましょう。?.演算子を使用して呼び出そうとすると、JavaScriptはTypeErrorそれsayHiが関数ではないと言ってスローします。
したがって、呼び出したいメソッドが実際にメソッドであることを確認してください。それ以外の場合でも、JavaScriptがエラーをスローすることになります。
// Create an object
let myObj = {
sayHi: 'Hi'
}
// Try to call property "sayHi"
console.log(myObj.sayHi?.())
// Output:
// TypeError: myObj.sayHi is not a function
オプションの連鎖とブラケット表記
?.角かっこ表記を使用してプロパティにアクセスする場合にも、演算子を使用できます。この場合、?.演算子はオブジェクト名の直後に移動します。次にドットが表示され、その後に角かっことプロパティ名が表示されます。
// Declare new variable and set it to null
const myObj = null
// Try to access "name" property on null value directly
console.log(myObj['name'])
// Output:
// TypeError: Cannot read property 'name' of null
// With the "?" operator:
console.log(myObj?.['name'])
// Output:
// undefined
このアプローチは、配列内のアイテムにアクセスする場合にも機能します。これは、配列がオブジェクト内に存在することを前提としています。通常、オブジェクト内に存在しない配列内のアイテムにアクセスすると、別のになりTypeErrorます。?.オペレータは、あなたがこの問題を回避することができます。
// Declare empty object
let myObj = {}
// Try to access item inside an array
// that is supposed to exist inside "myObj"
console.log(myObj.languages[3])
// Output:
// TypeError: Cannot read property '3' of undefined
// With the "?" operator:
console.log(myObj?.languages[3])
// Output:
// undefined
未定義の変数
オプションの連鎖は、既存の変数でのみ機能します。未定義の（存在しない）変数で使用しようとすると、JavaScriptは常にReferenceError。をスローします。したがって、?.演算子はここであなたを助けることができないので、あなたが扱いたい変数が存在することを確認してください。
// Try to access property in undefined variable
console.log(myUndefVar.myProp)
// Output:
// ReferenceError: myUndefVar is not defined
// With "?" operator:
console.log(myUndefVar?.myProp)
// Output:
// ReferenceError: myUndefVar is not defined
結論：JavaScriptのオプションのチェーンとその仕組み
オプションのチェーンは、理解しやすく、使いやすく、しかも非常に便利な機能の1つです。より少ないコードを記述しながら、多くの時間と頭痛の種を節約できます。このチュートリアルが、オプションのチェーンとは何か、それがどのように機能し、どのように使用するかを理解するのに役立つことを願っています。
この記事が気に入ったら、今後の投稿を見逃さないように購読してください。
リンク: https://blog.alexdevero.com/optional-chaining-javascript/