JS 데이터 타입

자바스크립트 변수와 식별자

- 변수 : 변할 수 있는 데이터를 담는 공간

- 식별자 : 데이터를 식별하는 데 사용하는 이름 -> 변수명, 메모리 주솟값

자바스크립트 데이터 타입

primitive type 

- number, string, boolean, null, undefined

- 값이 담긴 주솟값을 변수에 저장

- 값이 달라지면 무조건 새로운 메모리 공간에 새로운 값을 저장하고 해당 새로운 메모리 공간의 주솟값을 변수에 할당한다.

=>  한 번 만든 값은 바꿀 수 없고 값의 변경은 새로 만드는 동작을 통해서만 이루어진다. 한 번 만들어진 가비지컬렉팅을 당하지 않는 한 영원히 변하지 않는다 : 불변성의 성질!

var a = 1;
var b = a; // a 와 b는 1이 담긴 같은 메모리 주소를 저장하고 있다

b = 2; // b는 2를 담고 있는 새로운 메모리 주소를 저장

console.log(a); // 1 -> a는 불변!

reference type

- Object, Array, Function, Date, RegExp, ...

- 프로퍼티들의 주소값 묶음을 저장하는 메모리의 주솟값을 변수에 저장

- 프로퍼티의 값이 달라지면 해당 프로퍼티변수는 달라진 값의 메모리주소를 저장하지만, 프로퍼티들의 주소값을 묶음을 저장하는 메모리의 주솟값은 변하지 않는다 : 가변성!

var obj1 = { a:1, b:2 }; // obj1은 프로퍼티들의 주솟값 묶음을 저장하는 메모리의 주솟값 저장
var obj2 = obj1; // obj2와 obj1은 같은 메모리의 주솟값 저장

obj2.b = 3; // 프로퍼티 b는 3을 저장하고 있는 새로운 메모리 주솟값을 저장

console.log(obj1); // { a:1, b:3 } -> 가변! 
// obj1은 obj2와 같은 프로퍼티들의 주솟값 묶음의 메모리의 주솟값 저장하고 있기 떄문!

불변객체, immutable object

불변객체란?

- 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하는 않는 객체

- 객체의 내부 프로퍼티를 변경할 필요가 있을 때 새로운 객체를 만들어서 재할당하여 불변성을 확보한다

약은 복사

- 프로퍼티들의 주솟값들의 묶음 저장하고 있는 새로운 메모리 공간을 할당하여 해당 메모리의 주솟값을 변수에 저장

- 한계 : 원본과 사본이 서로 다른 객체의 주소를 가지고 있지만 해당 객체들의 프로퍼티 메모리 주소는 동일하다. 프로퍼티가 참조형 데이터인 경우 사본을 바꾸면 원본도 바뀐다.

function shallowCopy(obj) {
  var res = {};
  for (var prop in obj) {
    res[prop] = obj[prop];
  }
  return res;
}

var obj1 = { a: 1, b: 2 };
var obj2 = shallowCopy(obj1);
obj2.a = 7;

console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { a: 7, b: 2 }

var obj3 = { a:1, b: { c: 2, d:3} };
var obj4 = shallowCopy(obj3);
obj4.b.c = 7;

console.log(obj3); // { a:1, b: { c: 7, d:3} } : 얕은복사
console.log(obj4); // { a:1, b: { c: 7, d:3} } : 얕은복사

깊은 복사

- 내부 프로퍼티 값 하나하나 찾아서 전부 복사하는 방법

- 프로퍼티 타입이 object인 경우 해당 프로퍼티를 인자로 깊은복사함수를 계속 재귀적으로 실행하여 불변객체를 만든다!

function deepCopy(obj) {
  var res = {};
  if (typeof obj === 'object' && obj !== null) {
    for (var prop in obj) {
      res[prop] = deepCopy(obj[prop]);
    }
  } else {
    res = obj;
  }
  return res;
}

var obj1 = { a:1, b:{ c:2, d:3 } };
var obj2 = deepCopy(obj1);
obj2.b.c = 7;

console.log(obj1); // { a:1, b:{ c:2, d:3 } } -> 불변객체!
console.log(obj2); // { a:1, b:{ c:7, d:3 } } 

- 깊은 복사 함수를 직접 구현하는 대신, 객체를 JSON 문법으로 표현된 문자열로 변환했다가 다시 JSON객체로 변환하면 깊은복사를 간단하게 구현할 수 있다.

undefined 와 null

undefined

- 값을 대입하지 않은 변수,

- 데이터의 메모리 주소를 지정하지 않은 식별자에 접근하는 경우, 객체 내부에 존재하지 않는 프로퍼티에 접근하는 경우, return문이 없는 함수의 실행 결과

 

null

- 명시적으로 '없음, 비어있음'을 나타내기 위해 대입한 값

- 없음을 표현하기 위해서 undefined를 직접 대입하는 하지 않는다