初めて、他人のソースをレビューして気づいたこと #JavaScript

三項演算子

ソースは短くなるが、すべてを三項演算子にするのはよくない

この記事を参考にレビューした

if (a) {
    b(0, 0);
} else {
    b(1, 0);
}


const code = a ? 0 : 1;
b(code, 0);

大小判定

if(this.zoom > 0) {
  this.zoom -= 10;
}
if(this.zoom < 50) {
  this.zoom = 50;
}

マイナス10ずつ引いて行って、50以下にはならないというプログラムである

まずいらない分岐は消す

this.zoom -= 10;
if(this.zoom < 50) {
  this.zoom = 50;
}

これは関数が用意されている

this.zoom -= 10;
this.zoom = Math.max(50, this.zoom);

これで6行が一行に

this.zoom = Math.max(50, this.zoom - 10);

Math.maxは入力された0以上の数字の内最大のものを返している

async/awaitが関数の最後に来ても、消さない方がいい

最後に非同期処理が来ても、消さない方がいい理由は以下の点である
・チーム開発の場合、次に何か処理をつけ足すときにエラーにきずきにくくなる
・Promise は Promise であると分かりやすくなっていたほうがよい（ミス防止のため）
・await していないと、投げっぱなしなので reject されてもそこで例外は発生されない

function async () {
    何か処理
    await axios.get("http//")
}

filter/slice適切なメソッドを使おう

例えば、数字の配列から、要素を切り出したいとき
こんなソースを多く見た

const data = [10, 345, 357, 34, 3546, 67, 34, 24, , 34, 23, 352]
const filterData = data.filter((item, index) => { return index > 2 })

これは完全にsliceの役目ですので、こうかいたほうがよい

const data = [10, 345, 357, 34, 3546, 67, 34, 24, , 34, 23, 352]
const silceData = data.slice(3)

引数がないときは明示的にしておく

vueでは子コンポーネントからemitされ,
emitに引数があっても
で引数を使うことができる

<Child @my-click='func'/>

引数が一つの場合は下の書き方と同じ意味である

<Child @my-click='func($event)'/>

引数がない場合、明示的にしておいた方が良い

<Child @my-click='func()'/>

functionとアロー関数でthisのあたいが決まるタイミングが違う

一般的にJavaScriptでは、関数の中でthisを使うと、その呼び出し元のオブジェクトになる。

function func() {
    console.log(this.param);
}

let object = {
    param: '1',
    func: func
}
let object2 = {
    param: '2',
    func: func
}

object.func();
object2.func();

//コンソール
1
2

これをアロー関数に変えてみると

const func = () => {
    console.log(this.param);
}

let object = {
    param: '1',
    func: func
}
let object2 = {
    param: '2',
    func: func
}

object.func();
object2.func();

//コンソール
undefined
undefined

結果が異なる

アロー関数はただ単に書き方を変えただけのものではなく
thisの値が決定されるタイミングがfunctionとはことなり、
宣言時にthisを決定するのだ