JavaScript基礎文法入門を焼肉で(1)

この記事について

JavaScript基礎文法入門の、学習内容のアウトプット・自身の振り返り用のメモです。

参考資料
Progate JavaScript(ES6)学習コース
ドットインストール 詳解JavaScript 基礎文法編

最近焼肉食べに行ってないなーという欲求不満もこの場で解消しようと思います。
（編集後記：むりでした）

【変数】

変数 let

データ（値）の入れ物（箱）、箱についている名前が「変数名」
変数名が2語以上の場合は大文字で区切る（例：oddNumber）
一度代入した値を更新できる

（変数宣言 変数名 = 代入する値）
let.text = "食べたい";
console.log("特上カルビ" + text); //特上カルビ食べたい
console.log("特上ハラミ" + text); //特上ハラミ食べたい
console.log("極厚のタン" + text); //極厚のタン食べたい

変数のメリット

1. 同じ値を繰り返し使える
2. 変更に対応しやすい
3. 値の意味がわかりやすい

似た文章を何度も書くのは面倒だが、変数を使えば、同じ値を繰り返し使え、楽にコードを書くことができる
また、文章が後ほど変更されても、変数を用いれていれば、代入する値を変更するだけで全ての変更に対応できる

変数の更新

一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされる
定義するときと違い「let」は必要なく「変数名 = 新しい値」と書けば値が変更される

let text = "アカセン食べたい";
console.log(text);
text = "アカセンおかわり";　//更新する時「let」はつけない
console.log(text);

変数自身を更新する

既に定義している変数の値に、値を追加したい場合

text = text + "大盛りで"
console.log(text);

【定数】

定数 const

値を更新できる変数に対して、値を更新できないのが定数
定数の値を更新しようとすると、コードを実行した際にエラーが発生する

const text = "高級焼肉店";
console.log(text); //出力結果：高級焼肉店
text = "家で焼肉";
console.log(text); //エラー

定数のメリット

「後から更新できない」ことで予期せぬ更新を防ぐことができ、安全にコードを書くことができる

定数・変数の命名規則

・英数字　$ _ のみ使用できる
・数値から始めることはできない
・大文字小文字は区別される
・予約語は使用不可：MDN Web Docs 参照

【テンプレートリテラル】

