📝 오늘 한 것

1. 데이터 타입의 종류 / 메모리와 데이터 / 식별자와 변수 / 변수 선언과 데이터 할당 / 기본형 데이터와 참조형 데이터 / 불변값, 가변값, 변수 복사 비교 / 불변 객체 / 얕은 복사와 깊은 복사 / JSON을 활용한 간단한 깊은 복사 / undefined와 null

📖 학습 자료

1. 책 『코어 자바스크립트』

📚 배운 것

1. 데이터 타입

1) 데이터 타입의 종류

(1) 기본형 데이터 타입

숫자, 문자열, 불리언(Boolean), null, undefined, 심볼(symbol)

(2) 참조형 데이터 타입

객체, 배열, 함수, 날짜(Date), 정규표현식(RegExp), Map, WeakMap, Set, WeakSet

보통 '기본형은 값을 복사하고 참조형은 주소값을 복사한다'고 설명한다.
그러나, 엄밀히 말하면 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 하기 때문에 기본형도 결국 주소값을 참조한다고 할 수 있다.
차이점이라면 기본형은 값이 담긴 주솟값을 바로 복사하는 반면, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복사한다는 것이다.
이로 인해 기본적으로 기본형은 불변값, 참조형은 가변값이라는 차이점이 발생하게 된다.

2) 데이터 타입에 대한 배경지식

(1) 메모리와 데이터

0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 하며, 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있다.
1바이트(bite)는 8개의 비트로 구성되어 있고, 시작하는 비트의 식별자로 위치를 파악할 수 있다.
모든 데이터는 바이트 단위의 식별자, 즉 메모리 주솟값을 통해 서로 구분되고 연결할 수 있다.

(2) 식별자와 변수

var a = "abc"

변수("abc")란 변할 수 있는 데이터를 말한다.
여기서 데이터란 숫자, 문자열, 객체, 배열 등이 모두 해당된다.
한편, 식별자(a)란 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명을 말한다.

3) 변수 선언과 데이터 할당

(1) 변수 선언

var a;

메모리에서 비어 있는 공간 하나를 확보한다.
이 공간의 이름(식별자)을 a라고 지정한다.
이 공간은 주소를 가진다.

(2) 데이터 할당

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

var a = "abc"; // 변수 선언과 데이터 할당을 한 문장으로 표현

앞서 변수를 선언하면서 변수 영역을 확보했다.
다음으로 해당 변수에 데이터를 할당하기 위해 데이터를 저장하기 위한 별도의 공간 즉, 데이터 영역을 확보해야 한다.
데이터 영역에 문자열 "abc"를 저장하고 데이터 영역의 주소를 변수 영역에 저장한다.

즉, 변수 영역에 값을 직접 대입하지 않고 주솟값을 저장하는 형식으로 한 단계를 더 거치는 것이다.
위에서 어떤 데이터 타입이든(위와 같은 기본형 데이터 타입조차도) 변수에 할당하기 위해서는 주솟값을 복사해야 한다고 말했던 이유이다.

이는 데이터 변환을 자유롭게 하고 메모리를 더욱 효율적으로 관리하기 위함이다.
데이터를 변환할 때마다 변수 영역에 값을 직접 대입한다면 변환한 데이터의 크기에 따라 확보된 공간을 늘리는 등 비효율적인 작업을 반복해야 한다.
이를 방지하기 위해 기존 문자열에 어떤 변환을 가하든 상관 없이 무조건 새로 만들어 별도의 데이터 영역에 저장한 후 그 '주솟값'을 변수 영역에 저장한다.
같은 맥락으로 중복된 데이터를 다룰 때도 주솟값을 저장하는 형식을 취하면 훨씬 효율적으로 처리할 수 있다.

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

위에서 기본형은 불변값이고, 참조형은 가변값이라고 말했다.
그렇다면 여기서 불변값과 가변값은 무엇을 의미하는 것일까?

(1) 불변값

상수 vs 불변값

변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다.
한번 데이터 할당이 이뤄진 변수 영역에 다른 데이터를 재할당할 수 있는지의 여부가 관건이다.
반면에, 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.

기본형 데이터 타입

변수 영역에 데이터를 할당한 후 다른 데이터를 재할당하려고 한다.
이때 기존의 데이터를 다른 데이터로 바꿀 수 없다.
바꾸고자 하는 데이터가 데이터 영역 어딘가에 있다면 이를 찾아서 그 주솟값을 변수 영역에 새롭게 할당하고, 없다면 데이터 영역에 해당 데이터를 새로 만든 후 그 주솟값을 변수 영역에 새롭게 할당한다.

