JavaScript,ES2015に関してのメモ

データ型に関して

変数と定数

変数名、定数名の文字列を識別子という。

変数:値が変更される可能性あり。letで定義。
定数:値が変更されることはない場合に宣言。constで定義。

識別子の表記法

• キャメルケース：grayNeko
• スネークケースgray_neko

どちらかの記法に統一した方がいい。

リテラル

プログラムで値を直接指定するもの、つまりは変数や定数に代入される値である。一つの値しか表現できない。

let nyanko = "sensei"; //文字列リテラル
let nyankoAge = 12; //数値リテラル

プリミティブ型

プリミティブ型には一つの値しか入らない。文字列や数値(プリミティブ)のは不変。

以下がプリミティブ型

• 数値(Number)
• 文字列(String)
• 論理値(Boolean)
• null
• nudefined
• シンボル(Symbol)

エスケープ

データで扱う文字列とプログラムの区別を行う。\を使って「"」をエスケープして文字列がまだ終わらないことをjavascriptに伝える。
下の文だと\"I'llとrockstar\"の「"」の部分がエスケープされて文字列の終了という認識をエスケープさせる。

const interview = "WAAAAAAA!! he said \"I'll be a rockstar\" yesterday.";

文字列データに「\」に含める場合は「\」で「\」をエスケープさせる。

const interview = "これがエスケープ文字です。→\\これを使用しましょー！";

特殊文字

以下、一例

• \n:改行
• \t:タブ
• \n:改行

テンプレートリテラル

ES2015から追加されたもの。
変数や定数を${}で囲むと、その変数や定数の値が文字列に挿入される。sassみたいな感じ。

let money = 1000;
const message = `所持金は${money}円です` //(注意　""だと認識されない
console.log(message);

複数行の文字列

const multiline = "1行目\n\
2行目";
console.log(multiline);

const multiline = `1行目
2行目`;
console.log(multiline);

1行目
2行目
と表示される。しかし、上記の方法だとインテンドが文字列に反映される。

下記の記述なら、インデントは無視される。

const multiline = "1行目\n" + "2行目\n" + "3行目";
console.log(multiline);

オブジェクト

プリミティブ型とは違い、複数の値を入れることができる。配列とかそれ。

const obj = {};
obj.color = "黄色";　//プロパティを追加(オブジェクトのメンバーとも言う)
console.log(obj.color); //黄色

const family = {
 name: {
 }
}

//キーと値を保持したオブジェクト
const family = {
  name: {
     son: "taro",
     mother: "sayo",
     father: "norihisa"
  }
}

配列

//3つのオブジェクトを有する配列
  const array = [
    {name: "tokyo", nation: "japan"},
    {name: "Seoul", nation: "South Korea"},
    {name: "Beijing", nation: "China"}
  ];
  
  //配列を有する配列(2重配列)
  const arrayInArray = [
    [1,2,3],
    [4,5,6]
  ];

制御文(繰り返し処理)

while

let number = 0
while(number <= 50) {
  //numberの値が50以上になるまで繰り返す
  number++;
  console.log(number);
 
}

do...while文

let number = 0
do() {
  //少なくとも一回はループ内処理が走る
  //繰り返すかの判定が最後におこなわれる
  number++;34
  console.log(number);
 
} while(number <= 50)

関数

処理をまとめる。

関数実行

function call(message) {
    console.log(message); //Nyaaaa!
}

call("Nyaaaa!");

関数のオブジェクト化

const func = function add(a,b){
    return a + b;
}
console.log(func(2,3)); //5(引数の2つの値の加算)

引数の分割

オブジェクトのプロパティを引数として関数を実行

function sentence({word1,word2,word3}) {
  return word1 + word2 + word3;
}

const funcObject = {
  word1: "いぬと",
  word2: "ねこは",
  word3: "ラブラブ"
};

console.log(sentence(funcObject)); //いぬとねこはラブラブ

上記の分割は配列でも可能

function sentence([word1,word2,word3]) {
  return word1 + word2 + word3;
}

const array = ["さる","かに","バトル"];

console.log(sentence(array)); //さるかにバトル

デフォルト引数

ES2015から引数の初期値を指定できる。

function addFunc(a = 2, b = 2){
  return a + b;
}

console.log("合計値："　+ addFunc()); //合計値：4
console.log("合計値："　+ addFunc(10,14)); //合計値：24

オブジェクト内にメソッドを配置

const human = {
  name: "Ayako",
  voice: function() {return "hana";}
}
console.log("名前："　+ human.name);　//名前：Ayako
console.log("声優："　+ human.voice()); //声優：hana

アロー関数

ES2015からの関数の表記法。

表記の基本形。

関数名　= 引数　=> 関数の中身;

引数が複数あるとき

const function = (x, y, z) => {console.log(x, y, z);};

//function：関数名
//(x, y, z) 引数
//console.log(x, y, z); 関数の中身

以下の3点において利点がある。

• functionという単語を省略できる

//const f1 = function() {return "hello";}
const f1 = () => "hello";
console.log("あいさつ："　+ f1());

• 引数が一つなら()を省略できる

//const f2 = function(name) {return "hello" + name;}
const f2 = name => "hello" + name;
console.log(f2("世界"));

• 関数内が一行ならば{}とreturn文を省略できる

//const f3 = function(a,b) {return a + b;}
const f3 = (a,b) => a + b;
console.log("合計値："　+ f3(3,4));

this

関数が呼ばれたときにその関数を保有しているオブジェクトをthisは指す。

thisを何の値を指すのか束縛することもできる。

callメソッド

//第1引数のmikeをthisとして実行。第2引数以降がgreet関数の引数となる。
greet.call("mike","Hello ","!!"); 

applyメソッド

//第1引数のmikeをthisとして実行。関数の引数は配列の形式で指定する。
greet.apply("mike",["Hello ","!!"]); 

すでに配列が用意されていて、その値を関数の引数として使いたい場合はapplyメソッドを使用する。

bindメソッド

var greetMorning = greet.bind(mike); //呼び出されたときに、mikeをthisに束縛する新しい関数を生成。
greetMorning("Good Morning ","!!"); //geeetMorningの呼び出し時は永続的にthisはmikeを指すことになる。

スコープ(変数の有効範囲)

##グローバル変数
どこからでもアクセスできる変数なので、意図しない部分で書き換えられてしまう可能性がある。
これを防止するにはひとつのオブジェクトにまとめてしまえばいい。

let user = {
  name: "doko",
  birth: 1899
};

もっと改良して変数の間違った利用を防ぐ。関数の実行する部分で変数を使用する。

let user = {
  name: "doko",
  birth: 1899
};

function say(person) {
  return "Hey! " + person.name + "!";
}
function birthday(person) {
  return "I was born in " + person.birth + "!";
}

console.log(say(user));
console.log(birthday(user));