모던 자바스크립트 ( 01 ~ 09장 )

✨

하루만에 훑고 지나간 JavaScript Deep Dive / 9장까지
개념을 이해한다는 것 = 이해하고 설명할 수 있다는것 ★
 

 

기계어로 변환하는 번역기 -> 컴파일러, 인터프리터
->컴파일러 - C, C++, JAVA
->인터프리터 - Python, JS...

프로그래밍이란, 요구사항의 집합을 분석, 적절한 자료구조와 함수의 집합으로
변환한 후 그 흐름을 제어하는것.

현재의 표준사양 ES6

Ajax 
서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

jQuery
DOM을 더 쉽게 제어할수있는 자바스크립트의 라이브러리

V8 자바스크립트 엔진
빠른 성능
자바스크립트를 발전시킨 기폭제같은 역할,
웹서버에서 수행되던 로직들이 브라우저로 이동했고,
프론트엔드 영역이 주목받는 계기로 작용

Node.js
V8로 빌드된 런타임 환경
자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
프론트와 백에서 같은 언어를 쓸수있다는 장점
브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적.


비동기 I/O 지원, 단일 스레드 이벤트 루프 기반으로 동작
데이터 실시간 처리하기 위해 I/O가 빈번하게 발생하는 SPA (싱글 페이지 어플리케이션)에 적합.
애플리케이션에는 권장하지 않음

npm - 자바스크립트 패키지 매니저

SPA 프레임워크
*CBD 방법론 ? 특정 기능 수행을 위해 독립적으로 개발, 잘 정의된 인터페이스(I/F)를 가지며, 다른 부품과 조립되어 응용시스템 구축에 사용되는 SW 단위를 컴포넌트라고 하는데,
개발된 S/W 컴포넌트를 조립, 시스템을 개발하여 객체지향의 단점인 S/W 재사용성을 극대화한 개발방법론을 'CBD 개발방법론'이라고 한다.
CBD 방법론을 기반으로하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelte 등의 SPA 프레임워크/라이브러리가 출시되었다.


자바스크립트와 ECMAScript

ECMAScript는 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 구성
자바스크립트 안에 ECMAScript가 있다. 

웹 브라우저에서 동작하는 유일한 프로그래밍 언어
개발자가 별도의 컴파일 수행하지 않는 인터프리터 언어.
자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어


#개발자도구 꿀팁
여타 다른 IDE와 같이 브레이크 포인트 찍는것이 가능

#변수
자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음.
변수? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 식별하기 위해 붙인 이름

변수에 저장된 값 = 변수값
값을 저장 = 할당(대입, 저장)
값을 읽어들이는것 = 참조

#식별자
식별자 = 변수 이름
메모리 주소를 기억
변수, 함수, 클래스 전부다 식별자임

#변수 선언
let const!!!!!!!!

var는 함수 레벨 스코프, 의도치않은 전역변수 선언으로 피해볼수있음
var는 어떠한 값도 할당하지 않아도 undefined라는 값을 가짐
선언 단계 : 
변수 이름 등록 -> 자바스크립트 엔진에 변수 존재를 알림
초기화 단계 -> 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화

초기화? 변수가 선언된 이후 최초로 값을 할당하는 것

자바스크립트 코드는 인터프리터에 의해 한줄씩 순차적으로 실행됨,
console.log(score); // undefined
var score; // 변수 선언문

undefined가 뜨는 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 실행되기 때문.

변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행됨.

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 함.

★변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행됨
★하지만 값의 할당은 순차적으로 실행되는 시점인 런타임에 실행됨.
예)

console.log(score) //undefined
var score; // (1) 변수선언
score = 80; // (2) 값의 할당

console.log(score); // 80

(1)변수 선언은 런타임 이전에 먼저 실행
(2)값의 할당은 런타임에 실행됨

const 상수 (재할당 금지)
*배열은 push가능
var, let 변수 (재할당 가능)

#식별자 네이밍
예약어 사용불가
특수문자를 제외한 문자,숫자, 언더스코어(_), 달러기호$ 포함가능
식별자는 숫자로 시작하는건 허용하지 않음

