항해 3일차
오늘은 데이터 타입(심화), 실행 컨텍스트, this에 대해서 공부를 하였다.
간략하게 보자면
데이터 타입 심화
자바스크립트에서 값의 타입은 크게 기본형과 참조형으로 구분된다. 기본형과 참조형의 구분 기준은 값의 저장 방식과 불변성의 여부이다.
그럼 값의 저장 방식과 불변성의 여부에 대해서 알아보자.
값의 저장의 방식
기본형 : 값이 담긴 주소값을 바로 복제 => 기본형은 다른 주소값에 영향 x
참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 => 참조형은 다른 주소 값에 영향 O
불변성의 여부
기본형 : 불변성을 띔
참조형 : 불변성을 띄지 않음
** 불변성 유무 : 데이터 영역 메모리를 변경 할 수 있고 없음을 뜻한다. 변수 O 상수 X
메모리와 데이터에 관한 지식
1. 메모리, 데이터
-
비트 : 컴퓨터가 이해할 수 있는 가장 작은 단위. 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미한한다. 이 조각들이 모여서 메모리가 만들어 진다.
-
바이트 : 8개의 비트를 묶은 것 8bit = 1byte
-
메모리 : byte 단위로 구성. 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해서 서로 구분된다.
2. 식별자 변수
let a = 3 // ex
변수 = 데이터
식별자 = 변수명변수 선언과 데이터 할당
1. 할당 예시
/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';
/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';2. 값을 바로 변수에 대입하지 않는 이유(무조건 새로 만드는 이유)
- 자유로운 데이터 변환
- 메모리의 효울적 관리
기본형 데이터와 참조형 데이터
1. 중첩객체
자바스크립트에서 중첩객체란, 객체 안에 또 다른 객체가 들어가는 것을 말한다. 이번 주차 초반에 살펴보았듯이 객체는 배열, 함수 등을 모두 포함하는 상위개념이기 때문에 배열을 포함하는 객체도 중첩객체라고 할 수 있다.
2. 가비지 컬렉터
더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 한다. 자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원한다. 자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없다.
얇은 복사
- 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.
const obj1 = { a: 1, b: 2};
const obj2 = obj1;
console.log( obj1 === obj2 ); // true깊은 복사
- 얇은 복사 처럼 주소를 복사해서 공유하는 것이 아니라, 아예 새로운 객체안 속성(property)만 복사 해서 사용하는 방법
const obj1 = { a:1, b:2 };
const obj2 = { ...obj };
obj2.a = 100;
console.log( obj1 === obj2 ) // false
console.log( obj1.a ) // 1실행컨텍스트(스코프, 변수, 객체, 호이스팅)
실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트가 활성화되면 호이스팅, 외부 환경 정보 구성, this 값 설정 등을 한다.
콜 스택(call stack)
- 실행 컨텍스트를 저장하는 자료구조
- Stack(LIFO) , Queue(FIFO)
1. VariableEnvironment
- 현재 컨텍스트 내의 식별자 정보(record)를 갖고 있다.
- 외부 환경 정보(outer)를 갖고 있다.
2. LexicalEnvironment
- VariableEnvironment와 동일하지만. 변경사항을 실시간으로 반영한다.
3.ThisBinding
- this 식별자가 바라봐야할 객체
호이스팅
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
⚠️ 주의
- 함수 선언문은 전체를 hosting but 함수 표현식은 호이스팅 발생하지 않는다.
스코프 & 스코프 체인
- 식별자에 대한 유효범위를 의미
- 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
- 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능
this(정의, 활용방법, 바인딩, call, apply, bind)
1. 상황에 따라 달라지는 this
전역 공간에서의 this
- 전역 객체를 가리킨다.
- 런타임 환경에 따라 this는 window(브라우저 환경)또는 global(node 환경)을 각각 가리킨다.
메서드로서 호출할 때 그 메서드 내부에서의 this
- . , []로 구분하여 호출한다.
함수로서 호출할 때 그 함수 내부에서의 this
- 어떤 함수를 함수로서 호출할 경우, this는 지정되지 않는다.
- 독립적으로 호출할 때는 this는 항상 전역객체를 가리킨다.
콜백 함수 호출 시 그 함수 내부에서의 this
- this의 상태를 이해하는 것이 중요!!
생성자 함수 내부에서의 this
- 생성자 : 구체적인 객체를 만들기 위한 일종의 틀
- 이때 this는 자기 자신을 뜻한다.
메서드의 내부 함수에서의 this 우회
- 변수를 활용하는 방법
- 화살표 함수()는 this를 바인딩하는 과정이 제외된다.
명시적 this 바인딩
1. call 메서드
- 호출 주체인 함수를 즉시 실행하는 명령어이다.
- 호출 주체인 함수를 즉시 실행하는 명령어이다.
var func = function (a, b, c) {
console.log(this, a, b, c);
};
// no binding
func(1, 2, 3); // Window{ ... } 1 2 3
// 명시적 binding
// func 안에 this에는 {x: 1}이 binding돼요
func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 62.apply 메서드
- call 메서드와 완전히 동일하다. 다만, this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열 형태로 넘겨준다.
var func = function (a, b, c) {
console.log(this, a, b, c);
};
func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6
var obj = {
a: 1,
method: function (x, y) {
console.log(this.a, x, y);
}
};
obj.method.apply({ a: 4 }, [5, 6]); // 4 5 63. bind 메서드
- call과 비슷해 보인다. 하지만, 즉시 call과는 다르게 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.
var func = function (a, b, c, d) {
console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // window객체
// 함수에 this 미리 적용
var bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않아요! 그 외에는 같아요.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8
// 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9