12
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScript関数

Last updated at Posted at 2022-01-15

関数を定義する

JavaScriptでは、関数は次のように定義される。

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

上記のabs()関数の定義は次のとおりです。

  • functionは関数を定義することを示す。
  • absは関数の名前です。
  • (x)のxは関数のパラメーターであり、複数のパラメーターは[,]で区切られている。
  • {...}の間のコードは関数本体であり、複数のコードを含める。

要注意:関数本体内のステートメントが実行される時、returnが実行されると、関数が実行完了、結果が返される。 したがって、条件付きの判断とループにより、関数内に非常に複雑なロジックが実装できる。

returnステートメントがない場合、関数は実行後に結果も返しますが、結果はundefinedです。

JavaScript関数もオブジェクトであるため、上記で定義したabs()関数は関数オブジェクトであり、関数名absは関数を指す変数と見られる。

したがって、関数を定義する2番目の方法は次のとおりです。

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

このように、function(x){...}は無名関数であり、関数名はありません。 ただし、この無名関数は変数absに割り当てられているため、変数absを介して関数を呼び出すことができる。
上記の2つの定義は完全に同じです。

関数を呼び出す

関数を呼び出す時に、パラメーターを順序で渡す。

abs(10); // 10を返す
abs(-8); // 8を返す

定義されているよりも少ないパラメータを渡しても問題はありません。

abs(); // NaNを返す

この時点、abs(x)関数のパラメーターxundefined受信され、結果はNaNです。

変数のスコープ

JavaScriptでは、var宣言された変数はスコープされる。
変数が関数本体の内部で宣言されている場合、変数のスコープは関数本体全体であり、変数を関数の外部で参照することはできません。

function foo() {
    var x = 1;
    x = x + 1;
}
x = x + 2; // ReferenceError! 関数の外部で変数xを参照できません。

2つの異なる関数が同じ変数を宣言する場合、その変数はそれぞれの関数の本体内でのみ機能する。つまり、異なる関数内の同じ名前の変数は互いに独立しており、互いに影響を与えません。

function foo() {
    var x = 1;
    x = x + 1;
}

function bar() {
    var x = 'A';
    x = x + 'B';
}

JavaScript関数はネスト(関数内関数)できるため、この時点で、内部関数は外部関数に定義された変数にアクセスできますが、その逆はできません。

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // barはfooの変数xにアクセスできる
    }
    var z = y + 1; // ReferenceError! fooはbarの変数yにアクセスできません
}

内部関数と外部関数の変数名が同じ名前の場合はどうなりますか?それをテストしてみましょう:

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        console.log('x in bar() = ' + x); // 'A'
    }
    console.log('x in foo() = ' + x); // 1
    bar();
}
foo();
// 結果:
// x in foo() = 1
// x in bar() = A

これは、JavaScript関数が変数を探すときに独自の関数の定義から始まり、「内部」から「外部」まで検索することを示している。内部関数が外部関数と同じ名前の変数を定義している場合、内部関数の変数は外部関数の変数をシールドする。

12
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?