#네이밍 컨벤션
//카멜 케이스
var firstName;
// 스네이크 케이스
var first_name;
// 파스칼 케이스
var FirstName;
// 헝가리언케이스 
var strFirstName; //type + identifier

#값


값 = 식이 평가되어 생성된 결과, 2진수 즉 비트의 나열로 저장됨

#리터럴
사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
ex) 정수리터럴 : 100 
불리언 리터럴 : true false ...등


#표현식
값으로 평가될수 있는 문
리터럴 = 표현식

#문
프로그램을 구성하는 기본 단위이자 최소 실행단위
문의 집합 = 프로그램
문을 작성해 순서에 맞게 나열 = 프로그래밍

문법적으로 더 이상 나눌 수 없는 코드 = 토큰

선언문, 할당문, 조건문, 반복문등이 있다.

표현식인 문과 표현식이 아닌문의 비교방법
-> 변수에 할당
// 변수 선언"문"
var x;
// 할당문은 그 자체가 표현식이나, 완전한 문이기도 함. 할당문 = 표현식인 문



#데이터 타입 
ES6은 7개의 데이터 타입을 제공하며
원시타입은 number, string, boolean, undefined, null, symbol이 있음
객체타입은 객체, 함수 배열 등...
x = 100;

ECMAScript는 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않음.
모든 수는 정수가 아닌 실수로 처리된다.
console.log(1 === 1.0); //true

숫자는 Infinity, -Infinity NaN 등의 특별한 값도 표시가능

문자열 타입은 0개 이상의 16비트 유니코드 문자의 집합
작은따옴표 '' 큰따옴표"" 백틱`` 으로 텍스트를 감싸는데
일반적인 사용법은 작은따옴표를 사용한다.

템플릿 리터럴
`` 벡틱 사용
멀티라인 문자열, 표현식 삽입, 태그드 템플릿등의 기능을 지원

불리언 
true false

undefined 
undefined

null 
값이 의도적 부재함을 나타낼때 사용

Symbol
변경 불가능한 원시타입의 값
이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
var key = Symbol('key');
console.log(typeof key);

//객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]); // value

객체
자바스크립트 객체 기반의 언어, 자바스크립트를 이루고 있는 거의 모든 것이 객체

데이터 타입의 필요성
값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정해야함
값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해


동적 타이핑
C나 자바는 변수에 할당 할 수 있는 값의 종류, 데이터타입을 사전에 선언해야 하는 반면
자바스크립트는 변수를 선언할 때 타입을 선언하지 않는다. 다만 var, let, const와 같은 키워드를 사용해 변수를 선언할 뿐이다.

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다.
재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음.
= 동적 타이핑

동적타입 언어
동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당 가능
유연성은 높으나 신뢰성은 떨어짐.


#변수는 꼭 필요한 경우에 제한적으로 사용
#변수의 스코프는 좁게 만들어 부작용을 억제해야함
#전역 변수는 최대한 사용을 지양할것.
#변수보다는 상수를 사용해 값의 변경을 억제할것
#변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍할것

1-6장



7장

연산자

하나 이상의 표현식을 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듬
연산의 대상 = 피연산자 (被演算子)

산술 연산자
수학적 계산을 수행해 새로운 숫자값을 만듬, 연산불가시 NaN 반환

이항 산술 연산자
a # b
이때 #에는 + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 $나머지가 들어갈 수 있음

단항 산술 연산자
++ 증가 -- 감소
+어떠한 효과도 없음. 음수를 양수로 반전하지도 않음
- 양수를 음수로, 음수를 양수로 반전한 값을 반환
*증가/감소 연산자는 피연산자의값을 변경하는 부수 효과가 있음

증가/감소 연산시 피연산자의 값을 변경하는 암묵적 할당이 이뤄짐

var x = 1;

x++ // x = x + 1
x-- // x = x - 1

또한 위치에 따라 의미가 다르다.
피연산자 앞에 ++ --는 먼저 피연산자의 값을 증가/감소 시킨후 다른 연산 수행
피연산자 뒤에 ++ --는 먼저 다른 연산 수행후 피연산자의 값을 증가/감소 시킴

