[모던 자바스크립트 Deep Dive] 04장 ~ 10장

Study/모던 자바스크립트 Deep Dive

[모던 자바스크립트 Deep Dive] 04장 ~ 10장

chaeon1 2025. 3. 9. 13:49

4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

변수(variable)
- 값을 저장하고 참조하는 메커니즘
- 값의 위치를 가라키는 이름
프로그램은 데이터를 입력받아 처리하고 결과를 처리하는 것이 기본 구조이며, 데이터를 저장하고 재사용하기 위해 변수 필요
자바스크립트 엔진은 변수의 값을 메모리에 저장하고 CPU를 통해 연산 수행
개발자가 직접 메모리 주소를 다루는 것은 위험하므로, 변수라는 개념을 사용해 데이터를 안전하게 저장하고 참조

4.2 식별자

식별자(Identifire)
- 변수, 함수, 클래스 등의 고유한 이름
- 값이 저장된 메모리 주소
변수명은 사람이 이해하기 쉬운 방식으로 설정되며, 실행 컨텍스트에 등록됨

4.3 변수 선언

변수 선언 방법
- var: ES6 이전 방식, 함수 레벨 스코프, 호이스팅 이슈
- let: 블록 레벨 스코프 지원, 재할당 가능
- const: 블록 레벨 스코프 지원, 재할당 불가
변수 선언 단계
- 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
- 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화

4.4 변수 선언의 실행 시점과 변수 호이스팅

변수 호이스팅(Variable Hoisting): 자바스크립트 엔진이 변수 선언을 코드 실행 전에 먼저 처리하는 현상
- var로 선언된 변수는 선언만 먼저 실행되고 초기화는 나중에 이루어지므로 undefined 출력
console.log(score); //undefined var score; //변수 선언문

4.5 값의 할당

변수를 선언한 후 값을 할당하는 방식
```
var score;
score = 80;
```
선언과 동시에 할당하는 방식
```
var score = 80;
```
변수 선언은 런타임 이전에 실행, 값의 할당은 런타임에 실행

4.6 값의 재할당

var와 let으로 선언한 변수는 값의 재할당 가능
```
var score = 80;
score = 90;
```
const로 선언한 변수는 재할당 불가능
```
const foo = 10;
foo = 100; //TypeError 발생
```

4.7 식별자 네이밍 규칙

변수명은 특수문자를 제외한 문자, 숫자, _, $ 포함 가능
숫자로 시작할 수 없으며, 예약어 사용 불가
네이밍 컨벤션
- 카멜 케이스(camelCase): firstName (일반 변수, 함수)
- 스네이크 케이스(snake_case): first_name
- 파스칼 케이스(PascalCase): FirstName (클래스, 생성자 함수)
- 헝가리언 케이스(typeHungarianCase): strFirstName, $elem (타입을 접두사로 붙임)

05장 표현식과 문

5.1 값

값(Value)
- 식(표현식)이 평가(evaluation)되어 생성된 결과
평가: 표현식을 해석하여 값을 생성하거나 참조하는 과정
모든 값은 데이터 타입을 가지며, 메모리에 2진수로 저장
변수는 값이 저장된 메모리 공간을 식별하기 위해 붙인 이름이며, 변수에 저장되는 것은 값

5.2 리터럴

리터럴(Literal)
- 값을 생성하는 표기법
- 사람이 이해할 수 있는 문자 또는 미리 약속된 기호로 값 표기
리터럴을 사용하면 다양한 값(숫자, 문자열, 불리언, 객체 등) 생성 가능

예시

var num = 10; // 숫자 리터럴
var str = "Hello"; // 문자열 리터럴
var bool = true; // 불리언 리터럴
var obj = { key: "value" }; // 객체 리터럴

5.3 표현식

표현식(Expression)
- 값으로 평가될 수 있는 문
- 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조
표현식의 종류
- 리터럴 표현식: 10, 'Hello'
- 식별자 표현식: sum, person.name
- 연산자 표현식: 10 + 20, sum !== 10
- 함수/메서드 호출 표현식: square(), person.getName()
표현식의 특징
- 값처럼 사용될 수 있으며, 다른 표현식의 일부가 될 수도 있음
- 예시
```
var x = 1 + 2; // 1 + 2는 표현식이며, 3으로 평가됨
x + 3; // 6
```

5.4 문

