22.11.29)js 데이터타입과 실행컨텍스트를 배운 22일차

#오늘배운것

데이터타입의 참조형 : 무언가를 참조한다(refer) 타겟을 향해있다.

=> object

복제의 방식

1. 기본형 : 값이 담긴 주소값을 바로 복제

2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제

주소를 참조해서 복제

 

 

기본 = 불변 

 

 

bit : 0,1을 가지고 있는 작은 메모리 조각 . 모여서 메모리가 된다.

하나마다 자기만의 식별자가 있다. bit의 묶음을 단위로 생성하는데 8개의 비트로 구성되어있는 것이 bytes다.

식별자, 변수

i. 변수 = 데이터

ii. 식별자 = 변수명

 

모든 data는 byte단위의 식별자인

메모리 주소값을 통해서 서로 구분이 된다.

 

 

 

 

 

 

변수 선언과 데이터 할당

hoisting을 하기 위해서는 

/** 풀어 쓴 변수 할당 방식 */ var testValue; testValue = 'test value!'; 방식이 더 이해하기 좋다.

 

var '변수'명을 생성하면 빈공간(주소)을 확보하고 데이터에 식별자 '변수'를 선정한다. 이후 문자열도 저장하면 '변수'의 식별자를 검색 후 저장한 문자열의 주소를 식별자 밑에 값이라는 것으로 추가한다.

Q.식별자와 함께 값도 같이 저장할 수 있는데 왜 따로 저장하는가

A.데이터 영역에 값을 할당할때마다 계속 주소를 바꾸는 이유는  자유로운 데이터 변환, 메모리의 효율적 관리 때문이다.

자유로운 데이터 변환 : 숫자의 경우 8byte로 고정이지만 문자는 영어,한글,에 규격이 없어 값을 저장할때 생각했던 것보다 큰 데이터를 저장하게 될 수도 있다.

메모리의 효율적 관리 : 같은 데이터를 여러번 저장하게 될 경우 값으로 저장하면 8bytes xnnn이지만 주소값으로 할 경우는 2bytes x nnn + 8byte이므로 메모리가 절약되는 것을 알 수 잇다.

 

불변값과 불변성

변수와 상수의 차이점 : 변경가능성

불변성을 구분하는 기준 : 변수의 값이 바뀌는 것XX , 데이터 영역에 있는 값이 바뀔 수 있는가?

데이터는 그대로 있고, 변수의 주소값을 추가한버전의 값으로 변경한다.

데이터영역의 메모리는 변경되지 않는다.

 

가비지컬렉팅 : 변수가 바뀌므로써 사용하지 않는 데이터를 수거한다.

 

 

가변값과 가변성

기본형 > 불변
참조형 > 가변

 

 

참조형 데이터의 변수 할당 과정

 

값이 여러개인 경우 저장할 때 주소 하나에 저장 하는 것이 아닌 별도의 변수 공간을 만든다.

object에 대한 value는 각 식의 주소를 넣는다.

 

ex)

@7103~ 이 주소가 변수영역의 1002주소에 직접 할당되는 것이 아니라
데이터 영역(예를 들면 5002주소)에 할당된 후
5002 주소가 1002주소의 값으로 들어가는거.

참조형 데이터의 메모리 세팅은 이렇게 이루어지는데 해당 예시 직후 진행된 참조형 데이터의 세팅 부분도 동일하게 적용돼야 합니다.

 

 

기본형 데이터의 변수 할당 과정과 차이점 : 기본형의 경우 객체의 변수(프로퍼티) 영역의 별도 존재하지 않음.

if.

만약 a의 값을 변경하게 할 경우는 데이터에서 새로 변경된 값의 주소를 별도의 영역에 a가 가진 값을 데이터에 저장한다.

 

값을 복사하기

if b=a라면 a의 주소값을 b에 그대로 복사.

obj2=obj1이라면 obj1의 별도 주소를 그대로 가져온다.

>>만약 복사 후 값이 변경 됐다면?

: 변경된 값의 새로운 데이터 주소로 교체한다.

변수기 때문에 변수 값이 바뀔 수 잇지만 상수는 영역변경이 되지 않는다.

 

변경한 후 a !==b인 상태이다.  obj의 경우는 obj1 == obj2는 같다(obj의 별도 영역 주소는 주소~~부터이니 값은 같이 때문)

if obj의 값을 서로 다르게 주고싶지만 그럴 수 없다. 가변이기 때문이고, 변경한다면 불변하도록 해야하기 때문.

(복사 후 기존데이터에 영향이 없어야한다.)

영향이 없도록 2를 할당할 때 속성으로 접근하는게 아니라 객체 자체의 값을 바꾸면 된다.

전의 변경의 경우 c라는 속성에 접근하여 변경하였지만  obj2 = {c: '' , d : ''}형식으로 변경한다.

(일부의 값을 변경하려면 c기존의 값을 전부 가져와야하는건가?)

 

 

불변 객체

가변일 수 밖에 없는 참조형 객체. 참조형 중 array, ... function이 있다.

입력한 객체에  새로운 객체로 만들고, 새로운 객체는 기존 객체의 데이터를 변경하고 그 객체를 반환한다.

★js쓸 때 주석 좀 많이 표기해야한다..input과output 구분을 쉽게 하기 위해.

input : 유저 타입의 객체.바꿀 이름

output : 이름 바꿔 복사한 그 객체 !

if

input 값을 변경한다면 기존객체와 다른가?

참조주소가 바뀌지 않기 때문에 동일한 값이다. obj니까...

 

[깊은복사]

동일한 값이 되지 않으려면? : 새로운 객체로 return한다.