예)
var x = 5, result;

//선할당 후증가
result = x++;
console.log(result, x); // 5 6

//선증가 후할당
result = ++x;
console.log(result, x); //7 7 

//선할당 후감소
result = x--;
console.log(result, x); // 7 6

//선감소 후할당
result = --x;
console.log(result, x); //5 5 


문자열 연결 연산자
피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
'1' + 2; // '12'
1 + '2'; // '12'

//산술 연산자
1 + 2; // 3

// true는 1으로 변환됨
1 + true; // 2
// false는 0으로 변환됨
1 + false; // 1
//null은 0으로 변환됨
1 + null; // 1
//undefined는 숫자로 타입 변환되지 않음
+undefined; // NaN
1 + undefined; // NaN

위에서 1 + true를 계산시에
자바스크립트 엔진은 boolean타입의 true를 암묵적으로 숫자 1로 바꿔 연산함

이를 암묵적 타입 변환, 타입 강제 변환이라고 함.

할당 연산자
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

=, += -= *= /= %=
+= 문자열에사용가 
할당문은 값으로 평가되는 표현식인 문, 할당된 값으로 평가됨
var a, b, c;
// 연쇄 할당, 오른쪽에서 왼쪽으로 진행
// (1) c = 0 : 0으로 평가됨
// (2) b = 0 : 0으로 평가됨
// (3) a = 0 : 0으로 평가됨
a = b = c = 0
console.log(a, b, c) // 0 0 0

비교 연산자
좌,우항을 비교하여 불리언 값으로 반환
== 동등비교 xy 값이 같음
=== 일치비교 xy 값과 타입이 같음
!= 부동등비교 xy 값이 다름
!== 불일치비교 xy의 값과 타입이 다름 

NaN는 자신과 일치하지 않는 유일한 값
숫자가 NaN인지 보려면 Number.isNaN 라는 빌트인 함수를 사용

ES6에서 Object.is 라는 메서드는 ===와 똑같은 역할을 한다.

대소 관계 비교 연산자
> x가 y보다 크다
< x가 y보다 작다
>= x가 y보다 크거나 같다
<= x가 y보다 작거나 같다
<=

삼항 조건 연산자

var result - score >= 60 ? 'pass' : 'fail';
조건식 ? 조건식이 true일때 반환값 : false일때 반환할 값

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문

논리 연산자
|| or
&& AND
! NOT

쉼표 연산자
마지막 피연산자의 평가 결과를 반환
var x, y, z;
x =1, y = 2, z = 3; // 3

그룹 연산자
그룹 연산자로 우선순위를 조정 
10 * (2 + 3); //50

지수 연산자 (ES7)
거듭제곱
2 ** 2 // 4
2 ** 0 // 1
이전에는 Math.pow 사용


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


제어문
제어문이란 조건에 따라 코드 블록을 실행(조건문) 하거나 반복 실행(반복문)할때 사용


블록문
0개 이상의 문을 중괄호로 묶은 것, 코드 블록/블록 이라고 부름
자바스크립트는 블록문을 하나의 실행 단위로 취급
{ 
var 티모 = 1;
}

조건문
조건문은 주어진 조건식에 따라 코드 블록의 실행을 결정
불리언 값으로 평가될 수 있는 표현식
if...else / switch가 있음


반복문
조건식의 평가 결과가 참인 경우 코드 블록을 실행
for문, while문, do ... while문이 있음

반복문 대체가능한 다양한 기능
★배열 순회시 forEach, 객체 프로퍼티 열거시 for ... in 문, ES6에서 이터러블 순회가능한 for ... of문이 있음.


for문
조건식이 거짓으로 평가될 때까지 코드블록을 반복 실행함.

for (변수 선언문 or 할당문; 조건식; 증감식) {
조건식이 참인 경우 반복 실행될 문;
}


while 문
조건식의 평과 결과가 참이면 코드블록을 계속 반복해서 실행함
for문은 반복횟수가 명확할 때 주로 사용
while문은 반복횟수가 불명확할 때 주로 사용