**문(Statement)
- 프로그램을 구성하는 기본 단위이자 최소 실행 단위
- 하나 이상의 표현식으로 구성될 수 있으며, 표현식이 아닌 문도 존재
자바스크립트에서 문의 종류
- 변수 선언문: var x;
- 할당문: x = 5;
- 조건문: if (x > 1) { console.log(x); }
- 반복문: for (var i = 0; i < 2; i++) { console.log(i); }
- 함수 선언문: function foo() { return 1; }
문은 실행되면 어떤 동작을 수행하며, 특정한 결과를 만들어내기도 함

5.5 세미콜론과 세미콜론 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타냄
세미콜론을 붙이지 않더라도 자동 삽입 가능(ASI, Automatic Semicolon Insertion) 이 문장을 종료한다고 판단하면 자동으로 추가함
자동 삽입 기능이 의도와 다르게 동작할 수 있으므로 세미콜론을 명시적으로 사용하는 것을 권장

5.6 표현식인 문과 표현식이 아닌 문

표현식인 문 (값으로 평가될 수 있음)

var x = 100; // 할당문 (표현식이면서 문)

표현식이 아닌 문 (값으로 평가될 수 없음)
```
var x; // 변수 선언문 (값이 아님)
```
표현식과 문을 구별하는 방법
- 표현식을 변수에 할당할 수 있으면 표현식인 문
- 표현식을 변수에 할당할 수 없으면 표현식이 아닌 문
```
var foo = x = 100; // x = 100은 값으로 평가되므로 표현식
console.log(foo); // 100
```

06장 데이터 타입

6.1 숫자 타입

자바스크립트는 int, float 같은 별도의 정수 타입이 없으며, 모든 숫자를 실수로 처리

다양한 리터럴을 사용하여 숫자 표현 가능

var integer = 10; // 정수
var double = 10.12; // 실수
var binary = 0b1010; // 2진수
var octal = 0o101; // 8진수
var hex = 0x1A; // 16진수

자바스크립트에서는 정수 연산도 부동소수점 연산으로 처리되므로, 나눗셈 결과가 실수가 될 수 있음
```
console.log(3 / 2); // 1.5
```
특별한 숫자 값
- Infinity: 양의 무한대
- Infinity: 음의 무한대
- NaN: 산술 연산 불가 (Not-a-Number)
```
console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String'); // NaN
```

6.2 문자열 타입

문자열(String)
- 16비트 유니코드(UTF-16)문자들의 집합
- '', "", ``을 사용하여 문자열 표현
- 문자열은 변경 불가능한(Immutable) 값

6.3 템플릿 리터럴

``을 사용하여 멀티라인 문자열 및 표현식 삽입 가능

멀티라인 문자열

var template = `Hello
World`;
console.log(template);

표현식 삽입

var name = "JavaScript";
console.log(`My favorite language is ${name}`);

이스케이프 시퀀스를 사용하지 않아도 줄바꿈 가능

6.4 불리언 타입

논리적 참(true)와 거짓(false)만을 표현
```
var isAvailable = true;
var isEmpty = false;
```

6.5 undefined 타입

undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값
```
var foo;
console.log(foo); // undefined
```
개발자가 undefined를 명시적으로 할당하는 것은 권장되지 않음

6.6 null 타입

null은 변수가 어떤 객체도 참조하지 않는다는 것을 명시적으로 나타내는 값
```
var foo = null;
console.log(foo); // null
```
null과 undefined 비교
```
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"
```
- null은 명시적 부재(explicit absence of value)
- undefined는 값이 아직 할당되지 않음을 의미

6.7 심벌 타입

심벌(Symbol)
- 유일무이한 값을 생성하는 원시 타입
- 주로 객체의 프로퍼티 키로 사용
```
var key = Symbol("key");
var obj = {};
obj[key] = "value";
console.log(obj[key]); // "value"
```
다른 심벌 값과 절대 중복되지 않음

6.8 객체 타입

자바스크립트에서 원시 타입을 제외한 모든 값은 객체 타입
객체는 key-value 쌍을 가지며, 여러 데이터와 기능 포함
배열, 함수, 정규 표현식 등도 객체로 취급

6.9 데이터 타입의 필요성

데이터 타입이 필요한 이유
- 값을 저장할 메모리 공간의 크기 결정
- 값을 어떻게 해석할지 결정
- 타입에 따라 적절한 여난 수행 가능

6.10 동적 타이핑

