[5-10장] 모던 자바스크립트 Deep Dive

스터디 날짜 : 2023. 10. 29 (일)

 

---

05장. 표현식과 문

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것

 

머리로는 알고 있으나, SW 응용 분야에서 일하고 있는 지금. 프레임워크의 사용법을 빠르게 배우고 적용하는데 급급했다. 단어 하나하나의 의미를 곱씹고 이해해본 적이 얼마만인가 싶다. 

 

 

value (값)

expression(표현식)이 evaluation(평가)되어 생성된 결과

 

여기서 또 꼬리질문이 나오겠지

 

expression (표현식)

- 값으로 평가될 수 있는 statement (문)

- 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조한다.

- 값이 위치할 수 있는 곳 = 표현식도 위치 가능

 

이제껏 const result = x1 ? 'default' : x2 ? 'default' : x3 이런 문을 자연스럽게 썼는데, 삼항연산 표현식이 곧 값으로 평가되므로 자리할 수 있음을 인지했다!

 

statement (문)

- (명령)문 이라고도 불리며, 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.

- 종류 : 선언문, 할당문, 조건문, 반복문

- 표현식은 문의 일부이거나 그 자체로 문일 수 있다.

- 세미콜론(;) 은 문의 종료를 뜻하며, 코드 블록({...}) 은 자체 종결성을 가져서 붙이지 않는다.

 

콘솔에서 문과 표현식을 구분하는 방법을 알려주셨으나, 아직도 모호하다.

 

evaluation (평가)

식을 해석해서 값을 생성하거나 참조하는 것

 

literal (리터럴)

- 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 notation(표기법)

- runtime 에 리터럴을 평가해 값을 생성한다.

- 리터럴은 값으로 평가된다. 따라서 리터럴도 표현식이다.

 

 

 

 

06장. 데이터 타입

 

이 장을 보면서 타입스크립트가 많이 떠올랐다. 자바스크립트의 한계를 잘 공부하고, 다시 곱씹어 보면 좋을 것 같다.

 

Q. 데이터 타입의 필요성

데이터 타입에 의한 메모리 공간의 확보와 참조 그리고 메모리에서 읽어 들인 2진수 해석을 어떻게 할지 결정

 

동적 타입 언어, JS

- 정적 타입언어와 (ex C) 달리 var, let, const 키워드로만 변수를 선언함. 변수 타입에 대한 어떤 힌트도 없음. 값을 할당하는 시점에 변수의 타입이 동적으로 결정되어 유동적임. 이를 타입 추론이라고도 함.

- 뿐더러 js 엔진이 암묵적으로 타입 변환하기도 const str = x + '' ; (x 타입이 뭐든 간에 toString)

 

todo : 이펙티브 타입스크립트 스터디 정리하기

 

 

숫자 타입

- js 는 한가지 숫자 타입만을 가짐

- 모두 배정밀도 64bit 부동 소수점으로 저장되어 정수만을 표현하는 개념이 없음. 1.0 === 1 결과를 갖는다. (근데 데이터 크기로는 맞는 말 같지만, 타입까지 같아야 일치 비교(===) 이기 때문에 예시로 든 듯)

- -Inifinity ~ Infinity, NaN 또한 숫자 타입의 일종

 

todo : 소수점 연산 및 bit, byte 개념 다시 공부하자

 

문자열 타입

- 키워드 및 식별자와 구분하기 위해 문자열은 따옴표로 감싸기 (이건 당연하게 생각했는데, 진짜 syntax 자체가 인간 언어로 표현되기 때문에 구분이 안될 수 있겠구나. 오..)

- 다른 언어와 달리 원시 타입 (C언어에서는 문자를 배열로 표현하기 때문, char x[5] = 'hello')

 

템플릿 리터럴 

- ES6 부터 편리한 문자열 처리 기능 제공

- 멀티라인 문자열 (이거 보고는 css word-break 안써도 될줄 알았는데 그건 아닌 듯? \v 수직탭도 써보자)

- 표현식 삽입 (Styled Component 에서도 유용하게 쓰이고 있음)

 

todo : 타자기의 LF, CR 개념 설명 친절한 블로그 (사이드플젝 후보)

 

불리언 타입

js 에서 가장 애먹는, Truthy (참으로 평가되는 값)/ Falsy (거짓으로 평가되는 값) 주의

 

undefined 타입

- undefined 를 직역하면 '정의되지 않는'

- js 엔진이 선언된 변수는 암묵적으로 undefined 초기화

- 의도적인 빈값 null 과 다름.

 

null 타입

- 의도적 부재일때 사용됨. 변수에 null 이 할당되는 순간, 이전 참조 값들을 더 이상 참조하지 않겠다는 의미로 가비지 콜렉션을 수행한다.

 

