［GAS］［slack］営業日カウントダウンbotを作っている途中　その4　アロー関数は関数リテラルの場合の省略形

前回

いま気になっていること

一個わからないことがあって調べると、わからないことが20個くらいになって最初のわからないこともわからない状態

— a03⛅ (@a03) April 17, 2022

つらい。ううう、ゆうせんじゅんい...…ぷらいおりてぃ...…。

1. クラスおさらい→アロー関数

2. クラス化

3. emoji-codeでもアイコンいけるんじゃないの？

4. webhoook

5. カレンダ　祝日+土日+指定休日の統合

6. スクリプトファイルの並び順　https://developers.google.com/apps-script/releases

関数式 - JavaScript | MDN

アロー関数

処理を簡略化して書けるやつ。
GAS本写経しつつ理解を試みる。

まず、関数とは一連の処理をまとめたものであり、その定義の方法として
・function文による関数の宣言
・関数リテラル
・アロー関数
などいくつか方法がある。

関数リテラルがよくわかってなかった。

function文による関数の宣言　構文

function functionName() {
  //処理
}

関数リテラル（匿名関数、無名関数）構文

function () {
  //処理
}

関数リテラルは、functionName　関数名がなく、そのまま処理に入っている。

デフォルト引数と残余引数、値渡しと参照渡しも自信ないが、一旦割愛。

コード例

//function文による関数の宣言
function sayHallo1_() {
  console.log(`Hello!1`);
}

function sayGoodBye1(){
  sayHallo1_();
  console.log(`Good bye1.`)
}


//関数リテラル
const sayHallo2_ = function () {
  console.log(`Hello!2`);
}

function sayGoodBye2(){
  sayHallo2_();
  console.log(`Good bye2.`)
}

関数リテラルをconstから書くのに慣れない。
え、そこにfunctionきていいんだ？という感じがする。
でも、まあそうか、定義した勝ちというか...？

で、アロー関数ですよ、なんでもかんでも省略できるわけでなく、関数リテラルには、それを短縮する書き方がある＝アロー関数なんだな、あってる？？？ここがわかってなかったんだな、だからfunction宣言と関数リテラルの違いもあいまいだったし、そりゃアロー関数わかんねえや。

アロー関数　構文

//アロー関数　構文　基本形
(仮引数1, 仮引数2 ...) => {  
//処理
}

//アロー関数　構文　仮引数がひとつの場合、()を省略可能
仮引数1　=> {  
//処理
}

//アロー関数　構文　関数に含むステートメントがひとつの場合、{}を省略可能
(仮引数1, 仮引数2 ...)) => ステートメント

//アロー関数　構文　関数に含むステートメントがひとつで、return文の場合はreturnを省略して、戻り値だけの記述にできる
(仮引数1, 仮引数2, ...) => 戻り値

それらを踏まえて、この前分からなかったやつをみてみる

じゃあ、これを踏まえて、こちらのコード例を見てみよう

function cat1() {
  class Cat {
    meow() {
      console.log('Meow!')
    }
  }
  const test2 = new Cat();
  test2.meow(); // -> Meow!
  Cat.prototype.meow = nakigoe => { console.log(nakigoe) };
  test2.meow('Meow!Meow!'); // -> Meow!Meow!
}

function cat2() {
  class Cat {
    meow() { console.log('Meow!') }
  }
  const test2 = new Cat();
  test2.meow(); // -> Meow!

  Cat.prototype.meow = function(nakigoe) {
    console.log(nakigoe);
  }
  test2.meow('Meow!Meow!'); // -> Meow!Meow!
}

問題の部分はここ↓

//1  
Cat.prototype.meow = nakigoe => { console.log(nakigoe) };

//2
Cat.prototype.meow = function(nakigoe) {
console.log(nakigoe);
}

結果はおなじ、やってることは同じだが書き方が違う。

//1-2
nakigoe => { console.log(nakigoe) };

//2-2
function(nakigoe) {
console.log(nakigoe);
}

1は関数リテラル、匿名関数、無名関数になっている。
2はそれをアロー関数にしている。
引数が1つなので、下記の書き方ができる。

//アロー関数　構文　仮引数がひとつの場合、()を省略可能
仮引数1　=> {  
//処理
}

は～、やっとここまで来れた。長かった。
アロー関数は相変わらず苦手意識ありますが、関数リテラルの場合、アロー関数として省略して書けると分かっただけでも良かったとしましょう。

ちょっとまた、わけわからなくなってきて、

本当は
const Cat.prototype.meow = nakigoe => { console.log(nakigoe) };
とか
let Cat.prototype.meow = nakigoe => { console.log(nakigoe) };

書かなきゃか？となったりしたが、
これは変数、定数宣言であって
今回のこれはプロパティを変更・追加する操作であって新しく変数/定数宣言してるわけでないから、要らんのよな。
あ～～～。

は～～～～も～～～～～頭良くなりたいよ～～～～

#GAS
#ノンプロ研
#アロー関数
#関数リテラル
#function宣言