자바스크립트는 동적 타입 언어(Dynamically Typed Language)
변수를 선언할 때 데이터 타입을 명시하지 않으며, 할당된 값에 따라 타입이 동적으로 결졍됨
```
var foo = 42; // number
foo = "Hello"; // string (타입 변경)
foo = true; // boolean (타입 변경 가능)
```
정적 타입 언어(Static Typed Language)와 비교
- C, Java와 같은 정적 타입 언어에서는 변수를 선언할 때 타입을 지정해야 하며, 변수가 선언된 이후에는 타입이 변경되지 않음
- 자바스크립트에서는 변수가 다양한 타입의 값을 가질 수 있음
동적 타이핑의 단점
- 변수의 값을 예측하기 어려움
- 타입이 자동으로 변환되면서 예상치 못한 오류가 발생할 가능성이 큼
- 코드의 신뢰성이 낮아질 수 있음
해결책
- 변수 사용 최소화: 꼭 필요한 경우만 변수 선언
- 상수를 적극적으로 활용: const 사용으로 값 변경 방지
- 변수의 유효 범위를 좁게 설정: let 사용, 블록 스코프 유지
- 명확한 네이밍: 변수의 목적을 명확히 표현

07장 연산자

7.1 산술 연산자

이항 산술 연산자: 두 개의 피연산자 필요

5 + 2; // 7 (덧셈)
5 - 2; // 3 (뺄셈)
5 * 2; // 10 (곱셈)
5 / 2; // 2.5 (나눗셈)
5 % 2; // 1 (나머지)

단항 산술 연산자: 하나의 피연산자 필요

var x = 1;
x++; // 후위 증가 -> 2
++x; // 전위 증가 -> 3
x--; // 후위 감소 -> 2
--x; // 전위 감소 -> 1

단항 연산자의 특성

+x: 숫자로 변환

x: 부호 반전

console.log(+"10"); // 10 (문자열 → 숫자 변환)
console.log(-"10"); // -10
console.log(+"Hello"); // NaN (변환 불가능)

7.2 할당 연산자

변수에 값을 할당하는 연산자
부수 효과: 변수 값 변경

연산자 의미

= 기본 할당

+= 덧셈 후 할당

-= 뺄셈 후 할당

*= 곱셈 후 할당

/= 나눗셈 후 할당

%= 나머지 후 할당
예시
var x = 10; x += 5; // x = x + 5 → 15 x -= 2; // x = x - 2 → 13 x *= 2; // x = x * 2 → 26 x /= 2; // x = x / 2 → 13 x %= 3; // x = x % 3 → 1

연산자	의미
`=`	기본 할당
`+=`	덧셈 후 할당
`-=`	뺄셈 후 할당
`*=`	곱셈 후 할당
`/=`	나눗셈 후 할당
`%=`	나머지 후 할당

7.3 비교 연산자

좌항과 우항의 값을 비교하여 true 또는 false 반환
동등/일치 비교 연산자

연산자 의미

== 동등 비교 (타입 변환 O)

=== 일치 비교 (타입 변환 X)

!= 부등 비교 (타입 변환 O)

!== 불일치 비교 (타입 변환 X)
- NaN은 자기 자신과도 일치하지 않음 -> Number.inNaN() 사용
```
console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true
```
대소 관계 비교 연산자
console.log(5 > 3); // true console.log(5 < 3); // false console.log(5 >= 5); // true console.log(5 <= 4); // false

연산자	의미
`==`	동등 비교 (타입 변환 O)
`===`	일치 비교 (타입 변환 X)
`!=`	부등 비교 (타입 변환 O)
`!==`	불일치 비교 (타입 변환 X)

7.4 삼항 조건 연산자

조건식 ? 참일 때 값 : 거짓일 때 값

if...else 대신 값 반환이 필요할 때 사용

var score = 85;
var result = score >= 60 ? 'Pass' : 'Fail';
console.log(result); // "Pass"

7.5 논리 연산자

논리 연산자(||, &&, !): 불리언 값을 반환하거나 단축 평가 수행

연산자 의미

`

&& 논리곱 (AND)

! 부정 (NOT)

연산자	의미
`
`&&`	논리곱 (AND)
`!`	부정 (NOT)

예시

단축 평가(short-circuit evaluation)

console.log('Hello' && 'World'); // "World"
console.log('' || 'JavaScript'); // "JavaScript"