var count = 0;
while (count < 3) {
console.log(count) // 0 1 2
count++;
}
※주의
평가 결과가 언제나 참이면 무한루프가 되니 주의할것..

do ... while
코드 블록을 먼저 실행하고 조건식을 평가함
따라서 코드 블록은 무조건 한번 이상 실행됨

var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행함

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


break문
레이블문? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label
ex) foo: console.log('foo');
break문은 코드 블록을 탈출한다.
정확히 말하면 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch문의 코드 블록을 탈출함

continue문
countiue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동 시킴.

break처럼 탈출하지는 않음.


09장
타입 변환과 단축 평가

타입 변환

타입 변환이란?

값의 타입은 개발자의 의도에따라 다른 타입으로 변환할 수 있는데

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는
타입 캐스팅 이라고 한다.

명시적 타입 변환

var x = 10;

//명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅 한다.
var str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

암묵적 타입 변환

자바스크립트 엔진은 코드의 문맥을 고려해 암묵적으로 데이터 타입을
강제 변환 할때가 있음.

// 피연산자가 모두 문자열 타입이여야 하는 문맥
'10' + 2 // '102'

// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // true
if (1) { }

프로그래밍 언어에 따라 에러를 발생시키도 하지만
자바스크립트는 가급적 암묵적 타입 변환을 통해 표현식을 평가함.
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시타입으로
자동 변환함


템플릿 리터럴의 표현식 삽입은
표현식의 평가 결과를 문자열 타입으로 암묵적으로 타입 변환한다.
`1 + 1 = ${1 + 1}` //'1+1 = 2'

숫자 타입으로 변환
1 - '1' // 0
1 * '10' // 10
1 / 'one' //NaN


자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의
피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환 한다.
이때 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으니 NaN가 된다.

불리언 타입으로 변환

if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');
// 2 4 

이때 자바스크립트 엔진은 Boolean 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy값(거짓으로 평가되는 값)으로 구분함,

즉 제어문의 조건식과 같이 Boolean 값으로 평가되어야 할 문맥에서 Truthy한 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

false, undefined, null, 0, -0, NaN, ''(빈문자열) 은 Falsy한 값으로 취급된다.


명시적 타입 변환

문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법

1. String 생성자 함수를 new 연산자 없이 호출
2. Objet.prototype.toString 메서드를 사용
3. 문자열 연결 연산자를 이용


// 1.String 생성자 함수를 new 연산자 없이 호출하기
// 숫자 => 문자열
String(1); // "1"
String(NaN); // "NaN"
String(Infinity); // "Infinity"

// 불리언 => 문자열
String(true); // "true"
String(false); // "false"

// 2.Objet.prototype.toString 메서드를 사용
//숫자 => 문자열
(1).toString(); // "1"
(NaN).toString(); // "NaN"
(Infinity).toString(); // "Infinity"

//불리언 => 문자열
(true).toString(); // "true"
(false).toString(); // "false"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입

1 + ''; // "1"
NaN + ''; // "NaN"
Infinity + ''; // "Infinity"

// 불리언 타입 => 문자열 타입
true + ''; // "true"
false + ''; // "false"


숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)
3. + 단항 산술 연산자를 이용
4. * 산술 연산자를 이용하는 방법


//2. parseInt, parseFloat 함수를 사용하는 방법

parseInt('0') // 0
parseInt('-1') // -1
parseFloat('10.53') // 10.53

//3. + 단항 산술연산자 이용

// 문자열 타입 => 숫자 타입
+'0' // 0
+'-1' // -1
+'10.53'; // 10.53

//불리언 타입 => 숫자 타입
+true; // 1
+false // 0

4. * 산술 연산자 이용 방법
// 문자열 타입 => 숫자 타입
'0' * 1; // 0
'-1' * 1; // -1
'10.53' * 1; //10.53
// 불리언 타입 => 숫자 타입
true * 1; // 1
false * 1 // 0

불리언 타입으로 변환
1. Boolean 생성자를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두번 사용하기

단축 평가
논리 연산자를 사용한 단축 평가
||논리합 &&논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐수도 있음
논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨.
'Cat' && 'Dog' // "Dog"

