모던 자바스크립트 DeepDive 공부 내용 3차

이번 정리 목차는 9 ~ 10장이다.

9장 타입 변환과 단축 평가

타입 변환

-       모든 값은 타입이 있음

-       값의 타입은 변환할 수 있음

-       개발자가 의도적으로 변환하면 명시적 타입변환 혹은 타입 캐스팅이라 함

-       의도와 상관없이 표현식 평가 도중 엔진에 의해 자동 변환되면 암묵적 타입변환 혹은 타입 강제 변환이라 함

-       기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

-       암묵적 타입 변환으로 생성된 값은 재할당 되지 않음

-       암묵적 타입 변환이 가독성 측면에서 좋을 수도 있음

-       핵심은 코드 예측을 할 수 있어야 함

 

암묵적 타입 변환

[문자열 타입 변환]

-       + 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 값을 만들어 줌

-       템플릿 리터럴의 표현식 삽입도 평가 결과를 문자열 타입으로 암묵적 타입 변환

-       숫자, 불리언, null, undefined, 심벌, 객체 타입 뒤에 +빈문자열 하면 암묵적 타입 변환

 

[숫자 타입 변환]

-       산술 연산자 사용 시 암묵적 타입 변환

-       비교 연산자 사용 시 암묵적 타입 변환

-       + 단항 연산자 사용 시 암묵적 타입 변환

-       이 때 빈 문자열, 빈 배열, null, false는 0으로 반환되고 undefined, 객체, 비어 있지 않은 배열은 NaN 반환

 

[불리언 타입 변환]

-       엔진은 불리언 타입이 아닌 값을 Truthy 또는 Falsy값 구분

-       0, -0, undefined, null, NaN, 빈 문자열, false은 Falsy값

-       그 외 모두 Truthy 값

 

명시적 타입 변환

-       표준 빌트인 생성자 함수(Number, Boolean, String)를 new 연산자 없이 호출하는 방법

-       빌트인 메서드 사용

-       암묵적 타입 변환 이용

 

[문자열 타입 변환]

-       String 생성자 함수 new 연산자 호출 없이 사용

-       toString메서드 사용

-       문자열 연결 연산자 사용

[숫자 타입 변환]

-       Number 생성자 함수 new 연산자 호출 없이 사용

-       parseInt, parseFloat함수 사용(문자열만 변환 가능)

-       + 단항 산술 연산자 사용

-       * 산술 연산자 사용

[불리언 타입 변환]

-       Boolean 생성자 함수 new 연산자 호출 없이 사용

-       !부정 논리 연산자를 두 번 사용

 

단축 평가

-       표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평과 과정 생략하는 것을 의미

-       논리 연산자를 사용한 단축 평가 있음(논리 곱, 논리 합)

 

[옵셔널 체이닝 연산자]

-       ES11에서 도입 => ? 로 사용

-       좌항의 피연산자가 null 또는 undefined면 undefined 반환하고 아니면 우항 프로퍼티 참조

-       좌항이 falsy값이여도 null, undefined만 아니면 우항 참조

-       도입되기 전에는 논리연산자 && 사용하여 확인 했음

 

[null 병합 연산자]

-       ES11에서 도입 => ?? 사용

-       좌항의 피연산자가 null 또는 undefined면 우항 피연산자 반환하고 그렇지 않으면 좌항 피연산자 반환

-       변수 기본값 설정에 유용

-       도입 전에는 논리연산자 || 사용하였음

-       좌항이 falsy값이여도 null, undefined만 아니면 좌항 피연산자 반환

 

10장 객체 리터럴

객체란

-       0개 이상의 프로퍼티와 메서드로 구성된 집합

-       프로퍼티는 키와 값으로 구성

-       프로퍼티: 객체의 상태를 나타내는 값

-       메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

 

객체 생성

-       JS에서 객체 생성은 객체 리터럴을 이용하는 것이 가장 일반적이고 간단함

-       리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법

-       객체 리터럴: 객체를 생성하기 위한 표기법

-       {}내에 0개 이상의 프로퍼티 정의, 세미콜론 붙임, 빈 객체 생성도 가능

 

프로퍼티

-       객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성

-       나열할 때는 쉼표 사용

-       프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

-       프로퍼티 값: JS에서 사용할 수 있는 모든 값

-       프로퍼티 키에 식별자 네이밍 규칙 따르지 않는 이름에는 반드시 따옴표 사용

-       프로퍼티 키를 동적 생성방법은 표현식을 대괄호[]로 묶음

 

메서드

-       객체에 묶여 있는 함수 의미

 

프로퍼티 접근

-       마침표 표기법 사용 => .접근 연산자

-       대괄호 표기법 => [] 접근 연산자

-       대괄호 표기법 사용하면 반드시 따옴표 감싸야 함

-       따옴표 감싸지 않으면 식별자로 해석함

-       객체에 존재하지 않는 프로퍼티 접근하면 에러는 없지만 undefined 반환

-       만약 프로퍼티 키가 식별자 네이밍 규칙 준수하지 않은 이름이면 반드시 접근할 때 대괄호표기법 사용해야 함

 

프로퍼티 값 갱신

-       이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신

 

프로퍼티 동적 생성

-       존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티 동적 생성되어 추가되고 프로퍼티 값이 할당된다

 

프로퍼티 삭제

-       delete연산자는 객체의 프로퍼티 삭제

-       delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 함

-       존재하지 않는 프로퍼티 삭제하면 에러 없이 무시

 

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

프로퍼티 축약 표현

-       프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성되는데 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식 일 수도 있다.

-       ES6에서는 프로퍼티 값으로 변수 사용 시 변수 이름과 프로퍼티 키가 동일한 이름이면 프로퍼티 키 생략 가능

 

계산된 프로퍼티 이름

-       프로퍼티 키 동적 생성 시 프로퍼티 키로 사용할 표현식을 대괄호[]로 묶어야 한다

-       이를 계산된 프로퍼티 이름이라 한다.

-       ES5에서는 객체 리터럴 외부에서 대괄호 표기법[]을 사용 해야 함

-       ES6에서는 객체 리터럴 내부에서도 동적 생성 가능

-       []안에 템플릿 리터럴 + 표현식 삽입 하면 됨

 

메서드 축약 표현

-       ES5에서 메서드를 표현하려면 프로퍼티 값으로 함수 할당

-       ES6에서는 메서드 정의할 때 function 키워드 생략

-       동작 방식이 다름