速習ECMAScript2018を勉強する 分割代入編

今回から Part3 関数編に入ります。

  • 前回で、Part2の基本構文編が終わりました。
  • 本当にざっくりとした、説明です。
  • pickUpだから、これでいいんです。(笑)

素晴らしき分割代入,可変長引数、オブジェクトリテラル

  • 今回は、新しいJSで使われて、このオブジェクトのすばらしい渡し方をメモって行こうと思います。

  • 分割代入は、配列から値を取り出すものと、オブジェクトからプロパティを取り出す二種類がありますが、今回はオブジェクトの方を主に取り上げています。また網羅した内容でもなく、自分にすごく役立っているところのみピックアップしています。 網羅した内容は本を読んでもらえたらと思います。

  • 簡単な分割代入配列のサンプルです

const [hoge, foo, ...other] = [1,2,3,4,5];
console.log(hoge);
console.log(foo);
console.log(other);
1
2
[ 3, 4, 5 ]
  • 説明したい分割代入のオブジェクトのサンプルです
const { hoge, foo } = { hoge: 'ほげ', foo: 'ふー' };

console.log(hoge);
console.log(foo);
  • この分割代入というしろものは、最近にJSコードをwebで漁ると、大量に出てきます。 最初は分割代入どうも苦手だなと思っていたのですが、これを使わないと、例えば関数が5,6個程度なら、必要ありませんが、20, 30と増えてくるとこれを使わないと、私の頭では、記憶できなくなることに気が付きました。なにを記憶できなくなるかというと、引数の内容と位置です。
  • やたら引数が多い関数を作りました。
function detarame(upper, lower, base, middle, height, width) {
  return (upper + lower + base + middle) / height * width
}

const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
const f = 6;

console.log(detarame(a,c,b,d,f,e));
  • はじめのうちは、これで問題ないのですが、こんな関数が増えてきて、関数引数がだんだん離れてくると、また、ファイルを分割したりすると、翌日には多分、引数の場所を忘れています。
  • 翌日は、変数と引数の位置と関数のコードを見比べることになります。
  • 可変長引数と分割代入を使います
function detarame({upper, lower, base, middle, height, width}) {
  return (upper + lower + base + middle) / height * width
}

const data = {
  upper: 1,
  lower: 2,
  base: 3,
  middle: 4,
  height: 5,
  width: 6,
  atumi: 10,
  size: 22,
  wait: 25,
}

console.log(detarame(data)); // A
console.log(detarame({ ...data })) // B
  • 関数記述で仮引数を分割代入にすると、引数の位置を気にする必要がなくなります. 関数の引数をいちいち確認する必要がありません。
  • 関数の引数もオブジェクトをそのまま代入したほうがいいでしょう。変数が増えても、いらない変数があっても放り込むのに問題にならないので、修正もいりません。 引数の形式も コメントA, Bどちらでも問題なく動きますが、コメントBは、引数がオブジェクトを放り込んでいることが dataを見なくてもわかりますので、自分のためにもコメントBのほうがいいでしょう。

  • ここで、データをオブジェクトにすることで、dataと種類が違うデータが必要なったとして、一緒にしたくない場合があるかもしれません。

  • その場合も、オブジェクトデータをグループ分けしても問題なく扱えます。
function detarame({upper, lower, base, middle, height, width, apple = 0, orange = 0}) {
  return (upper + lower + base + middle + apple) / height * width - orange
}

const data = {
  upper: 1,
  lower: 2,
  base: 3,
  middle: 4,
  height: 5,
  width: 6,
  atumi: 10,
  size: 22,
  wait: 25,
}
const fruts = {
  apple: 55,
  orange: 23,
}

console.log(detarame(data)); // A
console.log(detarame({ ...data })) // B
console.log(detarame({...data, ...fruts})) // C
  • コメントCのように、オブジェクトデータの可変長引数をカンマ区切りでいれていけば、そのまま追加していけます。
  • コメントA,Bは、frutsの変数がありませんので、仮引数にデフォルトをいれておいたほうがいいでしょう.

展開演算子 例2

const num = [100, -10, 50, 108]
console.log(Math.max(100,-10, 50, 108))
console.log(Math.max.apply(null, num));
console.log(Math.max(...num));
  • 初心者は、引数のちょっとした渡し方で悩むんです。
  • applyも馴染みがないので、...楽ですね。

  • 初心者である私は分割代入や可変長引数など、便利に使えることを知らずに、苦労していたのです。

  • 初心者のみなさん、苦労しないために使ってみてください。m(__)m