[모던자바스크립트 Deep Dive] 7~9장

---

7장 - 연산자

 📌 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
연산의 대상이 되는 표현식(값)을 피연산자라고 하며, 연산자와 피연산자의 조합으로 새로운 값을 만든다.

// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
'My name is ' + 'Dayo' // 'My name is Dayo'

// 할당 연산자
color = 'red' // 'red'

// 비교 연산자
3 > 5 // false

// 논리 연산자
true && false // false

// 타입 연산자
typeof 'Hi' // string​

7.1 산술 연산자

 📌 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.

✅ 이항산술연산자 -> +, -, *, /, %
✅ 단항산술연산자 -> ++, --, +(피연산자를 숫자타입으로 변환한 값을 반환), -(피연산자를 숫자타입으로 변환하고 부호를 반전)

let x = 5, result;

// 선할당 후증가
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​

📌 문자열 연결 연산자

-> +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작, 그 외의 경우는 숫자타입으로 변환되어 산술연산자로 동작
-> 암묵적 타입 변환 또는 타입 강제 변환

// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'

// 산술 연산자
1 + 2; // 3

// true는 1로 타입 변환
true + 1; // 2

// false는 0으로 타입 변환
false + 1; // 1

// null은 0으로 타입 변환
null + 1; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN​

7.2 할당 연산자

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

var x;

x = 10;
console.log(x); // 10

x += 5; // x = x + 5;
console.log(x); // 15

x -= 5; // x = × - 5;
console.log(x); // 10

x *= 5; // x = x * 5;
console.log(x); // 50

x /= 5; // x = x / 5;
console.log(x); // 10

x %= 5; // x = x % 5;
console. log(x); // 0

var str = 'My name is ';

// 문자열 연결 연산자
str += 'Lee'; // str = str + 'Lee';
console.log(str); // 'My name is Lee'​

7.3 비교 연산자

📌 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

// 동등비교: 타입은 다르지만 암묵적 타입 변환을 통해 동등
5 == '5'; // true

// 일치비교: 암묵적 타입 변환 하지 않음. 값과 타입이 모두 같은 경우
5 === '5'; // false

// NaN은 자신과 일치하지 않는 유일한 값
NaN === NaN; // false

// 숫자가 NaN인지 조사하려면 Number.isNaN을 사용해야 한다.
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

// 양의 0과 음의 0의 비교
0 === -0 // true
0 == -0 // true

// Object.is 메서드는 정확한 값을 반환한다.
0 === -0 // true
Object.is(0, -0); // false

NaN === NaN // false
Object.is(NaN, NaN); // true​

7.4 삼항 조건 연산자

📌 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
📌 score >= 60 : 'pass' : 'fail'

7.5 논리 연산자

📌 우항과 좌항의 피연산자를 논리연산 한다.

// 논리합(||) 연산자
true || true; // true
true || false; // true
false || true; // true
false || false; // false

// 논리곱(&&) 연산자
true && true; // true
true && false; // false
false && true; // false
false && false; // false

// 논리 부정(!) 연산자
!true; // false
!false; // true​

✅ 암묵적 타입 변환, 단축평가, 드모르간 법칙

// 피연산자가 불리언 값이 아닌 경우 불리언 타입으로 암묵적 타입 변환된다.
!0; // true;
!'dayo'; // false;

// 단축 평가
'Cat' && 'Dog'; // 'Dog'

// 드 모르간 법칙
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

7.6 쉼표 연산자

📌 쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자 평가가 끝나면 그 값을 반환한다.

let x, y, z;

x = 1, y = 2, z = 3; // 3​

7.7 그룹 연산자

📌 소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. ( 가장 높은 우선순위 )

10 * 2 + 3; // 23

// 그룹 연산자로 우선순위 조절
10 * (2 + 3); // 50​

7.8 typeof 연산자

📌 typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

typeof '' // 'string'
typeof 1 // 'number'
typeof NaN // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'
typeof null // 'null'
typeof [] // 'Object'
typeof {} // 'Object'
typeof new Date() // 'Object'
typeof /test/gi // 'Object'
typeof function () {} // 'function'​

📌 typeof 연산자로 null 값을 연산해보면 object를 반환하는데 이는 자바스크립트 버그다.
📌 선언하지 않은 식별자를 typeof로 연산하면 ReferenceError가 아닌 undefined를 반환한다.

7.9 지수 연산자

📌 ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱 한다.

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

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

// 음수의 거듭제곱은 괄호로 묶어야 한다.
-5 ** 2; // SyntaxError
(-5) ** 2; // 25​

7.10 그 외의 연산자

연산자	개요
?.	옵셔녈 체이닝 연산자
??	null 병합 연산자
delete	프로퍼티 삭제
new	생성자 함수를 호출할 때 사용하여 인스턴스를 생성
instanceof	좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
in	프로퍼티 존재 확인

