🌈 Chapter 1: 데이터 타입

📚 데이터 타입의 종류

• 기본형(원시형)
  • 숫자, 문자열, 불리언(boolean), null, undefined, Symbol(ES6)
• 참조형
  • 객체, 배열, 함수, 날짜, 정규표현식
  • ES6: Map, WeakMap, Set, WeakSet
• 기본형과 참조형을 구분하는 기준은 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

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

🎈 메모리와 데이터

• 각 비트는 고유한 식별자를 지닌다. 바이트 역시 시작하는 비트의 식별자로 위치를 파악한다.
• 모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.

🎈 식별자와 변수

• 변수는 변할 수 있는 수로 값이 반드시 숫자여야 하는 것은 아니다. 즉, 변할 수 있는 무언가라는 뜻으로, 여기서 무언가란 데이터를 말한다. 숫자, 문자열, 객체, 배열 등등.
• 식별자는 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명이다.

📚 변수 선언과 데이터 할당

🎈 변수 선언

var a;

• 위 예는 *변할 수 있는 데이터를 만든다. 이 데이터는 식별자는 a로 한다.*라고 말할 수 있다.
• 변수란 결국 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 할 수 있다.
• 예제의 명령을 받은 컴퓨터는 메모리에서 비어있는 공간 하나를 확보한다. 그 공간을 임의로 1003번으로 정했다. 이 공간의 이름(식별자)을 a라고 지정한다. (변수 선언 과정)
• 이후 사용자가 a에 접근하고자 하면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환한다.

🎈 데이터 할당

• 변수 선언과 할당

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

var a = 'abc'; // 선언과 할당을 한 문자으로 표현

• 자바스크립트에서 할당은 실제로는 해당 위치에 문자열 abc를 직접 저장하지 않는다.
• 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 abc를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이뤄진다.

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

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

• 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위한 고민의 결과이다.
• 만약 미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업이 선행되어야 한다.
• 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적이다.
• 문자열 abc의 마지막에 def를 추가하라고 하면 컴퓨터는 앞서 abc가 저장된 공간에 abcdef를 할당하는 대신 abcdef라는 문자열을 새로 만들어 별도의 공간에 저장하고 그 주소를 변수 공간에 연결한다. 어떤 변환을 가하든 상관 없이 무조건 새로 만들어 별도의 공간에 저장한다.
• 기존 데이터는 자신의 주소를 저장하는 변수가 하나도 없게 되면 가비지 컬렉터(GC)의 수거 대상이 된다.
• 또한, 예를 들어 500개의 변수를 생성해서 모든 변수에 숫자 5를 할당하는 상황이라면 이 경우는 5를 별도의 공간에 한 번만 저장하고 해당 주소만 입력해준다. 그렇기 때문에 중복된 데이터에 대한 처리 효율이 높아지게 되는 것이다.

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

🎈 불변값

• 변수와 상수를 구분하는 성질은 변경 가능성이다.
• 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다. 즉, 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건이 된다.
• 반면 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.
• 기본형 데이터는 모두 불변값이다.

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

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

• 변수 a에 문자열 abc를 할당했다가 def를 추가하면 기존의 abc가 abcdef로 바뀌는 것이 아니라 새로운 문자열 abcdef를 만들어 그 주소를 변수 a에 저장한다. 즉, abc와 abcdef는 완전히 별개의 데이터이다.
• 변수 b에 숫자 5를 할당하는데 컴퓨터는 데이터 영역에서 5를 찾고 없으니 데이터 공간을 하나 만들어 저장한 뒤 그 주소를 b에 저장한다. 변수 c는 변수 b와 같은 수인 5를 할당하려고 한다. 컴퓨터는 데이터 영역에서 5를 찾고 이미 5가 존재하니 그 주소를 재활용한다.
• 변수 b를 7로 바꾸고자 한다. 그러면 기존에 저장했던 7을 찾아서 있으면 재활용하고, 없으면 새로 만들어 b에 저장한다.
• 결국 5와 7 모두 다른 값으로 변경할 수 없다.
• 이처럼 문자열 값도 한 번 만든 값을 바꿀 수 없고, 숫자 값도 다른 값으로 변경할 수 없다. 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