따라서, 이 경우에 변수 공간에 다른 데이터를 재할당할 수 있기 때문에 상수가 아닌 '변수'이지만, 이를 위해 변수 영역에 할당된 데이터 영역의 값을 변경할 수는 없고 새로 만들어 재할당해야 하므로 해당 데이터 타입은 '불변값'이라고 할 수 있다.

기본형 데이터 타입은 가비지 컬렉팅 당하지 않는 한 영원히 변하지 않는다.
어떤 데이터든 자신의 주소를 저장하는 변수가 하나도 없게 되면(참조 카운트가 0이 되면) 가비지 컬렉터의 수거 대상이 된다.
수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.

(2) 가변값

참조형 데이터 타입

참조형 데이터 타입은 '객체의 변수(프로퍼티) 영역'을 별도로 가지고 있다.
기본형은 변수 영역과 데이터 영역을 가질 뿐이지만, 참조형은 여기에 객체의 변수 영역을 추가로 가지고 있다.

앞서 참조형이 가변값이라고 한 것은, 여기서 데이터 영역에 저장된 값은 기본형 데이터 타입과 마찬가지로 모두 불변값이지만, 객체의 변수 영역에는 다른 데이터를 얼마든지 재할당할 수 있음을 의미한다.

중첩 객체

var obj = {
  x: 3,
  arr: [3, 4, 5],
};

참조형 데이터의 변수(프로퍼티)에 다시 참조형 데이터를 할당하는 것을 말한다.

(3) 변수 복사 비교

앞서 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 하기 때문에 기본형도 결국 주소값을 참조한다고 할 수 있다고 했다.
따라서, 변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소(데이터 영역의 주솟값)를 바라보게 된다는 점에서는 동일하다.

그러나, 기본형은 값이 담긴 주솟값(데이터 영역의 주솟값)을 바로 복사하는 반면, 참조형은 값이 담긴 주솟값들―객체의 변수 영역의 주솟값들―로 이루어진 묶음을 가리키는 주솟값(데이터 영역의 주솟값)을 복사하기 때문에 변수 복사 이후의 동작에서 큰 차이가 발생한다.

객체의 프로퍼티를 변경했을 때

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

b = 15;
obj2.c = 20;

console.log(a !== b); // true
console.log(obj1 === obj2); // true

이처럼 변수 복사 이후 값을 변경했을 때 기본형의 경우 복사 전후의 변수의 값이 달라지지만 참조형의 경우 그 값이 달라지지 않는다.

기본형은 값이 담긴 주솟값을 바로 복사했기 때문에 변수를 복사한 후 값이 변경되면 복사한 변수 영역에는 새로운 데이터를 가지는 데이터 영역의 주솟값이 할당되기 때문에 복사 전후의 변수의 값이 달라지게 된다.

그러나, 참조형은 변수 복사 이후 값이 변경됐어도 이때 변경된 값(즉, 새로운 데이터를 가지는 데이터 영역의 주솟값)은 복사한 변수 영역 그 자체가 아니라 객체의 변수(프로퍼티) 영역에 할당되기 때문에 복사한 변수 영역은 이전과 다름없는 주소를 가지고 있게 된다.
즉, 여전히 복사 전후의 변수 모두 같은 주솟값을 가지고 있고, 그저 그 주솟값을 이루고 있는 객체의 변수(프로퍼티) 영역이 변한 것이기에 복사 전후의 변수 모두 같은 값으로 변하게 되고 결국 둘의 값에 차이가 생기지는 않는 것이다.

객체 자체를 변경했을 때

단, 참조형의 경우에도 그저 객체의 프로퍼티를 변경하는 것이 아니라 아예 변수에 새로운 객체를 할당함으로써 그 값을 직접 변경한다면 불변값이 될 수도 있다.
즉, 참조형 데이터를 가리켜 가변값이라고 설명할 때의 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립하는 것이다.

5) 불변 객체

(1) 불변 객체를 만드는 간단한 방법

