DAY 21. 발제 주특기(Node.js) Javascript 심화 Chapter 01. 데이터 타입, 02. 실행 컨텍스트

새로운 4주차 시작! 

 

드디어 Node.js 를 본격적으로 배우게된다.

 

하지만 본격적으로 들어가기 앞서서 'Javascript 심화' 라는 타이틀을 달고있는 강의를 공부해야한다.

 

심화라서 그런지 몰라도 확실히 한번에 이해하기는 어렵지만, 반복 학습해서 최대한 마스터 하도록 노력해야겠다.

 

============================================================================================

- Javascript 심화 (C 튜터)

 

• Chapter01. 데이터 타입

- 기본형 : 값이 담긴 주소값을 바로 복제, 불변(별개의 데이터)

- 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제?
값이 담긴 주소값의 묶음을 가리키는 주소값을 복제한다, 가변

 

                      변수
                      -----
var testValue = 3;
       -----------
       식별자
     (=변수명)

 

[모든 data 는 byte 단위의 식별자인 메모리 주소값을 통해서 서로 구분이 된다.]

 

- 변수 : 변경가능한 데이터들이 담기는 그릇 

- 변수 영역과 데이터 영역으로 나뉘어서 변수 영역에는 (데이터를 담은) 데이터 영역의 주소를 값으로 하는가?

1. 자유로운 데이터 변환

문자열이 너무 길어서 다음 영역으로 넘어가는 것을 방지

2. 메모리의 효율적 관리

숫자 8byte
문자열 2byte

숫자 5 8 번 반복

case 1. 변수영역에 바로 값이 들어간다면
8byte x 8 = 64byte 

case2. 변수영역에는 데이터 영역의 주소갑을, 데이터 영역에는 데이터를
2byte x 8 + 8byte = 24byte


변수 vs 상수 -> 변경가능성(데이터 영역)

기본 -> 불변

참조 -> 가변

참조 -> 객체의 변수(프로퍼티) 영역의 별도 존재 여부

가변임을 유의하고 불변하게 만들어야함

 

- 불변 객체

 

{} 열고 닫으면 객체!

var user = {
    name: 'wonjang',
    gender: 'male',
};

var changeName = function (user, newName) {
    var newUser = user;
    newUser.name = newName;
    return newUser;
};

var user2 = changeName(user, 'twojang'); // 이름을 twojang 으로한 새로운 객체
if (user !== user2) {
}

 

input : user type 객체, 바꿀 이름
output : 이름 바꿔서 복사한 그 객체

 

for in : index
for of : value

 

- 얕은 복사 vs 깊은 복사

얕은 복사 :바로 아래 단계의 값만 복사, 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사

깊은 복사 : 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법

 

- undefiend

- 자바스크립트 엔진에서 자동 부여
1. 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
2. .이나 []로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우
3. return 문이 없거나 호출되지 않는 함수의 실행 결과

- 비어있는 요소와 undefined에 대해
                  (수행)   
                 ------------
empty 와 undefiend 는 다름
--------

길이는 지정했으나 값을 지정 하지 않았을 때(스킵)

 

- undefined 중요할 점

1. 지금 undefined로 나오는 이 변수가, 필요에 의해 할당한건지 자바스크립트 엔진이 반환한건지 어떻게 알까? → 구분할 수 없음
2. ‘없다’를 명시적으로 표현할 때는 undefined를 사용하지 말자! null 사용!

 

- null
1. 용도 : '없다'를 명시적으로 표현할 때
2. typeof null

if (typeof var1 === 'object' && var1 !== null) {

}

- 마무리

a. 자바스크립트의 데이터 타입 : 기본형(불변값), 참조형(가변값)
b. 변수 : 변경 가능한 데이터가 담기는 공간
c. 식별자 : 변수의 이름
d. 기본형 데이터와 참조형 데이터는 변수 할당 과정에서 차이가 있음
e. 참조형 데이터를 가변으로 여겨야 하는 상황임에도, 이를 불변값으로 사용하는 방법
i. 깊은 복사
ii. 라이브러리
f. 없음 : undefined, nul

 

• Chapter02. 실행 컨텍스트

1. 실행컨텍스트 :실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에
 → 선언된 변수를 위로 끌어올리고
 → 외부 환경 정보를 구성하고
 → this 값을 설정한다.
이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난다.

                    Frist In First Out(FIFO)  선입선출
                    --------
a. Stack Vs Queue
   ---------
    Last In First Out(LIFO) 후입선출

스택 : 빨래통
큐 : 놀이동산

b. 콜 스택(call stack)
i. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
ii. 모아서 어디에? —> 콜 스택에
iii. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장
iv. 컨텍스트의 구성 방법
1. 전역공간
2. eval()함수
★ 3. 함수!(우리가 흔히 실행컨텍스트를 구성하는 방법) ★
4. 실행컨텍스트 구성 예시

call stack 의 가장 윗 부분만 현재 활성화 된 부분, 나머지는 멈춤

 

// ---- 1번
var a = 1;

function outer() {
    function inner() {
        console.log(a); //undefined
        var a = 3;
    }

    inner(); // ---- 2번
    console.log(a);
}

outer(); // ---- 3번
console.log(a);

5. 코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

 

c. 실행 컨텍스트 객체

i. 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점

ii. 생성 시점. 즉, 활성화 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장

iii. 실행컨텍스트에 담기는 정보

    1. VariableEnvironment(가변 환경)
        a. 현재 컨텍스트 내의 식별자 정보 (var a = 3;)
        b. 외부 환경 정보(outer)
        c. 선언 시점 LexicalEnvironment의 snapshot

    2. LexicalEnvironment(어휘 환경)
        a. VariableEnvironment와 동일하나 변경사항이 실시간으로 반영

    3. ThisBinding(바인딩)
        a. this 식별자가 바라봐야할 객체

 

