JavaScriptのオプショナルチェーンの使い方について書いています。
オプショナルチェーンはプロパティに.?をつけてアクセスする演算子です。
サンプルコードをいくつか用意して、挙動を確認してみました。
MDNのこちらのドキュメントを参考にしています。
オプショナルチェーン演算子の使い方は？
オプショナルチェーン演算子はオブジェクトのプロパティに演算子(.?)を使ってアクセスします。
オプショナルチェーン演算子を使うことで、プロパティの値がない場合にundefinedを返します。
例えば、下記のように使います。
const user = {
age: 30,
likes: {
food: 'sushi'
}
};
let result = user.address?.prefecture;
console.log(result); // undefined
result = user.likes?.food;
console.log(result); // sushi
最初にuserオブジェクトを作成しています。
次の処理で、userオブジェクトのaddressプロパティにアクセスして、さらに配下のprefectureプロパティの値を取ってこようとしています。
このときにオプショナルチェーン演算子(.?)を使うことで、値がない場合にはundefinedを返すようになります。
console.logで値を出力すると、undefinedになっていることがわかります。
次の行で、値が設定されているプロパティにオプショナルチェーン演算子をつけてアクセスしています。
この「user.likes?.food」には値が設定されているので、普通に値が返ってきます。
出力すると、格納されている「sushi」が返ってくることが確認できます。
エラーになることを防ぐことができる
先ほどのプログラムで、オプショナルチェーン演算子を使わなかった場合にはエラーになります。
const user = {
age: 30,
likes: {
food: 'sushi'
}
};
let result = user.address.prefecture;
console.log(result); // 出力されずエラー
エラーは下記のように出力されます。
Uncaught TypeError: Cannot read properties of undefined (reading 'prefecture')
at <anonymous>:8:27
プロパティが定義されていないので、読み取れないというエラーです。
オプショナルチェーン演算子を使うことで、prefectureプロパティを読み取る前に、addressプロパティが存在するか確認してくれます。
そして、存在しなかった場合は、その時点でundefinedを返してくれます。
今回の場合だと、 このように「user.address?.prefecture」とすることで、prefectureプロパティにアクセスする前にaddressプロパティを調べてundefinedを返してくれています。
オプショナルチェーン演算子の挙動確認3パターン
オプショナルチェーン演算子の挙動を確認するために、3パターンのコードを動かしてみます。
左辺の変数に使うとエラー
左辺の変数に使おうとするとエラーになります。
const user = {
age: 30,
likes: {
food: 'sushi'
}
};
user?.age = 50;
下記のように、構文エラーになります。
Uncaught SyntaxError: Invalid left-hand side in assignment
値があるか判定して、undefinedを返すので、返す場所もないし構文として確かにおかしいですね。
配列に使ってみる
配列のプロパティにも使うことができます。
const user = {
age: 30,
likes: {
food: 'sushi',
colors:["blue"]
}
};
let result = user.likes.colors?.[2];
console.log(result); // undefined
userオブジェクトのlikesプロパティ配下のcolorsプロパティが配列です。
colors配列の存在しない配列番号にアクセスするときにオプショナルチェーン演算子を使っています。
2番目の配列要素は存在しないので、undefinedが返ってきます。
存在する場合には、存在する要素が返ってきます。
複数のプロパティに付ける
複数のプロパティにつけてアクセスすることも可能です。
const user = {
age: 30,
likes: {
food: 'sushi',
colors:["blue"]
}
};
let result = user.likes?.colors?.[0];
console.log(result); // blue
複数のプロパティにオプショナルチェーンを付けてみました。
このようにオプショナルチェーンを連続してつけることが可能です。
user.likes?.colors?.[0];
下記のようにデータがない場合でもundefinedが返ってくるようになります。
const user = {
age: 30,
likes: {
food: 'sushi'
}
};
プロパティの値が存在しなかった場合の初期値
プロパティの値が存在しなかった場合の初期値を設定したい場合には、Null合体演算子を使いましょう。
オプショナルチェーン演算子と一緒に使うことが可能です。
下記のようにオプショナルチェーンとNull合体演算子を一緒に使うことができます。
const user = {
age: 30,
likes: {
food: 'sushi'
}
};
let result = user.address?.prefecture ?? "福岡県";
console.log(result); // 福岡県
userオブジェクトのaddressのprefectureプロパティにアクセスしようとしていますが存在しません。
存在しないのでundefinedになり、Null合体演算子(??)で値がないと判定されて、「福岡県」が返ってきます。
Null合体演算子については、こちらに書いているので確認してみてください。
コメント