📚코어 자바스크립트를 읽고 자바스크립트 동작 원리 이해하기, 자바스크립트 마스터의 길로...

📃 #01 데이터 타입

JavaScript가 데이터를 처리하는 과정

01 JS의 데이터 타입의 종류

1.기본형

• number
• string
• boolean
• null
• undefined
• symbol (+ES6)

2.참조형

• object
• array
• function
• date
• RegExp(정규표현식)
• 객체의 하위 분류에 속하는 Map, WeakMap, Set, WeakSet (+ES6)

02 데이터 타입에 관한 배경지식

기본형은 값이 닮긴 주솟값을 바로 복제, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제.

1-2-1 메모리와 데이터

각 비트는 고유한 식별자를 통해 위치 확인 가능, c/c++,자바 등의 정적 타입 언어는 메모리의 낭비를 최소화 하기위해 데이터 타입별로 할당할 메몰 영역을 2바이트, 4바이트 등으로 나누어 정해놓았다.

이에 반해서 js는 메모리 압박에서 자유로워짐 숫자의 경우 정수형, 부동 소수형인지 구분 하지 않는다. 64비트 즉, 8바이트를 확보한다. 개발자는 형변환 걱정을 할 필요가 없어졌다.이러한 이유로 자바스크립트에 int, flaot 같은게 없고 var, let, const 가 있나 했다

모든 데이터는 바이트 단위의 식별자 즉,메모리 주솟값을 통해 서로 구분하고 연결 한다.

1-2-2 식별자와 변수

변수(variable)
이라는 말과 같이 즉 '변할수 있는 데이터'
식별자 (identifier)
어떤 데이터를 식별할때 사용, 즉 '변수명'

변수 선언과 데이터 할당

1-3-1 변수선언 동작원리

//변할수 있는 데이터를 만든다. 이 데이터의 식별자를 a로 한다.
var a;

컴퓨터는 메모리에서 비어있는 공간 하나를 확보해 그 공간의 이름(식별자)를 a라고 지정 합니다. 여기 까지가 변수 선언 과정! 사용자가 a에 접근하고자 할때 컴퓨터는 a라는 이름을 가진 주소를 검색해 그 공간의 데이터를 반환.

1-3-2 데이터 할당

var a;
var a ='abc';
a = 'abc';

위와 같이 데이터가 할당 된다면 a라는 이름을 가진 주소를 검색해서 그곳에 'abc'할당 하면 될거 같다고 생각할 것이다. 그러나! 실제로는 해당 위치에 문자열'abc'를 직접 저장하지 않는다.데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 'abc'를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이루어진다.
변수 영역과 데이터 영역으로나누어져 변수영역에 식별자와 데이터의 주소가 저장된다.

왜 변수 영역에 값을 직접 대입하지 않고 굳이 한 단계를 더 거치는 걸까?

1. 데이터 변환을 자유롭게 할 수있다.
2. 1의 이유로 메모리를 더욱 효율적으로 관리할 수있다.
3. 중복된 데이터를 재사용 할 수있다.

만약, 문자열 'abc'의 마지막에 'def'를 추가한다면 컴퓨터는 'abc'가 저장된 공간에 'abcdef'를 할당하는 대신 'abcdef'라는 문자열을 새로 만들어 별도의 공간에 저장하고, 그 주소를 변수 공간에 연결한다.다른예로 500개의 변수를 생성해서 모든 변수에 숫자 5를 할당한다면 500개의 변수 영역을 할당한 뒤 5를 별도의 데이터 영역에 저장한 후 해당 주소만 할당해주면 중복된 데이터에 대한 처리 효율이 높아진다.

기본형 데이터와 참조형 데이터

변수와 상수를 구분하는 성질은 변경 가능성.
변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역(식별자,데이터가 담긴 공간) 메모리 이다. 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지. 반면 불변성 여부를 구분할때는 데이터 영역(데이터가 담긴 공간)메모리가 대상.

1-4-1 불변값

데이터 영역에 저장되는 값

불변성

var a = 'abc;
a = a + 'def';
var b = 5;
var c = 5;
b = 7;

