JavaScript Day1 ~ Day5

자 .. 지금까지 14일에 걸쳐 배웠던 내용을 돌아볼 예정이다.
중요하거나 기억이 흐릿한 내용을 위주로 정리해 볼 예정 ~ 휴강 기념 복습 가보자고 !

---

Day 1

환경 세팅

• 남의 파일을 깃으로 클론한다면 npm i로 사용된 패키지 일괄 다운로드

---

Day 2

Hello, world!

• 내장함수는 브라우저(window)가 제공해주는 기능이고, alert(), prompt() 등은 앞에 window가 생략된 것

코드 구조 (⭐️)

• 문 : 값을 반환하지 않음 (for, while, for..of, {...} 등)
• 식 : 값을 반환함 (삼항식, 이항식, 단항식 등)

변수와 상수

• 변수 선언과 변수 초기화(할당) 구분 필요
• 상수
  • 런타임 이전에 이미 값을 아는 상수 : 찐상수, 대문자 표기
  • 런타임 과정에 계산되어 할당 이후 변하지 않는 상수
• 상수 재할당 불가
  • 하지만 객체 리터럴 내부는 수정 가능
  • 객체 값 못바꾸게 하려면 freeze() 사용 필요

전역 객체

• globalThis : 표준 전역 객체 이름
• var 키워드로 선언한 변수, 전역 함수는 전역 객체의 프로퍼티/메서드가 됨
• let, const 키워드로 선언한 변수/상수는 전역 객체에 바인딩 되지 않음

legacy var

• var는 블록 스코프가 아닌, 함수 스코프가 적용됨
  • 블록문 안의 변수는 전역 스코프 적용 (전역 오염)
• var는 변수의 중복 선언이 허용되고 마지막 할당값이 반환
• var는 선언 전 사용 가능
  • 호이스팅이 작용하여 undeifned로 초기화되기 때문에

실행 컨텍스트 (Execution Context) (⭐️)

(수업시간에 배운 내용과 모던 자스 딥다이브 책을 통해 정리한 내용을 함께 정리함)

1 실행 컨텍스트 생성 
2 렉시컬 환경 생성 
3 환경 레코드 생성 : 객체/선언적 환경 레코드 생성, this 바인딩
4 외부 렉시컬 환경에 대한 참조 결정

1️⃣ 실행 컨텍스트

• 실행 컨텍스트는 전역, 함수 환경에서만 생성됨
• 전역 실행 컨텍스트는 자바스크립트를 해석하기 위해서 최초 1회 가장 먼저 생성됨
• 생성된 실행 컨텍스트는 실행 컨텍스트 스택에 푸시됨

2️⃣ 렉시컬 환경

• 렉시컬 환경이 생성되면 실행 컨텍스트에 바인딩됨
• 1) 환경 레코드 2) 외부 렉시컬 환경에 대한 참조로 구성됨

3️⃣ 환경 레코드

• 스코프에 포함된 식별자를 등록하고 값을 관리하는 저장소
• 객체 환경 레코드 : 함수, var 키워드로 선언된 변수
  • BindingObject를 통해 전역 객체의 프로퍼티/메서드가 됨
  • var 키워드로 선언된 변수를 선언 전에 참조할 수 있는 이유 (변수 호이스팅)
    : 선언 단계와 초기화 단계가 동시에 진행되어 undeifned를 바인딩함 (할당은 런타임에)
  • 함수는 함수 자체가 호이스팅되고, 변수는 선언부만 호이스팅 됨

• 선언부 환경 레코드 : let, const 키워드로 선언된 변수
  • let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티로 바인딩되지 않고, 선언적 환경 레코드에 존재함
  • 선언 단계와 초기화 단계가 분리되어 진행되어, 초기화 단계 이전까지 일시적 사각지대(TDZ)에 빠짐
  • let, const 키워드로 선언한 변수도 호이스팅이 발생하지만, 일시적 사각지대에 빠져 있기 때문에 참조는 불가능함

• this 바인딩

4️⃣ 외부 렉시컬 환경에 대한 참조 결정

• 현재 평가중인 소스코드를 포함하는 외부 소스코드의 렉시컬 환경인 상위 스코프를 가리킴
• 전역 렉시컬 환경의 외부 렉시컬 환경에 대한 참조는 null (최상위 스코프이기 때문에)

⭐️ 결국, 렉시컬 환경에 식별자(변수)에 대한 정보와, 참조가 가능한 상위 스코프에 대한 정보가 담겨 있음
⭐️ 따라서 클로저가 실행되기 위해선 렉시컬 환경이 살아있어야 함

