1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの変数、定数、関数

Last updated at Posted at 2020-05-12

はじめに

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

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

#定数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を省略し、1行で記述できる

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

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

##参考
https://www.youtube.com/watch?v=EXxIVEC72mU

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?