Functionとconstの宣言の違いに関してまとめてみた

2つの宣言方法について

まず、constで宣言される関数の宣言は、アロー関数式を使用している。
例えば以下のようなコードです。

const MyFunctionComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}

一方、通常のfunctionを使用する場合には、以下のようなコードです。

function MyFunctionComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

違いはあるのか？

両方の宣言方法には、関数の機能上の違いはあまりない。しかし、アロー関数式は、関数の宣言を簡潔にするために一般的にはアロー関数が使われることが多いと思われる。
また、アロー関数式は、thisの動作についても異なる。以下例になります。

class MyClass {
  myProperty = 'Hello, World!';
  
  myArrowFunction = () => {
    console.log(this.myProperty); // => "Hello, World!"
  }
  
  myFunction() {
    console.log(this.myProperty); // => "Hello, World!"
  }
}

const myInstance = new MyClass();

const arrowFunction = myInstance.myArrowFunction;
const regularFunction = myInstance.myFunction;

arrowFunction(); // => "Hello, World!"
regularFunction(); // => TypeError: Cannot read property 'myProperty' of undefined

arrowFunctionを呼び出すと、myPropertyの値が正常に出力されます。これは、アロー関数式ではthisキーワードが、関数が宣言された場所にバインドされるため。
一方、regularFunctionを呼び出すと、TypeErrorが発生します。これは、通常のfunctionではthisキーワードが、関数が実行されたコンテキストにバインドされるため。そのため、myFunction内でthisキーワードを使用すると、myInstanceオブジェクトを参照できないため、TypeErrorが発生。

コンテキストにバインドするとは？

「コンテキストにバインドする」とは、thisキーワードがどのオブジェクトを参照するかを決定することを指す。
JavaScriptでは、thisキーワードは実行時に動的に決定される。thisキーワードは、どのオブジェクトが呼び出し元であるかによって異なるオブジェクトを参照することがあります。
以下コード例です。

const myObject = {
  myProperty: 'Hello, World!',
  myMethod: function() {
    console.log(this.myProperty);
  }
};

myObject.myMethod(); // => "Hello, World!"

このコードでは、myObjectというオブジェクトを定義し、その中にmyPropertyとmyMethodという2つのプロパティを定義しています。myMethodは、functionを使用して定義される。

myMethodを呼び出すと、コンソールに"Hello, World!"が表示される。これは、myMethodが呼び出し元であるmyObjectオブジェクトがthisキーワードの参照先になっているため。

このように、thisキーワードが参照するオブジェクトは、呼び出し元によって異なるため、動的に決定される必要がある。