코어자바스크립트 - 데이터 타입

김동하·2021년 1월 19일
0
post-thumbnail

데이터 타입

기본형(원시형)

  • 숫자, 문자열, boolean, null, undefined, ES6 이후 심볼 추가
  • 할당이나 연산시 복제된다.
  • 기본형은 값이 담긴 주솟값을 바로 복제
  • 기본형은 모두 불변값

참조형

  • 객체, 배열, 날짜, 정규표현식, ES6 이후 map, set
  • 할당이나 연산시 참조된다.
  • 참조형은 값이 담긴 주솟값들도 이루어진 묶음을 가리키는 주솟값을 복제

메모리 구조

실제 자바스크립트의 메모리 구조

--> 지정된 공간보다 데이터가 더 추가되면 메모리는 어떻게 되는지?

변수

  • 변경 가능한 데이터가 담길 수 있는 공간

식별자

  • 그 변수의 이름을 말한다

메모리 주솟값

  • 0, 1만 표현할 수 있는 하나의 메모리 조각을 비트라고 함
  • 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있다.
  • 효율적인 검색을 위해 비트를 묶어 바이트로 만듦
  • 모든 데이터는 바이트 단위 식별자, 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.
  • 식별자는 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명이다.

선언과 할당

let a; // 변수 a를 선언 or 이 데이터의 식별자는 a로 한다
a = "abc" // 변수 a에 데이터 할당

let a = "abc" // 변수 선언과 할당을 한 문장으로 표현
  • 변수를 선언하면 컴퓨터는 메모리의 빈 공간에 식별자를 저장하고, 그 공간의 값은 undefined를 할당한다.
  • 그 변수에 기본형 데이터를 할당하려고 하면 별도의 공간에 데이터를 저장, 그 공간의 주소를 변수의 값 영역에 할당.
  • 참조형 데이터를 할당하고자 할 경우 참조형 데이터 내부 프로퍼티들을 위한 변수 영역을 별도로 확보해서 확보된 주소를 변수에 연결, 다시 확보한 변수 영역에 각 프로퍼티의 식별자를 저장하고, 각 데이터를 별도의 공간에 저장해 그 주소를 식별자들과 매칭

기본형 데이터 할당 과정

  • [주소, 데이터] 로 묶인 셀(key, value) 있고 선언된 식별자 (여기서는 var a)를 key로 줌.
  • 식별자에 값을 할당하게 되면 (var a = 'abc') 다른 메모리에 저장하고 변수 a가 가리키는 주소의 값으로 할당된 값이 저장된 주소를 줌
  • 여기서 변수 a에 다른 값을 할당하면 다른 메모리 주소에 할당하고 변수 a가 가리키는 주소의 값을 변경

참조형 데이터 할당 과정

var obj = {
  a: 1,
  b: "abx"
}
  • 위처럼 써도 컴퓨터는 선언과 할당을 분리함. 기본형과 동일하게 메모리에 키(이름)에 식별자 저장한다
  • 객체의 프로퍼티를 저장해야 하는데, 메모리는 하나의 값만 저장된다. 그래서 메모리를 하나 확보하고 그 메모리에서 다시 일정한 구간의 메모리들을 확보한다.
  • 가령 1002에 [이름:obj, 값: 5002], 그리고 5002에서 obj에 대한 메모리 구역을 확보, 5003에 1할당, 7103에 [이름:a, 값 @5003] 으로 할당하는 식.
obj.a = 2
  • 위처럼 새로운 값을 할당하게 되면 우선 5005에 [2]을 만듦. 이제 obj.a를 찾으면 obj가 5002를 가리키고 있고 5002로 가면 7103이 있고. 7103에 있는 a 프로퍼티를 찾음
  • 7103의 주소를 5005로 바꿈

즉, 기본형의 경우는 주소값이 변하지만 참조형에서 프로퍼티 값을 변경하면 주소는 변하지 않음.

가비지 컬렉터

  • 중첩 객체의 경우, 참조 할당 과정을 두 번 거침
  • 만약 중첩 객체였던 프로퍼티에 [3, 4, 5] 를 'str'으로 할당하게 되면 주소값이 변경되면서 기존의 [3, 4, 5]에 대한 참조 대상이 사라짐. 이렇게 되면 GC에 수거대상이 됨

불변 객체

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

복사

var a = 10
var b = a

-기본형의 경우, 둘 다 동일한 주소값을 가지게 됨

  • 동일하게 참조형의 경우에도 둘 다 동일한 주소값을 가지게 됨

하지만 변경 시에는 다름

b = 15
obj2.c = 20
  • 불변의 경우 a, b가 보는 주소값이 달라짐
  • 참조의 경우, obj2가 보는 주소값이 아니라, 내부 프로퍼티가 보는 주소값을 변경하는 것이기 때문에 obj1, obj2는 여전히 같은 주소를 봄 --> 원본 객체의 값이 같이 변경됨

기본형은 주소값을 복사하는 과정이 한번, 참조형은 한 단계 더

얕은 복사와 깊은 복사

  • 얕은 복사는 바로 아래 단계만 복사, 깊은 복사는 내부의 모든 값들을 하나하나 다 복사
  • 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미
  • 그러므로 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 된다.
  • 깊은 복사는 참조형 데이터의 경우 다시 그 내부의 프로퍼티들을 복사해야 한다.

undefined와 null

  • 사용자가가 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제 값이 없을 때 undefined 반환
  • null은 사용자가 명시적으로 "없음"을 나타내기 위해 대입한 것

참고 : 코어자바스크립트

profile
프론트엔드 개발

0개의 댓글