자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 적절히 활용 할 수 있게 되는 것을 목표로 합니다.

데이터 타입의 종류

자바스크립트 데이터 타입에는 기본형과 참조형이 있다.

기본형

• 숫자
• 문자열
• 불리언(boolean)
• null, undefined
• 심볼(symbol:ES6에서 추가)

참조형

• 객체(object)
• 함수
• 날짜
• 배열
• 정규표현식
• Map, WeakMap, Set, WeakSet등

💡Tip

기본형은 값이 담긴 주소값을 바로 복제!, 참조형은 값이 담긴 주소값들로 이루어지 묶음을 가리키는 주소값을 복제한다.

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

메모리와 데이터

컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억한다. 0 또는 1로 이루어진 하나의 메모리 조각을 비트(bit)라고 한다. 많이 비트를 한 단위로 묶으면 시간을 줄일 수도 있고 표현할 수 있는 데이터의 개수도 늘어나지만 낭비되는 비트도 생긴다. 그래서 비트를 한 단위로 묶으면 표현할 수 있는 값도 늘어나고 효율적이다. 이렇게 8개의 비트로 이루어진 바이트(byte)가 생겨났다. 1바이트는 2^8, 총 256개의 값을 표현 할 수 있다.

식별자와 변수

식별자와 변수를 혼용하는 경우가 많으나 둘은 다른 개념이다.

변수

말 그대로 '변할 수 있는 수'다. 정확히 말하면 '변할 수 있는 데이터' 이다.

식별자

어떤 데이터를 식별하는데 사용하는 이름, 즉 변수명이다.

데이터 할당

var a;
a= 'abc';

var a = 'abc'

위 코드 데이터 할당 과정은 변수를 선언 한 후 데이터를 할당한다. 데이터를 저장하기 위해서 메모리 공간을 확보하고 'abc'라는 데이터를 주소 영역에 저장하는 방식이다.

과정은 이렇다

1. 변수 영역에서 빈공간 확보
2. 확보한 공간 식별자 a로 지정
3. 데이터 영역의 빈 공간에 문자열 'abc'를 저장한다.
4. 변수 영역에서 a라는 식별자를 검색한다.
5. 앞서 저장한 문자열의 주소를 1003의 공간에 저장한다.

내가 생각한 데이터 할당이란 ?

변수를 저장할때는 모든 것을 쪼개서 저장한다고 생각하면 쉬울꺼 같다. (식별자 + 식별자에 부여된 값, 그리고 데이터)

데이터를 할당을 이러한 방법으로 하는 이유는 ?

미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 '확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업을 해야된다.' 만약 뒷쪽 데이터를 늘린다면 뒷쪽 공간만 늘리면 되겠지만 중간에 늘려야되는 상황이라면 중간에 데이터를 전부 뒤로 옮기고 이동시킨 주소를 각 식별자에 다시 연결해야된다. 이러한 이유로 변수와 데이터를 변도의 공간에 나누어 저장하게 된것이다.

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

불변값

변수와 상수를 구분하는 성질은 '변경가능성'이다. 여기서 불변값과 상수는 같은 개념으로 오해하기 쉽지만 이둘은 명확히 구분할 필요가 있다. 변수와 상수를 구분 짓는 변경 가능성의 대상은 메모리이다. 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 없는지 여부가 관건이다. 불병성의 여부를 구분할 때의 가능성의 대상은 데이터 영역의 메모리이다.

var a = 'abc';
a = a + 'def';

var b = 5;
var c = 5;
b = 7;

위 코드에서 'abc'를 할당 하였다가 뒤에 'def'를 추가하면 기존에 데이터에서 바뀌는 것이 아닌 새로운 문자열 'abcdef'를 만들어 그 주소를 메모리에 저장한 완전 별개의 데이터가 된다.

가변값

기본형 데이터는 모두 불변값이라고 했다. 그렇다면 참조형 데이터는? 기본적인 성질은 가변값이 경우가 많지만 설정에 따라 변경 불가능한 경우도 있고 불변값으로 활용하는 방법도 있다. 참조형 데이터 할당의 예시를 밑에서 설명하겠다.

