javascriptでの変数や定数の違いについて

トモジ

変数や定数って何？
詳しく知りたい・・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、JavaScriptでの変数や定数に関して要点をわかりやすく説明しております。

1.変数と定数の違いについて

変数や定数とは、データの入れ物です。

データの入れ物は宣言の仕方で用途が
変わりますので、順に説明していきます。

変数について

変数とは、
データの入れ物の中身を入れ替える事ができます。

変数宣言にはlet命令とvar命令の2種類がありますので、違いについて見ていきましょう。

let命令[ES2015以降]

let命令は、データの入れ物につける名前宣言が
同名な時にエラーになります。

let msg = '初期値OK';
msg = '再代入OK';
let msg = '再宣言NG';

var命令

var命令は、データの入れ物につける名前宣言の
重複が許可され、重複時は上書きされます。

var msg = '初期値OK';
msg = '再代入OK';
var msg = '再宣言OK';

定数について

定数とは、入れ物と中身がワンセットになっており変更する事ができまので
書き換えると困る値などに定数を使用するようにしましょう。

const tax = '初期値OK';
tax = '再代入NG';
const tax = '再宣言NG';

2.データ型とは？

データ型とは、データの種類の事です。

JavaScriptは型をあまり意識する事なく、
変数に文字列や数値など格納する事が可能ですが
データ型を意識して変数を格納する事が
重要になります。

例えばJavaScriptでは、以下のように文字列の後に数値を代入してもエラーにはなりません。

var x = 'こんにちは';
    x = 50;

しかし、型を意識しないで変数を作成すると
バグの原因になります。

なので次は型に関して見ていきましょう。

基本型(プリミティブ型)

基本型(プリミティブ型)は５種類あり、数値型・文字列型・真偽型・シンボル型・特殊型になります。

数値型(number)

数値型は、±4.94065645841246544×10⁻³²⁴〜±1.79769313486231570×10³⁰⁸の数値になります。

文字列型(string)

文字列型は、シングルクォーと(‘) やダブルクォーと(“)で囲まれた0個以上の文字の集合です。

真偽型(boolean)

真偽型は、true(真)かfalse(偽)の事を言います。

シンボル型(symbol)

シンボル型は、全く同じシンボルが存在ぜず
プロパティのキーとして使用することで名前の衝突を回避することができます。

またJavaScriptの互換性を守るためにシンボル型が導入されました。

特殊型(null/undefined)

特殊型は、値が空(null)か未定義(undefined)である事を示します。

参照型(オブジェクト型)

参照型(オブジェクト型)は3種類あり、配列・オブジェクト・関数になります。

配列(array)

配列は、データの各要素にインデックス番号でアクセスが可能です。

オブジェクト(object)

オブジェクトは、データの各要素に名前でアクセスが可能です。

関数(function)

関数は、一連の処理(手続き)の集合です。

3.リテラルとは?

リテラルとは、データ型に格納できる値そのものや、値の表現方法の事を言います。

それぞれの型に応じたリテラルの表現方法について見ていきましょう。

数値リテラル

数値リテラルは、
整数リテラルと浮動小数点リテラルに分けられ
整数リテラルは2進数・8進数・10進数・16進数の
4種類の表現方法があります。

整数リテラル

整数リテラルは、10進数以外の時にJavaScriptが識別できるように頭に以下の特殊な表記をします。

2進数は0b(ゼロビー)
8進数は0o(ゼロオー)
16進数は0x(ゼロエックス)

浮動小数点リテラル

浮動小数点リテラルは、小数点や指数表現を
表せます。

文字列リテラル

文字列リテラルは、
シングルクォーと(‘) やダブルクォーと(“)で
囲まれた0個以上の文字で表し
以下の表現はどちらも正しい表現になります。

'こんにちは'
"こんにちは"

特殊な表現方法

特殊文字とは、
シングルクォートやダブルクォート内で
特別な意味を持つ文字を使いたい時に以下の
[ \ + 文字 ]で表記します。

console.log('こんに\nち\tは!\"');

テンプレート文字列

テンプレート文字列とは、
以下の2点が文字列で可能になります。

テンプレート文字列は[`]バッククォートで文字列を挟み、変数を${}内に記入する

※ ( shift + @ )でバッククォート

文字列へ変数が埋め込める

let name = 'トモジ';
let str  = `こんにちは、${name}さん!`;
console.log(str);

改行を含んだ文字列

シングルクォートやダブルクォート内では、
改行の際に特殊文字を使ったが
バッククォート内では通常の改行が認識されます。

let name = 'トモジ';
let str  = `こんにちは、
${name}さん!`;
console.log(str);

配列リテラル

配列とは、
データの集合の事であり０から始まる
インデックス番号で管理されています。

変数名にインデックス番号をつけると
データを取得する事ができます。

var data = ['りんご','ゴルゴ','ラッパ','パンツ'];
console.log(data[1]);

配列リテラル(入れ子)

配列は入れ子構造にする事が可能ですので、
例を見て見ましょう。

var data = ['りんご',['ゴルゴ','13'],'ラッパ','パンツ'];
console.log(data[1][1]);

入れ子の入れ子も作れますが、あまり深くインデックスを作成すると管理が大変になります。

オブジェクトリテラル

JavaScriptでのオブジェクトとは、
ハッシュや連想配列などとも呼ばれ
名前をキーにして配列にアクセスできます。

配列のインデックス番号が名前に変化したようなもので、データの可読性や認識性が高いのが特徴です。

var obj = {name:'フランケンおじさん', birth:'1818年3月11日', mail:'franken311@sf.com'};
console.log(obj.name);
console.log(obj['birth']);

関数リテラル

関数とは、
何かしらの入力値(引数)を与えることによって
あらかじめ決めていた処理を行い、その結果を戻り値(返り値)として出力します。
※引数はなしでも問題ない

function getTriangle(width,height) {
   return width * height / 2;
}
console.log('三角形の面積:' + getTriangle(10,2));

未定義値とヌル

未定義値(undefined)

未定義値は、ある変数の値が定義されていない場合や存在しない事を表します。

var a;
var data = ['りんご','ゴルゴ'];
console.log(a);
console.log(data[2]);

ヌル(null)

ヌルは、値がない事を意味します。
関数などで該当する事柄がない場合に
「該当する項目がありませんでした」と言う事を示すためにnullを返します。

まとめ

最後にこの記事のポイントをまとめておきます。