2. VariableEnvironment, LexicalEnvironment 개요

    a. VE와 LE의 비교
        i. 담기는 내용 : 동일
        ii. 스냅샷 유지여부 (스냅샷 : 그 순간을 찍어 놓는 것)
            1. VE : 유지
            2. LE : 유지X
    iii. 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를  그대로 복사해 서 LE를 만들고 이후에는 주로 LE를     활용
    b. 구성요소
        i. VE, LE모두 동일하며, ‘environmentRecord’와 ‘outerEnvironmentReference’로 구성
        ii. environmentRecord(=record)
            1. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장
            2. 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된  변수 식별자 등
        iii. outerEnvironmentReference(=outer)


VE  { record
=> 
LE } outer

 

3. LexicalEnvironment(1) - environmentRecord와 호이스팅
    a. 개요
        i. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)
        ii. 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체,  var로 선언된 변수, 식별자 등
        iii. 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집(수행X)
    b. 호이스팅
        a. 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드 는 실행 전의 상태임(JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고  있는 것)
        b. 변수 정보 수집 과정을 이해하기 쉽게 설명한 ‘가상 개념’


    c. 호이스팅 규칙
        a. 매개변수 및 변수에 대한 호이스팅
        //action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이  이해한다)
        //action point 2 : 결과 예상하기
        //action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기

function a(x) {
    console.log(x); // 1
    var x;
    console.log(x); // undefined
    var x = 2;
    console.log(x); // 2
}

a(1);

 

    b. 함수 선언의 호이스팅
    //action point 1 : 결과 값 예상해보기
    //action point 2 : hoisting 적용해본 후 결과를 다시 예상해보 기

function a() {
    console.log(b);
    var b = 'bbb';
    console.log(b);

    function b() {
    }

    console.log(b);
}

a();

 

    c. 함수 선언문, 함수 표현식

        a. 함수 정의의 3가지 방식

function a() { /* ... */
} // 함수 선언문. 함수명 a가 곧  변수명
a(); // 실행 ok

var b = function () { /* ... */
} // (익명 함수 표현식.  변수명 b가 곧 변수명
b(); // 실행 ok

var c = function d() { /* ... */
} // 기명 함수 표현식.  변수명은 c, 함수명은 d
c(); // 실행 ok
d(); // 에러!

    b. 함수 선언문(자체가 다), 함수 표현식(좌측 변수명 만)

console.log(sum(1, 2));
console.log(multiply(3, 4));

function sum(a, b) { // 함수 선언문 sum
    return a + b;
}

var multiply = function (a, b) { // 함수 표현식 multiply
    return a + b;
}

 

1. 함수 선언문을 주의해야 하는 이유

//...
console.log(sum(3, 4));

function sum(x, y) {
    return x + y;
}

//...
//...

var a = sum(1, 2);

//...

function sum(x, y) {
    return x + ' + ' + y + ' = ' + (x + y);
}

//...
var c = sum(1, 2);
console.log(c);

 

2. 만약 함수 표현식이었다면…?

//...
console.log(sum(3, 4));
var sum = function (x, y) {
    return x + y;
}
//...
//...
var a = sum(1, 2);
//...
var sum = function (x, y) {
    return x + ' + ' + y + ' = ' + (x + y);
}
//...
var c = sum(1, 2);
console.log(c);

 

4. LexicalEnvironment(2) - 스코프, 스코프 체인, outerEnvironmentReference(=outer)
    a. 주요 용어
        i. 스코프
            1. 식별자에 대한 유효범위
            2. 대부분 언어에서 존재하며, JS에서도 존재(es5 / es6는  조금 다름)
        ii. 스코프 체인
            1. 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나 가는 것
        iii. outerEnvironmentReference(이하 outer)
            1. 스코프 체인이 가능토록 하는 것(외부 환경의 참조정보)
    b. 스코프 체인
        i. outer는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment 를 참조
        ii. ex) A함수 내부에 B함수 선언 → B함수 내부에 C함수 선언 (Linked List)
        iii. 결국 전역 컨텍스트의 LexicalEnvironment를 참조
        iv. 오직 자신이 선언된 시점의 LexicalEnvironment를 참조하고 있 으므로, 가장 가까운 요소부터 차례대로 접근 가능

v. 결론 : 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능

var a = 1;
var outer = function () {
    var inner = function () {
        console.log(a);
        var a = 3;
    };
    inner();
    console.log(a);
};
outer();
console.log(a);

 

<스코프 체인>

|C________________| -> record, outer
|B________________| -> record, outer
|A________________| -> record, outer 
|전역______________|

1. C 현재 record 내부에서 찾는 값을 찾아보고, 없으면 
2. C 의 실행컨텍스트에 outer 에 적시된  B 라는 LE record 에서 찾아보고, 없으면 
3. B 의 실행컨텍스트에 outer 에  에 적시된 A 라는 LE record 에서 찾아보고, 없으면
4. A 실행컨텍스트에 적시된 outer 참조

결론 : 스코프 상에 존재하지않으면(안에서 찾지 못하면) 이걸 호출한 바깥에서 값을 찾는다.

============================================================================================

오후에 가족행사가 있어서 아침부터 바쁜하루였다.

 

덕분에 공부는 얼마 못했고, 오늘 못끝낸 Javascript(심화) 특강은 내일 마무리 해야겠다.

 

(오늘 아침인가... 현재시간 0시 29분)

 

끝