#️⃣

JavaScriptのぐぐりづらい記号の名前を知る

2018/10/26に公開

JavaScript

Node.js

初心者

tech

2018/10/26 22:18
正規表現リテラルとレストパラメーターについて追記しました。

ぐぐれるようになってみんなでMDNを読もう！

まとめ

ぐぐりづらいやつ	名前	リンク
`=>`	アロー関数	アロー関数 - JavaScript - MDN
`(function(){〜})()`	即時実行関数式	IIFE - MDN ウェブ文書用語集: ウェブ関連の用語の定義 - MDN
`const {Router} = require("express")`	分割代入	分割代入 - JavaScript - MDN
`｜｜` / `&&`	論理演算子	論理演算子 - JavaScript - MDN
`ほげ${fuga}`	テンプレートリテラル	テンプレート文字列 - JavaScript - MDN
`〜 ? 〜 : 〜`	三項演算子	条件 (三項) 演算子 - JavaScript - MDN
`/〜/`	正規表現リテラル	RegExp - JavaScript - MDN
`...`	スプレッド構文レストパラメーター	スプレッド構文 - JavaScript - MDN Rest parameters - JavaScript - MDN

ざっくり説明

以下は参考程度にして MDN を読もう！

`=>` : アロー関数

アロー関数 - JavaScript - MDN

関数をつくる
function()と微妙に動作の異なる部分があるが、だいたい同じように使える

const hoge = () => {
  return 'ほげ'; // もっと短く書ける。MDNを読もう！
};

const fuga = function() {
  return 'ふが';
};

console.log(hoge()); // "ほげ"
console.log(fuga()); // "ふが"

`(function(){〜})()` : 即時実行関数式

IIFE - MDN ウェブ文書用語集: ウェブ関連の用語の定義 - MDN

関数を作ってその場で実行する
ES5 時代まではスコープを切るために使われていたが、もはや使いどころはほとんどない気がする……
- varは関数スコープ。letとconstはブロックスコープ。

var a = 103;
(function() {
  var a = 681;
  console.log(a); // 681
})();
console.log(a); // 103

`const {Router} = 〜` : 分割代入

分割代入 - JavaScript - MDN
分割代入には 2 種類ある。

配列を分割して変数に代入する

なんでも JSON な昨今の実務ではほとんど使わない気が……
競プロの初期値の取得とか CSV を扱うときとかに役に立つことがある

const [a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

オブジェクトのプロパティを同名の変数に代入する

ライブラリを読み込むときとかに使うことがある
- lodash とか
- express とか

const obj = {
  hoge: 'ほげ',
  fuga: 'ふが'
};

const { hoge, fuga } = obj;
console.log(hoge); // ほげ
console.log(fuga); // ふが

`||` / `&&` : 論理演算子

論理演算子 - JavaScript - MDN

JS の論理演算子は真偽値以外も扱える。以下も読むべし。
Truthy - MDN ウェブ文書用語集: ウェブ関連の用語の定義 | MDN
Falsy - MDN ウェブ文書用語集: ウェブ関連の用語の定義 | MDN

要するに

結果	もとの値
`Falsy`	`null`, `0`, `""`, `undefined`
`Truthy`	`Falsy`以外ぜんぶ

`||`

左辺がTruthyならば左辺を、そうでなければ右辺を返す

左から優先的に採用する形。よく使う

const a = 'hoge'; // truthy
const b = 'fuga'; // truthy
const c = ''; // falsy

const result1 = a || b;
console.log(result1); // hoge

const result2 = c || b;
console.log(result2); // fuga

`&&`

左辺がFalsyならば左辺を、そうでなければ右辺を返す

const a = 'hoge'; // truthy
const b = 'fuga'; // truthy
const c = ''; // falsy

const result1 = a && b;
console.log(result1); // fuga

const result2 = c && b;
console.log(result2); // 空文字

オブジェクトのプロパティへアクセスする際の存在チェックによく使われる
- undefinedなオブジェクトのプロパティにアクセスしようとすると例外が発生する

const err; // undefined

console.log(err && err.message); // undefined(例外は発生しない)
console.log(err.message); // TypeError: Cannot read property 'message' of undefined

`ほげ${fuga}` : テンプレートリテラル

テンプレート文字列 - JavaScript - MDN
英語版は"Template literals (Template strings)" になっている

文字列を作る
プレースホルダーを埋め込める
- シェルみたいな感じ

const fuga = 'ふが';
const hogefuga = `hoge${fuga}`;

console.log(hogefuga); // hogeふが

改行もできる
- 美しく書けるとは言ってない

const hogefuga = `ほげ
ふが`;

console.log(hogefuga);
// ほげ
// ふが

`〜 ? 〜 : 〜` : 三項演算子

条件 (三項) 演算子 - JavaScript - MDN

条件式 ? 真のときの返却値 : 偽のときの返却値の形で書く
if 文を短く書けたりletを使わずに済んだりする
他の言語にもあるのでそんなにびっくりしないかも

const one = 1;
const hoge = one === 1 ? 'ほげ' : 'ふが';
const fuga = one !== 1 ? 'ほげ' : 'ふが';

console.log(hoge); // "ほげ"
console.log(fuga); // "ふが"

`/〜/` : 正規表現リテラル

RegExp - JavaScript - MDN

正規表現オブジェクトを作る
- 正規表現そのものについては割愛します。 → 正規表現 - JavaScript - MDN

const hogehogehogehogehoge = 'ほげほげほげほげほげ';
const result = /[ほげ]*/.test(hogehogehogehogehoge);

console.log(result); // true

`...` : スプレッド構文 / レストパラメーター

スプレッド構文

スプレッド構文 - JavaScript - MDN

3 種類ある。スプレッドの名の通り「展開」がキーワード。

配列を関数の引数へ展開する

const hoge = (ho, ge) => ho + ge;
const arr = ['ほ', 'げ'];

console.log(hoge(...arr)); // ほげ

配列リテラルの中に配列を展開する

const hoge = ['ほ', 'げ'];
const hogefuga = [...hoge, 'ふ', 'が'];

console.log(hogefuga.join()); // ほ,げ,ふ,が

オブジェクトリテラルの中にオブジェクトのプロパティを展開する

const hoge = {
  ho: 'ほ',
  ge: 'げ'
};
const fuga = {
  fu: 'ふ',
  ga: 'が'
};

const hogefuga = { ...hoge, ...fuga };
console.log(hogefuga); // { ho: 'ほ', ge: 'げ', fu: 'ふ', ga: 'が' }

レストパラメーター

Rest parameters - JavaScript - MDN
Restは「残り、残余」パラメーターは「(仮)引数」。
関数を定義する際にこれを指定しておくと、余分に指定された引数を配列として「集約」して取り込んでくれる。
スプレッド関数の逆。

/** 平均を求める。引数をいくら与えてもOK */
const calcAverage = (...arg) => {
  const reducer = (acc, cv) => {
    return acc + cv;
  };
  return arg.reduce(reducer) / arg.length;
}

console.log(calcAverage(103, 415, 485, 651, 653, 231, 531, 657)); // 465.75

おわり

ぐぐれるようになったな！やったぜ！
他にあったら教えてください。
そして一緒に MDN を読もう。

GitHubで編集を提案

まとめ

ざっくり説明

=> : アロー関数

(function(){〜})() : 即時実行関数式

const {Router} = 〜 : 分割代入