第3章　変数、宣言とデータ型

# **変数、宣言とデータ型**
***
## **1.変数**
JavaScript変数は```データ値```を格納するための```コンテナ(container)```です。
```数値、文字列、式の評価結果```と```他変数```も格納できます。

#### **例**
[sample3-1.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
       var x = 5;
       document.write("xの結果：",x,"<br/>");
       var y = 6;
       document.write("yの結果：",y,"<br/>");
       var w = 2 + 3;
       document.write("wの結果：",w,"<br/>");
       var z = x + y + w;
       document.write("zの結果：",z,"<br/>");
       var w = "ITJOB";
       document.write("wの結果：",w,"<br/>");
    </script>
</body>
</html>
```
#### **実行結果**
xの結果：5  
yの結果：6  
wの結果：5  
zの結果：16  
wの結果：ITJOB

### **1-1.変数名**
すべてのJavaScript 変数は```固有の名前```で識別されなければなりません 。

この一意の名前は```識別子```と呼ばれます。

識別子は、短い名前（xやyなど）でも、よりわかりやすい名前（age, sum, totalVolume）でもかまいません。

変数の名前（一意の識別子）を構築するための一般的な規則は次のとおりです。
+ 名前には```文字、数字、アンダースコア、ドル```記号を含めることができます。
+ 名前は```文字で始める```必要があります
+ 名前は```$```と```_```で始めることもできます（ただし、このチュートリアルでは使用しません）。
+ 名前は```大文字```と```小文字```を```区別```します（yとYは異なる変数です）
+ JavaScriptのキーワードのような```予約語```は名前として```使用できません```

Number_hits 、 temp99 、 _name などは、正しい名前の一例です。

### **1-2.予約語**
予約語とは、JavaScriptであらかじめ用意されている単語のことです。
そのため、プログラムの識別子（変数名、関数名、メソッド名、オブジェクト名など）として使用することが出来ないワードです。
```
break	void	switch    do	class	yield    in	    extends	    debugger    typeof	return	function

case	while	this    else	const	default    instanceof	finally	  if    var	   super    throw

catch  with	delete    export	continue	import    new	for  try
```
#### **例**
[sample3-2.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
       var new = "新しい";
　　　　document.write(new);
    </script>
</body>
</html>
```
#### **実行結果**
Console: Uncaught SyntaxError: Unexpected token new

<br><br>
## **2.変数の宣言**

JavaScript には宣言を行う方法が3種類あります。  
### **2-1.const**    
constキーワードでは、再代入できない変数の宣言とその変数が参照する値（初期値）を定義できます。

const 変数名 = 初期値;

constで宣言した変数companyNameに対して値を再代入しているため、次のようなエラー（TypeError）が発生します。 
エラーが発生するとそれ以降の処理は実行されなくなります。

#### **例**
[sample3-3.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
       const companyName = "ITJOB";  
       document.write("会社の名前： " , companyName , "<br/>");
       companyName = "ソフトユージング"; //Uncaught TypeError: Assignment to constant variable.
       document.write("会社の名前： " , companyName , "<br/>");  
    </script>
</body>
</html>
```
#### **実行結果**  
会社の名前： ITJOB

Uncaught TypeError: Assignment to constant variable.

### **2-2.let**      
ブロックスコープのローカル変数を宣言し、ある値に初期化することもできます。

letはconstとは異なり、初期値を指定しない変数も定義できます。 初期値が指定されなかった変数はデフォルト値としてundefinedという値で初期化されます。（undefinedは値が未定義ということを表す値です）

letで宣言した変数に対しては何度でも値の代入が可能です。

#### **例**
[sample3-4.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
       let companyName ;  
       document.write("会社の名前： " , companyName , "<br/>");
       companyName = "ITJOB";
       document.write("会社の名前： " , companyName , "<br/>");
       companyName = "ソフトユージング"; 
       document.write("会社の名前： " , companyName , "<br/>");       
    </script>
</body>
</html
```
#### **実行結果**
会社の名前： undefined  
会社の名前： ITJOB  
会社の名前： ソフトユージング

### **2-3.var**  
varの使い方はletとほとんど同じです。変数を宣言し、ある値に初期化することもできます。  
varはもっとも古くからある変数宣言のキーワードですが、意図しない動作を作りやすい問題が知られています。   
そのためECMAScript 2015で、varの問題を改善するためにconstとletという新しいキーワードが導入されました。  
varはletとよく似ていますが、varキーワードは同じ名前の変数を再定義できてしまう問題があります。

letやconstでは、同じ名前の変数を再定義しようとすると、次のような構文エラー（SyntaxError）が発生します。 そのため、間違えて変数を二重に定義してしまうというミスを防ぐことができます。
```
// "x"という変数名で変数を定義する  
let x;
// 同じ変数名の変数"x"を定義するとSyntaxErrorとなる
let x; // => SyntaxError: redeclaration of let x
 ``` 
一方、varは同じ名前の変数を再定義できます。 これは意図せずに同じ変数名で定義してもエラーとならずに、値を上書きしてしまいます。
```
// "x"という変数を定義する
var x = 1;
// 同じ変数名の変数"x"を定義できる
var x = 2;
// 変数xは2となる
```
<br><br>
## **3.データ型**
JavaScript変数には```数値、文字列、オブジェクト(object)```など、さまざまな```データ型```を保持できます。
```
var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object
```

### **3-1.データ型の概念**
プログラミングでは、データ型は重要な概念です。

データ型とは変数にどんなものを格納させるかを先に決めて置くことです。
典型的なデータ型は　```int（整数型）、string（文字列型）```などがあります。

多くのプログラミング言語では、変数を宣言するときに「データ型」を定義する必要があります。型宣言された変数に別型のデータを格納することは```できません```。

例え、Javaで```int```と定義された変数に文字列を格納しようとエラーになります。
```
int x = "データ型";//エラーになります。
```
### **3-2.JavaScriptのデータ型**
JavaScriptの変数には```データ型の宣言は必要ありません```。

これはただ単に変数にデータ型を指定しなくてよいというだけで、JavaScriptがデータ型を持っていないということではありません。

```var```キーワードを使って変数を宣言し、```初期化する際```代入される内容より変数の```データ型```が```自動的に決まります```。

#### **JavaScriptで扱うデータ型一覧表**
<table border="1" >
  <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;">
    <td>データ型</td>
    <td>例</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>数値（Number【ﾅﾝﾊﾞｰ】）</td>
    <td>123, 123.45, 1.23e45, NaN は非数 (Not-A-Number) </td>
    <td>数値を表します。表せるのは9007199254740991（Number.MAX_SAFE_INTEGER）まで</td>   
  </tr>
   <tr>
    <td>長整数 (BigInt)</td>
    <td>9007199254740992n など</td>
    <td>精度が自由な整数値。</td>   
  </tr>
  <tr>
    <td>文字列（String【ｽﾄﾘﾝｸﾞ】）</td>
    <td>"abc..."</td>
    <td>文字列を表します。</td>   
  </tr>
  <tr>
    <td>論理値（Boolean【ﾌﾞｰﾘｱﾝ】）</td>
    <td>true, false</td>    
    <td>True（真）False（偽）を表します。</td>   
  </tr>
  <tr>
    <td>関数（function【ﾌｧﾝｸｼｮﾝ】）</td>
    <td>function() { ... }</td>
    <td>	関数を表します。</td>   
  </tr>
  <tr>
    <td>オブジェクト（Object【ｵﾌﾞｼﾞｪｸﾄ】）</td>
    <td>var o = new Object()</td>
    <td>	オブジェクトを表します。</td>   
  </tr>
  <tr>
    <td>null【ﾇﾙ】</td>
    <td>null</td>
    <td>何も格納されていないことを明示的に表します。</td>   
  </tr>
  <tr>
    <td>undefined【ｱﾝﾃﾞﾌｧｲﾝﾄﾞ】</td>
    <td>undefined</td>
    <td>未定義値。</td>   
  </tr> 
  <tr>
    <td>Symbol【ｼﾝﾎﾞﾙ】</td>
    <td>ECMAScript 2015 の新機能</td>
    <td>インスタンスが固有で不変となるデータ型。</td>   
  </tr>
</table>

#### **例**
[sample3-5.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        document.write("typeof(undefined) is ",typeof(undefined) ,"<br/>"); 
        document.write("typeof(null) is ",typeof(null) ,"<br/>");   
        document.write("typeof(true) is ",typeof(true) ,"<br/>");
        document.write("typeof(1234) is ",typeof(1234) ,"<br/>");
        document.write('typeof("abc") is ',typeof("abc") ,"<br/>");   
        document.write("typeof(new Date()) is ",typeof(new Date()) ,"<br/>");   
        document.write("typeof(Symbol()) is ",typeof(Symbol()) ,"<br/>"); 
    </script>
</body>
</html>
```
#### **実行結果**

typeof(undefined) is undefined  
typeof(null) is object  
typeof(true) is boolean  
typeof(1234) is number    
typeof("abc") is string  
typeof(new Date()) is object  
typeof(Symbol()) is symbol

### **3-3.JavaScriptのデータ型は動的です**
JavaScriptには```動的型```があります。同じ変数を使用して```異なる```データ型を保持できます。つまり、代入の内容により変数のデータ型が```勝手に```変更してくれます。
```
var x;           //  x は undefined　型
x = 5;           //  x は Number　型
x = "John";      //  x は String　型

```
#### **例**
[sample3-6.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
       var x;           //  x は undefined　型
       document.write("typeof(x) is ",typeof(x) ,"<br/>");        
       x = 5;           //  x は number　型
       document.write("typeof(x) is ",typeof(x) ,"<br/>");      
       x = "John";     //  x は string　型
       document.write("typeof(x) is ",typeof(x) ,"<br/>");  
    </script>
</body>
</html>
```
#### **実行結果**
typeof(x) is undefined  
typeof(x) is number  
typeof(x) is string

***

> **練習**
>> **問題**[ex3-1.html]

以下のスクリプトを作成して、コンソールに表示される値はなんですか？

```
var x = 10 ,y = 20;
x = y;
y = x;
console.log(y);
```

content

第3章 変数、宣言とデータ型

第3章　変数、宣言とデータ型