From 5a23341d8429a510a62b1cfa50537f0e5176bb24 Mon Sep 17 00:00:00 2001 From: sunghyunjeonme <4dallove@gmail.com> Date: Sun, 16 May 2021 21:12:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?1=EC=A3=BC=EC=B0=A8=20=EC=B1=95=ED=84=B0=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1week.md | 112 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 97 insertions(+), 15 deletions(-) diff --git a/1week.md b/1week.md index 1d4d361..6e20ea8 100644 --- a/1week.md +++ b/1week.md @@ -1,15 +1,97 @@ -# 모던 자바스크립트 딥 다이브 3개월 완독 프로젝트 -목적: JS를 기초부터 차근차근 익힌다. - -책 링크: http://www.yes24.com/Product/Goods/92742567 - -기간: 5.10(월) ~ 8.1(일) 총 84일 -# 규칙 -1. 오픈 채팅방 주도 진행 [주소](https://open.kakao.com/o/gXNDEfcd) -1. 4~49 챕터(총 46)를 진행합니다. -2. 한 달 4주, 약 28일, 총 12주, 84일이므로 한 주에 4~6 챕터를 진행합니다. 그전 주에 [카톡 오픈 채팅방](https://open.kakao.com/o/gXNDEfcd)에서 투표합니다. (기본값-4챕터) -3. 온라인 위주로 활동합니다. -4. 각 주차별/닉네임 폴더 아래에 그 주에 공부한 내용을 정리해 PR로 공유합니다. -5. branch 명명 규칙: 닉네임-n(주 차). 예: qkreltms-1 또는 qkreltms-week1, main을 바라보고 branch를 생성합니다. -5. 자유롭게 PR을 리뷰하고 main에 병합합니다. -6. **중요!!: 그 주에 올린 PR을 캡처하고 챌린저스에 인증합니다.** +# 04. 변수 + +변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다고 생각할 수 있다. + +```js +// javascript code +10 + 20; +``` + +- 사람 : `10`과 `20`을 더한 결과인 30을 두뇌에 기억한다. +- 컴퓨터(자바스크립트 엔진) : 코드를 계산하려면 `10`, `20`, `+`라는 기호의 의미를 알고 있어야 하며 `10+20`이라는 식의 의미도 해석할 수 있어야 한다. + +사람은 계산과 기억을 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산을 하고, 메모리를 사용해서 데이터를 기억한다. + +## 메모리 + +메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 셀 하나의 크기는 1바이트(8비트)이다. 위의 예시 코드에서 `10`과 `20`은 메모리에 저장되고 CPU는 이 값을 읽어 연산을 수행한다. 결과 `30` 값 또한 메모리 주소에 저장된다. 메모리에 저장되는 모든 값은 2진수로 저장된다. + +## 변수 + +자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다. **WHY ?** 메모리 주소는 코드가 실행될 때 임의로 결정되기 때문에 코드가 실행될 때마다 메모리 주소는 변경된다. **HOW ?** 메모리를 직접 제어하는 것이 아닌, 변수라는 메커니즘을 통해서 메모리 주소를 식별할 수 있도록 이름을 지정하면 된다. **변수는 프로그래밍 언어의 컴파일러 또는 인터프리터**에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. **즉, 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 `변수`를 통해 안전하게 값에 접근할 수 있는 것이다.** + +- 변수 이름을 식별자라고도 한다. +- 식별자는 값이 아니라 메모리주소를 기억하고 있다. +- 식별자로 값을 구분한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미이다. +- 즉, 식별자는 메모리 주소에 붙인 이름 + +## 변수 선언 + +변수 선언이란 변수를 생성하는 것을 말한다. `var`, `let`, `const` 키워드를 통해 선언할 수 있다. + +- `var` : 함수 레벨 스코프 +- `let`, `const` : 블록 레벨 스코프 +- ES6에서 도입된 `let`, `const` 키워드를 지향하자. +- `var` 스코프는 함수의 스코프만을 지역 스코프로 인정한다. 따라서, 코드 블록 내에 선언해도 전역 변수가 되는 문제점이 있다. + +자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행한다. + +```js +var score; // 변수 선언(변수 선언문) +``` + +- 선언 : 변수 이름을 등록해서 엔진에 변수의 존재를 알림 +- 초기화 : 값을 저장하기 위한 공간을 확보하고 암묵적으로 `undefined`를 할당해 초기화 + +자바크립트 엔진은 소스를 평가하고 실행하는 두 가지 과정으로 일을 한다. + +- 평가 : 변수 선언을 포함한 모든 선언문을 코드에서 찾아내 먼저 실행함 +- 실행 : 순차적으로 다음 코드를 진행 + +자바스크립트 엔진은 코드를 실행하기 전에 이미 모든 식별자 정보를 알고 있는 셈이다. 이를 호이스팅이라고 부른다. + +# 05. 표현식과 문 + +- 표현식 : 값으로 평가될 수 있는 문이다. +- 문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위 + - 문은 여러 토큰으로 구성된다. + - 문은 컴퓨터에 내리는 명령이라고 생각하면 된다. + +```js +// 변수 선언문 +var x; +// 할당문 +x = 5; +// 함수 선언문 +function foo() {} +// 조건문 +if (x > 1) { + console.log(x); +} +// 반복문 +for (var i = 0; i < 2; i++) { + console.log(i); +} +``` + +# 06. 데이터 타입 + +- 원시 타입 + - Number + - String + - Boolean + - Undefined + - Null + - Symbol +- 객체 타입 + - Object + - Function + - Array + +데이터 타입은 왜 필요한 것인가? + +- 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다. 따라서, 공간의 확보와 메모리 간의 참조를 위해 데이터 타입을 결정하는 것이다. **자바스크립트 변수는 선언이 아닌, 할당에 의해 타입이 결정된다. 또한 재할당을 통해 언제든지 동적으로 변할 수 있다.** 자바스크립트를 동적 타입 언어라고 부르는 이유이기도 하다. + +# 07. 연산자 + +하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리 지수 연상 등을 수행해서 하나의 값을 만든다. 동등 연산자를 지양하고 일치 비교 연산자를 지향하자. From 12216a729fb718387e978db66a91c662ffe7b371 Mon Sep 17 00:00:00 2001 From: sunghyunjeonme <4dallove@gmail.com> Date: Tue, 18 May 2021 23:11:26 +0900 Subject: [PATCH 2/5] =?UTF-8?q?add=20:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=ED=95=B4=EC=84=9C=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B5=AC=EC=A0=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ sunghyun/1week.md" | 0 "1\354\243\274\354\260\250/qkreltms/index.md" | 3 --- README.MD | 18 ++++++++++++++++++ 3 files changed, 18 insertions(+), 3 deletions(-) rename 1week.md => "1\354\243\274\354\260\250 / sunghyun/1week.md" (100%) delete mode 100644 "1\354\243\274\354\260\250/qkreltms/index.md" create mode 100644 README.MD diff --git a/1week.md "b/1\354\243\274\354\260\250 / sunghyun/1week.md" similarity index 100% rename from 1week.md rename to "1\354\243\274\354\260\250 / sunghyun/1week.md" diff --git "a/1\354\243\274\354\260\250/qkreltms/index.md" "b/1\354\243\274\354\260\250/qkreltms/index.md" deleted file mode 100644 index 21c832a..0000000 --- "a/1\354\243\274\354\260\250/qkreltms/index.md" +++ /dev/null @@ -1,3 +0,0 @@ -# 1주차 리뷰 - -# 배운 것 \ No newline at end of file diff --git a/README.MD b/README.MD new file mode 100644 index 0000000..47ae7ba --- /dev/null +++ b/README.MD @@ -0,0 +1,18 @@ +# 모던 자바스크립트 딥 다이브 3개월 완독 프로젝트 + +목적: JS를 기초부터 차근차근 익힌다. + +책 링크: http://www.yes24.com/Product/Goods/92742567 + +기간: 5.10(월) ~ 8.1(일) 총 84일 + +# 규칙 + +1. 오픈 채팅방 주도 진행 [주소](https://open.kakao.com/o/gXNDEfcd) +1. 4~49 챕터(총 46)를 진행합니다. +1. 한 달 4주, 약 28일, 총 12주, 84일이므로 한 주에 4~6 챕터를 진행합니다. 그전 주에 [카톡 오픈 채팅방](https://open.kakao.com/o/gXNDEfcd)에서 투표합니다. (기본값-4챕터) +1. 온라인 위주로 활동합니다. +1. 각 주차별/닉네임 폴더 아래에 그 주에 공부한 내용을 정리해 PR로 공유합니다. +1. branch 명명 규칙: 닉네임-n(주 차). 예: qkreltms-1 또는 qkreltms-week1, main을 바라보고 branch를 생성합니다. +1. 자유롭게 PR을 리뷰하고 main에 병합합니다. +1. **중요!!: 그 주에 올린 PR을 캡처하고 챌린저스에 인증합니다.** From c137b502ccd500cf8e6673cf3d68be5017200244 Mon Sep 17 00:00:00 2001 From: sunghyunjeonme <4dallove@gmail.com> Date: Mon, 24 May 2021 16:50:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?2=EC=A3=BC=EC=B0=A8=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "2\354\243\274\354\260\250 /2week.md" | 659 ++++++++++++++++++++++++++ 1 file changed, 659 insertions(+) create mode 100644 "2\354\243\274\354\260\250 /2week.md" diff --git "a/2\354\243\274\354\260\250 /2week.md" "b/2\354\243\274\354\260\250 /2week.md" new file mode 100644 index 0000000..cee40b8 --- /dev/null +++ "b/2\354\243\274\354\260\250 /2week.md" @@ -0,0 +1,659 @@ +- [08. 제어문](#08-제어문) + - [8.1 블록문](#81-블록문) + - [8.2 조건문](#82-조건문) + - [8.2.1 if ... else 문](#821-if--else-문) + - [삼항 연산자](#삼항-연산자) + - [8.2.2 switch 문](#822-switch-문) + - [8.3 반복문](#83-반복문) + - [8.3.1 for문](#831-for문) + - [8.3.2 while 문](#832-while-문) + - [8.3.3 do... while 문](#833-do-while-문) + - [8.4 break](#84-break) + - [8.5 continue](#85-continue) +- [09. 타입 변환과 단축 평가](#09-타입-변환과-단축-평가) + - [9.1 타입 변환이란](#91-타입-변환이란) + - [9.2 암묵적 타입 변환](#92-암묵적-타입-변환) + - [9.2.1 문자열 타입으로 변환](#921-문자열-타입으로-변환) + - [9.2.2 숫자 타입으로 변환](#922-숫자-타입으로-변환) + - [9.2.3 불리언 타입으로 변환](#923-불리언-타입으로-변환) + - [9.3 명시적 타입 변환](#93-명시적-타입-변환) + - [9.3.1 문자열 타입으로 변환](#931-문자열-타입으로-변환) + - [9.3.2 숫자 타입으로 변환](#932-숫자-타입으로-변환) + - [9.3.3 불리언 타입으로 변환](#933-불리언-타입으로-변환) + - [9.4 단축 평가](#94-단축-평가) + - [9.4.1 논리 연산자를 사용한 단축 평가](#941-논리-연산자를-사용한-단축-평가) + - [9.4.2 옵셔널 체이닝 연산자](#942-옵셔널-체이닝-연산자) + - [9.4.3 null 병합 연산자](#943-null-병합-연산자) +- [10. 객체 리터럴](#10-객체-리터럴) + - [10.1 객체란?](#101-객체란) + - [10.2 객체 리터럴에 의한 생성](#102-객체-리터럴에-의한-생성) + - [10.3 프로퍼티](#103-프로퍼티) + - [10.4 메서드](#104-메서드) + - [10.5 프로퍼티 접근](#105-프로퍼티-접근) + - [10.6 프로퍼티 값 갱신](#106-프로퍼티-값-갱신) + - [10.7 프로퍼티 동적 생성](#107-프로퍼티-동적-생성) + - [10.8 프로퍼티 삭제](#108-프로퍼티-삭제) + - [10.9 ES6에서 추가된 객체 리터럴의 확장 기능](#109-es6에서-추가된-객체-리터럴의-확장-기능) + - [11. 원시 값과 객체의 비교](#11-원시-값과-객체의-비교) + - [11.1 원시 값](#111-원시-값) + - [12.2 객체](#122-객체) + +# 08. 제어문 + +- 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용함 +- 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행됨 + +## 8.1 블록문 + +```js +// 블록문 +{ + var foo = 10; +} +// 제어문 +var x = 1; +if (x < 10) { + x++; +} +// 함수 선언문 +function sum(a, b) { + return a + b; +} +``` + +- 블록문은 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 칭함 +- 자바스크립트는 블록문을 하나의 실행 단위로 취급함 +- 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용함 + +## 8.2 조건문 + +- 조건(불리언 값)에 따라 코드 블록의 실행을 결정함 +- 자바스크립트는 `if문`, `switch` 두 가지 조건문을 제공한다. + +### 8.2.1 if ... else 문 + +```js +if (조건식) { + // 참이면 해당 코드 블록을 실행 +} else { + // 거짓이면 해당 코드 블록을 실행 +} +``` + +- 참 또는 거짓에 따라 실행할 코드 블록을 결정함 +- 조건식(불리언 값으로 평가될 수 있는 표현식)의 결과가 `true`일 경우 if문의 코드 블록이 실행됨 +- 조건식의 결과가 `false`일 경우 else문의 코드 블록이 실행됨 +- if문의 조건식이 불리언 값이 아닌 값으로 평가되면 암묵적으로 강제 변환됨 + +```js +if (조건식1) { + // 조건식1이 참이면 실행 +} else if (조건식2) { + // 조건식2가 참이면 실행 +} else { + // 조건식1과 2가 모두 거짓이면 실행 +} +``` + +- 조건식을 추가하고 싶으면 `else if`문을 사용 +- `else if`과 `else`은 옵션임 +- `if`와 `else`는 한 번만 사용할 수 있지만, `else if`는 여러 번 사용 가능 +- 코드 블록 내의 문이 하나뿐이면 중괄호 생략 가능 +
+ +펼치기 + +```js +let num = 2; +let kind; + +// if +if (num > 0) { + kind = "양수"; // 음수를 구별할 수 없다. +} +console.log(kind); // 양수 + +// if ... else +if (num > 0) { + kind = "양수"; +} else { + kind = "음수"; // 0은 음수가 아니다. +} +console.log(kind); // 양수 + +// if ... else if +if (num > 0) { + kind = "양수"; +} else if (num < 0) { + kind = "음수"; +} else { + kind = "영"; +} +console.log(kind); //양수 +``` + +
+ +#### 삼항 연산자 + +- `if else`문은 삼항 조건 연산자로 바꿔 쓸 수 있음 + +
+ +펼치기 + +> if else +```js +let x = 2; +let result; + +if (x % 2) { +result = "홀수"; +} else { +result = "짝수"; +} +console.log(result); // 짝수 + +```` +> 삼항 연산자 + +- 두 가지 경우의 수(홀수 또는 짝수) + +```js +let x = 2; +let result = x % 2 ? '홀수' : '짝수'; +console.log(result); +```` + +- 세 가지 경우의 수(양수, 음수, 영을 갖는 경우) + +```js +let num = 2; +var kind = num ? (num > 0 ? : '양수' : '음수') : '영' +``` + +- 조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우에는 삼항 조건 연산자를 사용하는 게 좋음 +- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있음 +
+ +### 8.2.2 switch 문 + +- 모든 `switch` 문은 `if` 문으로 대체할 수 있다. 하지만,`case`가 다양한 상황의 경우 `switch` 문을 사용해서 깔끔하게 코드를 작성할 수 있음 + +```js +let fruit = prompt("무슨 과일을 원하시나요?"); +switch (fruit) { + case "사과": + console.log("100원입니다."); + break; + case "바나나": + case "메론": + console.log("200원입니다."); + break; + case "망고": + console.log("300원입니다."); + default: + console.log("그런 과일은 없습니다."); +} +``` + +- `if` 문의 else 역할을 `default`가 수행한다. + +## 8.3 반복문 + +- 조건식이 참일 경우 코드 블록을 실행하고 조건식이 거짓일 때까지 코드 블록을 반복 실행함 + +### 8.3.1 for문 + +```js + +for (변수 선언문 또는 할당문; 조건식; 증감식;){ + 조건식이 참인 경우 반복 실행될 문; +} + +for (let i = 0; i < 3; i++) { + console.log(i); +} +// 0 +// 1 +// 2 +``` + +- `for` 문을 실행하면 맨 먼저 변수 선언문 `let i = 0`이 실행되며 변수 선언문은 단 한 번만 실행됨 +- 조건식이 실행되며 현재 `i`의 값은 0이므로 조건식의 평가 결과는 `true`임 +- 조건식 평가 결과가 `true`이므로 코드 블록이 실행됨 +- **증감문으로 실행 흐름이 이동하는 것이 아니라 코드 블록으로 실행 흐름이 이동하는 것에 주의** +- `for` 문의 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없지만 어떤 식도 선언하지 않으면 무한루프가 됨 + +**중첩 for문** + +```js +for (let i = 0; i <= 6; i++) { + for (let j = 0; j <= 6; j++) { + if (i + j === 6) console.log(`[${i}, ${j}]`); + } +} +// [0, 6] +// [1, 5] +// [2, 4] +// [3, 3] +// [4, 2] +// [5, 1] +// [6, 0] +``` + +- `i`가 실행되고 안 쪽 for 문으로 들어가서 `j`의 조건식이 만족할 때까지 실행되고 다시 `i`가 실행됨(`i`는 증가) + +### 8.3.2 while 문 + +- 반복 횟수가 명확하지 않은 상황에 주로 사용함 + +```js +let count = 0; + +// 무한루프 +while (true) { + console.log(count); + count++; + // count가 3이면 코드 블록을 탈출 + if (count === 3) break; +} +``` + +- 조건식의 평가 결과가 언제나 참이면 무한루프가 된다. +- `if` 문으로 탈출 조건을 만들고 `break` 문으로 코드 블록을 탈출 + +### 8.3.3 do... while 문 + +- 코드 블록을 먼저 실행하고 조건식을 평가함. 따라서 코드 블록은 무조건 한 번 이상 실행됨 + +```js +let count = 0; +// count가 3보다 작을 때까지 코드 블록 반복 실행 +do { + console.log(count); + count++; +} while (count < 3); +``` + +## 8.4 break + +- 코드 블록을 탈출할 때 사용하는데 정확히 표현하면 **레이블 문, 반복문(for, for...in, for...of, while, do...while), switch 문**의 코드 블록을 탈출함 +- 레이블 문, 반복문, switch 문의 코드 블록 외에 `break`를 사용하면 `SyntaxError` 발생 +- 레이블 문이란 식별자가 붙은 문을 말함 + - 즉, break 문에도 식별자를 지정하는 셈 + - 중첩된 `for` 문 외부로 탈출할 때 유용하지만 가독성이 저하되고 오류를 야기할 수 있어서 권장하지 않음 + +```js +if (true) { + break; // Uncaught SyntaxError: Illegal break statement +} +``` + +문자열에서 특정 문자의 인덱스(위치)를 검색하는 예 + +```js +let string = "Hello word"; +let search = "l"; +let index; +// 문자열은 유사 배열이므로 for 문으로 순회 가능 +for (let i = 0; i < string.length; i++) { + // 문자열의 개별 문자가 'l'이면 + if (string[i] === search) { + index = i; + break; // 반복문 탈출 + } +} +console.log(index); // 2 +``` + +### 8.5 continue + +- 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 **증감식**으로 실행 흐름을 이동시킴 +- `break`처럼 반복문을 탈출하지는 않는다. + +# 09. 타입 변환과 단축 평가 + +## 9.1 타입 변환이란 + +- 자바스크립트의 모든 값에는 타입이 있음 +- 개발자가 의도적으로 값의 타입을 변환하는 것은 **명시적 타입 변환** 또는 **타입 캐스팅**이라고 함 +- 자바스크립트 엔진이 암묵적으로 변환하는 것을 **암묵적 타입 변환** 또는 **타입 강제 변환**이라고 함 + +## 9.2 암묵적 타입 변환 + +### 9.2.1 문자열 타입으로 변환 + +- 문자열 타입이 아닌 값을 문자열 타입으로 변환함 + +```js +0 + ""; // "0" +true + "진짜"; // "ture진짜" +Array + ""; // 'function Array() { [native code] }' +``` + +### 9.2.2 숫자 타입으로 변환 + +```js +1 / "one" + // NaN + "string" + // NaN + undefined + // NaN + // 객체 타입 + {} + // NaN + [10, 20] + // NaN + function () {}; // NaN +``` + +- 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 평가 결과는 `NaN`이 됨 + +```js +"1" > 0; // true +``` + +- 위에서 비교 연산자는 불리언 값을 만드는데 이때 자바스크립트 엔진은 암묵적으로 피연산자를 숫자 타입으로 변환함 + +### 9.2.3 불리언 타입으로 변환 + +```js +if ("") console.log("1"); // falsy +if (true) console.log("2"); // truthy +if (0) console.log("3"); // falsy +if ("str") console.log("4"); // truthy +if (null) console.log("5"); // falsy +``` + +- 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적으로 변환함 +- 이때 자바스크립트 엔진은 **Truthy(참으로 평가되는 값)과 Falsy(거짓으로 평가되는 값)** 을 구분 + +**Falsy 값** + +- false +- undefined +- null +- 0, -0 +- NaN +- ''(빈 문자열) + +**Truth 값** + +- '0' (0을 포함하는 문자열) +- 'false' (false를 포함하는 문자열) +- [] (빈 배열) +- {} (빈 객체) +- function () {} (빈 함수) + +`Falsy` 값 외의 모든 값은 모두 ture로 평가되는 Truthy 값 + +## 9.3 명시적 타입 변환 + +### 9.3.1 문자열 타입으로 변환 + +- String 생성자 함수를 new 연산자 없이 호출하는 방법 + +```js +// 숫자 타입 => 문자열 타입 +String(1); +String(NaN); +String(Infinity); +// 불리언 타입 => 문자열 타입 +String(true); +String(false); +``` + +- Object.prototype.toString 메서드를 사용하는 방법 + +```js +(1).toString(); // "1" +NaN.toString(); // "NaN" +``` + +- 문자열 연결 연산자를 이용하는 방법 + +```js +1 + ""; // "1" +true + ""; // "true +``` + +### 9.3.2 숫자 타입으로 변환 + +- Number 생성자 함수를 new 연산자 없이 호출하는 방법 + +```js +Number(1); // 1 +Number("hi"); // 숫자 타입으로 변경할 수 없으므로 NaN +Number("10.53"); // 10.35 +``` + +- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능) + +```js +parseInt("0"); // 0 +parseInt("-1001"); // -1001 +parseFlat("10.53"); // 10.53 +``` + +- `+` 단항 산술 연산자를 이용하는 방법 + +```js ++0; // 0 ++"-1"; // -1 +// 불리언 타입 => 숫자 타입 ++true; // 1 ++false; // 0 +``` + +- `*` 산술 연산자를 이용하는 방법 + +```js +"0" * 1; // 0 +1 * "456"; // 456 +"10.53" * 1; // 10.53 +``` + +### 9.3.3 불리언 타입으로 변환 + +- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법 + +```js +Boolean("x"); // true +Boolean(""); // false +Boolean("false"); // true +Boolean(null); // false +Boolean(undefined); // false +Boolean({}); // true +Boolean([]); // true +``` + +- ! 부정 논리 연산자를 두 번 사용하는 방법 + +```js +!!"x"; // true +!!""; // false +!!{}; // true +``` + +## 9.4 단축 평가 + +### 9.4.1 논리 연산자를 사용한 단축 평가 + +- `||` 연산자 +- `&&` 연산자 + +위의 논리 연산자를 사용해서 표현식을 평가할 때 도중에 결과가 확정된 경우 나머지 과정을 생략할 수 있는데 이를 **단축 평가**라고 함 + +| 단축 평가 표현식 | 평가 결과 | +| ------------------- | --------- | --------- | -------- | +| `true | | anything` | true | +| `false | | anything` | anything | +| `true && anything` | anything | +| `false && anything` | false | + +- 참일 경우, `&&` 연산자는 두 번째 피연산자의 문자열을 반환함 + +### 9.4.2 옵셔널 체이닝 연산자 + +- 옵셔널 체이닝 연산자(`?.`)는 좌항의 피연산자가 `null` 또는 `undefined`인 경우 `undefined`를 반환하고, 그렇지 않으면 우항의 참조를 이어간다. + +```js +let elem = null; +let value = elem?.value; +console.log(value); // undefined +``` + +- 옵셔널 체이닝 연산자(`?.`)는 객체를 가리키기를 기대하는 변수가 `null` 또는 `undeinfed`가 아닌지 확인하고 프로퍼티를 참조할 때 유용함 + +### 9.4.3 null 병합 연산자 + +```js +let foo = null ?? "default string"; +console.log(foo); // "default string" +``` + +- ES11에서 새로 도입되었고 null 병합 연산자(`??`)는 좌항의 피연산자가 `null` 또는 `undefined`인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환함 + +# 10. 객체 리터럴 + +## 10.1 객체란? + +- 자바스크립트는 프로토타입 객체 기반의 언어이며 자바스크립트를 구성하는 모든 것이 객체임 +- 원시 타입은 단 하나의 값을 나타내지만, 객체 타입은 **다양한 값(원시 값 또는 다른 객체**를 하나의 단위로 구성한 복합적인 **자료구조**다. +- 원시 값은 **변경 불가능한 값(immutable value)** 이지만, 객체는 **변경 가능한 값(mutable value)** +- 객체는 프로퍼티로 구성된 집합 + - 프로퍼티 : 키와 값으로 구성되어 있으며 이를 통해 객체의 상태를 나타내는 값 + - 메서드 : 프로퍼티를 조작할 수 있는 동작을 나타내는 값 + +## 10.2 객체 리터럴에 의한 생성 + +- `C++`, `JAVA`는 클래스 기반의 객체지향 언어는 사전에 클래스를 정의하고 필요한 시점에 호출하는 방식으로 객체를 생성함 +- `JavaScript`는 프로토타입 기반의 객체지향 언어로서 다양한 객체 생성 방법을 지원함 + - 객체 리터럴 + - Object 생성자 함수 + - 생성자 함수 + - Object.create 메서드 + - 클래스(ES6) + +위와 같은 방식으로 객체를 생성할 수 있는데 이를 통해 자바스크립트의 유연함(?)을 확인할 수 있음 이는 독이 될 수도 있겠다만.. + +## 10.3 프로퍼티 + +```js +let person = { + name: "jeon", + age: 27, +}; +``` + +- 위와 같이 프로퍼티는 키와 값으로 구성되어 있음 +- 네이밍 규칙을 준수해야 함 + +## 10.4 메서드 + +- 자바스크립트에서 사용할 수 있는 모든 값으 `프로퍼티 값`으로 사용할 수 있음 +- 자바스크립트의 함수는 일급 객체임. 함수를 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있음 +- 이를 메서드라고 함. 즉, 메서드는 객체에 묶여 있는 함수를 의미 + +```js +let circle = { + radius: 5, // 프로퍼티 + // 원의 지름 + getDiameter: function () { + // 메서드 + return 2 * this.radius; // this는 circle을 가리킴 + }, +}; +console.log(circle.getDiameter()); // 10 +``` + +## 10.5 프로퍼티 접근 + +- 마침표(`.`)를 통해 접근 +- 대괄호(`[]`)를 통해 접근 + +```js +let person = { + name: "jeon", + age: 27, +}; +console.log(person.name); // 'jeon' +console.log(person["age"]); // 27 +``` + +## 10.6 프로퍼티 값 갱신 + +- 이미 존재하는 프로퍼티에 값을 재할당하면 프로퍼티 값이 갱신됨 + +## 10.7 프로퍼티 동적 생성 + +```js +let person = { + name: "jeon", +}; +person.age = 27; +console.log(person); // {name:'jeon', age:27} +``` + +## 10.8 프로퍼티 삭제 + +```js +let person = { + name: "jeon", +}; +// 프로퍼티 동적 생성 +person.age = 27; +delete person.age; +console.log(person); // {name:'jeon'} +``` + +## 10.9 ES6에서 추가된 객체 리터럴의 확장 기능 + +- 프로퍼티 축약 표현 +- 계산된 프로퍼티 이름 +- 메서드 축약 표현 + +## 11. 원시 값과 객체의 비교 + +- 원시 타입의 값은 변경 불변값 +- 객체 타입의 값은 변경 가능한 값 +- 원시 값을 변수에 할당하면 메모리 공간에는 실제 값이 저장됨 +- 객체를 변수에 할당하면 메모리 공간의 주소(참조 값)이 저장됨 + +### 11.1 원시 값 + +**변경 불가능한 값** + +- 원시 값의 변경은 재할당을 통해서만 가능함 + +**값에 의한 전달** + +```js +let score = 80; +let copy = score; +// console.log(score); // 80 +// console.log(copy); // 80 +score = 100; +// console.log(score); // 100 +// console.log(copy); // 80; +``` + +- score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값임 + +### 12.2 객체 + +**변경 가능한 값** + +- 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있음 +- 객체를 할당한 변수가 메모리 주소를 통해 메모리 공간에 접근하면 참조값에 접근할 수 있음 +- 여러 개의 식별자가 하나의 객체를 공유할 수 있음 + +**참조에 의한 전달** + +```js +let person = { + name: "jeon", +}; +// 얕은 복사 +let copy = person; +``` + +- 객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달됨 +- 두 개의 식별자가 하나의 객체를 공유하는 셈 From 4c4551f5a4e0c36ece6b2bc84d8574aa1c8fe2ef Mon Sep 17 00:00:00 2001 From: sunghyunjeonme <4dallove@gmail.com> Date: Mon, 24 May 2021 16:53:24 +0900 Subject: [PATCH 4/5] =?UTF-8?q?2=EC=A3=BC=EC=B0=A8=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=84=B1=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2week.md" => "2\354\243\274\354\260\250 / sunghyun/2week.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "2\354\243\274\354\260\250 /2week.md" => "2\354\243\274\354\260\250 / sunghyun/2week.md" (100%) diff --git "a/2\354\243\274\354\260\250 /2week.md" "b/2\354\243\274\354\260\250 / sunghyun/2week.md" similarity index 100% rename from "2\354\243\274\354\260\250 /2week.md" rename to "2\354\243\274\354\260\250 / sunghyun/2week.md" From e83d41d1459e04dde77637a4d865dbb81ee97470 Mon Sep 17 00:00:00 2001 From: sunghyunjeonme <4dallove@gmail.com> Date: Tue, 25 May 2021 20:15:43 +0900 Subject: [PATCH 5/5] =?UTF-8?q?conlifct=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "2\354\243\274\354\260\250 / sunghyun/2week.md" | 1 - 1 file changed, 1 deletion(-) diff --git "a/2\354\243\274\354\260\250 / sunghyun/2week.md" "b/2\354\243\274\354\260\250 / sunghyun/2week.md" index cee40b8..859fc14 100644 --- "a/2\354\243\274\354\260\250 / sunghyun/2week.md" +++ "b/2\354\243\274\354\260\250 / sunghyun/2week.md" @@ -651,7 +651,6 @@ score = 100; let person = { name: "jeon", }; -// 얕은 복사 let copy = person; ```