🎈 가변값

• 참조형 데이터의 할당

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

• 다음은 참조형 데이터를 변수에 할당하는 과정이다.

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

• 기본형 데이터와의 차이는 객체의 변수 영역이 별도로 존재한다는 점이다. 객체가 별도로 할애한 영역은 변수 영역일 뿐 데이터 영역은 기존의 메모리 공간을 그대로 활용하고 있다. 데이터 영역은 불변값이지만 변수에는 다른 값이 얼마든지 대입할 수 있다. 그렇기 때문에 참조형 데이터는 불변 하지 않다라는 것이다.

// 참조형 데이터의 프로퍼티 재할당
var obj1 = {
  a: 1,
  b: 'bbb',
};
obj1.a = 2;

• obj1의 a 프로퍼티에 숫자 2를 할당하려고 한다. 데이터 영역에서 숫자 2를 검색한다. 검색 결과가 없으므로 빈 공간인 5005에 저장하고 이 주소를 7103에 저장한다. 그렇기 때문에 변수 obj1이 바라보고 있는 주소는 5001로 그대로이다. 즉, 새로운 객체가 만들어진 것이 아니라 기존의 객체 내부의 값만 바뀐 것이다.

🎈 변수 복사 비교

• 기본형 데이터와 참조형 데이터의 차이
• 변수 복사

var a = 10;
var b = a;

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

• 변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.
• 복사 과정은 동일하지만 데이터 할당 과정에서 이미 차이가 있기 때문에 변수 복사 이후의 동작에도 큰 차이가 발생한다.

var a = 10;
var b = a;

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

b = 15;
obj2.c = 20;

• 기본형 데이터를 복사한 후 변수 b의 값을 바꿨더니 값이 달라지는 반면, 참조형 데이터를 복사한 변수 obj2의 프로퍼티의 값을 바꾸었더니 값은 달라지지 않았다.
• 즉, 변수 a와 b는 서로 다른 주소를 바라보게 됐으나, 변수 obj1과 obj2는 여전히 같은 객체를 바라보고 있는 상태이다. 이를 코드로 표현하면 다음과 같다.

a !== b;
obj === obj2;

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

// 객체 자체를 변경했을 때
var a = 10;
var b = a;

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

b = 15;
obj2 = {
  c: 20,
  d: 'ddd'
};

• 이번에는 새로운 객체를 할당함으로써 값을 직접 변경했다. 그러면 메모리의 데이터 영역에 새로운 공간에 새 객체가 저장되고 그 주소를 변수 영역의 obj2 위치에 저장할 것이다.
• 즉, 참조형 데이터가 가변값이라고 설명할 때의 가변은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립한다.

📚 불변 객체

🎈 불변 객체를 만드는 간단한 방법

• 참조형 데이터의 가변은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다. 데이터 자체를 변경하고자 하면 기본 데이터와 마찬가지로 기존 데이터는 변하지 않는다.
• 그렇다면 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 새로운 객체를 만드는 도구(immer.js, spread operator, Object.assign)를 활용한다면 객체 역시 불변성을 확보할 수 있다.
• 값으로 전달받은 객체에게 변경을 가하더라도 원본 객체가 변하지 않아야 하는 경우에 불변 객체가 필요하다.

var user = {
  name: 'Seungmin',
  gender: 'male',
};

var changeName = function (user, newName) {
  return {
    name: newName,
    gender: user.gender,
  };
};

var uses2 = changeName(user, 'Jung');

if (user !== user2) {
  console.log('유저 정보 변경'); // 유저 정보 변경
}

console.log(user.name, user2.name); // Seungmin Jung
console.log(user === user2); // false

