【意訳＋要約】Tricksters of JavaScript

※本記事は、Bardによる意訳+翻訳を活用し、レイアウト調整したものです。
※感想は、オリジナルです。

原文

Tricksters of JavaScript - DEV Community

意訳+要約

JavaScriptのトリックスター

JavaScriptは、柔軟性と表現力に優れたプログラミング言語である。しかし、その柔軟性ゆえに、意図しない動作を引き起こす「トリックスター」と呼ばれる現象が存在する。

このブログでは、JavaScriptのトリックスターの概要と、代表的なトリックスターの例を紹介する。

JavaScriptのトリックスターの概要

JavaScriptのトリックスターとは、JavaScriptの動作を意図しない方向に引きずる現象である。トリックスターの多くは、JavaScriptの動作原理を理解していないと発生しやすく、初心者が陥りやすい落とし穴でもある。

代表的なトリックスターの例

JavaScriptのトリックスターの例は、以下の通りである。

==と===の違い

==は、値の比較、===は、オブジェクトの参照の比較を行う。==で比較した結果がfalseになる場合でも、===で比較するとtrueになることがある。

const a = {
  name: "hoge",
};
const b = {
  name: "hoge",
};

console.log(a === b); // false
console.log(a == b); // true

Use code with caution. Learn more

nullとundefinedの違い

nullは、値が存在しないことを示す値である。undefinedは、変数に値が割り当てられていないことを示す値である。nullとundefinedは、==で比較するとfalseになる。

const a = null;
const b = undefined;

console.log(a === b); // false

Use code with caution. Learn more

デフォルト引数

デフォルト引数は、関数の呼び出し時に引数を省略した場合に、関数に渡される値である。デフォルト引数は、関数の定義時に指定する。

function foo(a = 1, b = 2) {
  console.log(a, b);
}

foo(); // 1, 2
foo(3); // 3, 2

Use code with caution. Learn more

配列の連結

配列を連結する際には、concat()メソッドを使用する。concat()メソッドは、2つの配列を連結して、新しい配列を返す。

const a = [1, 2];
const b = [3, 4];

const c = a.concat(b);

console.log(c); // [1, 2, 3, 4]

Use code with caution. Learn more

オブジェクトの代入

オブジェクトを代入する際には、assign()メソッドを使用する。assign()メソッドは、2つのオブジェクトをマージして、新しいオブジェクトを返す。

const a = {
  name: "hoge",
};
const b = {
  age: 18,
};

const c = Object.assign(a, b);

console.log(c); // { name: "hoge", age: 18 }

Use code with caution. Learn more

まとめ

JavaScriptのトリックスターは、JavaScriptをより深く理解するためには避けて通れないものである。トリックスターの存在を認識し、トリックスターに陥らないよう注意することが重要である。

感想

トリックスターなんて言うのか？？？

どれもそこまでハマったことはない。
Javaを使ってたので、基本的に比較は===を使うようにしてる。
そうすれば、Javaと似た感覚で使えるので、あまり迷わない。

基本的に、知っている言語に寄せた使い方をすれば、そこまで迷うことはないのかなと思う。