console.log(true || false); // true console.log(true && false); // false console.log(!true); // false

7.6 쉼표 연산자

여러 표현식을 평가 후 마지막 값 반환

var x, y, z;
x = (y = 10, z = 20);
console.log(x); // 20

7.7 그룹 연산자

우선순위를 조절하기 위해 사

console.log(10 * 2 + 3); // 23
console.log(10 * (2 + 3)); // 50

7.8 typeof 연산

데이터 타입을 문자열로 반환

console.log(typeof "JavaScript"); // "string"
console.log(typeof 10); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"

7.9 지수 연산자

거듭제곱 연산: Math.pow() 대신 사용

console.log(2 ** 3); // 8
console.log(10 ** -1); // 0.1

음수를 거듭제곱할 경우 괄호 사용 필수
```
console.log((-5) ** 2); // 25
```

7.10 그 외의 연산자

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

7.11 연산자의 부수 효과

일부 연산자는 변수를 변경하는 부수 효과를 가짐
- 할당 연산자: x = 1
- 증가/감소 연산자: x++, -x
- delete 연산자: delete obj.prop
- var obj = { a: 1 }; delete obj.a; console.log(obj); // {}

7.12 연산자 우선순위

우선순위	연산자
1	`()`
2	`new` `.` `[ ]` `( )` `?`
3	`new`
4	`X++` `X--`
5	`!X` `+X` `-X` `++X` `--X` `typeof` `delete`
6	`**`
7	`*` `/` `%`
8	`+` `-`
9	`<` `<=` `>` `>=` `in` `instanceof`
10	`==` `!=` `===` `!==`

7.13 연산자 결합 순서

결합 순서	연산자
좌항 → 우항	`+` `-` `*` `/` `%` `<` `<=` `>` `>=` `&` `
우항 → 좌항	`++` `--` 할당 연산자(`=` `+=` `-=` ...) `!X` `+X` `-X` `++X` `--X` `typeof` `delete` `? ... : ...` `**`

08장 제어문

8.1 블록문

여러 개의 문을 {}로 묶은 코드 블록
제어문이나 함수 정의 시 주로 사용

블록문 자체는 하나의 실행 단위로 취급

var foo = 10; // 단일 문
{
  var x = 1; // 블록문 내부
  console.log(x);
}

제어문에서 블록문을 사용할 경우, 블록문은 세미콜론(;)을 붙이지 않음

8.2 조건문

주어진 조건식의 평가 결과에 따라 실행할 코드 블록 결정
자바스크립트는 if...else 문과 switch 문 제공
if...else문
- 조건식이 true이면 if 블록 실행, false이면 else 블록 실행
- else if를 사용해 조건 추가 가능
  '''js
  var num = 2;
  var kind;console.log(kind); // "양수"
  '''
- if (num > 0) {
  kind = '양수';
  } else if (num < 0) {
  kind = '음수';
  } else {
  kind = '영';
  }
- 삼항 연산자로 변환 가능
- var result = num > 0 ? '양수' : num < 0 ? '음수' : '영'; console.log(result); // "양수"
switch문
- 주어진 표현식을 평가하고 일치하는 case로 실행 흐름 이동
- default는 선택적으로 사용 가능하며, 일치하는 case가 없을 때 실행
- 각 case 뒤에는 break를 넣어 불필요한 실행 방지
- var month = 11; var monthName; switch (month) { case 1: monthName = 'January'; break; case 2: monthName = 'February'; break; case 11: monthName = 'November'; break; case 12: monthName = 'December'; break; default: monthName = 'Invalid month'; } console.log(monthName); // "November"
- break가 없으면 fall-through(다음 case도 실행됨) 발생

8.3 반복문

조건식이 true인 동안 코드 블록 반복 실행
자바스크립트는 for, while, do...while 문 제공

for문

가장 일반적인 반복문

반복 횟수가 명확할 때 주로 사용

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

역순 반복

for (var i = 2; i >= 0; i--) {
  console.log(i); // 2, 1, 0
}

중첩 for문 사용 가능

for (var i = 1; i <= 6; i++) {
  for (var j = 1; j <= 6; j++) {
    if (i + j === 6) console.log([i, j]);
  }
}

while문

조건식이 true인 동안 반복 실행

반복 횟수가 불명확할 때 주로 사용

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

무한 루프 방지를 위해 종료 조건 필요

while (true) {
  console.log("무한 루프");
  if (count === 3) break; // 종료 조건
  count++;
}

do...while문
- 코드 블록을 먼저 실행한 후 조건을 검사 -> 최소 1회 실행 보장
```
var count = 0;
do {
  console.log(count); // 0, 1, 2
  count++;
} while (count < 3);
```

8.4 `break`문

현재 실행 중인 반복문 또는 switch 문 탈출

for (var i = 0; i < 10; i++) {
  if (i === 3) break;
  console.log(i); // 0, 1, 2
}

중첩된 for문에서 특정 루프 탈출 시 label 사용 가능

outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    if (i + j === 3) break outer;
    console.log(i, j);
  }
}

8.5 `continue`문

반복문 내에서 실행을 중단하고 다음 반복 진행

for (var i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 0, 1, 3, 4 (2는 건너뜀)
}

continue 사용 없이 동일한 결과를 얻을 수도 있음

for (var i = 0; i < 5; i++) {
  if (i !== 2) console.log(i);
}

09장 타입 변환과 단축 평가

9.1 타입 변환이란?

자바스크립트의 모든 값은 타입을 가짐
개발자가 명시적으로 변환 -> 명시적 타입 변환(Explicit Coercion, Type Casting)
자바스크립트 엔진이 자동으로 변환 -> 암묵적 타입 변환(Implicit Coercion, Type Coercion)
// 명시적 타입 변환 var x = 10; var str = x.toString(); // 숫자를 문자열로 변환 console.log(typeof str, str); // string "10" // 암묵적 타입 변환 var num = 10 + "5"; // 숫자가 문자열로 변환되어 문자열 결합 console.log(typeof num, num); // string "105"

9.2 암묵적 타입 변환

자바스크립트 엔진이 코드 실행 중 자동으로 타입 변환
코드의 문맥(Context)에 따라 문자열, 숫자, 불리언 타입으로 변환
문자열 타입으로 변환
- 문자열 연결 연산자(+) 사용 시, 피연산자가 문자열이 아닌 경우 문자열로 변환
```
console.log(1 + "2"); // "12" (숫자가 문자열로 변환됨)
console.log(true + ""); // "true"
console.log(null + ""); // "null"
```
- 템플릿 리터럴(`) 내 표현식 삽입 시
```
console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"
```
숫자 타입으로 변환
- 산술 연산 사용 시
- 비교 연산자 사용 시
- 빈 문자열(""), false, null은 0으로 변환 while (count < 3) {
  console.log(count); // 0, 1, 2
  count++;
  }
