概要
JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。
その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。
ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。
(※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。)
早期returnを利用する
条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。
簡単な例としまして下記のコードが、
const checkNumber = (num: number) => {
if (num === 2) {
return "2です。"
} else {
return "2以外です。"
}
}
この様に書き換えられます。
const checkNumber = (num: number) => {
if (num === 2) return "2です。"
return "2以外です。"
}
分割代入を利用する
const user = {
name: "Name1",
age: 23,
userName: "User1"
}
console.log(user.name, user.age, user.userName)
が、下記の様に書き換えられます。
const user = {
name: 'Name1',
age: 23,
userName: 'User1',
}
// Object Destructuring
const { name, age, userName } = user
console.log(name, age, userName)
上記以外でも分割代入を使用する事で色々な事ができます。
下記に色々なパターンがリストされています。
アロー関数をより簡潔に
const hoge = () => {
return 'HOGE'
}
は{}とreturnを省略して下記の様に書き換えられます。
const hoge = () => "HOGE"
filterメソッドで配列から空のstringを取り除く
const hogeArray = ['hoge1', 'hoge2', ''].filter(string => string)
console.log(hogeArray) //=> ["hoge1", "hoge2"]
コメントで頂きましたが、下記のような書き方も可能です。
const hogeArray = ['hoge1', 'hoge2', ''].filter(Boolean)
短絡評価(Short Circuit Conditionals)を駆使する
下記のコードはisAvailableがtrueならばaddToCartメソッドを実行しています。
if (isAvailable) {
addToCart()
}
上記はこの様に書き換える事ができます。
isAvailable && addToCart()
変数をオブジェクトのキーとして利用する
下記の様に [ ] で変数を囲ってあげましょう。
const key = "name"
var obj = {
[key] : "Name",
}
console.log(obj) //=> { "name": "Name" }
条件付きで変数を設定する
下記のコードではtimezoneに初期値を与え、userがpreferredTimezoneを持つ場合にはその値を上書きしています。
let timezone = 'EastAsia/Tokyo'
if (user.preferredTimezone) {
timezone = user.preferredTimezone
}
上記はこの様に書き換える事ができます。
const timezone = user.preferredTimezone || 'EastAsia/Tokyo'
nullとundefinedの両方を確認する
value === null ではなく、value == null を使用してあげましょう。
const nullCheck = (v: any) => {
return v === null
}
const nullAndUndfinedCheck = (v: any) => {
return v == null
}
// nullCheck
nullCheck(undefined) //=> false
nullCheck(null) //=> true
// nullAndUndfinedCheck
nullAndUndfinedCheck(undefined) //=> true
nullAndUndfinedCheck(null) //=> true
参考: Is there a way to check for both null and undefined?
特定のプロパティのみオブジェクトから抜き出す
必要なプロパティのみを抜き出す事ができます。
const object = { a: 5, b: 6, c: 7 }
const picked = (({ a, c }) => ({ a, c }))(object)
console.log(picked) // { a: 5, c: 7 }
もしくは分割代入を使用する事で、下記の様に抜き出せます。
const obj = {
name: 'Fenton',
age: 21,
}
let { age, ...subset } = obj
console.log(subset) //=> { "name": "Fenton" }
if文の簡略化にオブジェクトを使用する
const howIsBoo = (state) => {
if (state === 'HUNGRY') return 'WANTS FOOD';
if (state === 'SAD') return 'CRYING';
if (state === 'HAPPY') return 'LAUGHING'
return 'SLEEPING'
}
はオブジェクトを使用する事で、下記の様に書き換えが可能です。
const booFeelsTable = {
HUNGRY: 'WANTS FOOD',
SAD: 'CRYING',
HAPPY: 'LAUGHING',
}
const howIsBoo = state => booFeelsTable[state] || 'SLEEPING'
変数を正規表現で使用する
下記のように、new RegExp でRegExpのオブジェクトを作成することで使用可能です。
var replace = 'regex'
var re = new RegExp(replace, 'g')
'mystring'.replace(re, 'newstring')
How do you use a variable in a regular expression?