var obj = {
	a: 1,
  	b: 'bbb'
}

1. 변수영역 데이터 빈 공간 확보후 obj1으로 지정
2. 여러개의 프로퍼티로 이뤄진 데이터 그룹 별도의 변수공간 생성
3. a,b 라는 프로퍼티 이름 지정
4. 숫자 1과 'bbb'도 객체 변수 영역에 저장

중첩된 참조형 데이터 프로퍼티 할당

var obj = {
	x:3,
  	arr: [3,4,5]
}

1. obj이름의 빈 공간 확보
2. obj 그룹 프로퍼티들을 저장하기 위해 별도의 변수 영역 생성
3. 그룹 프로퍼티에서의 arr 의 배열 변수 영역 생성
4. 배열의 요소가 3개이므로 각각 인덱스를 부여
5. 데이터 영역에서 3을 검색하여 그 주소를 저장
6. 데이터 영역에 4가 없으므로 새로운 데이터영역에 저장을 하고 그 주소를 배열 변수영역에 저장
7. 데이터 영역에 5가 없으므로 새로운 데이터영역에 저장을 하고 그 주소를 배열 변수영역에 저장

💡Tip 가비지 컬렉팅

자신의 주소를 참조하는 변수가 하나도 없게되는 경우, 메모리 주소는 가비지 컬렉터의 수거 대상이다. 수거된 메모리는 다른 새로운 값을 할당할 수 있는 빈 공간이 된다.

변수 복사

변수를 복사하는 과정은 기본형이나 참조형 모두 같은 주소를 바라보게 된다는 점에서 동일하다. 하지만 데이터 할당 과정에서 차이가 있기 때문에 이후 동작에서는 차이가 난다.

var a = 1;
var b = a;
var obj1 = {c: 1, d:'abc'};
var obj2 = obj1;

b = 2 // a ! ==b
obj.2 = 2 // obj1 === obj2 

변수 b의 값을 바꾸면 b의 값만 달라져서 a와 다른 주소를 바라보게 되지만, 참조형 데이터를 복사한 변수는 그 프로퍼티 값이 바뀌기 때문에 여전히 같은 객체를 바라보게 된다. 이것이 기본형과 참조형 데이터의 큰 차이점이다. 기본형은 주소값을 복사하는 과정이 한 번만 이루어지고, 참조형은 한 단계 더 거쳐간다는 것에 차이가 있다.

💡Tip

참조형 데이터가 가변값이라는 것은 참조형 데이터를 직접 변경하는 것이 아니라 그 내부의 프로퍼티를 변경할때만 성립한다.

얕은 복사 vs 깊은 복사

불변 객체

불변 객체는 값으로 전달받은 객체에 변경을 가하더라도 원본은 변하면 안되는 경우게 필요하다.

모든 프로퍼티를 복사하는 함수(얕은 복사)

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

위 함수를 이용하여 객체를 복사하면 아래와 같다.

var user = {
  name: '김승찬',
  gender: '남'
}

var user2 = copyObject(user);
user2.name = '찬';

console.log(user.name, user2.name); // 김승찬 찬
console.log(user === user2); // false

얕은 복사는 바로 아래 단계의 값만 복사하기 때문에 객체에서의 참조형 데이터가 저장된 프로퍼티를 복사하면 기 주솟값만 복사하게 된다. 객체를 복사할 때, 기본형 데이터일때는 그대로 복사하면 되지만 참조형 데이터의 경우 그 내부의 프로퍼티를 복사해야된다.

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;
}

target이 객체인 경우에만 프로퍼티를 순회 coptObjectDeep 함수를 재귀적으로 호출하고 아닌 경우에는 target 값이 그대로 리턴된다. 이렇게 깊은 복사를 하면 원본과 사본이 완전히 다른 객체를 참조하게 되어 어떤 프로퍼티를 변경하더라도 영향이 가지 않는다.