2021 11 13

2021-11-13¶

코어 자바스크립트 [1장. 데이터 타입]¶

1. 데이터 타입의 종류 - 기본형 - number, string, boolean, null, undefined, Symbol 등 - 참조형 - Object - Array, Function, Data, RegExp, Map, WeakMap, Set, WeakSet 등

2. 데이터 타입에 관한 배경지식 - JS는 메모리 관리에 대한 압박이 좀 자유로워진뒤 탄생 - 숫자의 경우 정수형/부동소수형 구분하지 않고, 8바이트 확보하여 사용 - 모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결

3. 변수 선언과 데이터 할당 - 변수: 변경 가능한 데이터가 담길 수 있는 공간/그릇
```
var a; 
a = 'abc';

var a = 'abc';
```
- 데이터 저장 방법 - 실제로 해당 위치에 문자열 'abc'를 저장하진 않음 - 데이터를 저장하기 위한 별도의 메모리 공간 확보하여 문자열 'abc'를 저장하고, 그 주소 변수 영역에 저장하는 방식 - 문자열 데이터의 변환을 효율적으로 처리하기 위해 "변수"(변수명과 데이터 주소값 저장), "데이터"(실제 값 저장) 각각 저장 - 변환하면 그냥 새로 만들어서 주소만 갈아끼워 - 변수 영역(참조값 담는 곳) & 데이터 영역(실제값 담는 곳) 각각 있음을 기억!

4. 기본형 데이터와 참조형 데이터 - 불변값

var a = 'abc';
a = a + 'def';

var b = 5;
var c = 5;
b = 7;

  - 기본형 데이터는 모두 불변값 
  - 변경은 새로 만드는 동작을 통해서만 이뤄짐
  - 한번 만들어진 값은 GC되지 않는 한 영원히 변하지 않음

- 가변값 javascript var obj1 = { a: 1, b: 'bbb' }

  - 여기서는 obj1.a = 2; 와 같이 변경가할 수 있음
      - 이 과정에서 obj1 의 참조값은 당연히 안 변함 
  - 그래서 안의 데이터는 바꿀수있는데 obj1의 참조값 재할당 안하니 가변값이라 부름
  - 참조형 데이터가 "가변값"이라고 설명할 때의 "가변"은
      - 참조형 데이터 자체를 변경할 경우 X
      - 그 내부의 프로퍼티를 변경할 때 O

5. 불변 객체 - 내부 프로퍼티를 변경할 필요가 있을 때 마다 객체 불변성 확보하기 - 매번 새로운 객체 만들어 재할당하기로 규칙 정하면 - 자동으로 새로운 객체를 만드는 도구 활용한다면 - 시스템적으로 제약 거는게 안전 - 이 때문에 immutable.js, baobab.js 등의 라이브러리가 등장하여 인기 - 얕은 복사 vs 깊은 복사 - 기본형 데이터일 경우에는 그대로 복사 - 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사할 것 - 복사를 재귀적으로 수행해야 함!

6. undefined와 null - undefined - 값을 대입하지 않은 변수 (데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때) - 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 - return 문이 없거나 호출되지 않는 함수의 실행 결과 - 'undefined'는 그 자체로 '비어있음'을 의미하긴 하지만, 하나의 값으로 동작 - null - '비어있음'을 나타내기 위해서는 undefined 대신 null을 쓰자! - 이러면 'undefined'는 '값을 대입하지 않은 변수에 접근하고자 할 때 자바스크립트 엔진이 반환해주는 값'으로 존재 - typeof null 은 object라고 나옴... (버그랜다)
```
var n = null;
console.log(typeof n);              // object

console.log(n == undefined);        // true
console.log(n == null);             // true

console.log(n === undefined);       // false
console.log(n === null);            // true
```

코어 자바스크립트 [2장. 실행 컨텍스트]¶