참조형 데이터도 데이터 자체를 변경하고자 하면(새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존의 데이터는 변하지 않는다.
그러므로 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 객체 역시 불변성을 확보할 수 있다.

문제

var user = { // 참조형 데이터(객체)
  name: "syong",
  gender: "female",
};

var changeName = (user, newName) => {
  var newUser = user; // 변수 복사
  newUser.name = newUser; // 값 변경
  return newUser;
};

var user2 = changeName(user, "syongsyong");

if (user !== user2) {
  console.log("user 정보가 변경되었습니다.");
}

console.log(user.name, user.name === user2.name); // syongsyong, true
console.log(user === user2); // true

불변 객체가 필요한 대표적인 사례로는 user 정보의 변경 여부를 감지해 안내하고자 할 때를 들 수 있다.
이 경우 user 정보를 담고 있는 객체가 변경되면 이를 감지해 안내해야 하는데 객체의 가변성으로 인해 user 객체를 복사한 객체의 프로퍼티가 변해도 기존의 user 객체까지 함께 변해버려 그 변경 여부를 감지할 수가 없어 문제가 된다.

해결 방법 1: 아예 새로운 객체 만들기

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

var user2 = changeName(user, "syongsyong");

이때기존의 user 객체를 불변 객체로 만들기 위해 객체의 내부 프로퍼티를 수정해야 할 때 내부 프로퍼티만을 수정하는 게 아니라 아예 새로운 객체를 만들 수 있다.
다만, 이는 변경할 필요가 없는 기존 객체의 프로퍼티(gender)까지 하드코딩으로 입력해 비효율적이다.

해결 방법 2: 얕은 복사

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

var user2 = copyObject(user);
user2.name = "syongsyong";

하드코딩 문제를 해결하기 위해 얕은 복사를 할 수 있다.
그러나 이는 말 그대로 얕은 복사라는 점에서 한계를 가진다.

(2) 얕은 복사와 깊은 복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이고, 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다.

얕은 복사의 문제점 (중첩 객체의 경우)

var user = {
  name: "syong",
  urls: {
    portfolio: "http://github.com/abc",
    blog: "http://blog.com",
    facebook: "http://facebook.com/abc",
  };
};

var user2 = copyObject(user);

user2.name = "syongsyong";
console.log(user.name === user2.name); // false

user2.urls.blog = "";
console.log(user.urls.blog === user2.urls.blog); // true

이처럼 user 객체에 직접 속한 프로퍼티인 name에 대해서는 복사해서 완전히 새로운 데이터가 만들어진 반면, 한 단계 더 들어가서 객체의 또 다른 프로퍼티인 urls의 '내부 프로퍼티'들은 기존 데이터를 그대로 참조하고 있음을 알 수 있다.

중접 객체에 대한 깊은 복사

var user2 = copyObject(user);
var user2.urls = copyObject(user.urls); // 추가 ❗

user2.name = "syongsyong";
console.log(user.name === user2.name); // false

user2.urls.blog = "";
console.log(user.urls.blog === user2.urls.blog); // false

중첩 객체를 완벽한 불변 객체로 만들기 위해서는 깊은 복사를 수행해야 한다.
즉, 중첩 객체의 프로퍼티 중에서 그 값이 참조형 데이터일 경우 다시 그 내부의 프로퍼티들까지 복사해야 한다.

객체의 깊은 복사를 수행하는 범용 함수

var copyObjectDeep = (target) => {
  var result = {};
  if (typeof target === "object" && target !== null) {
    for (var prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
};

var user2 = copyObjectDeep(user);

JSON을 활용한 간단한 깊은 복사

var copyObjectViaJSON = (target) => JSON.parse(JSON.stringify(target));

var user2 = copyObjectViaJSON(user);

JSON 문법을 이용해 간단하게 깊은 복사를 할 수도 있다.
다만, 이는 __proto__나 getter/setter 등과 같이 JSON으로 변경할 수 없는 프로퍼티들은 복사할 수 없다는 한계를 가진다.

6) undefined와 null

(1) undefined

자바스크립트 엔진이 자동으로 undefined를 부여하는 경우

• 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
• 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
• return 문이 없거나 호출되지 않는 함수의 실행 결과

값을 대입하지 않은 배열

배열에서 비어있는 요소와 'undefined'라도 할당한 요소는 출력 결과가 다르다.
비어있는 요소는 forEach, map, filter, reduce 등 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외된다.
값이 지정되지 않은 인덱스는 아직 존재하지 않는 프로퍼티에 지나지 않고, 존재하지 않는 프로퍼티에 대해서는 당연히 순회할 수 없는 것이다.

(2) null

이처럼 값으로써 어딘가에 할당된 undefined는 실존하는 데이터인 반면, 자바스크립트 엔진이 반환해주는 undefined는 문자 그대로 값이 없음을 나타낸다는 것을 알 수 있다.
혼란을 피하기 위해서는 undefined는 후자의 경우에만 쓰이도록 하고, 값이 없음을 나타내고자 할 때는 undefined 대신 null을 사용하도록 한다.

다만, 자바스크립트 자체 버그로 인해 typeof null은 object이기 때문에 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 일치 연산자(===)를 사용해야 한다. 동등 연산자(==) x

var n === null;

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

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

✨ 내일 할 것

1. 실행 컨텍스트 / this