JavaScript #1 変数と定数、配列

2020年12月12日

変数と定数

JavaScirptの変数は、ES5までは「var hoge」のように書いていましたが、ES6以降は、以下のように記述します。もちろんJavaSciriptは動的型付け言語なので、数値、文字などの型指定することはなく、実行時によしなに処理してくれます。

変数とは中身の更新が可能なデータの入れ物。定数とは中身の更新ができないデータの入れ物。

変数、定数名の命名規則は英語、「_」、「$」をにする必要がある。

//変数の定義
//数値はそのまま、文字列はシングルクォートで囲む。ダブルクォートでも大丈夫。
let hoge = 100;
let hoge2 = 'あいうえお';
let hoge3 = "かきくけこ";

//定数の定義
Const hoge4 = 10;
Const hoge5 = 'あいうえお';

//だめな例
let 1st = 1;
Const @mail = "hoge@hoge.com"

ここでの注意点は、ES6以降では以下のような書き方はNG。2回以上変数宣言はできなくなっています。そもそも2回以上宣言なんてしないけど。。

// ES5までの書き方ならOK。
//結果はhogeに200が入っている。
var hoge = 100;
var hoge = 200;
console.log(hoge)

//ES6以降はNG。
//実行エラーとなってしまうので注意。
let hoge = 1000;
let hoge = 2000;
console.log(hoge)

//当然、これはOK。
let hoge = 10;
hoge = 20;

varでよくない?って気もしますが、今後はlet,constを使うようにしよう。

配列

配列とは変数の集まりのようなデータの入れ物のこと。配列は1行でデータを持つ1次元配列と、2行以上でデータをもつ2次元配列があります。

1次元配列の場合はこんな感じ。

//配列の定義 
let number = [1,2,3]

//配列の全部の値を見る場合
//(3) [1, 2, 3] と表示される
console.log(number);

//配列の2番目のを見る場合(配列は0番から始まるため、3番目の値を取るときは1引いた2を指定する)
//3と表示される
console.log(number[2]);

//配列の中身の値を更新することができる
//5と表示される
number[1]=5
console.log(number[1]);

2次元配列だとこんな感じ

//配列の定義
//1行ずつ、[]で括って書く。
let fruits = [
  ['りんご','みかん','ぶどう'],
  ['もも','かき','さくらんぼ'],
  ['ラフランス','パイナップル','マンゴー'],
]

//2行目の3番目の値を取り出したいとき
//さくらんぼと表示される。
console.log(fruits[1][2]);

連想配列

連想配列は、配列を順番で管理するのではなく、キーで管理する配列もの(key・value)。
ES5までは連想配列はなく、オブジェクトとして実装していました。
ES6からはmapという連想配列が追加されました。

オブジェクトだとこんな感じ

//オブジェクトで定義する。
//要素は、キー:バリューで記述する
let book ={

  'name':'ドラゴンボール',
  'sakusya':'鳥山明',
  'rensai':'週間少年ジャンプ'

}
// オブジェクト(book)のキー(name)のデータの中身(バリュー)を取りたいときは
//オブジェクト.キーと指定する。この場合は「book.name」
//ドラゴンボールが表示される
console.log(book.name);

mapを使うとこんな感じ

//連想配列の定義はmap関数を使う。
let book2 = new Map(
[
  ['name','ドラゴンボール'],
  ['sakusya','鳥山明'],
  ['rensai','週間少年ジャンプ']
]
);

//値を取り出すときはgetを使う。
console.log(book2.get('name'));

オブジェクトを使うなってことではなくて、mapができましたという理解でよいのかなあ。
mapとオブジェクトの違いは少し整理してみます。

Program

Posted by Qtaro