Help us understand the problem. What is going on with this article?

JavaScript 関数・アロー関数について お勉強

参考にしたもの

先輩方の知恵に感謝!

関数の宣言(定義)についてまとめてみました

① 関数の宣言(定義)

function greeting(yourName) {
  console.log('Hi' + yourName)
}

greeting('Ryu')
// HiRyu

② 関数を変数に代入する

let greeting = function greeting(yourName) {
  console.log('Hi' + yourName)
}

greeting('Ryu')
// HiRyu

③ 関数を変数に代入する + 関数名の省略(無名関数)

このパターンが無名関数と呼ばれます

let greeting = function (yourName) {
  console.log('Hi' + yourName)
}

greeting('Ryu')
// HiRyu

④ 関数の呼び出しは、宣言の前に置くことができます(Not実行)

greeting('Ryu')

function greeting(yourName) {
  console.log('Hi' + yourName)
}

// HiRyu

※変数に代入した場合は、実行できないので、ご注意を...

⑤ 関数は自身も参照できます

完全に階乗忘れてしまっていたので、
少し階乗のお勉強をしました(階乗の意味と値の一覧。なぜ0の階乗は1になる?)

要点

  • 階段のように1つずつ乗数(かける数)が減っていくのが特徴
  • ◯! こんな形してる
// factorial 階乗の、要因の意味

function factorial(number) {
  if((number == 0) || (number == 1))
    return 1
  else
    return (number * factorial(number - 1))
}

console.log(factorial(1))
console.log(factorial(2))
console.log(factorial(3))
console.log(factorial(4))
console.log(factorial(5))

// 1
// 2
// 6
// 24
// 120

⑥ アロー関数

【アロー関数・スプレッド構文・Promise】ES2015の書き方

無名関数の定義に便利

let greeting = (yourName) => {
  console.log('Hi' + yourName)
}

greeting('Ryu')
// HiRyu

⑦ アロー関数 return文の省略

【JavaScript入門】returnの使い方と戻り値・falseのまとめ!

JavaScriptはreturn文を書かなければ、値が返ってきません

しかし、アロー関数では、中身がreturn文だけの場合、{}を省略して記述することができます(値が返ってくる)

式はそのまま値になり、文はreturn文で値を返す

let greeting1 = (yourName) => 'Hi' + yourName

console.log(greeting1('Ryu'))
// HiRyu

let greeting2 = () => 'Hi'

console.log(greeting2())
// Hi

let number = () => 1

console.log(number())
// 1

⑧ アロー関数 引数が一つの場合

引数がない場合は、()を省略できます

let greeting = yourName => 'Hi' + yourName

console.log(greeting('Ryu'))
// HiRyu

⑨ アロー関数 引数がない場合

引数がなくても()はつけましょう

let greeting = () => 'Hi'

console.log(greeting())
// Hi

補足

メソッドを呼ぶ際に()をつけ忘れたら、見たことのない値が返ってきた

let greeting = () => 'Hi'

console.log(greeting)
// () => 'Hi'

JavaScriptの「型」の判定について

型を調べてみると、

let toString = Object.prototype.toString
let greeting = () => 'Hi'

console.log(typeof(greeting))
console.log(toString.call(greeting))

// function
// [object Function]

function(関数)なんですね

呼び出し

greeting()

変数(の中身)

greeting

今更ながら、勉強になります

最後に

アロー関数を使うメリットは、今のところ

  • 宣言時のthisを束縛して、固定できる
var self = this
// コレいらない
...forEach(function() {
})
  • ちょっとかっこいい

くらいしか分かりませんが、ちょこちょこ学んでいきます

次は、Promiseを調べます

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away