> For the complete documentation index, see [llms.txt](https://wlrma-study.gitbook.io/js-study/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wlrma-study.gitbook.io/js-study/do-it-javascript/03.-variable.md).

# 03. 변수(variable)

## 변수(variable)란?

![파파고 번역본 참조](/files/-LuerHy5OCZ1ubz_otW-)

![https://sites.google.com/site/citcluster/programming-vocab/variable](/files/-LuesMsYEX3a8deDFw1d)

변수는 **`변할 수 있는`** 값을 담는 공간이다. **`가방`** 안에 **`필통`**을 넣었다가 빼고**`책`**을 넣었다가 다시 **`알림장`**을 넣는다고 가정해보자. 그 상태에서 **`가방`**은 **`변수`**이고 **`필통`**과 **`책`**, **`알림장`**은 값이 되는 것이다. (JavaScript 변수는 Variable의 **`var`**을 따와 사용한다.)

{% tabs %}
{% tab title="First Tab" %}

```javascript
var bag = "필통";
bag = "책";
bag = "알림장"
console.log(bag); // "알림장"
```

{% endtab %}

{% tab title="" %}
![console.log()는 지금은 가볍게 넘어가도록 하자.](/files/-Luex-QqK93C3MLeeY_0)
{% endtab %}
{% endtabs %}

또한 변수는 **`키워드(Keyword)`**, **`식별자(identifier)`**, **`자료형(DataType)`**으로 나뉜다. 

```javascript
var a = 2; 
// var keyword
// a identifier
// 2 DataType
```

{% tabs %}
{% tab title="First Tab" %}

```javascript
let c = 2;
let c = 3;
```

{% endtab %}

{% tab title="Second Tab" %}
![let은 var과 같은 변수 키워드다.](/files/-LuezKxPnqlSVqPXj3ZL)
{% endtab %}
{% endtabs %}

위와 같이 **`영문 이름`**을 잘 알고 있으면 **`디버깅(오류 고치기)`** 할 때 유용하다. 내가 어디서 오류 났는지 쉽게 파악할 수 있기 때문에 반드시 알아둬야 한다.

여기서 헷갈릴만한 점이 또 있다. **`JavaScript 변수는 변수 타입이 딱히 없다는 것이다.`** **`var, let, const`** (나중에 설명할 상수 키워드) 와 같이 **`키워드만 선언`**해주고 **`자료형(Data type)`**을 **`다르게 주면 된다.`**

{% tabs %}
{% tab title="First Tab" %}

```javascript
var age = 20;
var name = "이름";
// JavaScript
```

{% endtab %}

{% tab title="Second Tab" %}

```c
int age = 20;
char *name = "이름";
// C언어
```

{% endtab %}
{% endtabs %}

## 자료형(Data Type) 이란?

앞에서 얘기한 **`자료형(Data type)`**이란 그럼 무엇일까?

![https://tutorial.eyehunts.com/js/javascript-data-types-and-examples/](/files/-Luf27WgnXpDHNPNkaNG)

쉽게 말해 컴퓨터가 처리하는 자료의 형태를 일컷는다. **`var a = 2;`** 라는 값은 **`Number`**로 **`var b = "two"`** 라는 값은 **`String`**으로 처리한다는 말이다.

JavaScript 변수 타입은 쉽게 **`원시 (Primitive)`** 타입과 **`객체 (Object) 타입`**으로 나뉘지만 책에서는 **`기본형`**과 **`복합형`**으로 설명했기 때문에 기본형과 복합형으로 설명을 덧붙이려고 한다.

{% tabs %}
{% tab title="First Tab" %}

```javascript
var num = 1;
var str = "one";
var boo = "true";
var undi = undefined;
var nu = null;
// 기본형
```

{% endtab %}

{% tab title="Second Tab" %}

```javascript
var arr = [1, "2", 3, false, true, null];
var obj = {
    name : "person",
    age : 20
};
// 복합형
```

{% endtab %}
{% endtabs %}

쉽게 말해 **`기본형`**은 **`하나의 자료형(Data type)`**만 **`변수에 담기는 것`**이고, **`복합형`**은 **`두 개 이상의 자료형(Data type)`**이 담기는 것이다.

### 기본형

{% hint style="info" %}
**`+ * / %`** 등의 연산자를 사용한다. 또한 연산자를 제외한 나머지 것들을 피연산자라고 한다. 예를들어 **`1+2`**가 있다고 했을 때 **`+`**는 **`연산자`** **`1과 2는 피연산자`**다.
{% endhint %}

#### 숫자형(Number type)

{% tabs %}
{% tab title="First Tab" %}

```javascript
var num = 2; // Number Type
```

{% endtab %}

{% tab title="Second Tab" %}
![typeof 연산자를 사용하면 변수의 Data type을 알 수있다.](/files/-LufAzFaJZFyFX6C5nRV)
{% endtab %}

{% tab title="+ 연산자" %}

```javascript
var num = 1;
num+2;
// 3
```

{% endtab %}

{% tab title="- 연산자" %}

```javascript
var num = 1.2;
num+1.8;
// 3
```

{% endtab %}

{% tab title="\* / %" %}

```javascript
var num = 2*2; // 4
var num2 = 10;
num2/2; // 5
num2%2; // 0
```

{% endtab %}
{% endtabs %}

※ **`/`**는 **`나눈값`** 이고 **`%`**는 **`나머지 값`**이다.

#### 문자형(String type)

{% tabs %}
{% tab title="First Tab" %}

```javascript
var str = "two"; // String Type;
str = 'three'; // '' 로 해도 된다.
```

{% endtab %}

{% tab title="Second Tab" %}
![](/files/-LufBxf622B1R1WDfEkB)
{% endtab %}

{% tab title="+ 연산자" %}

```javascript
var a = "3";
var ab = "2";
a+ab; // "32"
```

{% endtab %}

{% tab title="+ 결과값" %}
![](/files/-LufGF5NbD51YNadTOPq)
{% endtab %}
{% endtabs %}

**`" "`** 와 **`' '`** 의 차이

```javascript
document.write('<span class="num">', 2018, "</spen>");
document.write("<span class='num'>", 2018, "</spen>")
console.log("I'm apple");
// 때에 따라 자유롭게 사용하면 된다.
```

#### 논리형(Boolean Type)

![https://blog.digilentinc.com/true-or-false-boolean-is-a-data-type/](/files/-LufHuYeZVvc5UUnrBtp)

{% tabs %}
{% tab title="First Tab" %}

```javascript
var age = 12;
age > 11; // true
age > 13; // false
```

{% endtab %}

{% tab title="Second Tab" %}
![true 아니면 false를 출력](/files/-LufI5nTRmzlRIKsFfNO)
{% endtab %}

{% tab title="+ 연산자" %}

```javascript
var c = "true";
c+true; // 2
c+false; // 1
```

{% endtab %}

{% tab title="+ 결과값" %}
![](/files/-LufIcMFXMHQjYU6zdwt)

![true는 1 false는 0으로 인식한다.](/files/-LufJ-uzLYFgJFREfiAD)
{% endtab %}
{% endtabs %}

#### Undefined vs null

{% tabs %}
{% tab title="First Tab" %}

```javascript
var a;
typeof a; // undefined
var b = null;
typeof b // object
```

{% endtab %}

{% tab title="Second Tab" %}
![null은 object 타입이 아님에도 이렇게 뜬다.](/files/-Lufa8-vWaJzjBGBkeZ1)
{% endtab %}
{% endtabs %}

**`null`**&#xC744; **`object`**&#xB85C; 인식하는 것은 **`JavaScript`**&#xC758; 대표적인 오류 중 하나다. 원래 **`null`**&#xC774; **`NULL 포인터`** 였기 때문에 **`object`**&#xB85C; 인식한다. 자세한 부분은 [여기서](https://bitsofco.de/javascript-typeof/) 참고하자.&#x20;

**`undefined`**&#xB294; **`정의되지 않았다는 뜻`**&#xC73C;로 **`값이 할당되지 않았다는 뜻`**&#xC774;고, **`null`**&#xC740;  **`값이 유효하지 않다`**&#xB294; 말이다. 얼핏보면 **`'없음'`** 이라는 의미로 비슷해보이지만 둘은 다르다.&#x20;

```javascript
var a; // undefinde (정의되지 않음)
var a = undefined; // undefinde (변수에 정의 했는데 undefinde)
```

위와 같이 **`'없음'`** 을 나타내기 위해 **`undefined`**&#xB97C; 사용할 시 혼동이 올 수 있으므로 **`null`**&#xC744; 사용하는 것이 좋다.

그렇다고 **`'없음'`** 이라는 의미를 나타내기 위해 **`null`**&#xC744; 중구난방 사용하는 것은 좋지 않다. 객체의 경우 **`속성`**&#xC774; **`부재할 시`** **`그냥 속성을 작성하지 않는다.`** (자세한 것은 객체 참조)

```javascript
var obj = {
    name : "이름",
    age : null // x
};

var obj = {
    name : "이름"
}; // o
```

### 복합형

{% tabs %}
{% tab title="Array" %}

```javascript
var arr = [1, "two", true, false, undefined, null]; 
```

{% endtab %}

{% tab title="Object" %}

```javascript
var obj = {
    name : "name",
    age : 20,
    job : "Student",
    pet : false
};
```

{% endtab %}
{% endtabs %}

앞서 말했듯, **`Array`**&#xC640; **`Object`**&#xB294; 여러가지 **`자료형(Data type)`**&#xC744; 넣을 수 있다. 자세한 부분은 **`06`**&#xACFC; **`07`**&#xC744; 참조하자.

### 연산자 (위에 참조)

{% tabs %}
{% tab title="연산자" %}

```javascript
var a+b;
1+2; // 3
var c = 3;
c-1; // 2
var d = 10;
var e = 2;
d%e; // 0
var f = 20;
var g = 4;
var ff = f/g;
ff; // 5
```

{% endtab %}

{% tab title="증감 연산자" %}

```javascript
var a = 10;
var b = a++;
console.log(b); // 10
var c = 10;
var d = ++c;
console.log(d); // 11
console.log(b); // 11
console.log(d); // 11
```

{% endtab %}

{% tab title="비교 연산자" %}

```javascript
var a = 3;
var b = 4;
a == b; // false
var d = 4;
b == d; // true
var a = "2";
var b = 2;
a == b; // true
a === b; // false
```

{% endtab %}
{% endtabs %}

**`연산자`**&#xB294; **`기본 사칙연산`**&#xC744; 일컷는다. **`증감 연산자`**&#xB294; **`a++`**&#xB294; **`나중에`** **`++a`**&#xB294; **`먼저 증가`**&#xAC00; (혹은 감소가) 된다는 것이 특징이다. **`비교 연산자`**&#xB294; **`== 보다 === 가 더 엄격하다.`**

### **논리 연산자**

{% tabs %}
{% tab title="OR (||)" %}

```javascript
var a = 5;
var b = 6
a > 5 || b > 7; // false
a > 5 || b === 6; // true
a > 4 || b > 5; // true
```

{% endtab %}

{% tab title="AND (&&)" %}

```javascript
var a = 5;
var b = 6;
a > 5 && b > 6; // false
a === 5 && b > 7; // false
a > 4 && b > 5; // true
```

{% endtab %}

{% tab title="! (NOT)" %}

```javascript
var isDog = false;
!isDog // true
```

{% endtab %}
{% endtabs %}

**`논리 연산자`** **`OR (||)`** 은 둘 중 하나만 **`true`**&#xC5EC;도 **`true`**&#xB2E4;. **`AND (&&)`**&#xB294; 둘 다 **`true`**&#xC5EC;야 **`true`**&#xB2E4;. **`NOT (!)`** 은 원래 값에서 **`반대되는 값`**&#xC744; 출력한다.&#x20;

### ES6

{% hint style="info" %}
ES6란? 쉽게 말해 **`JavaScript의 버전이다.`** 자세한 부분은 이쪽을 [참고](https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8)하자.
{% endhint %}

**`let`**, **`const`**&#xB294;  ES6 이후 생긴 문법이다.

{% tabs %}
{% tab title="First Tab" %}

```javascript
var a = 10;
a = 20; // 20
var a = 25 // 25
let b = 30;
let b = 35; 
// Uncaught SyntaxError: 
// Identifier 'b' has already been declared
b = 40; // 40
const c = 50;
c = 55;
// Uncaught SyntaxError: 
// Identifier 'c' has already been declared
const c = 60;
// Uncaught TypeError: Assignment to constant variable.
```

{% endtab %}
{% endtabs %}

**`var`**&#xC740; 전역변수 처럼 계속해서 재할당이 가능한 반면, **`let`**&#xC740; 한번 선언한 변수 이름(식별자)에 다른 값 재할당 하면 에러가 뜬다. **`const`**&#xB294; 상수 (변하지 않는) 여서 한 번 선언한 값에 다른 값을 선언하지 못 한다. (자세한 부분 Scope 참조)