誰も教えてくれない8つのJavaScriptのコツ・裏技 🚀

JavaScriptは間違いなく世界で最もクールな言語の一つで、日々ますます人気が高まっています。そのため、開発者コミュニティはJSを使いこなした経験からいくつかのコツや裏技を見つけてきました。今日はその中から8つを皆さんに共有します！

さあ、始めましょう！

関数型継承

関数型継承とは、オブジェクトインスタンスに拡張機能を加える関数を適用することによって機能を受け継ぐプロセスです。この関数はクロージャスコープを提供し、一部のデータを非公開にするのに使えます。オブジェクトインスタンスに新しいプロパティやメソッドを拡張するために、動的オブジェクト拡張を使用します。

こんな感じです：

// 基本関数
function Drinks(data) {
  var that = {}; // 空のオブジェクトを作成
  that.name = data.name; // "name"プロパティを追加
  return that; // オブジェクトを返す
};

// 基本関数から継承する関数
function Coffee(data) {
  // Drinksオブジェクトを作る
  var that = Drinks(data);
  // 基本オブジェクトを拡張
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// 使い方
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// 出力: "This is Cappuccino"

クレジット：このトピックについて詳しく説明されている@loverajoel - Functional Inheritance on JS Tips（上述の要約）

.map() の代替

.map()には、.from()という代替えがあります：

let dogs = [
    { name: 'Rio', age: 2 },
    { name: 'Mac', age: 3 },
    { name: 'Bruno', age: 5 },
    { name: 'Jucas', age: 10 },
    { name: 'Furr', age: 8 },
    { name: 'Blu', age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames); // [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”] を返す

数字から文字列へ、文字列から数字へ

通常、文字列を数字に変換するときはこんな感じです：

let num = 4
let newNum = num.toString();

そして、文字列を数字に変換するときは：

let num = "4"
let stringNumber = Number(num);

ですが、速くコードを書くために使える方法は：

let num = 15;
let numString = num + ""; // 数字から文字列へ
let stringNum = +s; // 文字列から数字へ

lengthを使ってサイズ変更と配列を空にする

JavaScriptでは、lengthという組み込みメソッドを上書きして好きな値を割り当てることができます。

例を見てみましょう：

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

また、配列を空にするためにも使用できます：

let array_values = [1, 2, 3, 4, 5, 6, 7, 8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

配列の分割代入で値を入れ替える

分割代入構文は、JavaScriptの式であり、配列からの値やオブジェクトからのプロパティを個別の変数にアンパックすることを可能にします。これを使って、値を素早く入れ替えることもできます：

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // 結果 -> 2
console.log(b) // 結果 -> 1

配列から重複を取り除く

このトリックはかなりシンプルです。例えば、数値、文字列、ブール値を含む配列を作ったとしますが、値が複数回繰り返されているので、重複を取り除きたいとします。次のようにすることができます：

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

パフォーマンス

JSでは、コードの実行時間も、Googleが行うように取得することができます：

こんな感じです：

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);

⚡️ プレゼント ⚡️

Udemyのどんなコースでもプレゼントします。いかなる価格でも、どんなコースでも。
プレゼントに参加する手順
--> この投稿にリアクションしてください
--> 私たちのニュースレターに登録してください <-- とても重要です
--> Twitterで私をフォローしてください <-- 勝つ確率が2倍になります

当選者は5月1日にTwitterで発表されます

この記事を読んでいただきありがとうございます。

知っているコツや裏技があればコメントしてください！

いいね、シェア、コメントをお願いします

Dev や Twitterでフォローしてください。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1