現役エンジニアさんに聞きたい。アロー関数とfunctionについて
Q&A
現役エンジニアさんにお聞きしたいです
初めての投稿となります。
現在、JavaScriptを学習中です。
本日関数を学習中、アロー関数とfunction(関数宣言)の2つの書き方が出てきました。
個人的には、functionのほうが書きやすいのでは?と思ったのですが、実際の違いや使い方の違いなど教えていただければ助かります。
Q&A
初めての投稿となります。
現在、JavaScriptを学習中です。
本日関数を学習中、アロー関数とfunction(関数宣言)の2つの書き方が出てきました。
個人的には、functionのほうが書きやすいのでは?と思ったのですが、実際の違いや使い方の違いなど教えていただければ助かります。
functionはthisとargumentsという二つの引数を持つ型の一種です
function test(x){
console.log(this)
console.log(arguments[0]) //引数xへの参照
}
argumentsは関数自身の引数への参照を配列として持つ変数です
arguments[0]は第一引数へのアクセスを意味します
thisは関数が宣言されたスコープを参照します
例えばあるオブジェクトの中で宣言された関数のthisはそのオブジェクトのインスタンスをスコープとして認識します
function test(){
console.log(this)
}
test() //thisのスコープはグローバル
const a={
b:test,
c:function(){
test() //thisのスコープはグローバル
}
}
a.b() //thisのスコープはaのオブジェクト
アロー関数はこれら二つの引数を持たない関数オブジェクトと呼ばれる値です
thisやargumentsはアロー関数の外部からキャプチャされます
そのためthisの参照スコープはアロー関数が定義される関数の所属スコープに依存します
function test(){
const a={
b:()=>console.log(this)
}
}
test() //thisのスコープはグローバル
このように外部の変数を積極的に取得するような関数をクロージャと呼びます
そもそもJSの関数定義はfunctionしかないことを覚えておいて下さい(無名関数は別)。
アロー関数はオプション的な扱いです。
ここで実際の違いや使い方をたらたら書くよりMDN読まれた方が何倍も良いです。
それをとにかく読んでみた上で、分からないことがあれば改めて別の質問を新規に立ち上げたら良いかと思います。
豆知識的な話に成りますが、プログラムは上から順に実行されるのが基本ですが、関数定義は最初に解釈されます。
ですので、定義位置が後方にあったとしても問題は有りません。
しかし、無名関数の類いであるアロー関数は別で、無名関数は先に解釈されることは無く、基本的に変数へ代入してから使うというステップを踏む必要があります。
"use strict";
// functionの定義が後方にあっても先に解釈されるから問題なし
console.log(foo(1));
function foo(a) {
return a + 1;
}
// 変数宣言は上から順番に解釈されるから、barという関数は定義されてないことになる
console.log(bar(1));// この位置にあるとエラー
const bar = a => a + 1;
// console.log(bar(1));
// ^ 変数宣言よりも後方であれば問題ない
// これ(無名関数)も同様にエラーとなる
console.log(baz(1));
const baz = function (a) {
return a + 1;
};
私が最初に「関数定義はfunctionしかない」と言った意味はこういうことです。もちろんこれ以外にも理由はありますが事細かく書く気はないので、気になるようでしたらMDNなりググるなりしてみて下さい。