> [!date] published: 2021-05-24
> [!Info]
> Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편을 읽고, 공부하고, 정리한 글
> [책 정보](http://www.easyspub.co.kr/20_Menu/BookView/A001/295/PUB)
## 💛 변수란 무엇일까?
### ✨ 수식으로 알아보는 상수와 변수
변하지 않는 값을 상수(Constant), 변할 수 있는 값을 변수(Variable)라고 한다.
### ✨ 변수 선언 방법
`var` 키워드 뒤에 변수 이름을 적으면 된다.
```javascript
var name;
```
### ✨ 변수 선언 시 지켜야 할 규칙
1. 이름은 의미있게 짓는다.
2. 여러 단어를 연결한 변수 이름은 Camel Case로 짓는다.
첫번째 단어는 소문자로 시작, 두번째 단어부터는 대문자로 시작
3. 선언할 수 없는 이름도 잇다.
변수 첫 글자는 반드시 문자나 언더바(\_), 달러기호($)로 시작해야 한다.
### ✨ 변수에 값이나 식 저장하기
```javascript
// 변수에 값 저장하기
var apple = "red";
var banana;
banana = "yellow";
// 변수에 식 저장하기
var orange = 1000;
var melon = 8000;
var total = orange + melon;
```
### ✨ 나이 계산 프로그램 만들기
실습 코드는 [깃허브](https://github.com/yoouyeon/Do-it-JS/tree/main/Chapter03)에 올려둠.
#### 📝 `let` 과 `const` 예약어
ES6버전부터는 변수를 선언할 때 `var` 예약어 외에도 `let` 과 `const` 를 사용할 수 있다.
- `let` 으로 선언한 변수는 block scoped여서 선언한 블록 ({ }내부)에서만 사용할 수 있다.
- `const` 으로 선언한 변수 역시 block scoped이고 재할당이 불가능하다.
예전에 공부할 때 `var` 는 변수의 재선언이 가능하기 때문에 사용을 지양하는 것이 좋다는 설명을 들었던 적이 있는 것 같아 좀 더 찾아보니 내 기억이 맞았었다.
책의 예제를 풀 때는 어쩔 수 없지만, 이런 사실은 꼭 기억하고 있어야겠다.
**\[도움을 받은 글들\]**
- [var, let, const 차이점](https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90)
## 💛 자료형 이해하기
### ✨ 자료형의 종류
자바스크립트의 자료형은 값이 하나인 **기본형**과 여러 값을 담을 수 있는 **복합형**으로 구분된다.
#### 기본형
- Number: 숫자
- String: 작은 따옴표('') 또는 큰 따옴표("")로 나타낸다.
- Boolean: true / false
- Undefined: 자료형을 지정하지 않았을 때의 유형. (예: 변수를 선언만 해두고 할당하지 않았을 경우에 그 변수의 자료형은 `undefined` 가 된다.)
- Null: 값이 유효하지 않은 경우의 유형
#### 복합형
- Array: 하나의 변수에 여러 값을 저장할 수 있는 유형
- Object: 함수와 속성이 함께 들어있는 유형
#### 자료형을 확인하는 방법 - `typeof` 연산자
변수의 자료형을 알고 싶을 때 `typeof` 연산자를 사용하면 해당 변수의 자료형이 출력된다.
### ✨ 숫자형
자바스크립트에서는 정수와 실수 모두 `number` 로 취급한다.
```javascript
var num = 3000;
typeof num;
// "number"
```
#### 정수
- **10진수** (예: 10, 11, 512)
- **8진수**: 10진수와 구분하기 위해서 앞에 0을 붙인다. (예: 012, 013, 01000)
- **16진수**: 10진수와 구분하기 위해서 0x (또는 0X)를 앞에 붙인다. (예: 0xC, 0xD, 0x200)
#### 실수
0.1과 0.2의 연산 결과가 0.30000000000000004로 나오는 이유: 자바스크립트만의 문제는 아니지만(..) 10진수로 표현된 소수를 연산을 위해 2진수로 변환하게 되면 분모가 2의 제곱이 아닌 경우에는 완벽히 같은 값의 2진수로 변환할 수 없게 되고 이런 오차들이 결과에도 반영이 된다는 것이다.
**\[도움을 받은 글\]**
[\[Javascript\] 소수점 자리수 처리하기](https://gafani.tistory.com/entry/Javascript-%EC%86%8C%EC%88%98%EC%A0%90-%EC%9E%90%EB%A6%AC%EC%88%98-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0)
### ✨ 문자형
작은 따옴표('')나 큰 따옴표("") 묶은 부분을 문자형(String)으로 인식한다.
만약 문자형 안에 따옴표가 들어간 데이터를 넣고 싶다면 따옴표가 안 겹치게 ("" 안에는 ''로 넣는다거나) 넣어주면 된다.
### ✨ 논리형
`true`와 `false`를 표현하는 자료형.
### ✨ undefined와 null
자바스크립트에서는 변수 선언시에 자료형을 결정하지 않고 변수에 값이 할당되었을 때 그 변수의 자료형을 결정한다. 따라서 값이 할당되지 않은 변수의 경우에는 자료형이 결정되지 않은 상태이므로 `undefined` 자료형이 된다.
`null` 은 할당된 값이 유효하지 않음을 의미한다. 만약에 변수에 `null`값을 할당한다면 그 변수는 `null` 자료형이 된다.
### ✨ 배열
배열에 저장할 자료를 쉽표로 구분해서 대괄호로 묶는다.
빈 배열도 선언할 수 있다.
```javascript
// 배열 선언하기
var colors = ["red", "green", "blue"];
// 빈 배열 선언하기
var newarr = [];
// 배열에 접근하기
var apple = colors[0];
```
### ✨ 객체
객체는 여러 자료를 중괄호로 묶을 수 있고, 키(Key)와 값(Value)을 콜론(:)을 사용해서 연결해준다.
접근은 Java나 C++와 동일하게 멤버 연산자(.)로 접근할 수 있는 듯 하다. (이 페이지에서는 그냥 구조만 살펴보고 넘어감...)
```javascript
var person = {
name: "kim",
age: 30,
address: "seoul",
};
```
### ✨ 자바스크립트 자료형의 특징
C나 Java에서는 변수 선언시에 자료형을 설정한다. 이런 방식을 '강력한 자료형 체크 (Strong Data Type Check)'라고 한다.
```c
int age = 30;
char *name = "yoou";
```
반면에 자바스크립트에서는 변수 선언시에 자료형을 설정하지 않고 값 할당 시에 자료형이 설정된다. 이런 방식을 '느슨한 자료형 체크 (Weak Data Type Check)' 라고 한다.
```javascript
age = 30;
name = "yoou";
```
## 💛 연산자 이해하기
### ✨ 기초 산술 연산자
- 사칙 연산자: `+`, `-`, `*`, `/`
- 나머지 연산자: `%`
- 증감 연산자: `++`, `--`
### ✨ 할인 가격 계산 프로그램
실습 코드는 [깃허브](https://github.com/yoouyeon/Do-it-JS/tree/main/Chapter03)에 올려둠.
## 💛 연산자 깊게 알아보기
### ✨ 할당 연산자 응용하기
할당 연산자와 산술 연산자 조합하기
`+=`, `-=`, `*=`, `/=`, `%=` 이렇게 활용할 수 있다.
### ✨ 더하기 연산자와 연결 연산자
더하기 연산자(+)와 연결 연산자(+)는 모양이 똑같다.
더하기 연산자는 두 수를 더할 때 사용하고, 연결 연산자는 두 개 이상의 문자열을 연결할 때 사용한다.
#### 📝 템플릿 문자열
ES6 버전부터 문자열안에 값을 채우는 방식인 '템플릿 문자열'이 추가되었다. 문자열 내부에 어떤 값을 넣을 때, 실습 때처럼 + 연산자로 계속 연결하는 것이 아니라 문자열 안에 값을 끼워 넣는 방식으로 쓸 수 있다.
문자열을 그레이브(`)로 묶은 후에, 문자열 내부에 값이 들어가야 할 부분을 ${} 사이에 표시한다.
```javascript
const originPrice = 24500;
document.querySelector(
"#showResult"
).innerHTML = `원래 가격은 ${originPrice}원 입니다.`;
```
### ✨ 문자형과 숫자형의 연산
`string`과 `number` 를 연산하면 `string` 형이 `number` 형으로 변환되어 연산된다.
```javascript
var num = 30;
var str = "50";
console.log(num + str);
// 80 출력
```
사칙 연산자 모두 같은 방식으로 연산한다.
### ✨ 비교 연산자
두 값을 비교하여 true, false를 반환하는 연산자.
`==`, `!=`, `<`, `<=`, `>`, `>=`, `===` 이런 것들이 있다.
**`===` 와 `==` 의 차이**
- `==` 는 동등 연산자로 자료형을 변환해서 비교한다.
- `===` 는 일치 연산자로 자료형의 변환을 허용하지 않는다.
```javascript
10 == "10"; // true
10 === "10"; // false
```
예상치 못한 결과가 나올 수도 있기 때문에 `===` 를 사용하는 것을 권장한다.