JS基礎③

#概要
プログラミングで使われる変数と定数についての記事です。
JSでは変数をlet,定数をconstで宣言します。
変数は、宣言してから再代入可能です。それに対して、定数は再代入ができません。

index.js

let 変数名 = 〇〇;
const 定数名 = 〇〇;

#定数
定数は、代入した後に再代入することはできません。値を変えたくないときなどに使用します。
またもし値が変わった場合、代入の値を変えるだけで済むのでメンテナンスが楽になります。
定数は宣言したときに値を必ず代入しなくてはなりません。変数のように宣言後に再代入することはできません。

では以下のようなコードを修正していきます。

index.js

console.log(800 + 600);
console.log(800 + 500);

index.js

const price = 800;
    
console.log(price + 600); //1400
console.log(price + 500); //300

#変数
変数とは値をいれて使用する箱のような役割を果たします。
下記の例では、最初に変数priceに800を代入。この時点でpriceという箱に800が保存されています。
こうすることで、値を再代入することで処理を使い回すことができます。

index.js

let price = 800;
    
console.log(price + 600); //1400
console.log(price + 500); //300

price = 500;

console.log(price);

console.log(price + 600); //1100
console.log(price + 500); //1000

更に変数は再代入することができます。
price = 500;とあります。これは、priceに500を再代入しています。ここで、consoleで確認します。コンソールで500と確認することができました。

変数名定数名ともに、$マークや大小の大文字小文字、アンダースコアなどが使えます。しかし、JSの予約語は使えません。

#ブロックスコープ

index.js

   let fruit = "りんご";

   if (fruit === "りんご") {
     let food = "ケーキ"; //ケーキ
     console.log(food);
     if (fruit === "りんご") {
　　　　console.log(fruit); //りんご
       console.log(food); //ケーキ
     }
     console.log(food);　//ケーキ
   }
   console.log(fruit); //りんご
   console.log(food);  //定義されていませせん

変数フルーツはグローバル変数といいます。同じページ内からであれば呼び出すことができます。
if文で宣言されたfoodには、ケーキが保存されています。変数foodはローカル変数といいます。
変数foodはif文のスコープ内であれば呼び出すことができます。
ただし、スコープの外では無効になります。
*スコープとは、{処理}の範囲になります。

#再宣言

変数は再宣言することができますが、同じスコープ内では再宣言することはできません。

index.js

if (fruit === "りんご") {
    let food;
    console.log(food);
    let food;
 }

index.js

   let fruit = "りんご";

   if (fruit === "りんご") {
     let food = "ケーキ";
     console.log(food);
     if (fruit === "りんご") {
       let food = "カレー";
       console.log(fruit);
       console.log(food);　//カレー
       let food = "シチュー"; //error
     }
     console.log(food);
   }
  console.log(fruit);
  console.log(food);

#関数スコープ

変数foodのりんごは関数名フルーツ内でのみ呼び出すことができます。

index.js

function fruit () {
  let food = "りんご";
  console.log(food);
}

function buy () {
  console.log(food);
}

fruit(); //りんご
buy(); //error