[11-15장] 모던 자바스크립트 Deep Dive

스터디 날짜 : 2023. 11. 05 (일)

 

---

11장. 원시값과 객체의 비교

 

[원시 값은 불변 값, 참조 값은 가변]

Q. 하지만, 다음처럼 변수 x에 재할당이 가능한데 도대체 무엇이 불변이란 말인가??

let x = 1;
x = 2; // 재할당

 

A. 불변이라는 것은 변수가 아닌 값에 대한 진술, 새로운 원시값을 할당 시 새로운 메모리 공간을 확보하게된다. 즉 주소가 바뀐다. 그에 반해 참조타입은 주소는 유지된채로 내부 값이 바뀔 수 있다.

 

TODO: 타 언어에서 말하는 참조타입과는 조금 다른게, C언어 포인터 개념은 변수에 주소값을 저장하고 연산하는데, JS 에서는 주소에 있는 값을 전달한다고 한다. 조금 와닿지 않아서 More...

 

 

[JS 문자열은 원시타입]

- C 언어 같은 경우 char x[10] 처럼 문자열을 배열로 처리한다.

- JS 에서 문자열은 원시타입이지만, length property 를 갖고 있어 array-like object (유사배열 객체) 로 iterable

 

- 한 글자당 2Byte 를 차지하며 N글자의 경우 2*N Byte 를 차지한다.

- 원시타입이므로, 한글자 수정은 불가능하다. (예로, str[0]='S' 잘못된 문법)

 

 

[값에 의한 전달 vs 참조에 의한 전달]

자, 지금까지 배운 개념을 더 구체화해보자. 프로그래밍 시 변수 간의 복사, 저장이 빈번히 일어난다. 이때 '값'을 주고 받으면 전자, 주소를 주고 받으면 '참조' 라고 이해하면된다. (내부적으로는 원시값도 메모리타입을 주고 받지만, 헷갈리니 pass)

 

 

(프로토타입 기반) [객체]

vs 클래스 기반 프로그래밍 언어 C++/Java 는 객체 생성 후 프로퍼티와 메서드 변경이 불가능하다. js 에서는 히든 클래스와 비슷

 

Q. 히든 클래스 [참고]

A. 동적 탐색(프로퍼티를 읽을 때마다 오프셋 탐색)을 피할 수 있도록, 컴파일 시 이미 프로퍼티 오프셋을 갖고 있음. 따로 정의할 것은 없고 크롬 V8 자바스크립트 엔진부터 내부적으로 적용되어있다!

 

 

 

12장. 함수

 

- 일련의 과정을 문으로 구현하고, 코드블록으로 감싼 하나의 실행 단위

- 매개변수, 인수 차이를 이제야 알았다.

- 함수 내부 변수도 동일한 원리로 동작한다. (1. undefined 로 초기화 / 2. 인수 전달 및 할당 ...)

  * 인수 안넘기면 undefined 인 이유를 알았다!

 

[3개 이상의 인수를 전달해야할 경우 : 객체 권장]

- 장점 : 순서 및 optional 값 정의 용의

- 단점 : 참조타입이므로 side effect 주의

// realFunctionName : 외부 식별자
// fakeFunctionName : 함수이름

const realFunctionName = function fakeFunctionName(a, b) { // 매개변수, parameters
  return a + b;
}

add(1, 1); // 인수, arguments

 

- 이처럼, 함수는 객체 타입의 값으로 할당이 가능하다. 이때, 함수 이름은 몸체 내부에서만 유효한 식별자로 외부적으로 호출은 불가능하다.

- 함수 선언문으로 정의하면 암묵적으로 함수 이름과 동일한 이름을 식별자로 생성한다.

 

[JS 함수는 1급 객체이다]

값으로 사용 가능

 

[함수 호이스팅]

- 함수 선언문으로 정의한 함수는 가장 위로 끌어올려져서 이전에 호출 가능 (런타임 이전에 함수 객체가 먼저 생성됨)

- 하지만, 변수는 런타임 이전에 undefined 로 할당된다. 해서, 함수 표현식(값)으로 정의하면 '변수 호이스팅'이 적용되어 이전에 호출이 불가능하다.

 

[[ 함수의 이것저것 ]]

 

[IIFE]

- Immediately Invoked Function Expression, 즉시 실행 함수 표현

- 리터럴 평가 후 객체 생성

- 혹시 모를 변수 충돌 방지

 

[재귀 함수]

- 자기 자신 호출

 

[중첩함수]

- outer, inner 함수

 

[콜백함수]

- 배열, 비동기 제어 등 이미 밀접하게 사용 중

 

[순수함수]

- 어떤 외부 상태에 의존하지 않고, 변경하지 않음. 

- side effect 가 없는 함수

- 인수의 불변성을 유지함

 

 

13장. 스코프

 

- 네임 스페이스

- 중첩 가능 (하지만, 비권장)

 

[스코프]

- 모든 식별자는 자신을 참조할 수 있는 유효 범위가 결정된다. JS 엔진 입장에서는 어떤 변수를 참조할지 결정하기

- 스코프 체인 아래 -> 위로 변수를 검색하므로, 하위 스코프에서 유효한 변수를 상위에서 참조할 수 없다.

- var (쓸 일이 없길 바라며) 함수의 코드 블록만을 지역 스코프로 인정

 

14장. 전역 변수의 문제점

 

- 지역 변수 생명주기 = 블록's

- 전역 변수 생명주기 = 전역 객체(window, global)'s

- 단순히 재할당, 불변 보장 불가를 넘어 scope chain 의 종점으로 변수 검색이 느리지 않을까 

 

 

15장. let, const 키워드와 블록레벨 스코프

 

- let : 선언, 초기화 단계 분리 가능

- const : 선언, 초기화 동시에 (재할당을 금지할 뿐, 객체값을 할당하면 값변경은 가능)