今回は、
・どんなところを簡略化したコードに書き換えられるのか知りたい
・1文字でもタイピング数を少なくしたい
・簡略化した状態としていない状態の比較を見たい
こんな悩みを解決するために
簡略化前と後で比較できるような形で簡略化パターンをいくつか紹介していきます。
まさコードの簡略化は多様しすぎるとコードの可読性が下がる場合もあるから注意しましょう！
チーム開発時はチームのコーディング規約を優先に！
ちなみに僕は個人開発でガンガン使います。
目次
「?」を使ってif…else文を簡略化
簡略化前のコード
const age = 12;
let adultOrChild;
if (age >= 18) {
adultOrChild = 'Adult';
} else {
adultOrChild = 'Child';
}簡略化後
const age = 12;
let adultOrChild;
adultOrChild = age >= 18 ? 'Adult' : 'Child';「&&」を使ってif文を簡略化
簡略化前のコード
const age = 18;
let adultOrChild;
if (age >= 18) {
adultOrChild = 'Adult';
}簡略化後
const age = 18;
let adultOrChild;
age >= 18 && (adultOrChild = 'Adult');includeで論理和条件を簡略化
簡略化前のコード
const color = 'green';
if (color === 'yellow' || color === 'green') {
console.log('OK');
}簡略化後
const color = 'green';
if (['yellow', 'green'].includes(color)) {
console.log('OK');
}更に簡略化
const color = 'green';
['yellow', 'green'].includes(color) && console.log('OK');オブジェクトを使ってif…elseif…elseを簡略化
簡略化前のコード
const fruit = 'apple';
let num = '';
if (fruit = 'mango') {
num = 100;
} else if (fruit = 'orange') {
num = 50;
} else if (fruit = 'apple') {
num = 30;
}簡略化後
const judgeObj = {
mango: 100,
orange: 50,
apple: 30
}
let num = judgeObj[fruit];「~~」を使って切り捨て
簡略化前のコード
Math.floor(6.9)簡略化後
~~6.9「!!」を使ってBoolean型への変換
簡略化前のコード
let num = 0;
let result;
if (num) {
result = true;
} else {
result = false;
}
console.log(result);簡略化後
let num = 0;
console.log(!!num);「+」を使って文字列型を数値型に変換
簡略化前のコード
Number('777')簡略化後
+'777'べき乗計算
簡略化前のコード
Math.pow(10, 10);簡略化後
10 ** 10;変数定義
簡略化前のコード
let a, b, c, d;
a = 1;
b = 2;
c = 3;
d = 4;簡略化後
[a, b, c, d] = [1, 2, 3, 4];
コメント