JavaScript ES6 基礎①（自分用）

;や（）　２単語時大文字で半角スペース不要　　など..書き方の違いはあるが、
スコープ、引数の考え方はruby言語と同じ
ここをまず理解すると、他言語でも苦なく理解可

コールバック関数

☆引数に渡される関数　＝コールバック関数と言う

const ②printName = () => {
  console.log("名前。");
};

const ③call = (①callback) => {
  console.log("コールバック関数。");
  callback();　　　　　　←//関数の’呼び出し’（中身は②が入っている）①が呼び出された。
};

③call( ①printName);    ←//(const )callの①引数として(printName②の中身)を渡しますよ、の意味。＝定義

-------------------------
＜コンソール実行結果　　＊順の理解が重要＞

コールバック関数。
名前。

メソッド

注意点:

... find　(　(　 ... ←スペース入れるとエラー、JSは、スペースでエラーとなる事が多い、言語diff注意

---

push = 配列要素の最後に追加できる

const name = ["名前", "なまえ", "ナマエ"];
console.log(name);

name.push("ネーム");
console.log(name);

------------
＜コンソール実行結果＞

["名前", "なまえ", "ナマエ"]
["名前", "なまえ", "ナマエ","ネーム"]

---

forEach = 配列要素を各取り出し、そこから条件を各処理する，を各繰り返す。

const name = ["名前", "なまえ", "ナマエ"];
name.forEach ((nnn) => {
  console.log(nnn);
});


------------
＜コンソール実行結果＞

名前
なまえ 
ナマエ

ここから引数を理解しやすい様に明らか変数とは異なるnnn表記とする

find = 条件に一致した最初の（キー、バリュー）を１つだけreturn

【　１番初めにくる　3の倍数の場合　】

const num = [1, 3, 5, 7, 9];

const foundNum = num.find((nnn) => {
  return nnn % 3 === 0;
});

console.log(foundNum);

------------
＜コンソール実行結果＞

３

オブジェクトの場合

const anim = [
  {id: 1, name: "なまえ", age: 3},
  {id: 2, name: "名前", age: 6},
  {id: 3, name: "ナマエ", age: 10},
  {id: 4, name: "ネーム", age: 11}
];

const foundAnim = anim.find((nnn) => {
  return nnn.id === 2;
});

console.log(foundAnim);

-------
＜コンソール実行結果＞

{id: 2, name: "名前", age: 6}

filter = 条件に一致した(キー、)バリューを全てreturn

【　2の倍数全て　】

const num = [1, 2, 3, 4, 5, 6];

const numbers = num.filter((nnn) => {
  return nnn % 2 === 0;
});

console.log(numbers);

-------
＜コンソール実行結果＞

[ 2, 4, 6 ]

オブジェクトの場合

【　20歳未満を抽出　】

const staff = [
  {id: 1, name:"Aさん", age: 14},
  {id: 2, name:"Bさん", age: 50},
  {id: 3, name:"Cさん", age: 20}
];

const underTwenty = staff.filter((nnn) => {
  return nnn.age < 20;
});

console.log(underTwenty);

----------
＜コンソール実行結果＞

  [ {id: 1, name:"Aさん", age: 14} ]

map = （キー、）バリューの条件をコールバック関数処理し、新しい配列を作る。

const num = [1, 2, 3, 4];


const toripuruNum = num.map((nnn) => {
  return nnn * 3;
});

console.log(toripuruNum);

----------
＜コンソール実行結果＞


[ 3, 6, 9, 12 ]

＜補足＞

returnは　返り値、＆＆関数の処理を終わらせる意味も持つ。
関数内のreturnの後に書いた関数は実行処理されない。注意

const num = [1, 2, 3, 4];


const toripuruNum = num.map((nnn) => {
  return nnn * 3;

  console.log("ここは実行されない);　　　　←//実行処理されない

});

console.log(toripuruNum);