文字列の中で「${定数or変数}」とすることで、文字列の中に定数や変数を含めることができる
この時、文字列全体をバッククォーテーション（ ` )で囲む必要がある

const meat = "タン";
const taste = "美味";
console.log(`この${meat}は${taste}です`); //出力結果：このタンは美味です

【条件分岐】

比較演算子

const number =  29;
console.log(number < 30); //true
console.log(number <= 29); //true
console.log(number > 29); //false
console.log(number === 29); //true
console.log(number !== 29); //false

複数条件式

ex． x＝29
x>10 && x<30 //true （&& は 論理積 AND）
x>10 && x<20 //false
x>10 || x<30 //true （|| は 論理和 OR）
x>10 || x<20 //true

if 文

( )内の条件が成り立つ場合に{ }の処理が実行される

const money = 15000
if (money > 10000) {
  console.log("焼肉を食べに行きます");
}

else if 文

if文の条件がfalseの場合、elseの処理が実行される
ifとelseの間に「else if (条件)」を追加することで条件分岐を追加できる

const ｍｏｎｅｙ = 3000;
if(money > 15000) {
  console.log("焼肉をおごります！"):
} else if (money > 7000){
  console.log("焼肉食べに行きましょう！"):
} else {
  console.log("お願い焼肉連れてって");
}

switch 文

ある値によって処理を分岐する場合に用いる
switch文の中に「case」を追加することで、処理を分けることもできる
ifやelse if文による分岐が複雑な場合は、switch文で書き換えるとシンプルになる

const meat = "ロース";
switch(meat) {
  case"タン":
    console.log("まずはタンですよね");
    break;　//break:switch文を終了する命令
  case"極上タン":
    console.log("最高かよ！");
    break;
  default: //default:caseのどれにも一致しない場合に実行
    cousolo.log("オーダーの順番が正しくありません");
    break;
}

【繰り返し処理】

while 文

繰り返し処理を行うために用いる
while文は、条件式がtrueの間、{ }内の処理を繰り返すことができる
また、条件式の部分がいつかはfalseになり、繰り返し処理が終わる必要がある（無限ループする）

let number = 1;
while(number <= 29) { //変数numberの値が肉以下の時に処理を繰り返す
  console.log(number); //以下2行が繰り返す処理
  number += 1; //この部分がないと無限ループする
}

do while

変数に代入値が条件と一致しない場合でも、一度出力する

let meat = -29;
do {
  console.log(`${meat}人前追加で`);
  meat -= 4;
} while (hp > 0);

for 文

できることはwhile文と同じだが、while文に比べシンプルに書くことができる

　　　　変数の定義　　　 条件式　　　変数の更新　
for (let meat =1; meat <= 100; meat++) {
  console.log
}
//計算式の省略：+=1 は ++ に省略可（-=1 は --）

繰り返し（ループ）を1回スキップする

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue; //3の倍数をスキップ
  }
  console.log(i);
}

繰り返し（ループ）を途中で終了させる

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    break; //4で終了するため1〜3まで出力される
  }
  console.log(i);
}

【配列】

複数の値をまとめて管理するのに用いる
[値1, 値2, 値3...]のように作成
配列にはいっているそれぞれの値を「要素」と呼ぶ

配列を定数に代入する

配列も値として扱える

const meat = ["harami", "ichibo", "chateaubriand"];
console.log(meat);

配列の要素を取得する（インデックス番号）

配列の要素にはそれぞれインデックス番号がついている（0からスタート）
配列[インデックス番号]とすることで要素を取得できる

const meat = ["harami", "ichibo", "chateaubriand"];
　　　　　　　　//  0 　　　    1 　　　　     2　　・・・インデックス番号
console.log(meat[0]); //"harami"のインデックス番号
console.log(meat[1]); //"ichibo"のインデックス番号

配列の要素を更新する

要素に値を代入することで、その要素を上書きできる

const meat = ["harami", "ichibo", "chateaubriand"];
console.log(meat[0]);
meat[0] = "misuji"; //インデックス番号0の要素の値を更新
console.log(meat[0]);

配列とfor文（繰り返し）

配列の複数素数を出力する際、for文を使うと簡単に全ての値を出力できる

const meat = ["misuji", "ichibo", "chateaubriand"];
for (let i = 0; i < 3; i++) { //iが0〜2の間ループする
  console.log(meat[i]); //変数iを用いて要素を取得
}

length

配列.lengthとすることで、配列の要素数を取得できる
lengthを用いれば、forの条件式を下記のように書き換えられる
配列の要素数が変わっても問題なく繰り返すことができるため便利

const meat = ["misuji", "ichibo", "chateaubriand"];
for (let i = 0; i < meat.length; i++) { //lengthを用いて条件式を書き換えることができる
  console.log(meat[i]);
}

【オブジェクト】

オブジェクトは配列と同じく、複数のデータをまとめて管理するのに用いる
配列：複数の値を並べて管理
オブジェクト：そのぞれの値に「プロパティ」と呼ばれる名前をつけて管理

// 配列
[値1. 値2., 値3]

// オブジェクト
{プロパティ1:値1, プロパティ2:値2}

オブジェクトを定数に代入する

const meat = {name: "極厚タン", price: 1500};
console.log(meat.name); //nameプロパティの値を取得

オブジェクトの値を更新する

const meat = {name: "極厚タン", price: 1500};
meat.price = 1700; //priceプロパティの値を更新
console.log(meat.price);

オブジェクトを要素に持つ配列

配列の要素には、文字列や数値だけでなく、オブジェクトも使用可能

const meat = [
  {name: "ビビンバ”, price: 1100},
  {name: "石焼ビビンバ", price: 1300}
]:
//縦に長くなるため、要素ごとに改行して書く
console.log(meat[1].price);
//取り出すには配列[インデックス番号].プロパティ名

undefined　定義されていない値

配列の存在しないインデックス番号や、オブジェクトの存在しないプロパティの要素を取得しようとするとundefinedと出力される

undefinedとif文

undefinedと比較演算子で処理を分岐させる

const meats = [
  {name: "タン", price: 900},
  {name: "カルビ", price: 1000},
  {name: "ハラミ", price: 1000},
  {price: 2000},
];

for (let i = 0; i < meats.length; i++) {

  const meat = meats[i];

  console.log(`${meat.price}円の`);

  if(meat.name === undefined) {
    console.log("特上カルビが食べたいです");
  } else {
    console.log(`${meat.name}が食べたいです`);
  }
}

複雑なオブジェクトを扱う

オブジェクトの値の部分にもオブジェクトを用いることができる

const character = {
  name:"ヨジジ",
  age; 37
  favorite: {
      food: "焼肉", //favoriteプロパティの値がオブジェクトになっている
      sports: "焼肉の前のサッカー",
      color: "肉が焼けた色",
  },
};
console.log(character.favorite.food);
//オブジェクト名.プロパティ.プロパティで呼び出す

オブジェクトの値には配列を用いることもある

const character = {
  name:"ヨジジ",
  age:37,
  foods: ["焼肉", "yakiniku", "焼いた肉"]
};

【関数】

関数とはいくつかの処理をまとめたもの

関数の定義

function( )と書き、その後ろの{ }の中にまとめたい処理を書く

const introduce = function() {
  console.log("こんにちは");
  console.log("焼肉食べに行きましょう");
};
introduce(); //使用した定数名( )で関数の呼び出し

//関数を表している部分は＝ function( ){〜}の部分
//その関数をintroduceに代入することで、関数を定義している

アロー関数

functionの部分を( ) =>としても上記と同じ関数を定義できる
functionを用いるよりシンプルに書ける

const introduce = () => {
  console.log("こんにちは");
  consolo.log("焼肉食べに行きましょう");
};

引数

関数に与える追加情報のようなもの
関数を呼び出す時に値を渡すことで、関数の中でその値を利用することができる

仮引数：関数を定義するときの引数は値を仮置きしている
実引数：実際に渡す引数

引数を受け取る関数の定義

const 定数名 = (引数名) => {
 //処理
};
定数名（値）; //ここの値が引数に代入される

関数内で引数を使用する

引数は関数内で定数や変数と同じように使用することができる

const introduce = (name) => {
  console.log("こんにちは");
  console.log(`私は${name}が食べたいです`); //引数は関数の中で定数のように扱える
};
introduce("レバー");
introduce("マルチョウ");

複数の引数を受け取る関数の呼び出し

関数は引数を複数受け取ることもできる
( )内に受け取る引数をコンマで区切って並べることで、複数の引数を指定できる
引数は、左から順番に「第1引数、第2引数、....」と呼ぶ
渡す引数の順番と、関数を定義した時の引数の順番は対応しているので
関数を呼び出すときは引数の順番に気を付ける

const introduce = (meat, many) => {
  console.log(`まずは${meat}が食べたいです`);
  console.log(`${many}人前オーダーします`);
};
introduce("タン",　3);

戻り値

関数の処理結果を呼び出し元で受け取る方法
呼び出した元で受け取る処理結果を戻り値と呼ぶ（関数が戻り値を渡す）

「return 値」と書くことで、関数はその値を戻り値として返す

const add = (a,b) => {
  return a + b; //aとbを足した値が戻りとして呼び出し元に返る
}:
const sum = add(2,9); //呼び出し部分
console.log(sum);

if文で使うような条件式をreturnすると、
その条件式の結果として得られる真偽値を返すことができる

const check = (number) => {
  return number % 3 === 0;
};

if (check(29)) {
  console.log("3の倍数です");
} else {
  console.log("3の倍数ではありません");
}