JavaScriptの省略といろいろな引数

省略が多いJavaScript

JavaScriptの省略形はES6以降かなり多くなっています。
この記事ではJavaScriptの省略形について説明して行きます。

アロー関数

まずは　=>(矢印)を使うアロー関数から説明して行きます。
まずは基本形です。

function fn(arg) {
  //処理
}

const fn = (arg) => {　　//無名関数を　=>で省略
  //処理
})

実際のコードをみて行きます。

まず無名関数をアロー関数で定義した省略無しのコードです。

const message = (count) => {
  return count + 1;
};

const count = 10;
const result = message(count);
console.log(result);
//11と出力

次にアロー関数の後ろのブロック省略、return省略したコードです。

const message = (count) => count + 1;

const count = 10;
const result = message(count);
console.log(result);
 //11と出力

オブジェクトのメソッド省略

分割代入

分割代入の使い方を説明して行きます。まず基本形です。

const staff = {
  name: 'Taro Tanaka',
  id: '4655',
  officeMember() {
    console.log('社員です。');
  },
};

//staffオブジェクトから分割代入
const { name, officeMember } = staff;
console.log(name);

//Taro Tanaka　と出力

const staff = {
  name: 'Taro Tanaka',
  id: '4655',
  officeMember() {
    console.log('社員です。');
  },
};

//staffオブジェクトから分割代入
const { name, officeMember } = staff;
console.log(name);　//関数(function)を確認できる
officeMember(); 

//Taro Tanaka
// ƒ officeMember() {
  //  console.log('社員です。');
 // }
// 社員です。

keyとvalueが同じなら省略できる

const name = '太郎';
const id = 1;

const staff = { name: name, id: id };
console.log(staff);
//{name: '太郎', id: 1}

省略すると

const name = '太郎';
const id = 1;

const staff = { name, id };
console.log(staff);

//{name: '太郎', id: 1}

引数

JavaScriptには色々な引数があります。
それぞれみていきます。

デフォルト引数

function execute(arg = 'デフォルト引数') {
  return arg;
}

//関数
const result1 = execute();
console.log(result1);

const result2 = execute('JS');
console.log(result2);

//デフォルト引数
//JS

キーワード引数

{}が引数になります。

function execute({ arg1, arg2, arg3 }) {
  return { arg1, arg2, arg3 };
 }
 const result = execute({ arg1: 'test1', arg2: 'test2', arg3: 'test3' });   
 console.log(result);

//{animal1: '犬', animal2: '猫', animal3: '猿'}

可変長引数

function execute(...args) {
  console.log(args[0]);
  console.log(args[1]);
  console.log(args[2]);
}
execute('nori', '[e-mail]', 'ぴーこ');
//nori
//[e-mail]
//ぴーこ

オプション引数

function execute({ ...args }) {
  console.log(args.name);
  console.log(args.email);
  console.log(args.number);
}

execute({
  name: 'nori',
  email: '[e-mail]',
  number: '1234',
});
//nori
//[e-mail]
//1234

最後に

スプレッド演算子(...)で配列やオブジェクトが展開できます。
今後もいろいろな省略を更新して行きます。

⚫︎参考資料
https://qiita.com/nayuneko/items/e3ac089bdd6f6d726f9f