1. 실행 컨텍스트 - 실행 컨텍스트: 실행할 코드에 제공할 환경 정보를 모아놓은 객체 - 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 동작... 특이점 발생! - 변수를 호이스팅 - 외부 환경 정보 구성 - this 값 설정 - 개발자가 흔히 실행 컨텍스트를 구성하는 방법은 "함수를 실행"하는 것 - 활성화된 실행 컨텍스트의 수집 정보 - VariableEnvironment - 현재 컨텍스트 내에 식별자들에 대한 정보 - 외부 환경 정보 - 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않음 - LexicalEnvironment - 처음에는 VariableEnvironment와 같지만 실시간으로 반영됨 - ThisBinding - this 식별자가 바라봐야 할 대상 객체

2. VariableEnvironment - LexicalEnvironment와 같지만, 최초 실행시의 스냅샷 유지 - VariableEnvironment에 정보 먼저 담고, 이를 그대로 복사해서 LexicalEnvironment 만들고, 이후에는 LexicalEnvironment 주로 활용

3. LexicalEnvironment - 컨텍스트를 구성하는 환경 정보들을 사전적으로 정리해둔 것 - "현재 커텍스트 내부에는 a,b,c와 같은 식별자가 있고, 그 외부 정보는 D를 참조하도록 구성되어 있다" - [environmentRecord와 호이스팅] - environmentRecord: 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨 - 호이스팅: JS 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 코드를 실행한다 - 변수는 선언부만 끌어올리고 할당부는 원래 자리에 남겨둠 - 함수는 선언 전체를 끌어올린다 - 함수를 정의하는 방법에 따라 "변수"로 취급되어 선언부만 올릴수도, "함수"로 취급되어 전체를 올릴수도
```
function a () { /*...*/ }
a();    // 함수명 a가 곧 변수명 => "함수"로 취급되어 전체를 올림

var b = function () { /*...*/ }
b();    // 변수명 b가 곧 함수명 => "변수"로 취급되어 선언부만 올림

var c = function d () { /*...*/ }
c();    // 실행 OK!, 변수  => 
d();    // 얜 그냥 에러
```
```
  - 실습!
      ```javascript
      console.log(mult(2,3));
      var mult = function test (a,b) {
          return a*b;
      }
      `Uncaught TypeError: mult is not a function => 변수로 선언된 mult, 선언만 위로 올라가서 console.log 절에서 뇌절`

      console.log(mult2(2,3));
      function mult2 (a,b) {
          return a*b;
      }
      `6 => 함수로 선언된 mult2, 싹다 위로 올라가서 정상 동작`
      ```
```
- [스코프, 스코프 체인, outerEnvironmentReference] - 스코프 체인: '식별자의 유효범위'를 안에서부터 바깥으로 검색해나가는 것 - outerEnvironmentReference: 스코프 체인을 가능케 하는 것! - 스코프 체인 - 현재 호출된 함수가 "선언될 당시"의 LexicalEnvironment를 참조 - 연결리스트 형식으로 선언 시점의 LexicalEnvironment를 가지고 있음 - 이런 구조적 특성 때문에 여러 스코프에서 동일한 식별자 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에 접근! - 실습
```
var a = 1;
var outer = function () {
    var inner = function () {
        console.log(a);
        function a () {
            console.log("hello");
        };
    };
    inner();
    console.log(a);
};
outer();
console.log(a);

`결과`
ƒ a () {
            console.log("hello");
        }
1
1
```
```
  - 전역 변수 == 전역 공간에서 선언한 변수
  - 지역 변수 == 함수 내부에서 선언한 변수
```

this - 실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장됨 - 실행 컨텍스트 활성화 당시 this 없다면 this는 전역 객체 - 그 밖에는 함수 호출방식에 따라 this 대상 달라짐

JS '==' vs '==='¶

참고: https://steemit.com/kr-dev/@cheonmr/js-operator
== - Equal Operator - 값이 같은지를 비교하여 같으면 true, 다르면 false
=== - Strict Equal Operator - 값 & 데이터 타입까지 같아야 true, 아니면 false