javascript　脱初心者を目指して　その１

#javascript　脱初心者を目指して　その１
javascriptで基本は抑えたけれど
もう少しレベルアップするにはどうしたらいいか？

そんな方に向けて以下をまとめました。
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

##目次
###javascript　脱初心者を目指して　その１(今回)
・配列の基本
・オブジェクトの基本
・繰り返しの基本
　①for 構文
　②for in 構文
　③for of 構文
　④配列にオブジェクトが入った場合の繰り返し
・if文と判定処理
###javascript　脱初心者を目指して　その2（次回）
・アロー関数と省略記法
・コールバック関数
・コールバック関数とループ処理
・配列とforEachメソッド
・配列とreduceメソッド　

##配列の基本
まずは基本です。
###配列宣言の方法は２種類

```javascript

//配列宣言1
const arry1 = new Array(1,2,3,4,5)
//配列宣言2
const arry2 = [1,2,3,4,5]
```

変数名にarrayを使うのは避けましょう。
理由は大文字小文字を区別するため使えるが
バグの原因になる可能性があるためです。

###javascriptの配列の特徴
数値/文字列/Boolean（true/false）など異なる型を格納できる

```javascript
const arry = [1,2,3,4,5,'文字',false]  //数値、文字列、boolean
```
const(定数)で宣言しても中身の変更は可能
同配列名を複数作ることはできない

```javascript
const arry = [1,2,3,4,5,'文字',false]
arry[0] = 8  //結果 [8,2,3,4,5,'文字',false]
const arry =[7,4,5,2,6] //同配列名のためエラー
```
配列の取り出しは他の言語同様ブランケットに数字を入れて指定

```javascript
const arry = [1,2,3,4,5,'文字',false]
arry1[0] // 結果 1(0が１番目)
arry1[1] // 結果 2
arry1[3] // 結果 3
```
配列でよく使われる処理
※上から順に実行した場合です

```javascript
const arry = [1,2,3,4,5] 

配列の個数を数える .length
arry.length   // 結果 5 

配列の末尾に要素追加 .push
arry.push('末尾に追加') // 結果 [1,2,3,4,5,'末尾に追加']

配列の先頭に追加 .unshift
arry.unshift('先頭に追加') // 結果 ['先頭に追加',1,2,3,4,5,'末尾に追加']

末尾を削除 .pop
arry.pop() // 結果 ['先頭に追加',1,2,3,4,5]

削除した末尾を変数に代入 .pop応用
const val = arry.pop(); // 結果 ['先頭に追加',1,2,3,4] val=5

先頭を削除 .shift
arry.shift() // 結果 [1,2,3,4]

先頭を削除して変数に代入 .shift応用
const val2 = arry.shift(); // 結果 [2,3,4] val2=1 

```

##オブジェクトの基本
オブジェクトの作成/データの取り出し/書き換え

```javascript
最初から用意する
const dog = {name:'pochi'};

後から追加する
const cat ={};
cat.name='tama'; // {cat:'tama'}となる

配列やオブジェクトの格納も可能
const person = {
  name: ['taro','yamada'],
  age:15,
  bloodType:'A',
  personalData:{
    language:'japanese',
    gender:'male'
  }
}

データの取り出し
console.log(person.bloodType); //'A'を取り出しコンソールに出力
console.log(person.name[0]); //'taro'を取り出しコンソールに出力
console.log(person.personalData.language); //'japanese'を取り出しコンソールに出力

データの取り出し応用
const bloodKey = 'bloodType';   //変数にキーに入れる
console.log(person[bloodKey]);  //変数で呼び出す場合はブラケットで呼び出し

データの書き換え
person.age = 20 //  15→20へ書き換え
const person{}; //  同名の新規オブジェクト作成はエラー

関数の格納
const person = {
  name: ['taro','yamada'],
  age:15,
  bloodType:'A',
  personalData{
    language:'japanese',
    gender:'male'
  },
  getFullname:function(){  //関数格納部分
    console.log(this.name[0] + this.name[1]);  //thisはオブジェクト名(ここではperson)
  }
}

person.getFullname(); //taroyamadaをコンソールに出力
```

key：valueの形が見えていれば.と[]で指定するだけです。
{}や()が増えても慌てずに全体を見てkey:valueを見定めましょう

##繰り返し(for / for in /for of)
###for構文
頻繁に出てくる繰り返し処理です。
省略形の書き方を覚えましょう。

