1-1. 데이터 타입의 종류

• 데이터 타입은 크게 참조형과 기본형으로 나뉜다.

  • 참조형
    • 객체 - 배열, 함수, Date, 정규식, Map, WeakMap, Set, WeakSet
    • 참조형에는 객체가 있고 그 하위분류로 위와같이 들어간다.
  • 기본형
    • 숫자, 문자열, 불리언, null, undefined 등

• 데이터 타입은 어떤 기준으로 구분하는 걸까?

  • 기본형
    • 할당이나 연산 시 복제된다.
    • 불변성을 띈다.
  • 참조형
    • 할당이나 연산 시 할당하며, 주솟값들로 이루어진 묶음을 복제한다.

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

<aside> 💡 Javascript에서 모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.

</aside>

• 메모리와 데이터

  고작 0과 1만 표현할 수 있는 비트 단위로 위치를 확인하는 것은 매우 비효율적이다.

  비트를 몇 개씩 묶어 한 단위로 여긴다면 표현할 수 있는 값도 늘어나면서 동시에 검색 시간도 줄일 수 있다.

  낭비되는 데이터 없이 적절하게 묶은 단위가 8개의 비트로 구성된 바이트(byte) 이다.

  • 비트 bit
    • 컴퓨터는 이진수인 0과 1로 이루어져있다.
    • 이진수로 나타내는 정보의 최소 단위이다.
  • 바이트
    • 8개의 비트로 구성되어있다.
    • 0 ~ 255 사이의 값을 나타낼 수 있다.

1-2-2 식별자와 변수

<aside> 💡 식별자와 변수는 혼용하는 경우가 많다. 둘의 차이를 모른다면 혼란스러울 수 있다.

</aside>

• 변수
  • 변할 수 있는 수. (변할 수 있는 무언가)
• 식별자
  • 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명(변수의 이름)

1-3-1 변수 선언

var a;

• 선언할 때는 undefined이더라도 나중에 다른 값으로 바꾸면 된다.
• 즉, 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이다.

1-3-2 데이터 할당

var a; // 변수 a 선언
a = 'abc' // 변수 a에 데이터 할당

var a = 'abc' // 변수 선언과 할당을 한 문장으로 표현

• 데이터 할당의 전체 흐름
  1. 변수 영역에서 빈 공간 @1003을 확보한다.
  2. 확보한 공간의 식별자를 a로 지정한다.
  3. 데이터 영역의 빈 공간 @5004 에 문자열 ‘abc’를 저장한다.
  4. 변수 영역에서 a라는 식별자를 검색한다@1003
  5. 앞서 저장한 문자열의 주소 @5004를 @1003의 공간에 대입한다.

1-4-1 불변 값

• 변수와 상수를 구분하는 성질은 말그대로 변경 가능성 이다.
• 불변값 vs 상수
  • 불변값과 상수는 같은 개념으로 혼동하기 쉬운데 이 둘의 차이점을 명확히 알아야 한다.
  • 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.
  • 기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 모두 불변값이다.
    • 데이터 영역을 수정하는 것이 아닌 새로 생성하는 것.
    • 한번 만들어진 데이터 영역의 값은 가비지 컬렉팅을 당하지 않는 이상 영원히 변하지 않는다.

1-4-2 가변 값

• 참조형 데이터를 할당하는 과정

  <aside> 💡 기본형 데이터와의 차이는 객체의 변수 영역이 별도로 존재한다.

  아래 예시를 보면 객체가 별도로 할애한 영역은 변수 영역일 뿐 데이터 영역은 기존의 메모리 공간을 그대로 활용하고 있다. 데이터 영역에 저장된 값은 모두 불변값이다. 그러나 변수영역에는 다른 값을 얼마든지 대입할 수 있다. 바로 이 부분 때문에 참조형 데이터는 불변하지 않다. (가변값이다.)

  </aside>

  var obj1 = {
  	a: 1,
  	b: 'bbb',
  };
  

  변수 영역	주소	1001	1002	1003	1004	…
  	데이터		이름 : obj1
  값 : @5001
  데이터 영역	주소	5001	5002	5003	5004	…
  	데이터	@7103 ~ ?		1	‘bbb’
  객체 @5001의 변수 영역	주소	7103	7104	7105	7106	…
  	데이터	이름 : a
  값 : @5003	이름 : b
  값 : @5004

  1. 컴퓨터는 우선 변수 영역의 빈공간 @1002 을 확보하고 그 주소의 이름을 obj1로 지정한다.
  2. 임의의 데이터 공간 @5001 에 데이터를 저장하려고 보니 여러 개의 프로퍼티로 이뤄진 데이터의 그룹이다. 이 그룹 내부의 프로퍼티들을 저장하기 위해 별도의 변수 영역을 마련하고, 그 영역의 주소 (@7103 ~ ?) 를 @5001에 저장합니다.
  3. @7103 및 @7104에 각각 a와 b라는 프로퍼티 이름을 지정한다.
  4. 데이터 영역에서 숫자 1을 검색한다. > 검색 결과가 없으므로 @5003 에 저장하고, 이 주소를 @7103 에 저장한다. 문자열 ‘bbb’역시 임의로 @5004 에 저장하고, 이 주소를 @7104 에 저장한다.

