JavaScriptの変数、定数、関数

はじめに

改めて基本を学びました。

変数varとlet

・varは関数内のどこからでも呼び出すことが可能
・letはブロック{}内のみ参照可

varを使った場合

const Test = (scope) => {
  if (scope === 'function') {
    var message = 'テスト'
   }
 console.log(message)  //「テスト」が表示される
}
Test('function')

letを使った場合

const Test = (scope) => {
  if (scope === 'block') {
    let message = 'テスト'
   }
 console.log(message)  //エラーになる
}
Test('block')

下記の様にブロック内だとログが出力できる

const Test = (scope) => {
  if (scope === 'block') {
    let message = 'テスト'
    console.log(message)  //「テスト」が表示される
   }
}
Test('block')

letの方がES６から採用された変数になります。
参照できる範囲をブロック内に限定したことで、万が一関数の別の場所に同じ変数名があったとしても、それによるバグが起きなくなり、保守性が向上しました。

定数const

定数は基本的に代入した値を変更できません。
しかし、配列やオブジェクトは定数宣言しても変更（追加や削除）が可能です。

const name = "太郎";
name = "花子"; //変更不可

const numArray = [1, 2, 3];
numArray.push(4); //変更可能 

const textObject = {id: "hoge" value: "fuga"}
textObject["name"] = "bar" //変更可能

関数

名前付き関数

function nameFunc(message) {
  console.log(message);
};

nameFunc('これは名前付き関数です。');

アロー関数

const arrowFunc = (message) => {
  console.log(message)
};

arrowFunc("これはアロー関数です。");

ワンラインのアロー関数

const users = {
 setUser: "Shimpex"
};

const getUsername = (userId) => users[userId]; //returnを省略し、１行で記述できる

//  複数行で書いた場合
//  const getUsername = (userId) => {
//    return users[userId]
//    } ;

const username = getUsername('setUser');
console.log(username);

参考