JavaScript - 데이터타입

17 Apr 2021

JavaScript - 데이터타입

데이터 타입의 종류

✅ 기본형(Primitive type)_immutability(불변성)

값이 담긴 주솟값을 바로 복제
- 숫자(number)
- 문자(string)
- 참과거짓(boolean)
- unll
- undefined
- symbol (ES6 추가)
✅ 참조형(Reference type)

값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제
- Object
  - 배열(Array)
  - 함수(Function)
  - 날짜(Date)
  - 정규표현식(RegExp)
  - Map, WeakMap (ES6 추가)
  - Set, WeakSet (ES6 추가)

메모리 & 데이터

비트(bit) : 0 또는 1만 표현할 수 있는 하나의 메모리 조각
메모리 : 매우 많은 비트들로 구성, 각 비트는 고유한 식별자를 통해 위치 확인 가능
바이트(byte): 1바이트 8개의 비트로 구성 ❗️모든 데이터는 바이트 단위의 식별자, 메모리 주솟값을 통해 서로 구분하고 연결

변수 & 식별자

변수(Variable)

변할 수 있는 “무언가”(* 무언가 = 데이터)
식별자(Identifier)

어떤 데이터를 식별하는데 사용하는 이름(* = 변수명)

변수선언 & 데이터 할당

변수선언

var a;

=> 변할 수 있는 데이터를 만든다 / 데이터의 식별자는 a로 한다 => “변경 가능한 데이터가 담길 수 있는 공간 또는 그릇”

데이터 할당

var a; // 변수 선언
a = "abc"; // 데이터 할당
//
var a = "abc"; // 변수 선언 + 데이터 할당

:: 왜 변수 영역에 값을 직접 대입하지 않고 굳이 번고롭게 한 단계를 더 거치는 이유❓

데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효울적으로 관리하기 위해서

이미 입력된 값이 변경되어, 차지하는 공간이 늘어나는 경우, 이미 저장된 데이터의 위치를 전부 이동시키고, 이동시킨 주소를 각 식별자에 다시 연결해야 하는 작업에 불필요한 연산 발생
입력한 변수가 변경되는 경우, 기존의 동일 공간에 할당하지 않고, 새로운 공간에 저장-> 새로운 주소를 기존 식별자(변수명)에 연결

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

불변값

기본형 데이터(숫자, 문자열, boolean, null, undefined, symbol)

불변성의 여부를 구분할 때의 변경 가능성의 대상 => 데이터 영역 메모리
가변값

참조형 데이터

설정에 따라 변경 불가능한 경우 or 아예 불변값으로 활용

변수 복사 비교

var a = 10;
var b = a;

var obj1 = { c: 10, d: "ddd" };
var obj2 = obj1;

기본형 데이터

변수 영역의 빈 공간을 확보하고, 식별자를 a로 지정
데이터 영역에서 10을 검색하고, 없으면 빈 공간에 저장한 다음 주소 입력
복사
- 변수 영역 빈 공간을 확보하고, 식별자를 b로 지정
- 식별자 a 검색
- 확보해둔 변수 영역에 값 대입

👉🏻 재할당되는 변경된 값의 메모리 주소가 변경되어, 기존 변수에 영향 X

참조형 데이터

변수 영억의 빈공간을 확보하고, 식별자를 obj1로 지정
데이터의 영역의 빈 공간을 확보하고, 데이터 그룹이 담겨야 하기 때문에 별도의 변수 영역을 확보해 주소 저장
데이터 검색 후, 저장되어 있으면 주소를 변수 영역에 저장, 없는 데이터는 데이터 영역의 빈 공간에 새로 만들어서 연결
복사
- 변수 영역의 빈 공간을 확보하고, 식별자를 obj2를 지정
- 식별자 obj1를 검색한 뒤, 데이터 영역을 들고 변수 영역 주소에 대입

👉🏻 해당 객체(obj2) 내 값들의 복사 과정은 동일하지만, 데이터 할당 과정에서 이미 차이가 있기 때문에 변수 복사 이후의 동작에도 큰 차이 발생
🔥 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 하기 때문에, 자바스크립트의 모든 데이터 타입은 참조형 데이터 !
🔥 다만 기본형은 주솟값을 복사하는 과정이 한 번만 / 참조형은 한 단계를 더 거치는 과정의 차이
🚀 참조형 데이터가 “가변값”이라고 설명할 때의 “가변”은 참조형 데이터 자체를 변경할 경우❌ => 그 내부의 프로퍼티를 변경할때만 성립

불변객체

내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 객체의 불변성 확보
불변객체 만드는 법

새로운 객체를 반환하는 함수 수정or생성 -> 서로 다른 객체 생성
얕은 복사(Shallow copy)

바로 아래 단계의 값만 복사하는 방법

주솟값만 복사하기 때문에 원본과 사본은 동일한 참조값을 가리키게 된다 (= 원본이 바뀌면 사본도 바뀌고, 사본이 바뀌면 원본도 바뀐다)

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

깊은 복사(Deep copy)

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

참조형 데이터는 다시 그 내부의 프로퍼티들을 복사(= 참조형 데이터가 있을 때 마다 재귀적으로 수행해야만 비로소 깊은 복사)

var copyObjectDeep = functon(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 === ‘object’인 경우 내부 프로퍼티들을 순회하며 copyObjectDeep함수를 재귀적으로 호출
⑦, ⑧ : object가 아닌 경우, target을 그대로 지정
객체를 복사한 다음에는 원본과 사본이 서로 완전히 다른 객체를 참조하게 되어 어느 쪽의 프로퍼티를 변경하더라도 다른 쪽에 영향 X
간단한 깊은 복사 방법

객체를 JSON 문법으로 표현된 문자열로 전환했다가, 다시 JSON 객체로 변환

단, 메서드(함수)나 숨겨든 프로퍼티인 ‘proto‘나 ‘getter/setter’ 등 JSON으로 변경할 수 없는 프로퍼티들은 모두 무시

httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 순수한 정보만 다를 때 유용

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

Undefined & Null

undefined : 어떤 변수에 값이 존재하지 않을 경우
null : 사용자가 명시적으로 ‘없음’을 표현하기 위해 대입한 값

참고 : 코어 자바스크립트(Core JavaScript), 정재남

javascript