Symbol 타입

- 이름이 충돌될 위험이 없는 객체의 유일한 프로퍼티 키를 만듦

 

이건 타입스크립트 문자열 리터럴 타입으로도 해결되기도

 

 

 

07장. 연산자

 

- 연산의 대상을 피연산자라고 하며, 이는 값으로 평가될 수 있는 표현식

- 또한, 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식 또한 다시 표현식

 

산술연산자와 Side Effect

- side effect (부수 효과) : 함수형 프로그래밍에서, 함수 내부에서 외부 변수에 변화를 가함

- 단항 산술 연산자 (++ / --) 는 자기 자신에게 변화를 가하므로 side effect 가 있다고 볼수 있겠군

- (+ / -) 붙이면 숫자 타입으로 바뀌는지 첨 앎.. 알고 싶지 않았다. 위험이 도사리는 군.

 

문자열 연결 연산자

- (+) 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

 

할당 연산자

- 할당문은 값으로 평가된느 표현식인 문으로서 할당된 값으로 평가된다. 그러해서 연쇄 할당이 가능하구나.

비교 연산자

- 동등 비교 (==) : 값이 같음

- 일치 비교 (===) : 값과 타입이 같음

- NaN === NaN; // false, 객체라서 그런가 자신과 같지 않음

- Object.is 메소드도 내가 예상한 결과와는 다른뎀..

 

삼항조건 연산자 표현식

- 가독성에 따라 결정

조건에 따라 수행해야할 문이 여러개라면 if ... else / 한개라면 삼항조건 표현식

 

 

 

08장. 제어문

 

블록문 (block statement / compound statement)

- 0개 이상의 문을 중괄호로 묶은 것으로 하나의 실행 단위로 취급

- 단독으로 사용할수도 있고, 일반적으로 제어문이나 함수 정의 시 사용함

 

조건문

- if ... else / switch 가독성에 따라 선택해서 사용하기

- 반복문 : for / while / do ... while / forEach, for .. in / for ... of

- 무한 루프 : for(;;), while(true) -> for 내부 생략 가능한지 몰랐음.

 

레이블문 & break 문

- 식별자가 붙은 문

- break문에 레이블 식별자를 지정하면 중첩 반복문에서 용이할 것 같네! (헌데 저자는 가독성이 나빠지니 지양하라고 하는데, 다른 분들 의견도 궁금하군)

continue 문

- 조건 실행문이 길다면 들여쓰기가 한단계 더 깊어지므로, continue 문 사용 권장..

 

계속 가독성을 고려하는 꿀팁들을 알려주니 재밌다.

 

 

09장 타입변환과 단축 평가

 

암묵적 타입 변환 (타입 강제 변환)

- js 엔진은 표현식을 평가하는 도중에 암묵적으로 타입을 자동 변환한다.

 

이러한 예외를 맞딱드리기 보다 명시적 타입 변환(타입 캐스팅)을 하고 싶다.

타입스크립트와 린트도 잘 사용하고

 

 

단축 평가

- x && 'default' ? 'default' : falsy_x; 첫번째 연산자가 Falsy 하면 연산 멈추고 falsy_x 반환 (false 일줄 알았는데..)

- x || 'default' ? x : 'default' 첫번째 피연산자가 Truthy 하면 멈추고 x 반환

- 객체 프로퍼티를 참조할 때, null / undefined 가 아닌지 확인 시 유용함 (optional chaning .? 연산자 유용)

 

단축평가 사용 시 유의하자

 

?? (null 병합연산자) vs || (논리합 연산자)

- ?? 는 null, undefined 외에는 다 Truthy

- || 는 일반적인 Falsy (false, undefined, null, 0, -0, NaN, '') 외에는 다 Truthy

 

 

10장. 객체 리터럴

 

객체란?

변경 불가능한 원시 타입의 값과 달리 변경 가능한 값

 

 

프로토타입 기반 객체 지향 언어

이전 포스트 참고

[JS] 객체 지향 프로그램

 

다양한 생성법

- 객체 리터럴 const x = { ... }; => 블록문이 아닌 값으로서 끝에 세미콜론이 붙음

- Object 생성자 함수

- 생성자 함수

- Object.create 메서드

- 클래스 

본문입니다. 양쪽 정렬 필요

 

객체 리터럴

- 기존 네이밍 규칙을 지키면 마침표 표기법, 아니라면 '따옴표로 키를 감싸' 대괄호 표기법으로 접근

- 함수는 값으로 취급될 수 있어서 property 로 정의가 가능하며, method 라고 불린다.

- 계산된 프로퍼티 이름도 가능함 (반복문에서 유용하겠군)