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

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

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

【JavaScript】スコープ(Scope)について理解しよう本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。...

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門～モダンスタイルによる基礎から現場での応用まで

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

Contents

1 名前付き関数の場合
2 無名関数の場合
3 まとめ

名前付き関数の場合

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

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

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

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

無名関数の場合

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

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

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