200827_TIL

Today I learned

• 코어 자바스크립트 서적 요약 정리
  (데이터자료형 파트)

책소개
코어자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍, 위키북스, 2020-02-06 (링크)

@@ 오늘은 e-book 으로 코어 자바스크립트라는 서적을 읽고 정리했다. 이 책을 고른 까닭은 책 서두에도 나와있지만 자바스크립트 버전에 상관없이 꼭 가져가야 하는 자바스크립트의 핵심 언어 특성을 내가 이해하는 것이 앞으로의 공부에 도움을 줄 것이라는 생각을 했기 때문이다.

그래서 이북으로 골랐던 자바스크립트 관련 여러 책들 중 이 책을 가장 먼저 읽기로 결심했다. 이 기회로 프리코스에서 정리한 개념들을 다시 복습하고, 자바스크립트 언어에 대한 좀 더 깊은 이해를 도모해봐야겠다.

아래는 내가 책을 읽으면서, 중요하다 생각한 부분들을 요약 정리한 부분들이다.

[참조형 불변성]

• 사실은 모든 자바스크립트 데이터형은 참조형이다. 다만 기본 자료형은 주솟값을 복사하는 과정이 한번이고, 참조형은 단 한계를 더 거치게 된다는 차이가 있을 뿐이다.
• 참조형 데이터가 가변값이라고 설명할 때의 가변은 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립한다.

• 즉 데이터 자체를 변경하고자 한다면 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다.

  그렇기 때문에 불변 객체가 필요할 경우, 원본 객체를 변하게 하면 안될 경우 불변 객체를 활용할 수 있다.

• 불변성에 대한 요구가 필요할 때 immutable.js , baobab.js 등의 라이브러리를 활용하기도 한다.

[얕은복사, 깊은복사]

• 얕은 복사: 바로 아래 단계의 값만을 복사.

• 깊은 복사: 내부의 모든 값들을 하나하나 찾아서 전부 복사.

• 얕은 복사만하게 되면, 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사시, 그 주솟값만을 복사한다.

• 원본과 사본은 동일한 데이터 주소를 가리킨다.

• 때문에 얕은복사를 하게 되면 바로 아래의 값은 불변성이 유지 되지만, 더 안쪽의 값들은 불변성이 무너진다. 그렇기 때문에 중첩 객체 값이 존재할 경우, 해당 프로퍼티 마다 값을 다 제각각 복사해줘야한다.

• 깊은 복사는 재귀함수를 통해서 이 작업이 가능하다.

• hasOwnProperty 메서드를 활용해 프로토타입 체이닝을 통해 상속된 프로퍼티를 복사하지 않게 할수도 있다.

• ES5의 getter/setter를 복사하는 방법은 ES6의 Object.getOwnPropertyDescriptor 또는 ES2017 의 Object.getOwnPropertyDescriptors외에는 방법이 없다.

  • Object.getOwnPropertyDescriptor(obj, prop)

    d = Object.getOwnPropertyDescriptor(o, 'foo');
    // d는 { configurable: true, enumerable: true, get: /* getter 함수 */, set: undefined }

  • Object.getOwnPropertyDescriptors(obj)

    const object1 = {
      property1: 42
    };
    
    const descriptors1 = Object.getOwnPropertyDescriptors(object1);
    
    console.log(descriptors1.property1.writable);
    // expected output: true
    
    console.log(descriptors1.property1.value);
    // expected output: 42

• 객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸면 간단하게 깊은 복사를 할 수 있다. (그러나 proto나 getter/setter 등과 같이 JSON

• typeof 연산자는 null 값에 대해서도 object를 반환한다.

• 자바스크립트는 사용자가 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로 그렇게 하지 않을 때 undefined를 반환한다

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

• 다만 new 연산자를 통해 만들어진 배열이나 .length 프로퍼티를 통해 할당된 배열안의 요소는 undefined 가 아닌 empty를 출력하는데, 이럴 경우엔 배열 순회와 관련된 많은 메소드들에서 배제된다.

  배열 메소드에서 undefined조차 담겨있지 않은 빈 배열은 배제하고 넘어간다.

  사실은 배열도 객체이기 때문이다. 배열 또한 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정, 데이터 주솟값을 저장한다.

  사용자가 명시적으로 부여한 undefined와 자바스크립트가 반환해주는 undefined는 서로 차이가 존재한다. 이것이 혼재될시 혼란이 일어날 수 있기 때문에 값이 비어있음을 명시적으로 나타내고 싶을 경우 null 값을 사용하는 것이 좋다.

• 동등 연산자(==)로 비교할 경우 null과 undifined는 서로 같다고 판단된다.

• 일치 연산자(===)를 써야만 정확히 판별 가능