논리곱&& 연산자는 두개의 피연산자가 모두 true일때 true를 반환
논리곱 연산자는 좌항에서 우항으로 평가가 진행됨
'Cat'은 Truthy한 값, true로 평가되나 두번째까지 봐야 이 식을 평가할수 있는데

이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째
피연산자, 즉 문자열 'Dog'를 그대로 반환.

논리합 연산자도 똑같음||


단축 평가 표현식 평가 결과
true || anything  true
false || anything anything
true && anything anything
false && anything false



단축 평가 사용시 if문 대체 가능
조건이 Thruthy일때 논리곱&& 연산자로 if문 대체가능

Falsy일때는 논리합 || 연산자로 생략 가능

삼항 연산자는 if...else문 대체 가능

옵셔널 체이닝 연산자
ES11에서 도입,
?. 는 좌항의 피연산자가 null / undefined 일 경우 undefind를 반환하고
그렇지 않으면 우항의 프로퍼티 참조를 이어감

var elem = null;;

// elem이 null 또는 undefined이면 undefined를 반환하고
// 않으면 우항의 프로퍼티 참조를 이어감

var value = elem?.value;
console.log(value); //undefined

var elem = null;
// elem이 Falsy 값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가됨

var value = elem && elem.value;
console.log(value) // null

null 병합 연산자
ES11 도입,
??
좌항의 피연산자가 null / undefined인 경우 우항의 피연산자를 반환
아니면 좌항의 피연산자를 반환

변수에 기본값 설정시 유용함

// 좌항의 피연산자가 null / undefined인 경우 우항의 피연산자를 반환
// 아니면 좌항의 피연산자를 반환

var foo = null ?? 'default string';
console.log(foo) // "default string"

✨

>07 연산자
NaN === NaN //false
 NaN은 자신과 일치하지 않는 유일한 값
 NaN인지 조사하려면 빌트인 함수 Number.isNaN 을사용
	
Number.isNaN(NaN); // —true 
Number.isNaN(10);// — false
Number.isNaN(l + undefined); // — true

>07.8
typeof null // - object
 값이 null 타입인지 확인할 때는 typeof 
 연산자를 사용하지 말고 일치 연산자(===)를 사용
 
 >9
 개발자가 의도적으로 값의 타입을 변환하는것
  -> 명시적 타입 변환 || 타입 캐스팅 라고 한다
  var str = x.toString();
  console.log(typeof str, str);
  
 개발자 의도와 상없이 엔진에 의해 타입이 자동변환
  -> 암묵적 타입변환 || 타입 강제 변환 이라 한다
  var str = x + ' '; 
  console.log( typeof str, str);

  // 원시값(x변수의 값)을 직접 변경하는것은 아님
  // 원시값은 변경이 불가능하므로 새로운 원시값을 생성 하는것
  
 false로 평가되는 값
 false,undefined,null,0,-0,NaN,""(빈문자열)
 
 'Cat' && 'Dog' // -> Dog
 논리곱(&&)연산자는 피연산자가 모두 true 일때 true 반환
 좌항에서 우항으로 평가 진행
 두 번째 피연산자까지 평가해야지 표현식을 평가 할 수 있다.
 논리 연산의 결과를 결정하는 두 번째 피연산자 문자열'Dog'를 반환
 
 'Cat' || 'Dog' // -> Cat
 논리합(||)연산자는 피연산자 중 하나만 true 평가되도 true 반환
 좌항에서 우항으로 평가 진행
 첫 번째 'Cat'은 Truthy 값이므로 두 번째 피연산자까지 평가하지 않아도된다.
논리 연산의 결과가를 결정하는 첫 번째 연산자 문자열'Cat'을 그대로 반환 
 //왼쪽부터첫번째 true 를 찾는답
 
옵셔널 체이닝 연산자 p.112
ES11(2020)에서 도입, 연산자 ?. 는 좌항의 피연산자가 null, undefined
인 경우 undefined를 반환하고, 그렇지 않으면 우향의 프로퍼티 참조를 이어간다