【初心者】JavaScript　コールバック関数／JSのES5／復習・練習【備忘録１５】 #Progate

11/12～11/14に勉強したこと

コールバック関数

引数に渡される関数のことをコールバック関数という。

【例】


const petDog=()=>{
  console.log("ココちゃん");
};

const call=(callback)=>{
  console.log("コールバック関数を呼び出します");
　callback();
};
//コールバック関数を呼び出すときは「();」が必要。

call(petDog);
//コールバック関数を渡すときは「()」は付けない！

【出力】
コールバック関数を呼び出します。
ココちゃん

直接、引数の中で関数を定義する場合

【例】


const call=(callback)=>{
  console.log("コールバック関数を呼び出します");
  callback();
};

call(()=>{
  console.log("ココちゃん");
});

【出力】
ココちゃん

JSのES5

jQueryに入る前に、ES6だけでなく元々使用されていたES5も学習
しておこうと思い、一巡した。

-　変数がletでなくvarで書かれていた。
-　{name:"犬",color:"brown"};と表現していた分は、オブジェクトではなく
【連想配列】と呼ばれており表記についてもnameの部分にも[""]が付いていた。
-　上記をの名前のみを出力させる場合、ES6では【console.log(animal.name);】のみ
学習していたが、ES5では【console.log(animal["name"]);】とも書けるということを学習した。

JSの復習において、学んだ点。

BMIを求める記述

下記のような、BMIを求める例題でBMIを求める式を
コンソールの中でしてしまったので、気を付ける。
後にBMIの数値を使う際に面倒になるので、まず定義してから使用する。
【私の書いた例】⇒ここでは18.5未満：痩せ気味／25未満：普通／それ以上：肥満


var height = 1.7;
var weight = 60;

console.log("BMIは"+ weight/height/height +"です");

var bmi=20.761245674740486;

if(bmi<18.5){
  console.log("痩せ気味です");
}else if(bmi>=18.5 && bmi<25){
  console.log("普通です");
}else{
  console.log("肥満気味です");
}

※こうしてしまうと、BMIの数値を手打ちしなければならなくなり、手間・時間がかかった。

【先に数値を定義してから書いた例】


var height = 1.7;
var weight = 60;

var bmi = weight / height / height;
console.log("BMIは" + bmi + "です");

if (bmi < 18.5) {
  console.log("痩せ気味です");
} else if (bmi < 25) {
  console.log("普通です");
} else {
  console.log("肥満気味です");
}

※先にBMIの数値を出しておくことによって、「変数bmi」として他で書くときも
使えるので、まず数値を出しておくことを癖づける。

FizzBuzz

1から100まで繰り返し出力する中で、「3で割り切れる際はFizz」
「5で割り切れる際はBuzz」「3でも5でも割り切れる際はFizzBuzz」
「それ以外の時は数字」を出力という問題。


for(var i = 0 ; i <= 100 ; i ++){
  if(i % 3 ===0 && i % 5 ===0){
    console.log("FizzBuzz");
  }else if(i % 5 ===0){
    console.log("Buzz");
  }else if(i % 3 ===0){
    console.log("Fizz");
  }else{
    console.log(i);
  }
}

※はじめに書いた際に、一番初めの条件式に(i % 3 ===0)と書いてしまったので
うまく出力ができなかった。「３かつ５で割り切れる」という一番
条件として細かいものを一番はじめに持ってくる。

平均点

スコアがずらっと並べられており、その平均点を出す記述。
まず、全スコアの合計を繰り返しを使用して出力。
そのあと合計　/　スコア項目数で割り出す。


var scores=[88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];

var sum = 0;

for(var i = 0 ; i <scores.length ; i++){
  sum += scores[i];
//　↑　0に繰り返しスコアの項目を追加していく。(sum= sum + scores[i];)
}

var average= sum / scores.length;
console.log(`平均点は${average}点です。`);

最高点

先ほどの章で求めた平均点を求めた後、最高点を出す方法。

var scores = [88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];

// この下にコードを書いてください
var bestScore = 0;

var sum = 0;

for(var i = 0 ; i <scores.length ; i++){
  sum += scores[i];

  if(scores[i]>bestScore){
    bestScore=scores[i];
//↑次々スコアを代入していくイメージ！
  }
}

var average= sum / scores.length;
console.log(`平均点は${average}点です`);
console.log(`最高点は${bestScore}点です`);

【気を付けること】
bestScore = scores[i];の代入部分が慣れない表記なのでしっかり覚える。

情報を順に出力

連想配列の情報を順に出力していく書き方。


var users = [
  {
    name: '太郎',
    age: 21,
    nationality: '日本',
  },
  {
    name: 'リリー',
    age: 37,
    nationality: 'イギリス',
  },
  {
    name: 'ジョン',
    age: 16,
    nationality: 'アメリカ',
  },
];

// この下にコードを書いてください

for(var i =0;i<users.length;i++){
  var number=i+1;

  console.log(`${number}人目`);

  console.log(`名前：${users[i].name}`);
  console.log(`年齢：${users[i].age}`);
  console.log(`国籍：${users[i].nationality}`);
}

【出力】
1人目
名前：太郎
年齢：21
国籍：日本
2人目...という風に順に表示ができる。

【気を付ける】
numberの表示は「i」だけにしてしまうと「0人目」の表記から始まるので気を付ける。

振り返り

実際練習問題で応用として考えると、少しずつ考えていかないとまだ
わからなかったり、bestScoreの最高点の書き方に関しては「代入！」という
イメージをしっかりできていなかった（=をイコールと捉えると頭がこんがらがる！）

ある程度型になっているものがあるので、そこはしっかり慣れていく。

【初心者】JavaScript コールバック関数／JSのES5／復習・練習【備忘録１５】