해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

데이터 타입

불변 객체

• 앞서 작성된 데이터 타입 포스팅 을 보면 객체 형식의 데이터는 가변값 이라고 하였습니다.
  하지만, 어떤 상황에서는 불변값의 성질 필요한 경우가 있습니다.
  예를 들면, 기존의 값과 새로운 값을 비교할 경우

let oldObj = {
  a: 123,
  b: [1, 2, 3],
};

// 새로운 객체 생성 함수(변수 값 수정)
let copyObj = (oldObj, newVar) => {
  let newObj = oldObj; //  변수 복사
  newObj.a = newVar;
  return newObj;
};

let newObj = copyObj(oldObj, 345);

console.log(oldObj === newObj); // true
/* 가변값의 성질로 인해 변수 복사로 만들어진 새로운 객체의 프로퍼티 값을 수정하면
기존 객체의 값까지 수정되어 비교가 불가능하다*/

불변 객체를 만드는 방법!

1. 라이브러리 사용
   : immutable.js 같은 라이브러리가 있다고 하지만, 필자는 아직 사용해본 적이 없다.

2. 깊은 복사(feat. 얕은 복사)

• 기존 객체 값을 복사할 때 변수를 그대로 대입하는 것이 아니라
  해당 객체의 값에 직접 접근해서 복사하는 것이다.

let copyObj = (oldObj, newVar) => {
  let newObj = {};
  newObj.a = newVar;
  newObj.b = oldObj.b;
  return newObj;
};
/* 이런식으로 한다면 변수 복사시, 객체의 주소가 전달되지 않고 내부 프로퍼티 값을 그대로 가져온다.
그래서 oldObj, newObj 값이 독립적으로 활용될 수 있다. */

• 지금 이 상황은 객체 내부 프로퍼티가 모두 기본형이지만 객체 안에 객체 가 또 있다면 이 방법 또한 완벽하지 않다. 위 방식을 정확하게 말하자면 최상단 주소를 가져오지 않고, 하위 주소들을 가져오는 방식인 것이다(얕은 복사). 그래서 하위 주소안에 또다른 하위 주소들이 존재하는 경우에는 완벽하게 불변객체로 복사할 수 없는 방식이다.
• 이를 해결하기 위해 서적에서는 반복문과 조건문 활용한 함수를 제시하고 있으며, 객체 내부에 객체가 있을시 해당 프로퍼티들을 모두 직접 접근하여 가져오는 방식이다(깊은 복사).

3. Json 내부 함수 활용

• 객체 데이터를 json 형식으로 바꾸고 다시 데이터로 바꾸어서 변수에 대입하는 것이다. 이렇게 한다면 주소가 아닌 새로운 값으로 인식할 수 있기 때문이다.

let copyObj = (oldObj, newVar) => {
  let newObj = JSON.parse(JSON.stringify(oldObj));
  newObj.a = newVar;
  return newObj;
};

• 하지만 이 방식은 개체가 순수한 정보 데이터만 가지고 있을 때 가능한 방식이다. json으로 변경할 수 없는 내용이 있을 때에는 사용할 수 없다.

undefined & null

• 둘다 기본적으로 '없다'는 의미를 가지지만, 다른 형식으로 인식한다.

console.log(undefined == null); // true
console.log(undefined === null); // false
// 자바스크립트는 null 의 형식을 객체라고 인식하는데 이는 자체 버그라고 한다.

• undefined 를 출력하는 경우

  1. 변수를 선언했지만 할당된 값이 없을 때
  • 변수를 선언만 했을 때 undefined가 할당된다는 설명하는데
    정확히 말하자면, 값이 비어있는 변수에 접근했을 때에 자바스크립트에서 undefined를 출력하는 방식이다.
  2. return 값이 없는 함수일 때
  3. 어떤 객체의 존재하지 않는 프로퍼티에 접근할 때

• 만약 undefined 값을 직접 할당해야하는 경우가 있다면?
  그때는 undefined 대신에 null 값을 할당하여 자바스크립트에서 자동으로 할당되는 방식과 헷갈리지 않도록 설정하는 것을 권장한다고 한다.

undefined 와 null 모두 '없음'을 뜻하지만 실제로 비어있는 것은 아니다.
다시 말하자면, 식별자는 존재하지만 값이 비어있는 것이다.
식별자 또한 존재하지 않을 때에는 empty 라는 요소가 있으며 반복문에서도 인식하지 못한다.
이 또한 서적에서 확인할 수 있다.