🐥

【3】JavaScriptのTips、ベストプラクティスをご存知でない?

3 min read

はじめに

JavaScriptの初級者が実務で学んだ事や、公式ドキュメントや技術書でインプットした内容を記事としてアウトプットさせていただいてます。もし、不適切な箇所があればご指摘よろしくお願いします。

1. 小数点の位置を決める

script.js
let num =2.443242342;
num = num.toFixed(4);  // num は 2.4432

toFixed() 関数は数値ではなく、 文字列 で返します。

2. 浮動小数点数の問題

script.js
0.1 + 0.2 === 0.3 // false 
9007199254740992 + 1 // 9007199254740992  
9007199254740992 + 2 // 9007199254740994

0.1 +0.2 は 0.30000000000000004 となる。
これを解決するのが toFixed()toPrecision()

参考記事

https://2ality.com/2012/04/number-encoding.html

3. オブジェクトのプロパティを確認する

繰り返しのコードスニペットとして非常に便利

script.js
for (let name in object) {  
  if (object.hasOwnProperty(name)) { 
    // do something with name                    
  }  
}

4. 引数を検証する前に isFinite() を使え!

script.js
isFinite(0/0) ;       // false 
isFinite("foo");      // false 
isFinite("10");       // true 
isFinite(10);         // true 
isFinite(undefined);  // false 
isFinite();           // false 
isFinite(null);       // true  !!! 

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isFinite

5. 負の数値を避けろ

script.js
let numbersArray = [1,2,3,4,5]; 
let from = numbersArray.indexOf("foo") ;  // from は -1 
numbersArray.splice(from,2);          // return [5]

正の数値だけを引数に通すのが splice()

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

6. JSON形式での シリアル化 と デシリアライズ

script.js
let person = {
        name :'Saad',
        age : 26,
        department : {
            ID : 15, 
            name : "R&D"
        } 
    }; 

let stringFromPerson = JSON.stringify(person); 
/* stringFromPerson は "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" になる  */ 
let personFromString = JSON.parse(stringFromPerson);  
/* personFromString は person object  になる  */

7. eval() と Function()コンストラクタ を使うな!

外部から入力されたデータを処理するような局面では、絶対に使うべきではありません

script.js
let func1 = new Function(functionCode);
let func2 = eval(functionCode);

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/Function

8. with()も使うな!

with() の中で該当しないプロパティやメソッドを呼ぶと、プロトタイプをさかのぼって探しに行くので、使わないでください

9. 配列で for-in ループ を使うな!

代わりに...

script.js
let sum = 0;  
for (let i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}

もっといい方法だと...

script.js
let sum = 0;  
for (let i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}

シリーズ

https://zenn.dev/ignorant_kenji/articles/d238a7e99ab42ca8828d
https://zenn.dev/ignorant_kenji/articles/be3823070df3fe34f501