未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【JavaScript】関数内の変数を関数外で使う方法

JavaScriptには関数スコープと呼ばれる、関数内で宣言された変数はその関数内でしか参照することができません。よって、普段通りに関数内の変数を外で使用してもエラーが発生しています。

本記事では、本来であれば参照することのできない関数内の変数を使う方法について解説しています。

【JavaScript】スコープ(Scope)について理解しよう【JavaScript】スコープ(Scope)について理解しよう

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

名前付き関数の場合

まず始めに、名前付き関数内で宣言された変数を使いたい場合の記述方法は以下の通りです。

JavaScript
  function nameFn() {
    let firstName = "Taro";
    let lastName = "Yamada";
    return {
      firstName,
      lastName,
    };
  }
  console.log(nameFn().firstName); // -> Taro
  console.log(nameFn().lastName); // -> Yamada

return内に関数外で使用したい変数を追加します。オブジェクト形式で記述しプロパティ名とクラス名が同じ場合、一つにまとめる省略記法を使うことができます。

関数外で使用する際は「関数名().プロパティ名」で参照することができます。

無名関数の場合

続いて、無名関数内で宣言された変数を使いたい場合の記述方法は以下の通りです。

JavaScript
  const nameInfo = function () {
    let firstName = "Taro";
    let lastName = "Yamada";
    return {
      firstName,
      lastName,
    };
  };
  console.log(nameInfo().firstName); // -> Taro
  console.log(nameInfo().lastName); // -> Yamada

名前付き関数の場合とほとんど同じですが、関数外で使用する際は「変数名().プロパティ名」で参照することができます。

まとめ

関数内の変数を関数外で使用する機会は多くありませんが、いざという時に役に立ちますので覚えておきましょう。

下記の記事で即時関数内で宣言された変数を関数外で使用する方法について解説しているので、興味のある方はご参考ください。

【JavaScript】即時関数内で宣言した変数や関数を使う方法【JavaScript】即時関数内で宣言した変数や関数を使う方法