10/16 JavaScript 문법 3

내일배움캠프 오늘 학습 내용

 

• JavaScript 문법 3주차: JavaScript에서 데이터가 저장되는 방식, 실행 컨텍스트, this 바인딩에 대해 배우고 실습하였다.
• 3주차 숙제 진행 : 객체를 새롭게 만들어 복사하는 응용, 각 this가 어디를 참조하는지 알아내는 응용 문제.

 

데이터타입에 따른 변수 저장 방식

 

변수를 저장할 때 변수 선언을 저장하는 주소 영역과 변수에 할당된 데이터를 저장하는 주소 영역이 다르다.

• 기본형 : 값이 담긴 주소값을 저장하며 그 데이터를 저장한 주소는 변하지 않는다.(불변성)
• 참조형 : 주소값들을 저장한 묶음을 가리키는 주소값을 저장하며, 내용이 변경시 각 주소값이 달라지기 때문에 변한다.

var a = 5;
var obj1 = {
	name: "홍길동"
	age: 30,
};

// 데이터 변경
obj1.age = 20;

 

주소	...	100	101	102	103	...
데이터		a / @1002	obj / @5002
주소	...	1002	1003	1004	1005
데이터		5	홍길동	30	20
주소	…	5002	5003	5004	5005	…
데이터		name / 1003	age / 1004 -> 1005

 

- 문제점 : 객체를 obj2 = obj1 으로 복사하고 내용을 변경하게 된다면, 하나의 객체에서 변경된 값이 다른 객체에서도 영향을 끼치게 된다. 따라서 안의 속성을 각각 복사하여 새로운 객체를 만들어야 한다.

 

//해결방법 깊은 복사 -> 재귀함수 (recursive)
var copyObjectDeep = function(target){
    var result = {};
    if(typeof target === 'object' && target !== null){
        for(var prop in target) {
        	//객체 속 참조형 속성까지 전부 복사하기 위해 재귀 수행
            //얕은 복사는 for in 사용
            result[prop] = copyObjectDeep(target[prop]);    //재귀 수행
        }
    }
    else {
        result = target;
    }

    return result;
}

 

 

실행 컨텍스트

 

실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 콜 스택으로 쌓아 함수의 순서를 보장할 수 있다.

 

- 실행컨텍스트가 하는 일

• Hoisting
• 외부 환경 정보 구성
• this binding

 

 

- 객체에 담기는 정보

• VariableEnvironement (VE)

식별자 정보(record)와 외부 환경정보(outer)를 가지고 있다.

• record

변수와 함수의 선언 부분을 호이스팅하여 함수 실행 시 모든 변수를 이미 가지고 있게 된다.

호이스팅(Hoisting) : 가상개념. 매개변수의 선언부가 분리되어 함수의 시작 맨 앞으로 이동하게 되는 것으로 이해한다.

함수는 변수와 같이 선언한 경우 선언부분만 호이스팅 되지만 바로 할당하게 되면 전부가 호이스팅 되어 위에 코드까지 영향을 미칠 수 있으니 주의하여 사용하여야 한다.

• outer

외부 환경 정보를 참조하여 스코프 체인이 가능토록 한다. 만약 inner 함수에 a 변수가 선언되지 않았을 때 외부 환경정보인 outer 함수의 환경 정보를 참조하여 a=3이라는 값을 출력하게 된다.

 

• LexicalEnvironment (LE)

VE와 동일하지만 VE는 처음 불려졌을 때의 정보를 유지하고, LE는 실시간으로 바뀌게 된다. 보통 VE를 복사하여 사용한다.

• ThisBinding

실행 컨텍스트가 생성될 때, 즉 함수를 호출할 때 결정된다. (=this를 bind한다.)

전역환경에서의 this는 window vscode에서 global 객체, 브라우저 console에선 window 객체이다.

함수와 객체의 차이점: 객체의 메서드를 호출할 때 호출의 주체는 객체가 되기에 this는 객체를 가리키고, 함수는 주체가 없기 때문에 어디에서든 전역변수를 가리킨다. (콜백함수 포함)

 

• 화살표 함수

함수에선 this가 전역함수를 가리켜야 하지만, 화살표 함수에선 this가 존재하지 않기 때문에 언제나 this를 가리키는 것을 찾지 못한다. 그렇기에 실행 컨텍스트에서 상위 환경으로 점차 올라가 this를 찾게 된다. 따라서 객체 안에서 화살표 함수를 사용하면 그 상위 객체를 가리키게 된다. 

 

 

 

명시적 this 바인딩 call, apply, bind

 

• call, apply

호출 주체인 함수를 즉시 실행한다.

func.call({x: 1}); 을 실행하면 this는 {x: 1} 이라는 객체가 된다. apply는 뒤에 붙는 매개변수를 배열형태로 넘겨준다.

call, apply를 통해 유사배열 사용, 생성자 내부에서 다른 생성자 호출, 여러 인수 묶여 배열로 전달 시 사용할 수 있다.

 

•  bind

즉시 호출하지 않고 this를 새로 바인딩한 함수를 반환한다. this를 미리 적용하거나 부분 적용 함수를 구현할 때 유용하다.

bind를 적용한 함수는 모든 함수가 가지고 있는 name에서 bound 라는 접두어를 가지게 된다.