• 가비지 컬렉터로 가는 순간

  • 어떠한 데이터에 대해 자신의 주소를 참조하는 변수의 개수를 참조 카운트라고 한다.
  • 참조 카운트가 0인 경우 가비지 컬렉터의 수거 대상이 된다.
  • 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때 자동으로 수거 대상들을 수거한다.

1-4-3 변수 복사 비교

• 기본형은 값을 복사하고 참조형은 주솟값을 복사한다고 설명하지마나 엄밀히 따지면 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야하기 때문에 자바스크립트의 모든 데이터 타입은 참조형 데이터일 수밖에없다.
• 기본형은 복사 과정이 한 번만 이뤄지고, 참조형은 한 단계 더 거치게 된다는 차이

1-5-1 얕은 복사와 깊은 복사

• 얕은 복사 : 바로 아래 한단계의 값만 복사하는 방법

• 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법

• 중첩된 객체에서 얕은 복사

  var user = {
  	name: 'chul',
  	urls: {
  		portfolio: '<http://github.com/abc>',
  		blog: '<http://blog.com>',
  		facebook: '<http://facebook.com/abc>',
  	}
  };
  
  var user2 = copyObject(user);
  
  user2.name = 'sujin';
  
  // 바로 아래 단계에 대해서는 불변성을 유지하기 때문에 값이 달라지죠.
  console.log(user.name === user2.name); // false
  
  // 더 깊은 단계에 대해서는 불변성을 유지하지 못하기 때문에 값이 같아요.
  // 더 혼란스러워 지는거죠 ㅠㅠ
  user.urls.portfolio = '<http://portfolio.com>';
  console.log(user.urls.portfolio === user2.urls.portfolio); // true
  
  // 아래 예도 똑같아요.
  user2.urls.blog = '';
  console.log(user.urls.blog === user2.urls.blog); // true
  

• 중첩된 객체에서 깊은 복사하기

  var user = {
  	name: 'wonjang',
  	urls: {
  		portfolio: '<http://github.com/abc>',
  		blog: '<http://blog.com>',
  		facebook: '<http://facebook.com/abc>',
  	}
  };
  
  // 1차 copy
  var user2 = copyObject(user);
  
  // 2차 copy -> 이렇게까지 해줘야만 해요..!!
  user2.urls = copyObject(user.urls);
  
  user.urls.portfolio = '<http://portfolio.com>';
  console.log(user.urls.portfolio === user2.urls.portfolio);
  
  user2.urls.blog = '';
  console.log(user.urls.blog === user2.urls.blog);
  

• 결론

  결국에는 중첩된 참조형 데이터는 재귀 방식으로 모두 복사하는 것이 정답이다.

  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.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 다시 JSON.parse() 함수를 사용하여 새로운 객체를 생성하기 때문에, 원본 객체와 복사본 객체가 서로 독립적으로 존재한다. 따라서 복사본 객체를 수정해도 원본 객체에 영향을 미치지 않는다.
    • JSON을 이용한 깊은 복사는 다른 깊은 복사 방법에 비해 코드가 간결하고 쉽게 이해할 수 있다.

  • 단점

    • JSON을 이용한 깊은 복사는 원본 객체가 가지고 있는 모든 정보를 복사하지 않는다. 예를 들어 함수나 undefined와 같은 속성 값은 복사되지 않는다.
    • JSON.stringify() 함수는 순환 참조 (Recursive Reference)를 지원하지 않는다. 따라서 객체 안에 객체가 중첩되어 있는 경우, 이 방법으로 복사할 수 없다.

  • 결론

    JSON을 이용한 깊은 복사는 객체의 구조가 간단하고, 함수나 undefined 와 같은 속성 값이 없는 경우에 적합한 방법이다. 만약 객체 구조가 복잡하거나 순환 참조가 있는 경우에는 다른 깊은 복사 방법을 고려해야 한다.

1-6 undefined와 null

• 둘 모두 없음 을 나타내는 값이다.
• 하지만 미세한 차이가 있고 목적이 다르다.

1. undefined