JavaScriptには関数スコープと呼ばれる、関数内で宣言された変数はその関数内でしか参照することができません。よって、普段通りに関数内の変数を外で使用してもエラーが発生しています。
本記事では、本来であれば参照することのできない関数内の変数を使う方法について解説しています。
あわせて読みたい
【JavaScript】スコープ(Scope)について理解しよう
本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。 スコープとは JavaScriptのスコープとは、値と式が参照できる有効範囲…
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
名前付き関数の場合
まず始めに、名前付き関数内で宣言された変数を使いたい場合の記述方法は以下の通りです。
function nameFn() {
let firstName = "Taro";
let lastName = "Yamada";
return {
firstName,
lastName,
};
}
console.log(nameFn().firstName); // -> Taro
console.log(nameFn().lastName); // -> Yamadareturn内に関数外で使用したい変数を追加します。オブジェクト形式で記述しプロパティ名とクラス名が同じ場合、一つにまとめる省略記法を使うことができます。
関数外で使用する際は「関数名().プロパティ名」で参照することができます。
無名関数の場合
続いて、無名関数内で宣言された変数を使いたい場合の記述方法は以下の通りです。
const nameInfo = function () {
let firstName = "Taro";
let lastName = "Yamada";
return {
firstName,
lastName,
};
};
console.log(nameInfo().firstName); // -> Taro
console.log(nameInfo().lastName); // -> Yamada名前付き関数の場合とほとんど同じですが、関数外で使用する際は「変数名().プロパティ名」で参照することができます。
まとめ
関数内の変数を関数外で使用する機会は多くありませんが、いざという時に役に立ちますので覚えておきましょう。
下記の記事で即時関数内で宣言された変数を関数外で使用する方法について解説しているので、興味のある方はご参考ください。
あわせて読みたい
【JavaScript】即時関数内で宣言した変数や関数を外で使う方法
本記事では、即時関数内で宣言した変数や関数を即時関数の範囲外で使う方法について解説しています。 クロージャーやスコープについてある程度理解できている人向けの内…