```javascript
const arry = ['red','blue','green','orange','black'];

コンソールに要素を１つずつ出力
for(let i = 0; i < 5; i = i + 1){ //iに0を代入  回数はiは5未満まで iに１を足す
  console.log(arry[i]);
}
上記を省略した書き方
for(let i = 0; i < arry.length ; i++){
  console.log(arry[i]);
}
```
実行結果
[![Image from Gyazo](https://i.gyazo.com/9d7e11b5a373c7a8e4ff4143c191f28e.png)](https://gyazo.com/9d7e11b5a373c7a8e4ff4143c191f28e)

###for in構文
i部分は任意に指定できますがindexの頭文字を取ることが多く
可読性も高まるのでインデックスはiを使いましょう

```javascript
const arry = ['red','blue','green','orange','black'];

for(let i in arry){
  console.log(i); //インデックスを順番に１つずつ取り出し
}

for(let i in arry){
  console.log(i,arry[i]);  //インデックスと値を１つずつ取り出し
}
```
実行結果
[![Image from Gyazo](https://i.gyazo.com/2d01a11c39f3ccb80e8476d05d7f63ef.png)](https://gyazo.com/2d01a11c39f3ccb80e8476d05d7f63ef)

###for of構文
v部分は任意に指定できますがvalueの頭文字を取ることが多く
可読性も高まるので値はvを使いましょう

```javascript
const arry = ['red','blue','green','orange','black'];

for(let v of arry){ //値を１つずつ取り出し
  console.log(v);
}
```
実行結果
[![Image from Gyazo](https://i.gyazo.com/59c2c59c38a3522f045ff8d4668ea048.png)](https://gyazo.com/59c2c59c38a3522f045ff8d4668ea048)

インデックスが不要であれば引数が１つで値が取れるため
for文に比べてスッキリ記述できます。

###応用（配列にオブジェクトが入った場合）

todosという配列には３つの要素としてオブジェクトが入っています。
１つのオブジェクトにはid/title/completedと３つのプロパティが入ります。

if文を使ってcompletedの真偽（true/false）で出力を変えてみましょう

```javascript
const todos = [
  {
    id:1,
    title:'javascript study',
    completed:true
  },
 {
    id:2,
    title:'ruby study',
    completed:true
  },
 {
    id:3,
    title:'html/css study',
    completed:false
  }
]

for(let i = 0; i < todos.length; i++){
  let todo = todos[i];  //todosの要素を１つずつ処理
  if(todo.completed === true){
    console.log(i,todo.title);
  }
}

```
実行結果
[![Image from Gyazo](https://i.gyazo.com/a30a2912cf4265e33396b238aa06e58a.png)](https://gyazo.com/a30a2912cf4265e33396b238aa06e58a)
id:３はcompletedプロパティがfalseのため出力されません。

todosやtodo部分の名前は任意ですが配列を１つずつ処理するため
複数単数の形にすると可読性がよくなります。

##if文と判定処理

まずはif文のおさらいです。
()内の判定条件で出力が変わります。

```javascript
//下記はfalse判定になる
if(false){
  console.log('これはtrueです');
}else if(false){
  console.log('これはis elseです');
}else{
  console.log('これはfalseです' )  //ここが出力
}
```

次に===と==の違いについてです。
===はデータ型まで加味して判定しますが
==はデータ型を加味せずに判定します。

```javascript
//false判定になる（データの型まで比較）
if(1==='1'){
  console.log('これはtrueです');
    }else{
  console.log('これはfalseです' ) //ここが出力される
}

//true判定になる(データの型を比較しない)
右辺の'1'を左辺の数値型に変換してから比較

if(1=='1'){
  console.log('これはtrueです');　//ここが出力される
}else{
  console.log('これはfalseです' ) 
}
```
==を使用した場合、左辺のデータ型と右辺のデータ型を
検証して判定するので1とtrueはtrueになります。

```javascript
//true判定になる
if(1==true){
  console.log('これはtrueです'); //ここが出力
}else{
  console.log('これはfalseです' )
}
```
!は等しくないという判定になりますが
!==と!=もデータ型を検証するかしないかという点で
異なる結果が得られます。

```javascript

//データ型を判定して1は'1'と等しくない
if(1 !== '1'){
  console.log('これはtrueです');  //こちらが出力される
    }else{
  console.log('これはfalseです' )
}

//データ型は判定しないため1と'１'は等しい
if(1 != '1'){
  console.log('これはtrueです');
}else{
  console.log('これはfalseです' )  //こちらが判定される
}
```

変数名のみを記述した場合は値の有無を判定します。
また変数名の前に!をつけることで判定をひっくり返すことができます。

```javascript
const num = 5;
if(num){
  console.log('これはtrueです'); //ここが出力
}else{
  console.log('これはfalseです' )
}

if(!num){
  console.log('これはtrueです'); 
}else{
  console.log('これはfalseです' ) //ここが出力
}

```
nullやundefinedや0はfalseの判定になります。
真偽がわからない場合はboolean()に調べたい値を入れて確認しましょう

```javascript
const num = 0;

if(num){
  console.log('これはtrueです');
}else{
  console.log('これはfalseです' ) //ここが出力される
}

```

次回はjavascript　脱初心者を目指して　その2　です。