```
- 무한 루프 방지를 위해 종료 조건 필요
```
while (true) {
  console.log("무한 루프");
  if (count === 3) break; // 종료 조건
  count++;
}
```
do...while문
- 코드 블록을 먼저 실행한 후 조건을 검사 -> 최소 1회 실행 보장
```
var count = 0;
do {
  console.log(count); // 0, 1, 2
  count++;
} while (count < 3);
```

8.4 `break`문

현재 실행 중인 반복문 또는 switch 문 탈출

for (var i = 0; i < 10; i++) {
  if (i === 3) break;
  console.log(i); // 0, 1, 2
}

중첩된 for문에서 특정 루프 탈출 시 label 사용 가능

outer: for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    if (i + j === 3) break outer;
    console.log(i, j);
  }
}

8.5 `continue`문

반복문 내에서 실행을 중단하고 다음 반복 진행

for (var i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 0, 1, 3, 4 (2는 건너뜀)
}

continue 사용 없이 동일한 결과를 얻을 수도 있음

for (var i = 0; i < 5; i++) {
  if (i !== 2) console.log(i);
}

09장 타입 변환과 단축 평가

9.1 타입 변환이란?

자바스크립트의 모든 값은 타입을 가짐
개발자가 명시적으로 변환 -> 명시적 타입 변환(Explicit Coercion, Type Casting)
자바스크립트 엔진이 자동으로 변환 -> 암묵적 타입 변환(Implicit Coercion, Type Coercion)
// 명시적 타입 변환 var x = 10; var str = x.toString(); // 숫자를 문자열로 변환 console.log(typeof str, str); // string "10" // 암묵적 타입 변환 var num = 10 + "5"; // 숫자가 문자열로 변환되어 문자열 결합 console.log(typeof num, num); // string "105"

9.2 암묵적 타입 변환

자바스크립트 엔진이 코드 실행 중 자동으로 타입 변환
코드의 문맥(Context)에 따라 문자열, 숫자, 불리언 타입으로 변환
문자열 타입으로 변환
- 문자열 연결 연산자(+) 사용 시, 피연산자가 문자열이 아닌 경우 문자열로 변환
```
console.log(1 + "2"); // "12" (숫자가 문자열로 변환됨)
console.log(true + ""); // "true"
console.log(null + ""); // "null"
```
- 템플릿 리터럴(`) 내 표현식 삽입 시
```
console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"
```

