[JavaScript][clean-code] Object.freeze

* Object.freeze

• 객체 동결
• Object.freeze는 기본적으로 내장되어있다.
• 간단하게 인자로 취해주면 동결된다.

[참고내용] https://latte1114.tistory.com/362

* Object.freeze예시 코드

const STATUS = Object.freeze({
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  FAIL : 'FAIL',
});

STATUS.PENDING = 'P2' // 변경이 되지 않는다.
STATUS.NEW_PROP = 'P2' // 추가 되지 않는다.

* Object.isFrozen을 이용하면 동결 여부를 알 수 있다.

Object.isFrozen(STATUS) // true

---

 * Object.freeze의 경우

• shallow copy vs deep copy처럼 깊은 영역에 대해서는 관여를 못한다.
• 중첩된 freezing를 해주어야한다.
  
  • 아래의 예시를 통해서 확인
  • 깊은 영역의 경우 값이 freeze되지 않고 변경이 된다.

const STATUS = Object.freeze({
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  FAIL : 'FAIL',
  OPTIONS : {
    GREEN : 'GREEN',
    RED : 'RED',
  },
});

STATUS.OPTION.GREEN = 'G'
STATUS.OPTIONS.YELLOW = 'Y'
delete STATUS.OPTIONS.RED

STATUS.OPTIONS;

Object.isFrozen(STATUS.OPTIONS); // false

* 중첩된 freezing방법

• 대중적인 유틸 라이브러리를 이용해준다 (lodash)
• 직접 유틸 함수 생성
• stackoverflow에서의 의견 (Deep freeze에 대한)
• TypeScript를 이용 = readonly를 이용한다.

* 직접 유틸 함수 생성 방법

1. 객체를 순회
2. 값이 객체인지 확인
3. 객체이면 재귀
4. 그렇지 않으면 Object.freeze

function deepFreeze(targetObj) {

  Object.keys(targetObj).forEach(key => {
    if ( //만약 객체가 맞다면) {
      deepFreeze(targetObj[key]) // 함수를 한번 더 호출
    }
  })
  return Object.freeze(targetObj);
}

const STATUS = deepFreeze({
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  FAIL : 'FAIL',
  OPTIONS : {
    GREEN : 'GREEN',
    RED : 'RED',
  },
});