• changeName 함수가 새로운 객체를 반환한다. 그렇기 때문에 user와 user2는 서로 다른 객체이므로 안전하게 비교할 수 있다.
• 하지만 현재 gender 프로퍼티를 하드코딩으로 입력했다. 대상 객체의 프로퍼티 개수에 상관 없이 모든 프로퍼티를 복사하는 함수를 만들 수 있다.

var copyObject = function (target) {
  var result = {};

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

  return result;
};

• copyObject 함수를 사용하기로 합의하고 그 규칙을 지킨다는 전제하에서는 user 객체가 곧 불변 객체라고 불 수 있다. 하지만 모두가 그 규칙을 지키리라는 보장은 없다.
• 또한, copyObject는 얕은 복사를 수행하고 있다.
• 이런 맥락에서 immutable.js, immer.js등의 라이브러리가 인기를 끌고 있다.

🎈 얕은 복사와 깊은 복사

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

var user = {
  name: 'Seungmin',
  urls: {
    portfolio: 'https://github.com/saseungmin',
    blog: 'https://haranglog.tistory.com',
  },
};

var user2 = copyObject(user);

user2.name = 'Jung';
console.log(user.name === user2.name); // false

user.urls.portfolio = 'https://...';
console.log(user.urls.portfolio === user2.urls.portfolio); // true

• 위 예제처럼 한 단계 더 들어간 urls의 내부 프로퍼티들은 기존 데이터를 그대로 참조하고 있다. 이런 현상이 발생하지 않게 하려면 user.urls 프로퍼티에 대해서도 불변 객체로 만들 필요가 있다.

var user2 = copyObject(user);
user2.urls = copyObject(user.urls);

user.urls.portfolio = 'https://...';
console.log(user.urls.portfolio === user2.urls.portfolio); // false

• 어떤 객체를 복사할 때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 할 때, 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에는 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야 한다.
• 이 과정을 참조형 데이터가 있을 때마다 재귀적으로 수행해야만 비로소 깊은 복사가 된다.

