# 변수

## 변수란?

변수(Variables)는 **변하는 데이터(값)을 저장**할수 있는 메모리 공간입니다.

### 변수 선언

```javascript
var 변수명 = 값:
```

```javascript
<script>
    var box = "변수";
    var box2 = "변수는 변하는 데이터를 값을 저장할 수 있는 메모리 공간입니다."
    
    document.write(box);
    document.write(box2);
</script>

//변수(box1 출력)
//변수는 변하는 데이터를 값을 저장할 수 있는 메모리 공간입니다.(box2 출력)
```

```javascript
<script>
    var x = 100;
    document.write(x);
     x = 200;
    document.write(x);
    
    //변수는 변하는 데이터 값
</script>

//인터프린터 언어에 의한 영향
```

### 변수명

{% hint style="info" %}
키워드 : 자바스크립트에서 정해진 단어

식별자 : 사용자가 임의로 만들어서 사용하는 단어
{% endhint %}

#### 식별자를 만드는 규칙

* 사용자가 사용할 수 있는 문자 : 알파벳(a-z, A-Z), 숫자(0-9), 특수기호('\_', '$')
* 첫 글자에는 숫자를 사용할 수 없습니다.
* 공백을 사용할 수 없습니다. 밑줄('\_')은 사용가능합니다.
* 특수기호도 사용할 수 없습니다. 달러('$')는 사용 가능합니다.
* 키워드를 사용할수 없습니다.&#x20;
* 변수명을 사용할 때에는 대문자, 소문자를 구분해야 합니다.

#### 단어를 조합할 때 규칙

* 언더스코어 노테이션 : box\_text와 같이 중간에 '\_'를 사용합니다.
* 캐멀 노테이션 : boxText와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
* 파스칼 노테이션 : BoxText와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.

### 변수의 종류

> 지역변수 : 특정 범위 안에서만 사용하는 변수\
> 전역변수 : 모든 범위 안에서 사용하는 변수\
> 매개변수 : 함수 외부에서 함수 내부로 전달하기 위한 변수\
> 멤버변수 : 클래스 내부에서 만들어지며 주로 객체에서 사용하는 변수

```javascript
<script>
    //변수 선언    var = let 둘다 변수        
    let x = 1000;   //전역변수
    let y = 2000;   //전역변수
    let z = 700;    //전역변수
    
    
    //함수 선언
    function fun1(){
    let x = 1000;   //지역변수
    let y = 2000;   //지역변수
    z = 7000;    //전역변수 700에서 7000으로 변경
    
    document.write("함수 안 <br>"); //함수안
    document.write(x , "<br>"); //1000
    document.write(y , "<br>"); //2000
    document.write(z , "<br>"); //7000
    }
    
    fun1();             //함수 출력
    //지역변수는 함수변수안에서만 적용
    
    document.write("함수 밖 <br>"); //함수 밖
    document.write(x , "<br>"); //1000
    document.write(y , "<br>"); //2000
    document.write(z , "<br>"); //7000
</script>
```

### 문자형

**문자형(String)데이터**는 다음과 같이 **문자나 숫자를 큰따옴표(" ")또는 작은따옴표(' ')**&#xB85C; 감싸고 있습니다. 또한 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식합니다

{% hint style="info" %}
var 변수 = "사용할 문자나 숫자";
{% endhint %}

```javascript
<script>

    var s = "javascript";
    var num = "100";
    var tag = "<h1>String</h1>";
    
    document.write(s);
    document.write(num);
    document.write(tag);

</script>
```

```javascript
<script>
    var box = 10; //숫자
    document.write(box);
    
    var text = "변수"; //문자
    document.write(text);
    
    var box2 = "10"; //문자
    document.write(box2);
</script>
```

### 숫자형

**숫자형(Number)데이터는 단어 의미 그대로 숫자**를 의미합니다. 만약"100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 **Number("100")를 이용하면 문자형 데이터를 숫자형 데이터**로 바꿀 수 있습니다.

{% hint style="info" %}
var 변수 = 숫자; 또는 Number("문자형 숫자");
{% endhint %}

```javascript
<script>

    var s = 100;
    var t = Number("500");
     //문자 500 ->숫자 500변경
    
    document.write(s);
    document.write(t);

</script>
```

### typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용합니다. 기본형은 다음과 같습니다.

{% hint style="info" %}
기본형 : typeof 변수 또는 데이터;
{% endhint %}

```javascript
<script>

    //변수명 box 변수에 값은 숫자 100을 넣어서 출력하시오!
    var box = 100;
    document.write(box);
    document.write("<br />");
    
    document.write(typeof box);
    document.write("<br /><br />");
    
    var box2 = "100";
    document.write(box2);
    document.write("<br />");
    
    document.write(typeof box2);
    
</script>
// document.wtire("<br />"); 줄 바꿈 태그

//100
//number

//100
//string
```

### 형변환

```javascript
let a = 100;    //number
let b = "100";  //string

document.write(typeof a,"<br>"); //number
document.write(typeof b,"<br>"); //string

//형변환(string -> number)
let c = Number(b);
document.write(typeof c,"<br>"); //number

//형변환(number -> string)
let d = a = "" +a;
document.write(typeof d,"<br>"); //string

//형변환(number -> string)
let e = String(c);
document.write(typeof e,"<br>"); //string
```
