個人的なメモ「js基礎」

# 変数
let : 上書き可能 
const : 上書き不可 

|型       |  説明  |
|:--------|-------|
|Number   | 数値   |
|String   | 文字列 |
|Boolean  | 真偽値 |
|Undefined | 未定義|
|Null     | 空の値 |
|Symbol   |一意の値|

変数の宣言に型を指定する必要はない。(動的型付け言語)
型の調べ方
~~~javascript:
let test = 'test'
console.log(typeof test)
>> String
~~~

# 関数
関数の定義1
~~~javascript
function 関数名(引数) {
    処理
    return 戻り値
}

function sum(num1, num2) {
    result = num1 + num2
    return result
}
console.log(sum(10, 5));
>> 15
~~~
関数の定義2
~~~javascript
const sub = function(num1, num2) {
    result = num1 - num2
    return result
}
console.log(sub(10, 5))
>> 5
~~~

# メソッド・プロパティ
~~~javascript
let first_name = 'Otani Jiro';
console.log(first_name.toUpperCase());
>> OTANI Jiro

console.log(first_name.length);
>> 10

console.log(first_name.split(' '));
>> ['OTANI', 'Jiro']
~~~

# 配列
~~~javascript
const arry = [1, 2, 3, 4, 5];
console.log(arry);
>> [1, 2, 3, 4, 5]

# constで宣言しても要素の値を変えることができる
arry[0] = 100
console.log(arry)
>> [100, 2, 3, 4, 5]

# 新しく配列を作ることはできない
arry = []
>> main.js:7 Uncaught TypeError: Assignment to constant variable.

# 配列で使えるメソッド
arry.push(100)
console.log(arry)
>> [100, 2, 3, 4, 5, 100]
~~~
基本的なメソッド
|メソッド     |説明                       |
|:-----------|--------------------------|
|push        |要素を末尾に追加             |
|unshift     |要素を先頭に追加             |
|pop         |末尾の要素の削除と取得        |
|shift       |先頭の要素の削除と取得        |
|map         |mapの引数に関数を指定。指定した関数の第一引数に配列の要素、第二引数にインデックスが入る|


###スプレット構文
~~~javascript
const arr = [10, 20, 30]
console.log(arr)
>> [10, 20, 30]

// スプレット構文「...」を使うと配列が展開される
console.log(...arr)
>> 10, 20, 30

// スプレット構文を使った配列の結合、コピー
const arr1 = [1, 2, 3]
const arr2 = [10, 20, 30]
const arr4 = [...arr2, ...arr3]
console.log(arr4)
>> [1, 2, 3, 10, 20, 30]

// 配列をイコールで代入し、コピーする場合
const arr5 = arr1
arr[0] = 100
console.log('arr5: ' + arr5)
console.log('arr1: ' + arr1)
>> arr5: [100, 2, 3]
>> arr1: [100, 2, 3]
// arr1の方の値も変わる(メモリのアドレスをコピーしている)

// スプレット構文を使ったコピー
const arr6 = [...arr1]
arr6 = 100
console.log('arr6: ' + arr6)
console.log('arr1: ' + arr1)
>> arr5: [100, 2, 3]
>> arr1: [1, 2, 3]
// arr6の値だけ変更できる

# オブジェクト
~~~javascript
const car = {
    name: 'シエンンタ',
    price: 1000000,
    spec: {model: '2017/07, weight: 1300'},
    TaxIncluded: function() {
        console.log(this.price + (this.price * 0.1))
    }
};

console.log(car.name);
>> シエンタ

console.log(car.spec.model);
>> 2017/07

car.TaxInclude()
>> 1100000
~~~

# 繰り返し処理 for
~~~javascript
const arry = [1, 2, 3, 4, 5]
for(let i = 0; i < arry.length; i++) {
    console.log(arry[i])
}
>> 1
>> 2
>> 3
...

# for in
for(let i in arry) {
    console.log(i);
}
>> 0
>> 1
>> 2
...


# for of
for(let v of arry) {
    console.log(v);
}
>> 1
>> 2
>> 3
...
~~~

# 条件分岐 if
~~~javascript
const fruits = [
    {
        name: 'apple',
        price: 50 
    },
    {
        name: 'banana',
        price: 80
    },
    {
        name: 'orange',
        price: 30
    }
]

let money = 50

for(let fruit of fruits) {
    if(money === fruit.price) {
         console.log('ちょうど買える: ' + fruit.name)
    }
    else if(money >= fruit.price){
        console.log('買える: ' + fruit.name)
    }
    else {
        console.log('買えない: ' + fruit.name)
    }
}

>> ちょうど買える: apple
>> 買えない: banana
>> 買える: orange
~~~
条件式に`==`を使うと型変換が行われ比較される
`if(100 == '100')` => `true`
条件式に`===`を使うと型も比較の対象になる
`if(100 === '100')` => `false`

# 三項演算子
構文: 条件 ? trueの場合 : falseの場合
~~~javascript
const num = 130;
const result = num > 100 ? 100以上です。 : 100以下です。
console.log(result)
>> 100以上です。
}

# アロー関数
関数を省略して書ける
~~~javascript
# 普通の関数
const hello(name) = function() {
    console.log('hello ' + name)

# アロー関数
# 引数が一つの場合
const hello = name => console.log('hello ' + name)
# 引数が複数またはデフォルト値がある場合
const hello = (name='Smith', age) = > console.log('hello ' + name)
# 処理が複数行ある場合
const hello = (name='Smith', age) => {
    console.log('hello ' + name)
    console.log('age: ' + age)
}
~~~

# forEach
~~~javascript
const arry = [1,2,3,4,5]

# for文の場合
for(let i = 0; i < arry.length; i++) {
    console.log(i, arry[i], arry)
}

# forEachの場合
arry.forEach((val, i, ary) => console.log(val, i, ary))
~~~
短く記述することができる

# reduceメソッド
~~~javascript
const arry = [1,2,3,4,5]

arry.reduce(function(accu, curr) {
    console.log(accu, curr)
    return accu + curr
})

>> 1 2
>> 3 3
>> 6 4
>> 10 5
~~~
`reduce`を使うと引数の渡した関数の戻り値が`accu`に格納される。
分かりずらかったので自分でそれっぽいコードを書いてみた。
~~~javascript
const arry = [1,2,3,4,5]

function reduce(arr, callback, def=0) {
    accu = def

    for(let v of arr){
        if(!accu){
            accu = v
        }
        else {
            curr = v
            accu = callback(accu, curr)
        }
    }
}

const callback = ((accu, curr) => {
    console.log(accu, curr)
    return accu * curr
})

reduce(arry, callback)
~~~
第二引数にデフォルト値を設定できる。
デフォルト値を設定する状況
~~~javascript
# デフォルト値なし
const str = 'animation'
const strAryy = str.split('')

const result = strAryy.reduce((accu, curr) => {
    return accu + '<' + curr + '>'
})

console.log(result)
>> a<n><i><m><a><t><i><o><n>

# デフォルト値あり
const result = strAryy.reduce((accu, curr) => {
    return accu + '<' + curr + '>'
}, "")

console.log(result)
>> <a><n><i><m><a><t><i><o><n>
~~~
リストに格納した文字を一文字づつ取り出して処理をする場合、第一引数で渡した関数の処理が最初の要素には適用されない。
このような場合にデフォルト値を渡すことで最初の要素にも処理が適用される。