var copyObjectDeep = function (target) {
  var result = {};
  
  // null을 붙인 이유는 typeof 명령어가 null에 대해서도 object를 반환한다. (자바스크립트 버그)
  if(typeof target === 'object' && target !== null) {
    for(prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }

  return result;
};

• 간단하게 깊은 복사를 처리할 수 있는 다른 방법은 객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸는 것이다. 다만 메서드(함수)니 숨겨진 프로퍼티인 __proto__나 getter/setter 등과 같이 JSON으로 변경할 수 없는 프로퍼티들은 모두 무시한다.

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

var obj = {
  a: 1,
  b: {
    c: null,
    d: [1, 2],
    func1: function() {
      console.log(3);
    },
  },
  func2: function() {
    console.log(4);
  },
};

var obj2 = copyObjectViaJSON(obj);

obj2.a = 3;
obj2.b.c = 4;
obj.b.d[1] = 3;

console.log(obj); // { a: 1, b: { c: null, d: [1, 3], func1: f() }, func2: ƒ() }
console.log(obj2); // { a: 3, b: { c: 4, d: [1, 2] } }

🎈 undefined와 null

• 자바스크립트에서 없음을 나타내는 값이 두 가지 있는데 바로 undefined와 null이다.
• undefined는 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진은 자동으로 부여하는 경우도 있다.
• 자바스크립트 엔진은 사용자가 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환한다. 다음 세 경우가 이에 해당한다.
  1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
  2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
  3. return 문이 없거나 호출되지 않는 함수의 실행 결과

// 자동으로 undefined를 부여하는 경우
var a;
console.log(a); // undefined (1)

var obj = {
  a: 1,
};
console.log(obj.b); // (2) 존재하지 않는 프로퍼티에 접근

var func = function() {};
var c = func(); // (3) return 문이 없거나 호출되지 않는 함수의 실행 결과
console.log(c); // undefined

• undefined와 배열

var arr1 = [];
arr1.length = 3;
console.log(arr1); // [empty x 3]

var arr2 = new Array(3);
console.log(arr2); // [empty x 3]

var arr3 = [undefined, undefined, undefined];
console.log(arr3); // [undefined, undefined, undefined]

• 위 예제처럼 비어있는 요소와 undefined를 할당한 요소는 출력 결과부터 다르다.
• 비어있는 요소는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외된다.
• 사용자가 직접 undefined를 할당한 배열에 대해서는 일반적으로 알고 있는 대로 배열의 모든 요소를 순회해서 결과를 출력한다.
• 그러나 empty로 비어있는 요소에 대해서는 어떠한 처리도 하지 않고 건너뛴다.
• 그렇다면 사용자가 명시적으로 부여한 경우와 비어있는 요소에 접근하려 할 때 반환되는 두 경우의 undefined의 의미는 전자는 그 자체로 값이다. undefined가 비록 비어있음을 의미하기는 하지만 하나의 값으로 동작하기 때문에 이때의 프로퍼티나 배열의 요소는 고유의 키값이 실존하게 되고 순회의 대상이 될 수 있다.
• 사용자가 아무것도 하지 않은 채로 접근했을 때 자바스크립트 엔진이 하는 수 없이 반환해주는 undefined는 해당 프로퍼티 내지 배열의 키값 자체가 존재하지 않음을 의미한다.
• 같은 의미를 가진 null이라는 값이 별도로 존재하기 때문에 사용자가 직접 undefined를 써야 할 이유가 없다. 즉, 비어있음을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null를 쓰면 된다.
• 추가로 null은 주의할 점이 있는데 typeof null이 object라는 점이다. 이는 자바스크립트 자체 버그이다. 따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof를 사용하면 안된다.

// undefined와 null 비교
var n = null;
console.log(typeof n); // object

console.log(n == undefined); // true
console.log(n == null); // true

console.log(n === undefined); // false
console.log(n === null); // true

• 동등 연산자로 비굥할 경우 null과 undefined가 서로 같다고 판단한다. 따라서 어떤 변수가 실제로 null인지 아니면 undefined인지는 동등 연산자로 비교해서는 알 수 없다. 때문에 일치 연산자를 사용해야지 정확히 비교할 수 있다.

📚 정리

• 자바스크립트 데이터 타입에는 크게 기본형과 참조형이 있다. 기본적으로 기본형은 불변값이고 참조형은 가변값이다.
• 변수는 변경 가능한 데이터가 담길 수 있는 공간이고, 식별자는 그 변수의 이름을 말한다.
• 변수를 선언하면 컴퓨터는 우선 메모리의 빈 공간에 식별자를 저장하고, 그 공간의 값은 undefined로 할당한다. 이후 그 변수에 기본형 데이터를 할당하려고 하면 별도의 공간에 데이터를 저장하고, 그 공간의 주소를 변수의 값 영역에 할당한다.
• 참조형 데이터를 할당하고자 할 경우 컴퓨터는 참조형 데이터 내부 프로퍼티들을 위한 변수 영역을 별도로 확보해서 확보된 주소를 변수에 연결하고, 다시 앞서 확보한 변수 영역에 각 프로퍼티의 식별자를 저장하고, 각 데이터를 별도의 공간에 저장해서 그 주소를 식별자들과 매칭시킨다.
• 이처럼 할당 과정이 차이가 생기는 이유는 참조형 데이터가 여러 개의 프로퍼티(변수)를 모은 그룹이기 때문이다. 그리고 이 차이로 인해 참조형 데이터를 가변값으로 여겨야만 하는 상황이 발생한다.
• 없음을 나타내는 값은 두 가지가 있는데, undefined는 어떤 변수에 값이 존재하지 않을 경우를 의미하고 null은 사용자가 명시적으로 없음을 표현하기 위해 대입한 값이다. 그렇기 때문에 본래의 의미에 따라 사용자가 없을을 표현하기 위해 명시적으로 undefined를 대입하는 것은 지양해야 한다.