[Javascript] 모던자바스크립트 딥 다이브 1일차 (~199p)

[참고] 

1.도서

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24

2. 웹사이트

웹 프로그래밍 튜토리얼 | PoiemaWeb

자바스크립트의 특징

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme에서는 일급 함수의 개념을 차용했다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter language)이다. 대부분의 모던 자바스크립트 엔진(Chrome의 V8, FireFox의 Spidermonkey, Safari의 JavaScriptCore, Microsoft Edge의 Chakra 등)은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다. 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화한다. 이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 불구하고 보다 빠른 코드의 실행이 가능하다.

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

비록 다른 객체지향 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 간혹 클래스(ES6에서 새롭게 도입되었다), 상속, 정보 은닉을 위한 키워드 private가 없어서 객체지향 언어가 아니라고 오해(자바스크립트는 가장 많은 오해를 받는 언어이다.)하는 경우도 있지만 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

---

문자열 타입

문자열 타입의 가장 일반적인 표기법은 작은 따옴표(' ') 를 사용하는 것이다. 

이외에도 큰따옴표, 백틱(` ` )이 있다.

 

---

Symbol

심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심볼은 Symbol 함수를 호출해 생성한다. 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

---

지수 연산자

지수 연산자는 ES7에서 도입되었다. 

2 ** 2 // 4
2 ** 2.5 // 5.6568.....
2 ** 0 // 1

지수 연산자는 Math.pow메소드와 같은 기능을 한다.

Math.pow(2,2)
Math.pow(2,0)
Math.pow(2,-2) // 0.25

 

---

블록문

블록문(Block statement/Compound statement)는 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 단위로 취급한다.

블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수 선언문 등에서 사용한다. 문의 끝에는 세미 콜론(;)을 붙이는 것이 일반적이지만 블록문은 세미콜론을 붙이지 않는다.

 

---

암묵적 타입 변환

문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다. 아래 예제를 살펴보자.

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

// 산술 연산자
1 + 2          // 3
1 + true       // 2 (true → 1)
1 + false      // 1 (false → 0)
true + false    // 1 (true → 1 / false → 0)
1 + null       // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)

1 * '10' // 10
1 / 'one' // NaN
+'' // 0
+'1' // 1
+true // 1

이 예제에서 주목할 것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다. 위 예제에서 1 + true를 연산하면 자바스크립트 엔진은 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제 변환한 후 연산을 수행한다. 이를 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 한다. 앞서 살펴본 +/- 단항 연산자도 암묵적 타입 변환이 발생한 것이다. 이에 대해서는 타입 변환에서 자세히 살펴볼 것이다.

---

원시 값과 객체의 비교

값에 의한 전달

값에 의한 전달은, 숫자, 문자, Boolean 등 원시값이 담긴 객체에서 이뤄진다.

즉, 별개의 값이 되며, 서로 간섭할 수 없다.

 

 

참조에 의한 전달

객체와 배열 등 객체 타입의 값을 할당할 때 이뤄진다.

즉, 참조값이 되며, 메모리 주소를 공유한다.

• 자바스크립트에서의 참조에 의한 전달은 메모리 공간에 저장된 값을 복사해 전달한다는 점에서 값에 의한 전달과 동일하다. 변수에 저장된 값이 원시값이냐, 참조값이냐의 차이가 존재한다.
• 따라서 자바스크립트에서의 참조에 의한 전달은 “공유에 의한 전달(pass by share)”이라고 표현하기도 한다. (공식 용어 x)

---

팩토리얼 함수 (재귀함수 예시)

function factorial(n) {
    return !n ? 1 : n * factorial(n-1)}

 

2023.1.16 공부한 목차

▣ 01장: 프로그래밍
1.1 프로그래밍이란?
1.2 프로그래밍 언어
1.3 구문과 의미

▣ 02장: 자바스크립트란?
2.1 자바스크립트의 탄생
2.2 자바스크립트의 표준화
2.3 자바스크립트 성장의 역사
____2.3.1 Ajax
____2.3.2 jQuery
____2.3.3 V8 자바스크립트 엔진
____2.3.4 Node.js
____2.3.5 SPA 프레임워크
2.4 자바스크립트와 ECMAScript
2.5 자바스크립트의 특징
2.6 ES6 브라우저 지원 현황

▣ 03장: 자바스크립트 개발 환경과 실행 방법
3.1 자바스크립트 실행 환경
3.2 웹 브라우저
____3.2.1 개발자 도구
____3.2.2 콘솔
____3.2.3 브라우저에서 자바스크립트 실행
____3.2.4 디버깅
3.3 Node.js
____3.3.1 Node.js와 npm 소개
____3.3.2 Node.js 설치
____3.3.3 Node.js REPL
3.4 비주얼 스튜디오 코드
____3.4.1 비주얼 스튜디오 코드 설치
____3.4.2 내장 터미널
____3.4.3 Code Runner 확장 플러그인
____3.4.4 Live Server 확장 플러그인