## 추후 다른 장에서 소개

7.11 연산자의 부수 효과

📌 대부분의 연산자는 다른 코드에 영향을 주지 않는다. 하지만 할당 연산자(=), 증감 연산자(++/--), delete 연산자는 다른 코드에 영향을 주는 부수효과가 있다

let x;

// 할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x = 1;
console.log(x);

// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
// 피연산자 x의 값이 재할당되어 변경된다. 이는 x변수를 사용하는 다른 코드에 영향을 준다.
x++;
console.log(x); // 2

// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다. 이는 o 객체를 사용하는 다른 코드에 영향을 준다.
let o = { a: 1 }
delete o.a;
console.log(o); // {}​

 

7.12 연산자 우선순위, 결합순서

📌 연산자는 종류가 많아서 우선순위를 모두 기억하기 힘들고 실수하기도 쉽다.
-> 그룹 연산자('()')를 이용하여 우선순위를 명시적으로 조절하고, 필요할 때 구글링해서 쓰도록 하자.

// 그룹 연산자를 사용하여 우선순위를 명시적으로 조절
10 * ( 2 + 3 ); // 50​

---

8장 - 제어문

📌 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.

8.1 블록문

📌 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

💁🏻 문의 끝에는 세미콜론(;)을 붙이는 것이 일반적이지만, 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문 끝에는 세미콜론을 붙이지 않는다.

// 블록문
{
  const name = 'dayo';
}

// 제어문
let x = 1;
if (x < 10) {
  x++;
}

// 함수 선언문
function sum(a, b) {
  return a + b;
}​

8.2 조건문

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

✅ if ~ else문

if (조건식1) {
  // 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
  // 조건식2이 참이면 이 코드 블록이 실행된다.
} else {
  // 조건식1,2가 모두 거짓이면 이 코드 블록이 실행된다.
}​

✅ switch문

switch (표현식) {
  case value1:
    // value1과 표현식이 일치할 때 실행될 코드
    break;
  case value2:
    // value2와 표현식이 일치할 때 실행될 코드
    break;
  // 더 많은 case 문을 추가할 수 있습니다.
  default:
    // 어떤 case도 일치하지 않을 때 실행될 코드
}​

❓ 언제 if ~ else문을 사용하고 언제 switch문을 사용할까?
-> if ~ else문으로 해결할 수 있다면 if ~ else를 사용하고, 조건이 많아서 switch문을 사용했을 때 가독성이 더 좋다면 switch문을 사용하는 것이 좋다.

 

8.3 반복문

📌 반복문은 조건식의 평가가 참인 경우 코드 블록을 실행하고 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

✅ for문
- 선언 또는 할당 -> 조건문 -> 참일 경우 블록문 실행 -> 증감식 -> 조건문 -> 거짓일 경우 종료

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}

for (let i = 0; i < 2; i++ {
  console.log(i); 
}
// 0, 1

// 어떤식도 사용하지 않을 경우 무한루프
for (;;) { 무한반복 }​

 

✅ while문
- 평가 결과가 거짓이 되면 코드블록을 실행하지 않고 종료

let count = 0;

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

// 무한루프
while (true) { 무한실행 }

while (true) {
  console.log(count);
  count++;
  
  // count가 3이면 코드 블록을 탈출한다.
  if (count === 3) break;
} // 0, 1, 2​

✅ do while문
- 코드 블록을 먼저 실행하고 조건문 평가. 무조건 한 번은 실행됨

let count = 0;

do {
  console.log(count); // 0, 1, 2
  count++;
} while (count < 3);​

❓ 언제 for문을 쓰고 언제 while문을 사용할까?
- 반복 횟수가 명확하다면 for문을 사용, 반복 횟수가 불명확하다면 while문을 사용한다.

 

8.4 break 문

📌 break문은 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch 문의 코드 블록을 탈출한다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // i가 5일 때 루프를 종료합니다.
  }
  console.log(i); // 0부터 4까지 출력됩니다.
}​

8.5 continue 문

📌continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. 다시말해 루프 내에서 현재 반복을 종료하고 다음 반복으로 넘어갑니다.

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // i가 2일 때 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.
  }
  console.log(i); // 2를 제외한 0, 1, 3, 4가 출력됩니다.
}​

---

9장 - 타입 변환과 단축 평가

9.1 타입 변환이란?

✅ 명시적 타입 변환 or 타입 캐스팅
개발자가 의도적으로 값의 타입을 변환하는 것을 말한다.

let num = 42;
let str = String(num); // 명시적 변환
console.log(str); // "42"
console.log(typeof str); // "string"​

✅ 암묵적 타입 변환 or 타입 강제 변환
개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 타입이 자동 변환되는 것을 말한다.

let num = 10;
let str = "5";
let result = num + str; // 암시적 변환
console.log(result); // "105"
console.log(typeof result); // "string"​

