メインコンテンツまでスキップ

関数は値

他の言語では関数は特別な立ち位置のことがあります。ある言語では、同じ名前の変数を定義してもエラーにならないのに対し、同じ名前の関数定義はエラーになります。またある言語では、関数を変数に代入できなかったりします。

JavaScriptの関数は値です。つまり、PHPのような他の言語と比べると特別扱いの度合いが少ないです。たとえば、関数を変数に代入することができます。

js
function hello() {
return "Hello World";
}
 
const helloWorld = hello; // 関数を変数に代入
 
helloWorld(); // 関数呼び出しも問題なくできる
js
function hello() {
return "Hello World";
}
 
const helloWorld = hello; // 関数を変数に代入
 
helloWorld(); // 関数呼び出しも問題なくできる

また、JavaScriptでは定義済みの関数と同じ名前の関数を宣言することができます。これはエラーにはなりません。これは実質、再代入のような振る舞いになります。

js
function hello() {
return "HELLO";
}
 
// これは二度目の関数宣言ですが、実質的には再代入です
function hello() {
return "KONNICHIWA";
}
 
hello();
KONNICHIWA
js
function hello() {
return "HELLO";
}
 
// これは二度目の関数宣言ですが、実質的には再代入です
function hello() {
return "KONNICHIWA";
}
 
hello();
KONNICHIWA

このようにJavaScriptの関数は、bool値やstring値などと同じような値としての性質があります。意図しない再代入はバグの原因になりますが、JavaScriptでは関数宣言では注意して書く以外に方法はありません。

JavaScriptで関数の再代入によるバグを未然に回避したい場合は、constと関数式を組み合わせます。関数式については後述します。

js
const hello = function () {
return "HELLO";
};
js
const hello = function () {
return "HELLO";
};

ちなみに、TypeScriptではコンパイラーが重複した関数宣言を警告してくれるので、バグの心配はありません。

関数のスコープ

関数は値なので、関数名のスコープも変数と同じようにスコープの概念があります。たとえば、関数スコープの中で定義された関数は、そのローカルスコープでのみ使うことができます。

js
function main() {
// ローカルスコープの関数
function hello() {
console.log("hello");
}
 
hello();
}
 
main();
"hello"
 
// ローカルスコープで宣言された関数にはアクセスできない
hello();
ReferenceError: hello is not defined
js
function main() {
// ローカルスコープの関数
function hello() {
console.log("hello");
}
 
hello();
}
 
main();
"hello"
 
// ローカルスコープで宣言された関数にはアクセスできない
hello();
ReferenceError: hello is not defined
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。