5장 표현식과 문

1. 값

값 이란 식이 평가 되어 생성된 결과를 말한다.(결과값)

// 10 + 20은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30

2. 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

리터럴	예시	비고
정수 리터럴	100	static
부동소수점 리터럴	10.5
2진수 리터럴	0b01000001	0b로 시작
8진수 리터럴	0o101	ES6에서 도입. 0o로시작
16진수 리터럴	0 x 41	ES6에서 도입. 0x로시작
문자열 리터럴	'Hello' 'World'
블리언 리터럴	true false
null 리터럴	null
undefined 리터럴	undefined
객체 리터럴	{ name: 'Park', address: 'Incheon' }
배열 리터럴	[ 1, 2, 3 ]
함수 리터럴	function() {}
정규 표현식 리터럴	/[A-Z]+/g

3. 표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다.

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

• 표현식은 값으로 평가된다. 이때 표현식과 표현식이 평가된 값은 동등한 관계이다.

4. 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이며,
문을 명령문이라고도 부른다. 즉, 문은 컴퓨터에 내리는 명령이다.

// 문은 선언문, 할당문, 조건문, 반복문 등으로 구반할 수 있다.

// 변수 선언문
var x;

// 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if (x > 1) { console.log(x); }

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

5. 세미콜론과 세미콜론 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타낸다. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
단, 0개 이상의 문을 중괄호로 묶은 코드 블록({ ... }) 뒤에는 세미콜론을 붙이지 않는다.

6. 표현식인 문과 표현식이 아닌 문

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;

//1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;


// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // Uncaught SyntaxError: Unexpected token 'var'

// 표현식인 문은 값처럼 사용할 수 있다
var foo = x = 100;
console.log(foo); // 100

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다. 이를 완료 값이라 한다. 완료값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수도없다.

---

6장 데이터 타입

1. 데이터 타입

데이터 타입은 값의 종류를 말하며, 자바스크립트의 모든 값은 데이터 타입을 갖는다.
자바스크립트는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다.

구분	데이터 타입	설명
원시타입	숫자 타입	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
	불리언 타입	논리적 참(true)과 거짓(false)
	undefined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심볼 타입	ES6에 추가된 7번쨰 타입
객체 타입	객체 타입	객체, 함수, 배열 등

- ES6에 새로 추가된 심볼 타입

// 심볼 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심볼을 프로퍼티 키로 사용한다
obj[key] = 'value';
console.log(obj[key]); // value

2. 데이터 타입의 필요성

- 데이터 타입에 의한 메모리 공간의 확보 참조
메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다.
즉, 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 한다.

3. 동적 타이핑

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.
이러한 특징을 동적 타이핑이라 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라 한다.
대표적인 동적 타입 언어로는 자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등이 있다.

4. 동적 타입 언어와 변수

동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
이러한 동적 타입 언어의 특징은 데이터 타입에 대해 무감각해질 정도로 편리하다는 것이다.
하지만 언제나 그렇듯 편리함의 이면에는 위험도 도사리고 있다.

- 자바스크립트는 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 즉, 숫자 타입의 변수일 것이라고 예측했지만 사실은 문자열 타입의 변수일 수도 있다.
이러한 문제로 타입이 있는 스크립트인 타입스크립트를 많이 사용하고 있기도 한다.

---

7장 연산자

1. 연산자란?

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 노리, 타입, 지수 연산 등을 수행해 하나의 값을 만들며, 이때 연산의 대상을 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식 이다.

2. 단항 산술 연산자

- 증가/감소(++/--)

var x = 5, jresult;

// 선할당 후 증가
result = x++;
console.log(result, x); // 5, 6

// 선증가 후 할당
result = ++x;
console.log(result, x); // 7, 7

// 선할당 후 감소
result = x--;
console.log(result, x); // 7, 6

// 선감소 후 할당
result = --x;
console.log(result, x); // 5, 5

- 단항 연산자(+/-)

// 아무런 효과가 없음
+10; // 10
+(-10); // -10

## 3. 할당 연산자 **- 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.**

할당 연산자	예	동일표현
=	x = 5	x = 5
+=	x += 5	x = x + 5
-=	x-= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

4. 비교 연산자

1) 동등/일치 비교 연산자

동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
하지만 비교한은 엄격성의 정도가 다르다.
동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부동등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름

❗ 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 값은 값인지 비교한다.

❗ 비교(===) 연산자를 사용할때 주의할 점

// 양의 0과 음의 0의 비교. 일치 비교/동등 비교 모두 결과는 true이다.
0 === -0 // true
0 == -0 // true

---

2) 대소 비교 연산자

대소 비교 연산자	예제	설명
>	x > y	x가 y보다 크다
<	x < y	x가 y보다 작다
>=	x >= y	x가 y보다 크거나 같다
<=	x <= y	x가 y보다 작거나 같다

---

3) 삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