숫자 타입으로 변환

산술 연산 사용 시

console.log("5" - 3); // 2 ("5" → 5)
console.log("10" * "2"); // 20 (모두 숫자로 변환)
console.log("3" / "1.5"); // 2
console.log("abc" - 2); // NaN ("abc"를 숫자로 변환할 수 없음)

비교 연산자 사용 시

console.log("10" > 5); // true ("10" → 10)

빈 문자열(""), false, null은 0으로 변환

console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0

undefined와 객체는 NaN으로 변환

console.log(+undefined); // NaN
console.log(+{}); // NaN

불리언 타입으로 변환

Falsy 값(거짓으로 평가되는 값)
- false
- undefined
- null
- 0, -0
- NaN
- '' (빈 문자열)

Truthy 값(참으로 평가되는 값): Falsy 값이 아닌 모든 값

if ("hello") console.log("Truthy!"); // 실행됨
if (0) console.log("Falsy!"); // 실행되지 않음

예시

console.log(!!"Hello"); // true
console.log(!!0); // false
console.log(!!undefined); // false
console.log(!!{}); // true (객체는 Truthy)

9.3 명시적 타입 변환

개발자가 직접 변환하는 방법

문자열 변환

String() 생성자 함수 사용

console.log(String(123)); // "123"
console.log(String(true)); // "true"

toString() 메서드 사용

console.log((123).toString()); // "123"
console.log((true).toString()); // "true"

문자열 연결 연산자(+) 사용

console.log(123 + ""); // "123"
console.log(true + ""); // "true"

숫자 변환

Number() 생성자 함수 사용

console.log(Number("123")); // 123
console.log(Number("abc")); // NaN

parseInt(), parseFloat() 함수 사용

console.log(parseInt("10.5")); // 10
console.log(parseFloat("10.5")); // 10.5

+ 단항 연산자 사용

console.log(+"123"); // 123
console.log(+"abc"); // NaN

* 연산자 사용

console.log("10" * 1); // 10
console.log("abc" * 1); // NaN

불리언 변환

Boolean() 생성자 함수 사용

console.log(Boolean("hello")); // true
console.log(Boolean("")); // false

!! 부정 연산자 두 번 사용

console.log(!!"hello"); // true
console.log(!!0); // false

9.4 단축 평가

논리 연산자(&&, ||)는 단축 평가(Short-circuit evaluation)를 수행
불필요한 연산을 줄이고, 코드 간결화 가능

논리 연산자를 사용한 단축 평가

console.log("Hello" && "World"); // "World" (앞이 Truthy면 뒤 반환)
console.log("" || "JavaScript"); // "JavaScript" (앞이 Falsy면 뒤 반환)

if문 대체 가능

var isValid = true;
var message = isValid && "Success";
console.log(message); // "Success"

옵셔널 체이닝 연산자 (?.)
- 객체 프로퍼티가 null 또는 undefined일 경우 에러 없이 undefined 반환
```
var obj = null;
console.log(obj?.name); // undefined (TypeError 발생하지 않음)
```
  - 기존 방식 (&& 단축 평가 사용)
```
console.log(obj && obj.name); // undefined
```
null 병합 연산자 (??)
- 좌항의 값이 null 또는 undefined이면 우항을 반환, 아니면 좌항을 반환
```
var foo = null ?? "Default value";
console.log(foo); // "Default value"
```
  - 기존 방식 (!! 단축 평가 사용)
```
var foo = null || "Default value";
console.log(foo); // "Default value"
```
  - 차이점
    - ||는 0, ''도 Falsy로 간주해 우항 반환
    - ??는 null, undefined만 판단

10장 객체 리터럴

10.1 객체란?

