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 에 저장한다.

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

1-4-3 변수 복사 비교

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

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

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

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

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

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

• 결론

• 추가적인 방법

1-6 undefined와 null

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

1. undefined