>>문제점 :속성이 적으면 문제가 되지않지만 속성이 너무 많으면 비효율적이 된다.

[얕은복사]

ver2.동일한 값이 되지 않으려면? : targer을 받아 for(prop)문을 돌린다.

 

depth > array같은 객체라면 참조하는 주소값은 그대로 복사한다.

for문이 1번만 돌기 때문이다.

 

 

 

얕은 복사 : 바로 아래 단계의 값만 복사

—> 문제점 : 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사

깊은 복사 : 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법 => 재귀(다시..돌아간다..)

//예시

var copyObjectDeep = function(target) { //target이라는 obj가 들어오면
var result = {}; //result생성
if (typeof target === 'object' && target !== null) { //target이라는 타입이 obj일 때 && target이 null이 아닐 때 수행해라.
//typeof target === 'object'는 참조형...은 아니고..객체타입을 의미하는 것이다.(array나 null도 마찬가지)
//여기서 obj는 참조형 data라면..이라고 해석할 수 있다.
for (var prop in target) {
result[pop] = copyObjectDeep(target[prop]); //자기 자신(재귀) target인자 안prop값을 그대로 전달.
}
} else {
result = target;
}
return result;
}

요소 하나하나마다 for문이 돌고, 한번 돌고 나면 target에 obj안에 있는 요소들이 하나씩 호출되는 것이다.

만약 obj가 아닌 것을 for문으로 돌린다면 obj가 아니므로 result = target으로 값만 넣어주는 것이다.

 

json : obj를 만들고 json으로 보내면 새로운 객체의 obj가 되는데...단점이 있긴해도 쓰면 쉽다고 한다.

 

undefined와 null에 대해서 : 둘 다 없음을 의미

undefined조심해서 써야하는 이유.

지금 undefined로 나오는 이 변수가, 자의적으로 필요에 의해 할당한건지 자바스크립트 엔진이 반환한건지 어떻게 알죠? → 구분할 수 없어요.

2. ‘없다’를 명시적으로 표현할 때는 undefined를 사용하지 맙시다!

=>없는 값을 출력할 때는 : typeof null로 표현하는 것이 좋다.(if typeof 값을 설정할 때 null값이 들어오는 것도 생각해둬야한다. && ' ' !== null)

 

자바스크립트 엔진에서 자동 부여

1. 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때(var a;)

2. .이나 []로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우(console로 접근할 경우 참조 오류가 난다)

3. return 문이 없거나 호출되지 않는 함수의 실행 결과

 

foreach문을 돌렸을 때.

empty : 길이는 지정했지만 값을 지정하지 않음 : skip

undefined : 수행.

reduce란?

메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

 

요약

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

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에(hosting)

→ 선언된 변수를 위로 끌어올리구요

→ 외부 환경 정보를 구성하구요

→ this 값을 설정해요

 

스택

LIFO 

 

콜 스택

LIFO안에 들어가는 ex)바스켓이다.실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 콜스택에 쌓을 것이다.

가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장한다.

 

컨텍스트의 구성 방법

1. 전역공간

2. eval()함수

3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법)

// ---- 1번 (전역)
var a = 1;
function outer() {
function inner() {
console.log(a); //undefined
var a = 3;
}
inner(); // ---- 2번(call 실행 컨텍스트가 쌓이는 시점)
console.log(a);
}
outer(); // ---- 3번
console.log(a);

 

ex) exomple.js파일이라면 실행되는 시점에서 call stack에 전역coltext가 in된다 (함수를 선언하는거지 실행하는게 아니니 skip한다) > outer라는 함수가 실행된다(여기서 실행 컨텍스트 생성) > 그럼 전역coltext는 멈추게 된다 맨위만 활성화 되니까... > outer가 in 된다 > 다시 function으로 돌아가서 실행 >inner컨텍스트를 쌓고, outer는 중단된다.> inner함수의 내부로 들어가서 (사용자가 만든 함수가 없으므로 실행 컨텍스트를 쌓을만한게 없으므로 끝낸다) callstack에서 나오게된다 > 다시 inner밑에 있던 outer가 다시 재개된다(inner전에 실행했던 기점으로 돌아감) > inner와 같은 사유로 outer도 나오게 되며, 전역coltext가 나오게 되면서 재개 > 전역까지 out 되면서 코드가 종료

>>3줄 요약

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

 

실행 컨텍스트 객체

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

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

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

1. VariableEnvironment(선언되는 시점에서 LexicalEnvironment와 동일)

    a. 현재 컨텍스트 내의 식별자 정보 (var a)

    b. 외부 환경 정보 (outer)

    c. 선언 시점 LexicalEnvironment의 snapshot(LexicalEnvironment과 차이점)

2. LexicalEnvironment

    a. VariableEnvironment와 동일하나 변경사항이 실시간으로 반영 실행 컨텍스트

3. ThisBinding(function ... "this"의 의미를 결정해줌)

    a. this 식별자가 바라봐야할 객체

 

VE는 VariableEnvironment, LE는 LexicalEnvironment라고 임시로 선언하겠다.

VE와 LE의 비교

i. 담기는 내용 : 동일(VE는 snapshot)

ii. 스냅샷 유지여부

    1. VE : 유지

    2. LE : 유지X

실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해 서 LE를 만들고 이후에는 주로 LE를 활용

 

구성요소

VE, LE모두 동일하며, ‘environmentRecord’와 ‘outerEnvironmentReference’로 구성

environmentRecord(=record) 

    -현재 컨텍스트와 관련된 코드의 식별자 정보 저장(var a = )

    -함수에 지정된 매개변수 식별자, 함수자체(함수 밑에선언된 것) ,var ...

outerEnvironmentReference(=outer)

 

큐

FIFO