▣ 04장: 변수
4.1 변수란 무엇인가? 왜 필요한가?
4.2 식별자
4.3 변수 선언
4.4 변수 선언의 실행 시점과 변수 호이스팅
4.5 값의 할당
4.6 값의 재할당
4.7 식별자 네이밍 규칙

▣ 05장: 표현식과 문
5.1 값
5.2 리터럴
5.3 표현식
5.4 문
5.5 세미콜론과 세미콜론 자동 삽입 기능
5.6 표현식인 문과 표현식이 아닌 문

▣ 06장: 데이터 타입
6.1 숫자 타입
6.2 문자열 타입
6.3 템플릿 리터럴
____6.3.1 멀티라인 문자열
____6.3.2 표현식 삽입
6.4 불리언 타입
6.5 undefined 타입
6.6 null 타입
6.7 심벌 타입
6.8 객체 타입
6.9 데이터 타입의 필요성
____6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조
____6.9.2 데이터 타입에 의한 값의 해석
6.10 동적 타이핑
____6.10.1 동적 타입 언어와 정적 타입 언어
____6.10.2 동적 타입 언어와 변수

▣ 07장: 연산자
7.1 산술 연산자
____7.1.1 이항 산술 연산자
____7.1.2 단항 산술 연산자
____7.1.3 문자열 연결 연산자
7.2 할당 연산자
7.3 비교 연산자
____7.3.1 동등/일치 비교 연산자
____7.3.2 대소 관계 비교 연산자
7.4 삼항 조건 연산자
7.5 논리 연산자
7.6 쉼표 연산자
7.7 그룹 연산자
7.8 typeof 연산자
7.9 지수 연산자
7.10 그 외의 연산자
7.11 연산자의 부수 효과
7.12 연산자 우선순위
7.13 연산자 결합 순서

▣ 08장: 제어문
8.1 블록문
8.2 조건문
____8.2.1 if...else 문
____8.2.2 switch 문
8.3 반복문
____8.3.1 for 문
____8.3.2 while 문
____8.3.3 do...while 문
8.4 break 문
8.5 continue 문

▣ 09장: 타입 변환과 단축 평가
9.1 타입 변환이란?
9.2 암묵적 타입 변환
____9.2.1 문자열 타입으로 변환
____9.2.2 숫자 타입으로 변환
____9.2.3 불리언 타입으로 변환
9.3 명시적 타입 변환
____9.3.1 문자열 타입으로 변환
____9.3.2 숫자 타입으로 변환
____9.3.3 불리언 타입으로 변환
9.4 단축 평가
____9.4.1 논리 연산자를 사용한 단축 평가
____9.4.2 옵셔널 체이닝 연산자
____9.4.3 null 병합 연산자

▣ 10장: 객체 리터럴
10.1 객체란?
10.2 객체 리터럴에 의한 객체 생성
10.3 프로퍼티
10.4 메서드
10.5 프로퍼티 접근
10.6 프로퍼티 값 갱신
10.7 프로퍼티 동적 생성
10.8 프로퍼티 삭제
10.9 ES6에서 추가된 객체 리터럴의 확장 기능
____10.9.1 프로퍼티 축약 표현
____10.9.2 계산된 프로퍼티 이름
____10.9.3 메서드 축약 표현

▣ 11장: 원시 값과 객체의 비교
11.1 원시 값
____11.1.1 변경 불가능한 값
____11.1.2 문자열과 불변성
____11.1.3 값에 의한 전달
11.2 객체
____11.2.1 변경 가능한 값
____11.2.2 참조에 의한 전달

▣ 12장: 함수
12.1 함수란?
12.2 함수를 사용하는 이유
12.3 함수 리터럴
12.4 함수 정의
____12.4.1 함수 선언문
____12.4.2 함수 표현식
____12.4.3 함수 생성 시점과 함수 호이스팅
____12.4.4 Function 생성자 함수
____12.4.5 화살표 함수
12.5 함수 호출
____12.5.1 매개변수와 인수
____12.5.2 인수 확인
____12.5.3 매개변수의 최대 개수
____12.5.4 반환문
12.6 참조에 의한 전달과 외부 상태의 변경
12.7 다양한 함수의 형태
____12.7.1 즉시 실행 함수
____12.7.2 재귀 함수
____12.7.3 중첩 함수
____12.7.4 콜백 함수
____12.7.5 순수 함수와 비순수 함수

▣ 13장: 스코프
13.1 스코프란?
13.2 스코프의 종류
____13.2.1 전역과 전역 스코프
____13.2.2 지역과 지역 스코프
13.3 스코프 체인
____13.3.1 스코프 체인에 의한 변수 검색
____13.3.2 스코프 체인에 의한 함수 검색
13.4 함수 레벨 스코프
13.5 렉시컬 스코프