자바스크립트는 객체 기반 프로그래밍 언어이며, 원시 값을 제외한 모든 것이 객체
객체(Object)는 프로퍼티(Property)와 메서드(Method)로 구성된 데이터 구조
- 프로퍼티(Property): 키(Key)와 값(Value)의 쌍
- 메서드(Method): 객체에 포함된 함수
```
var person = {
name: 'Lee', // 프로퍼티
age: 29, // 프로퍼티
sayHello: function () { // 메서드
  console.log(`Hello! My name is ${this.name}`);
}
};
```

10.2 객체 리터럴에 의한 객체 생성

객체 리터럴: 가장 일반적인 객체 생성 방법
클래스 기반 언어(C++, Java)와 달리 사전 정의된 클래스 없이 객체 즉시 생성 가능
var person = { name: 'Lee', age: 29 }; console.log(typeof person); // "object" console.log(person); // { name: 'Lee', age: 29 }
빈 객체 생성 가능
var empty = {}; console.log(typeof empty); // "object"

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키(Key)와 값(Value)으로 구성
프로퍼티 키: 문자열 또는 심벌 타입
프로퍼티 값: 모든 타입 가능
var person = { firstName: "Ung-mo", // 식별자 네이밍 규칙을 따름 "last-name": "Lee" // 따옴표 필요 (네이밍 규칙 미준수) }; console.log(person["last-name"]); // "Lee"
동적으로 프로퍼티 키 생성 가능 ([] 사용)
var key = "age"; var person = { [key]: 30 }; console.log(person.age); // 30

10.4 메서드

메서드: 객체의 프로퍼티 값이 함수일 경우
var circle = { radius: 5, // 프로퍼티 getDiameter: function () { // 메서드 return 2 * this.radius; } }; console.log(circle.getDiameter()); // 10

10.5 프로퍼티 접근

마침표 표기법(.): 식별자 네이밍 규칙을 준수하는 경우 사용 가능
대괄호 표기법([]): 네이밍 규칙을 따르지 않거나, 동적으로 접근할 때 사용
var person = { name: "Lee", age: 30 }; // 마침표 표기법 console.log(person.name); // "Lee" // 대괄호 표기법 console.log(person["age"]); // 30
객체에 존재하지 않는 프로퍼티 접근 시 undefined 반환
console.log(person.address); // undefined

10.6 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신됨
var person = { name: "Lee" }; person.name = "Kim"; // 값 갱신 console.log(person); // { name: "Kim" }

10.7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 동적으로 추가됨
n = { name: "Lee" }; person.age = 29; // 동적 추가 console.log(person); // { name: "Lee", age: 29 }

10.8 프로퍼티 삭제

delete 연산자를 사용하여 프로퍼티 삭제 가능
var person = { name: "Lee", age: 29 }; delete person.age; console.log(person); // { name: "Lee" }
존재하지 않는 프로퍼티 삭제 시 에러 없이 무시됨
delete person.address; // 에러 없음

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

프로퍼티 축약 표현
- 객체 리터럴에서 변수명을 프로퍼티 키로 사용할 때, key: value 생략 가능
- let x = 1, y = 2; const obj = { x, y }; console.log(obj); // { x: 1, y: 2 }
계산된 프로퍼티 이름
- ES6에서는 객체 리터럴 내부에서도 []로 동적 키 설정 가능
- const prefix = "prop"; let i = 0; const obj = { [`${prefix}-${++i}`]: i, [`${prefix}-${++i}`]: i }; console.log(obj); // { "prop-1": 1, "prop-2": 2 }
메서드 축약 표현
- function 키워드 생략 가능
- const obj = { name: "Lee", sayHi() { // function 키워드 생략 console.log(`Hi! ${this.name}`); } }; obj.sayHi(); // "Hi! Lee"

'Study > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

[모던 자바스크립트 Deep Dive] 31, 32, 35장 (0)	2025.04.10
[모던 자바스크립트 Deep Dive] 26장 ~ 30장 (0)	2025.04.03
[모던 자바스크립트 Deep Dive] 21장 ~ 25장 (0)	2025.03.27
[모던 자바스크립트 Deep Dive] 16장 ~ 20장 (0)	2025.03.27
[모던 자바스크립트 Deep Dive] 11장 ~ 15장 (0)	2025.03.27

현재글[모던 자바스크립트 Deep Dive] 04장 ~ 10장

chaeon1 님의 블로그

chaeon1 님의 블로그 입니다.

Today :
Yesterday :

« 2025/10 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31