６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年10月25日 JavaScript (JS Primer) メソッドの短縮記法

JavaScript

[ES2015] メソッドの短縮記法

今までは、オブジェクトリテラルのプロパティの一つとしてバリューの部分にメソッドを代入していました。しかし、この書き方は省略することが出来ます。以下の例を参考に見ていきましょう。

一般的な記法

const kago = {
  mikan: function() {
    return "かごの中に入ったみかん";
  }
}

console.log(kago.mikan());
//=> かごの中に入ったみかん

短縮記法

const kago = {
  mikan() {
    return "かごの中に入ったみかん";
  }
};
  console.log(kago.mikan());
//=> かごの中に入ったみかん

上の2つを見比べると、短縮記法では:とfunctionというキーワードが省略されていることが分かります。

リテラルまとめ

const, let , var再復習

const

値の再代入も同じ変数名での再定義もできません。

let

値の再代入はできるが、同じ変数名での再定義はできません。

var

値の再代入も、同じ変数名での再定義もできます。 しかし、値が簡単に書き換え可能なので、ほとんど使用しません。

値の再代入 同じ変数名での再定義
const ❌ ❌
let ⭕️ ❌
var ⭕️ ⭕️

オブジェクトリテラルとブロックについて

オブジェクトリテラルとブロックは、どちらも{}の記号を使うため、どのように使い分けるのか以下に示します。

オブジェクトリテラル

オブジェクトリテラルとは、オブジェクトを表現するための記法のことです。

// {}でプロパティを囲んでいる部分がブロックです。
// プロパティはキーとバリューの組み合わせた値のことです。
// {プロパティ}(オブジェクトリテラルとプロパティの組み合わせ)はオブジェクトになります。
obj = {
    orange: "みかん食べよう"
    grape: "ぶどうは巨峰が一番美味しい"
}

ブロック文

ブロック文は、複数の文を書くときに使います。 また、例外としてブロックで終わる文の末尾には、セミコロンが不要となります。

// { }で囲った部分をブロックと言います。
// ブロックには、複数の文が書けます。
{
  const x = 25;
  console.log(x);
}

Rest parameters

  • function 関数名 (...引数名)の...引数名の部分がRest parametersです。
  • 関数を呼び出す際にRest Parametersに値が渡される。
  • 引数の数を制限なく受け取れとれる(可変長引数を受け取れる)。
  • functionを定義するときにいくつ引数を受け取るようにするか不明確の場合、Rest Parametersを使う。呼び出す際に、引数の数を自由に指定できる。
  • 仮引数で使われる。

分割代入

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

※ MDN参照

分割代入をすることで直接プロパティにアクセスすることが出来るようになります。
以下の例では関数の仮引数にオブジェクトのプロパティを指定し、実引数にオブジェクトを指定することで分割代入を行っています。

function printUserId({ id }) {
  console.log({id}) // => { id: 1 }
  console.log(id); // => 2
}
const user = {
    id: 1,
    name: "yano",
};
const other_user = {
    id: 2,
    name: "インセクター羽蛾",
};

// 分割代入をすることで直接プロパティにアクセスすることが出来るようになります。
// 関数の呼び出し時に分割代入が行われる。
printUserId(user);      // => 1
printUserId(other_user);  // => 2
分割代入されるタイミング

分割代入されるタイミングには、2種類あります。

  • 変数にオブジェクトまたは配列が代入される時

  • 関数やオブジェクトを呼び出す時(厳密にいうと、仮引数に実引数が渡る時)

// 分割代入で受け取る値を厳密に指定できるので、どのような値を受け取るのか想像できます。
function printUserId({id, name}){
// idとnameの値を受け取りたいと指定できる
    console.log(id);
    console.log(name);
}
const user = {
    id: 42,
    name: "城之内"
};
// 仮引数のidとnameに値が分割代入されて入ります。
// idには42が、nameには城之内が入ります。
printUserId(user);
// => 42
// => 城之内

参照

JavaScript Primer 関数と宣言