JavaScript | if、else-ifをショートハンドで記述する方法
ifのショートハンドのサンプル
if文をショートハンドにしたサンプルコードを紹介しています。
ロングハンド
通常のif文のJavaScriptコードです。
let item = true
let val
if (item) {
val = 1;
}
// val = 1ショートハンド
ifをショートハンドにするには「{}」を「?～：」に置き換えます、elseにあたる「:」も記述しないとエラーとなります。
条件式 ? 処理 :上記のロングハンドコードをショートハンドコードにしていきます。
また、変数の宣言もショートハンドにしています。
let item = true, val
(item) ? val = 1 :
// val = 1括弧なしのショートハンドです。
「()」は記述しなくてもif文として機能します。
let item = true, val
item ? val = 1 :
// val = 1結果を変数に入れる記述パターンです。
let item = true, val
val = item ? 1 :
// val = 1結果を格納する変数を宣言しながら記述する事も可能です。
let item = true
let val = item ? 1 :
// val = 1if ~ elseのショートハンドのサンプル
if ～ else文をショートハンドにしたJavaScriptコードを紹介しています。
ロングハンド
通常のif ～ elseのJavaScriptコードです。
let item = true
let val
if (item) {
val = 1;
} else {
val = 2;
}
// val = 1ショートハンド
elseを含むif文をショートハンドにする場合は条件式の後に「?」、elseの部分には「:」を記述します。
条件式 ? 処理 : 処理上記のロングハンドコードをそのままショートハンドコードに書き換えると以下のようになります。
let item = true, val
(item) ? val = 1 : val = 2
// val = 1elseを使った括弧なしショートハンドコードです。
「()」は記述しなくてもif文として機能します。
let item = true, val
item ? val = 1 : val = 2
// val = 1elseを使った括弧なしショートハンドで分岐内で指定せずに結果を変数に入れる記述パターンです。
let item = true, val
val = name ? 1 : 2
// val = 1elseを使った宣言付き、括弧なしショートハンド。
結果を格納する変数を宣言しながら記述する事も可能です。
let item = true
let val = name ? 1 : 2
// val = 1else-ifを含めたショートハンドのサンプル
if文にelse-ifも使ったショートハンド記述のサンプルコードになります。
ロングハンド
else-ifを使った括弧ありのショートハンド、通常の記述パターン。
let item = 'banana'
let val
if (item == 'apple') {
val = 1
} else if (item == 'banana'){
val = 2
} else {
val = 3
}
// val = 2ショートハンド
else-ifを使った括弧ありのショートハンドコードです。
else-ifをショートハンドにする場合、続けて分岐させる条件の後ろに「?」を追加する事でショートハンドで記述する事が可能になっています。
条件式 ? 処理 : 条件式 ? 処理 : 処理let item = 'banana', val
(item == 'apple') ? val = 1 : (item = 'banana') ? val = 2 : val = 3
console.log(val)
// val = 2else-ifを使った括弧なしのショートハンド。
let item = 'banana', value
item == 'apple' ? val = 1 : item = 'banana' ? val = 2 : val = 3
console.log(val)
// val = 2else-ifを使った括弧なし・宣言付きショートハンド。
let item = 'banana'
let val = item == 'apple' ? 1 : item = 'banana' ? 2 : 3
console.log(val)
// val = 2