// 조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일 때 반환할 값
let x = 2;

let result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

❗삼항 조건 연산자와 if...else 문과 중요한 차이점이 있다.
삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else 문은 값처럼 사용할수 없다.
그 이유는 if...else문은 표현식이 아닌 문이기 때문이다.

let x = 10;

// if ... else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
let result = if (x % 2) { result = '홀수'; } else { result = '짝수'; }
// Uncaught SyntaxError: Unexpected token 'if'

4) 지수 연산자

ES7에서 도입된 지수 연산자는 좌항의 피연사자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

// 지수 연산자의 결합 순서는 우항에서 좌항이다.
2 ** (3 ** 2); // 512

// 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.
(-5) ** 2; // 25

---

8장 제어문

1. 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.
자바스크립트는 if ... else문과 switch 문으로 두가지 조건문을 제공한다.

1) if ... else문

if (조건식) {
  // 조건식이 참일때 실행할 코드
} else {
  // 조건식이 거짓일때 실행할 코드
}

// 조건식을 추가하여 사용할때는 else if 문을 사용한다.
if (조건식1) {
  // 조건식1이 참일때 실행할 코드
} else if (조건식2) {
  // 조건식2이 참일때 실행할 코드
} else {
  // 조건식1 조건식2이 모두 거짓일때 실행할 코드
}

2) switch문

switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다.


switch 문의 표현식과 일치하는 case문이 없다면 실행 순서는 default 문으로 이동하며,
default 문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있습니다.

switch (표현식) {
  case 표현식1:
    //switch 문의 표현식과 표현식1이 일치하면 실행될 문
    break;
  case 표현식2:
    //switch 문의 표현식과 표현식2이 일치하면 실행될 문
    break;
  case 표현식3:
    //switch 문의 표현식과 표현식3이 일치하면 실행될 문
    break;
  default:
    //switch 문의 표현식과 일치하는 case문이 없을 때 실행될 문
}

❓ 그래서 switch는 어디에 쓰는거지?

• if ... else 문의 조건식은 불리언 값으로 평가되어야 하지만 switch문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.
  다시 말해, if ... else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
  switch 문은 논리적 참, 거짓보다 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다.
  음... 글로만 표현하면 이해 안될거 같아서 예제를 준비해 봤습니다!

// 월을 영어로 변환한다
const month = 11;
let monthName;

switch (month) {
  case 1: monthName = 'January';
    break;
  case 2: monthName = 'February';
    break;
  case 3: monthName = 'march';
    break;
  case 4: monthName = 'April';
    break;
  case 5: monthName = 'May';
    break;
  case 6: monthName = 'June';
    break;
  case 7: monthName = 'July';
    break;
  case 8: monthName = 'August';
    break;
  case 9: monthName = 'September';
    break;
  case 10: monthName = 'October';
    break;
  case 11: monthName = 'November';
    break;
  case 12: monthName = 'December';
    break;
  default: monthName = 'Invalid month';
}    

console.log(monthName); // November

2. 반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가햐여 여전히 참인 경우 코드 블록을 다시 실행한다.
자바스크립트는 세 가지 반복문인 for문, while 문, do...while문을 제공한다.

• 반복문을 대체할 수 있는 다양한 기능
  -forEach, for...in, for...of문과 같이 반복문을 대체할 수 있는 다양한 기능들이 있다.
  이 내용은 따로 정리하겠다.

1) for 문

for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
for문의 실행 순서가 어떻게 작동하는지 아래의 그림을 참고하면 된다.

<참조> 모던 자바스크립트 Deep Dive

for 문 내에 for 문을 중첩해서 사용할 수도 있다.
예제로 두 개의 주사위를 던졌을때 두 주사위의 합이 6이 되는 모든 경우의 수를 출력해보겠다.

for (let i = 1; i <= 6; i++) {
  for (let j = 1; j <= 6; j++) {
    if (i + j === 6) console.log(`[ ${i} ${j} ]`);
  }
}

// 결과
[ 1 5 ]
[ 2 4 ]
[ 3 3 ]
[ 4 2 ]
[ 5 1 ]

2) while 문

while문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
for문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.

let count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
  console.log(count); // 0 1 2
  count++;
}


// 조건식의 평가 결과가 언제나 참이면 무한루프가 된다.
while (true) { ... } // 무한루프


// 무한루프에서 탈출하기 위해서는 if문으로 탈출 조건을 만들고 break문으로 코드 블록을 탈출한다.
while (count < 3) {
  console.log(count); // 0 1 2
  count++;
  
  // count가 3이면 코드 블록을 탈출
  if (count === 3) break;
}

3) break 문

레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch 문의 코드 블록을 탈출한다.
레이블 문 반복문, switch 문의 코드 블록 외에 break 문을 사용하면 SyntaxError(문법에러)가 발생한다.

if (true) { 
  break; // Uncaught SyntaxError: Illegal break statement
}