20240102_TIL 7일차
1. TIL
[1] JavaScript 문법종합반 2주차, 3주차
(1) 데이터 타입
1) 데이터 타입
a. 기본형 : number, string, boolean, null, undefined
b. 참조형 : object - array, function, map, set
2) 기본형 vs 참조형
기본형 -> 주소값을 바로 복사 && 불변성
참조형 -> 주소값들의 묶음을 지칭하는 새로운 주소값을 복사 && !불변성
3) 식별자, 변수
let a = 3; 에서 식별자는 let a / 변수는 3
4) 참조형의 데이터 할당 방식
var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;
b = 15 ;
obj2 = { c: 20, d: 'ddd' };
| "변수" | 주소 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 |
| 데이터 | a / @5001 | b / @5003 | obj1 / @ 7103~ |
obj2 / @ 8104~ |
|||
| "데이터" | 주소 | 5001 | 5002 | 5003 | 5004 | 5005 | 5006 |
| 데이터 | 10 | 'ddd' | 15 | 20 | |||
| obj1 | 주소 | 7103 | 7104 | obj2 | 주소 | 8104 | 8105 |
| 데이터 | c / @5004 | d / @5002 | 데이터 | c / @5004 | d / @5002 |
* 빨강색으로 표시한 값들은 바라보는 데이터 메모리 영역의 주소가 달라진 값들.
** a = 20; 으로 할당되면 주소가 @5004로 바뀌어 @5001에 있는 10의 '참조 카운트'가 0이 됨. -> 이 경우 JS 엔진에서 내부적으로 GC (Garbage Collector) 기능을 수행하여 해당 객체를 메모리에서 제거함.
(2) 객체의 가변성 & 불변성 / 복사
1) 함수 내에서 객체의 프로퍼티(속성)에 접근해서, 변수 할당을 통해 변경하는 경우 "가변"
=> 새로운 변수에 해당 함수를 할당하면 이전 변수도 영향을 받음
2) 함수 내에서 return 을 통해 새로운 객체를 반환하는 경우 "불변"
=> 새로운 변수에 해당 함수를 할당하더라도 이전 변수는 바뀌지 않음.
3) 얕은 복사
a. 함수 내에 for ~ in 구문으로 객체의 모든 프로퍼티에 접근하도록 로직을 짜면
=> 새로운 변수에 해당 함수를 할당하면 복사 후 객체의 프로퍼티를 변경함.
b. 장점 : 객체의 속성이 여러 개일 경우 효율적인 코딩이 가능함
c. 단점 : 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사
=> 중첩된 객체, 객체 내에 다른 객체가 존재하는 완벽히 복사되지 않음.
4) 깊은 복사
a. 객체 내부의 모든 값들을 찾아서 모두 복사하는 방법
b. 함수로 표면을 둘러싸고 있는 객체를 복사한 후, 내부에 중첩된 객체를 복사하는 변수를 할당
5) 재귀적 수행 : recursive
a. 함수 내에 자기 자신을 호출하여 반복적으로 실행되도록 하는 방법
b. for ~ in 구문 내에 함수를 호출하여 깊은 복사가 되도록
(3) 실행 컨텍스트
1) 실행 컨텍스트
실행할 코드에 제공할 환경 정보들을 모아놓은 '객체'
2) 실행 컨텍스트가 활성화되는 시점에 일어나는 일
a. hoisting : 선언된 변수를 위로 끌어 올림
* hoisting 전/후 에 반환되는 변수의 순서가 달라짐.
b. 외부 환경 정보를 구성
c. this 값 설정
3) Stack vs Queue
a. Stack
- 바구니 형태로 컨텍스트를 쌓음.
- First in, Last out (FILO)
b. Queue
- 원통형으로 컨텍스트를 쌓음.
- First in, first out
4) Call Stack
a. FILO => 순서 보장
b. 코드를 실행
먼저 쌓인 1번 컨텍스트가 실행 -> 1번 중단 -> 그 다음에 쌓인 2번 컨텍스트 실행 -> 2번 중단
-> .... -> 가장 마지막에 쌓인 n번 컨텍스트 실행 -> n번 컨텍스트 out -> n-1 번 컨텍스트 재개
-> n-1번 컨텍스트 out -> ....... -> 1번 컨텍스트 재개 -> 1번 컨텍스트 out -> 코드 종료
c. 1번 컨텍스트는 전역 컨텍스트
5) 실행 컨텍스트에 담기는 정보
a. VE (Variable Environment)
- environment Record : 해당 컨텍스트 내의 식별자 정보를 갖고 있음. = record
- outer Environment Record : 외부 환경 정보를 갖고 있음. = outer
- 선언 시점 LE의 Snapshot
- Snapshot을 유지
b. LE (Lexical Environment)
- record
- outer
- Snapshot을 유지하지 않고, 실시간으로 변경하고 변경 사항을 업데이트
c. ThisBinding
6) VE vs LE
a. VE와 LE는 실행 컨텍스트 생성 시점에 내용이 완전히 같음.
b. 실행 컨텍스트를 생성할 때, 정보를 VE에 먼저 담음.
=> 이를 그대로 복사하여 LE를 만들고 LE를 주로 활용함.
c. Snapshot 유지 여부가 다름
7) LE : record & hoisting
a. hoisting
- 실행 컨텍스트의 식별자 정보들이 record에 수집, 저장됨.
- 그 수집 과정을 변수 정보의 수집 과정을 설명하는 개념
b. 법칙
- [1] 매개변수 및 변수는 선언부를 hoisting
- [2] 함수 선언 전체를 hoisting
c. 함수 표현식 >> 함수 선언문
함수 선언문의 경우 hoisting을 통해 함수 전체가 위로 올라가 이전의 코드에도 영향을 줌.
=> '함수 표현식'을 이용해야 복잡하게 이뤄지는 협업에서 코드의 관리가 용이함.
8) LE : 스코프, 스코프 체인, outer
a. Scope : 식별자에 대한 유효 범위
b. Scope chain : scope를 안 => 밖 , inner => outer => global 순으로 검색해 나가는 것
c. outer
- 외부 환경의 참조정보
- outer는 현재 호출된 함수가 선언될 당시의 LE를 참조 (그 당시 환경 정보를 저장)
- 가까운 요소부터 차례대로 접근함.
9) 정리
각각의 실행 컨텍스틑 LE 내에 record와 outer가 있음. outer 내에 있는 선언될 당시의 LE 정보를 scope chain을 통해
record를 읽어올 수 있다.
10) ThisBindings
a. 전역 공간
runtime 환경 : 브라우저에서의 this === window 객체 / node에서의 this === global 객체
b. 함수 vs method
- 함수는 호출 주체가 없음. 함수를 함수로 호출할 경우 this는 지정되지 않음.
함수를 독립적으로 호출할 때 이 때의 this는 전역 객체를 가리킴.
- method는 실행의 주체가 있음. 이 때의 this는 호출하는 객체. method 함수 내의 this는 항상 obj
11) ThisBinding : call, apply, bind
a. call
- func.call ( { this }, ... } : 즉시 실행함수
b. apply
- func.apply ( {this}, [a, b, c... ] } : 즉시 실행함수
c. bind
- func.bind ( {this}, ... ) :
- this를 binding하는 method.
- 즉시 호출하지는 않고 함수에 this를 미리 적용
- 부분 적용 함수를 구현할 때 씀.
- 'bound'가 접두어로 붙어 추적하기에 용이함.
12) 화살표 함수 & 콜백 함수
a. 화살표 함수
- this를 binding하지 않는 함수
- 함수 내부에서 this가 전역객체를 가리키기 때문에 만들어짐.
- 스코프체인 상 가장 가까운 this에 접근하게 됨.
b. 콜백 함수
- 어떠한 함수, 메서드의 인자(매개변수)로 넘겨주는 함수
- 함수가 인자로 전달될 때는 함수 자체로 전달됨. => this를 binding하지 않음.