변수 a에 'abc'를 할당했다가 그 뒤에 'def'가 추가된 'abcdef'로 바뀌는 것이 아니라 새로운 문자열 'abcdef'를 데이터 영역에 만든후 그 주소를 변수 a에 저장합니다.
변수 b에 5데이터 든 주소를 할당한 후 변수 c에서 다시 같은 수인 5를 할당하려고 할때, 컴퓨터는 데이터 영역에서 5를 찾아서 이미 많들어 놓은 값이 잇으니 그 주소를 재활용합니다. 변수 b의 값을 7로 바꿀때, 기존에 저장된 5를 7로 바꾸는게 아니라 데이터 영역에서 7을 찾은 후 없으면 새로 만들어 b에 저장.
이처럼 한번 만들어진 'abc' , 5 를 직접적으로 바꾸지 않고, 다른 값으로 변경 되지 않습니다.
변경은 새로 만드는 동작을 통해서만 이뤄집니다.

1-4-2 가변값

변수 영역에 저장되는 값

var obj1 ={ //@1002 (이름: obj1, 값:@5001) -> 여긴 안변함.
//@5001:@7103 @7104
  a : 1,	//@7103		(이름:a , 값:@5003) ->여긴 변함
  b : 'bbb'  //@7104		(이름:b, 값:@5004) -> 여긴 변함
};
//@5003 :1
//@5003 : 'bbb'

obj1.a = 2; //@7103		(이름:a , 값:@5005)
//@5005 : 2

변수영역에 주소 1002에 이름은 obj1을 할당한다. 데이터가 여러 개인 데이터 그룹이기 때문에 별도의 변수 영역을 마련하고, 그영역의 주소(@7103~ @7104)를 @ 5001에 저장한다. @7103 , @7104에 각각 a, b라는 이름을 지정하고 데이터 1 과 'bbb'를 임의의 데이터 영역에 저장하고 그 주소를 @7103 , @7104에 저장한다.
obj1의 a에 숫자 2를 할당하려고 할때, 데이터 영역에 2를 검색한후 결과가 있다면 그곳의 주소를 없다면 빈공간에 저장후 그 주소 (@5005)를 @7103에 저장한다.
변수 obj1이 바라보고 있는 주소 @5001은 변하지 않는다 기존 객체의 내부의 값만 바뀐다

참조 카운터가 0인 메모리 주소는 가비지 컬렉터의 수거 대상이 된다. 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.

1-4-3 변수 복사 비교

기보녕 데이터와 참조형 데이터의 차이를 확인해 보자.

변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.

'가변'은 참조형 데이터 자체를 변경할 겨우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립한다.

불변 객체

불변 객체는 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우에 필요하다.

얕은 복사

var copyObject = function (target) {
  	var result = {};
  	for (var prop in target) {
      result[prop] = target[prop];
    }
  	return result
};

깊은 복사를 수행하는 범용 변수

var copyObjectDeep = function(target){
  	var result = {};
  	if( typeof target === 'object' && target !== null) {
      for (var prop in target) {
        	result[prop] = copyObjectDeep(target[prop]);
      }
    } else {
      	result = target;
    }
  	return result;

얕은 복사는 바로 아래 단계의 값만 복사 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다.원본과 사본 모두 동일한 참조형 데이터의 주소를 가리키게 된다
어떤 객체를 복사할 때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 할 때, 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에는 그대로 복사 하면되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사
해야 깊은 복사 가된다.

JSON 이용 깊은 복사 처리하기
객체를 JSON 으로 표현된 문자열로 전환했다가 다시 JSON객체로 바꾸는 법.
다만 메서드나 숨겨진 프로퍼티인 __proto__ 나 getter/setter 등과 같이 JSON으로 변경할수 없는 프로퍼티 들은 무시.
httpRequest로 받은 데이터를 복사할때 등 순수한 정보 다룰 때 활용하기 좋은 방법

var copyObjectViaJSON = function (Target) {
  	return JSON.parse(JSON.stringfy(target));
};

undefined와 null

undefined
값이 존재하지 않을때 직접 undefined을 할당 하지 말자.
자바스크립트 엔진이 undefined을 할당하는 경우

• 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근.
• 객체 내부의 존재하지 않는 프로퍼티에 접근
• return 문이 없거나 호출되지 않는 함수의 실행 결과

null
비어있음을 명시적으로 나타내고 싶을때

📃 정리

JS가 데이터를 처리하는 과정을 자세하게 알아봤다. 간단하게는 변수와 식별자의 차이점 부터 변수 선언시 어떤식으로 동작 되는지. 기본형 데이터와 참조형 데이터의 변수 선언 시 메모리영역이 어떻게 동작 하는지에 대해 알 수있엇다