---

Day 3

자료형

• 원시 자료형 : 문자형, 숫자형, BigInt, 불린형, null, undefined, 심볼
• 객체 자료형 : 객체(배열, 함수 포함)

자스의 비밀 : 모든 자료형은 객체로 만들어졌다. (⭐️)

• 개발자 도구에서 [[Prototype]]을 타고 타고 들어가보면 결국 마지막은 `Object``
• 각 자료형마다 사용할 수 있는 메서드가 다른데, 모든 자료형의 조상이 Object이기 때문에 특정 메서드를 통해 다른 자료형의 메서드를 사용할 수 있음
  • Object.prototype.toString.call(123)
  • Object.prototype.toString.call('123')
• 데이터 가공할 때 call, apply, bind 등을 통해 다른 자료형의 메서드도 사용이 가능함

• 원시값이 객체처럼 동작하는 이유 : 자스엔진이 일시적으로 원시값을 임시 객체(래퍼 객체)로 변환함

  const str = 'hi'
  str.length // 2
  str.toUpperCase() // HI

---

Day 4

형변환 (⭐️)

• 문자형으로 변환
  • 명시적 : String(1)
  • 암시적 : 123 + ''

• 숫자형으로 변환
  • 명시적 : Number('1'), parseInt('123px'), parseFloat('123.1px')
  • 암시적 : +'123', '123' * 1, '123' / 1
  • Number(null) = 0
  • Number(undefined) = NaN

• 불린형으로 변환
  • 명시적 : Boolean(0)
  • 암시적 : !!123
  • falsy한 값 : 0, '', null, undefined, NaN
  • truthy한 값 : falsy한 값 제외 전부 (' ', '0', {}, [])

연산자

• 이항 연산자 + : 피연산자 중 한개라도 문자형이면 접합
• 단항 연산자 + : 피연산자가 숫자형으로 변환
• 복합 할당 연산자 += : 변수에 연산자를 적용하고 결과를 변수에 할당
• 증가/감소 연산자 ++, --
  • 전위형(선증가) ++counter : 반환값 2 - 2 * ++counter = 4
  • 후위형(후증가) counter++ : 반환값 1 - 2 * counter++ = 2

비교 연산자

• 비교 연산자는 불린형을 반환
• 다른 형을 가진 값 간 비교 : 자료형이 다르다면, 숫자형으로 자동 형변환
  • 일치 연산자 === 제외
• 동등 연산자 == : 0과 false 구분 못함 (숫자형으로 형변환하여 비교하기 때문에)
• 일치 연산자 === : 0과 false 구분함 (자료형까지 비교하기 때문에)

• 비교 예시
  • null === undefined false
  • null == undefined true
  • null > 0 false
  • null == 0 false
  • null >= 0 true
  • undefined > 0 undefined < 0 undefined == 0 false

if와 '?'를 사용한 조건 처리

• if문은 괄호 안의 표현식을 평가하여 불린값으로 반환
• 조건부 연산자, 삼항 연산자 ?

---

Day 5

논리 연산자 (⭐️)

• 피연산자가 불린형이 아니라면 불린형으로 형변환
• 논리합 연산자 || : 첫번째 truthy한 값을 반환
  • 가장 첫번째 truthy한 값을 찾고, 찾으면 연산 즉시 멈춘 후 불린형으로 변환 전의 원래 값을 반환
  • 모든 값이 false라면 마지막 값 반환

• 논리곱 연산자 && : 첫번째 falsy한 값을 반환
  • 가장 첫번째 falsy한 값을 찾고, 찾으면 연산 즉시 멈춘 후 불린형으로 변환 전의 원래 값을 반환
  • 모든 값이 true라면 마지막 값 반환

switch문

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

• 동등이 아닌 일치로만 비교함 (자료형 중요)
• 모든 조건을 순차적으로 확인하는 if문과 다르게, 해당하는 조건만 확인 (조건이 많다면 switch가 효율적)

nullish 병합 연산자

• 피연산자 중에 확정 되어있는 값 반환
  • null, undefined가 아니라면 그 값을 반환함

• || vs ??
  • height가 0으로 정의되어 있는 상황
  • height || 100 : 100 (첫번째 truthy한 값 반환)
  • height ?? 100 : 0 (첫번째 정의된 값 반환)

• 옵셔널 체이닝 ?
  • 연산자가 아닌, 함수나 대괄호와 함께 동작하는 특별한 문법 구조체
  • 앞의 평가 대상이 undefined나 null이면 평가 중단 후 undefined 반환