9.2 암묵적 타입 변환

📌 불리언 타입으로 암묵적 타입변환 - 참(truthy) 또는 거짓(falsy)으로 평가되는 경우

✅ falsy(거짓)

if (!false) {
  console.log("false is falsy");
}

if (!0) {
  console.log("0 is falsy");
}

if (!"") {
  console.log('"" is falsy');
}

if (!null) {
  console.log("null is falsy");
}

if (!undefined) {
  console.log("undefined is falsy");
}

if (!NaN) {
  console.log("NaN is falsy");
}​

✅ truthy(참) : falsy가 아닌 모든 경우

if (true) {
  console.log("true is truthy");
}

if (42) {
  console.log("42 is truthy");
}

if ("hello") {
  console.log('"hello" is truthy');
}

if ([]) {
  console.log("[] (빈 배열)은 truthy입니다");
}

if ({}) {
  console.log("{} (빈 객체)는 truthy입니다");
}

if (function() {}) {
  console.log("function() {} (빈 함수)는 truthy입니다");
}

 

 

9.3 명시적 타입 변환

📌 개발자의 의도에 따라 명시적으로 타입을 변경하는 것

✅ 문자열 타입으로 변환
1. String 생성자 함수 사용
2. Object.prototype.toString 메서드 사용
3. 문자열 연결 연산자를 이용하는 방법

// 1. String 생성자 함수 사용
let num = 42;
let strNum = String(num);
console.log(strNum); // "42"
console.log(typeof strNum); // "string"

// 2. Object.prototype.toString 메서드 사용
let num = 42;
let strNum = num.toString();
console.log(strNum); // "42"
console.log(typeof strNum); // "string"

// 3. 문자열 연결 연산자를 이용하는 방법
let num = 42;
let strNum = num + "";
console.log(strNum); // "42"
console.log(typeof strNum); // "string"​

 

✅ 숫자 타입으로 변환
1. Number 생성자 함수 사용
2. parseInt, parseFloat 함수 사용
3. + 단항 산술 연산자 사용
4. * 산술 연산자 사용

// 1. Number 생성자 함수 사용
let str = "42";
let num = Number(str);
console.log(num); // 42
console.log(typeof num); // "number"

// 2. parseInt, parseFloat 함수 사용
let str = "42";
let num = parseInt(str);
console.log(num); // 42
console.log(typeof num); // "number"

// 3. + 단항 산술 연산자 사용
let str = "42";
let num = +str;
console.log(num); // 42
console.log(typeof num); // "number"

// 4. * 산술 연산자 사용
let str = "42";
let num = str * 1;
console.log(num); // 42
console.log(typeof num); // "number"​

✅ 불리언 타입으로 변환
1. Boolean 생성자 함수 사용
2. !부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수 사용
let num = 1;
let boolNum = Boolean(num);
console.log(boolNum); // true
console.log(typeof boolNum); // "boolean"

let str = "hello";
let boolStr = Boolean(str);
console.log(boolStr); // true
console.log(typeof boolStr); // "boolean"

let emptyStr = "";
let boolEmptyStr = Boolean(emptyStr);
console.log(boolEmptyStr); // false
console.log(typeof boolEmptyStr); // "boolean"

// 2. !부정 논리 연산자를 두 번 사용하는 방법​
let num = 1;
let boolNum = !!num;
console.log(boolNum); // true
console.log(typeof boolNum); // "boolean"

let str = "hello";
let boolStr = !!str;
console.log(boolStr); // true
console.log(typeof boolStr); // "boolean"

let emptyStr = "";
let boolEmptyStr = !!emptyStr;
console.log(boolEmptyStr); // false
console.log(typeof boolEmptyStr); // "boolean"

 

9.4 단축 평가

📌 단축평가란 논리곱(&&) 연산자와 논리합(||)의 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

// 논리합(||) 연산자
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false​

✅ 옵셔널 체이닝 연산자(?.)
객체의 속성이나 배열의 요소, 함수 호출 등이 존재하지 않는 경우에도 에러를 발생시키지 않고 undefined를 반환합니다.

let user = {
  name: 'Alice',
  address: {
    street: 'Main St',
    city: 'Wonderland'
  }
};

// 모든 단계에서 안전하게 접근
console.log(user?.address?.street);  // 'Main St'
console.log(user?.address?.zipCode); // undefined
console.log(user?.contact?.phone);   // undefined

✅ null 병합 연산자(??)
null 또는 undefined일 때 대체값을 제공하는 연산자입니다.

let user = {
  name: 'Alice',
  address: {
    street: 'Main St'
  }
};

// Nullish 병합 연산자(??)와 함께 사용하여 기본값을 제공
let street = user?.address?.street ?? 'No street provided';
let phone = user?.contact?.phone ?? 'No phone number provided';

console.log(street); // 'Main St'
console.log(phone);  // 'No phone number provided'​