# JavaScript Basic

## 型

**プリミティブ**

- boolean
- number
- string
- null
- undefined

nullは「何もない」、undefinedは「未定義」（変数を宣言したけど、値を代入していない。return文を書いていない関数を呼び出した。存在しないプロパティにアクセスしたetc)

    nullはわざわざ何もないことを宣言した状態、undefinedはまだ何もしていない状態

**参照型**

- array
- object
- function
## for..in

指定された配列やオブジェクトのメンバーに対して処理を行う

    for (仮変数 in 配列/オブジェクト) {
      // do something
    }

**例**

    var member = ['太郎', '二郎', '三郎'];
    for (var m in member) {
        console.log('名前は' + member[m]);
    }
    // 名前は太郎
    // 名前は二郎
    // 名前は三郎
## オブジェクト

JavaScriptの関数はreturn文が明示されていない場合は自動的に呼び出し元にundefinedが返される。
しかし、new演算子を用いた場合は自動的にオブジェクトのインスタンスが返却される。
以下の場合、obj1はmyFuncに格納されている無名関数で生成されるインスタンスが返されている。
しかし、obj2は無名関数を呼び出しただけになっており、return文がないのでundefinedが返される。

    var myFunc = function() {
        this.prop1 = 'bar';
        function() {
            this.prop1 + this.prop2;
        }
    }

    var obj1 = new myFunc();
    var obj2 = myFunc();

    console.log( obj1 ); // myFunc {prop1: "bar", prop2: "foo"}
    console.log( obj2 ); // undefined

new演算子がないとただの関数呼び出し、ある場合はインスタンスが返されることがわかる例：

    var myFunc = function() {
      this.prop1 = 'bar';
      return 'boo';
    }
    var obj1 = new myFunc();
    var obj2 = myFunc();

    console.log(obj1); // myFunc {prop1: 'bar'};
    console.log(obj2); // boo
## this

関数内で呼び出す`this`は関数呼び出し元のオブジェクトを参照する。
しかし、new演算子を用いてインスタンス化した場合、`this`はそのオブジェクト自身をさす。

## 関数

**argumentsオブジェクト**
呼び出し元から渡された引数を管理しているオブジェクトで、関数本体のスコープ内部で使用可能

    var addFunc = function() {
        console.log(arguments[0] + arguments[1]);
    }

    addFunc(1, 2) // 3

argumentsオブジェクトにはlengthメソッドを呼び出すこともできる

    var addFunc = function(val1, val2) {
        if (arguments.length != 2) {
            throw new Error('引数の数が違います!');
        }
        console.log(val1 + val2);
    }

    addFunc(1) // Uncaught Error: 引数の数が違います!

**名前つき引数**

    function showInfo(args) {
      var name = args.name;
      var age = args.age;

      console.log(name + ' ' + age);
    }

    showInfo({ name: 'Iga', age: 35 });

**高級関数**
JavaScriptの関数は、関数の引数や戻り値に設定することができる**高級関数**

    function higherOrder(values, fnc) {
        for (val in values) {
            fnc(values[val]);
        }
    }

    higherOrder( [1, 3, 5], function(val) {console.log(val)} ); // 1, 3, 5
## スコープチェーン

JavaScriptがどんな順序で変数やプロパティを参照するか決めたルール

- Callオブジェクト：関数を呼び出すたびに内部的に生成されるオブジェクト

スコープチェーンはGlobalオブジェクトとCallオブジェクトを、生成した順に連結したリストのようなもの
このリストは一番最初に生成されるGlobalオブジェクトを末端とし、Callオブジェクトが生成されるたびにその先端に紐付いているようなイメージ
JavaScriptの変数解決はこのリストの先頭からたどって、一番最初に見つかった値が採用される

    var x = 'Global';
    var y = 'Global';

    function outerFunc() {
        var x = 'Local Outer';

        function innerFunc() {
            var x = 'Local Inner';

            console.log(x); // Local Inner
            console.log(y); // Global
            console.log(z); // undefined
        }

        console.log(x); // LocalOuter
        innerFunc();
    }

    console.log(x); // Glabel
    outerFunc();
## クロージャ

ローカル変数を参照している、関数の中に定義している関数
以下では、ローカル変数：`count`、関数の中に定義している関数：`innerFunc()`

    function closure(initVal) {
        var count = initVal;

        var innerFunc = function() {
            return ++count;
        };

        return innerFunc;
    }

    var myClosure = closure(100);
    console.log(myClosure()); // 101
    console.log(myClosure()); // 102
    console.log(myClosure()); // 103

上の例では、innerFunc関数がGlobalオブジェクトであるmyClosureに格納されるため、closure関数が実行終了しても破棄されない。
スコープチェーンが破棄されず、innerFuncのCallオブジェクトも破棄されず、そのローカル変数countも破棄されないので、代入された値が残り、呼び出しのたびにincrementされる。

## プロトタイプ

オブジェクトには、メンバ（プロパティ、メソッド）を追加するためのprototypeプロパティというものがある

    var Phone = function(name) {
        this.name = name;
    };

    Phone.prototype.getName = function() {
        return this.name;
    };

    var featurePhone = new Phone('feature phone');
    var smartPhone = new Phone('smart phone');

    console.log(featurePhone.getName()); // feature phone
    console.log(smartPhone.getName()); // smart phone

インスタンス化したオブジェクトは、コンストラクタで定義されているメンバ分のメモリ領域を都度確保する。
プロパティはインスタンス毎に違う値になるのでそれでいいが、メソッドはインスタンスに関係なく同じ振る舞いをするので、コンストラクタで定義すると個別にメモリを確保するのは無駄になってしまう。
**インスタンス化されたオブジェクトは、使用したコンストラクタのprototypeプロパティに対して暗黙の参照を持つ**。**prototypeプロパティに格納したメソッドにも暗黙の参照を持っているので、自前でメソッドを持つ必要がない**。これで、無駄なメモリ領域の確保が防げる。
次のようにリテラル表記もできる。

    var Phone = function(name, model, color) {
      this.name = name;
      this.model = model;
      this.color = color;
    };

    Phone.prototype = {
      getName : function() { return this.name; },
      getModel : function() { return this.model; },
      getColor : function() { return this.color; }
    }

**プロトタイプチェーン**
prototypeプロパティを使ってJavaScriptで継承を行うための仕組み。
以下の`SmartPhone.prototype = new Phone();`の部分で、継承したいオブジェクトのインスタンスを自身のprototypeプロパティに格納し、インスタンスが自身のメソッドを見つからなければ、prototypeプロパティに格納されたプロパティ（親オブジェクトのプロパティ）にメソッドを見つけに行くと言う挙動をするようになる。

    var Phone = function() {};

    Phone.prototype = {
        getOwner : function() {
            console.log('Owner is', this.owner);
        }
    };

    var SmartPhone = function(owner) {
        this.owner = owner
    };
    // EXTENDS
    SmartPhone.prototype = new Phone();

    SmartPhone.prototype.tap = function() {
        console.log('tap!');
    }

    var myPhone = new

    SmartPhone('igarashi');
    myPhone.getOwner(); // Owner is igarashi
    myPhone.tap(); // tap!

    var otherPhone = new SmartPhone('tarama');
    otherPhone.getOwner(); // Owner is tarama
    otherPhone.tap(); // tap!