ECMAScript6 - Object

Object에 대해서 공부해 본 것,,

1. 같은 키를 사용하는 경우 나중에 작성된 키값으로 대체된다.

2. Object에 function 작성의 차이 es5, es6

3-1. 프로퍼티 디스크립터 - Object 'book' 프로퍼티에 대해서 아래와 같은 속성을 포함하여 get, set 속성을 설정 할 수 있다.

3-2. get, set 속성 ==> ES5 get, set 속성으로 getter 와  setter를 정희

3-3. ES6에서 getter와 setter 선언 형태

4. Object.is()
    ===           :  값과 값 타입을 모두 비교
    ==             :  값 타입은 비교하지 않고 값만 비교
    Object.is() :  값과 값 타입을 모두 비교

   === , Object.is() 차이점은
   +0 과 -0을 비교할 경우 ===는 true,  Object.is()는 false를 반환
   NaN 과 NaN을 비교할 경우 === false, Object.is()는 true를 반환

5. assign(): 오브젝트 프로퍼티 복사

 파라메터들은 enumerable 오브젝트여야 한다.

null, undefined의 경우 프로퍼티 값으로만 복사가 가능하다.

assign()의 필요성
let dup = sports; 의 경우 얕은 복사가 발생한다.
dup과 sports는 같은 object를 바라보는 문제가 발생한다.
dup의 프로퍼티 값을 변경할 경우 sports의 프로퍼티 값에도 영향을 끼친다.
이러한 문제를 해결하기 위해서 assign()을 사용한다.

assign()을 사용하지 않고 깊은 복사하기.

assign()을 사용하여 깊은 복사하기.

고려사항 - 이미지 주석 참고

나중에 작성된 같은 프로퍼티의 경우 나중에 작성된 프로퍼티값으로 대체 ==> two 22

프로퍼티를 복사할 때 getter가 있을경우 함수를 복사하지 않고 함수를 호출하여 반환된 값을 복사한다.

6. setPrototypeOf() : __proto__에 첨부

첫 번째 파라미터의 __proto__에 두 번째 파라미터를 첨부한다.
첫 번째 파라미터에 오브젝트 또는 인스턴스를 지정. (Object.isExtensible == true)
두 번째 파라미터에는 오브젝트의 prototype을 지정.

protoObj __proto__에 Sports.prototype의 constructor와 getCount를 연결시키는 작업이다.

아래에서 확인이 가능하다.

아래와 같이 두 번째 파라미터에 Sports.prototype이 아닌 Sports 함수를 지정할 경우
fnObj에서 Sports.prototype에 연결된 메서드 getCount를 호출 할 수 없다.
따라서 undefined이 출력된다.

protoObj와 달리 fnObj의 __proto__에는 Sports.prototype getCount, constructor가 연결되어 있지않다.

7-1. prototype과 __proto__ 차이
__proto__에 있는 메서드는 "object.functionName()" 형태로 직접 호출이 가능하지만,
prototype에 연결된 메서드는 "object.prototype.functionName.call()" 형태로 호출해야 한다.

new 연산자로 생성된 인스턴스 sportObj의 경우, Sports.prototype에 연결된 프로퍼티들을
sportObj.__proto__에 첨부하여 공유할 수 있게 된다.

7-2. prototye과 __proto__ 차이
아래는 자바스크립트의 prototype의 프로퍼티 공유 개념을 설명해주는 코드이다.
먼저 Sports.prototype에 get 메서드를 연결하고, new 연산자로 sportsObj 인스턴스를 생성한다.
sportsObj.__proto__에는 get() 메서드가 첨부된다.

그리고 sportsObj.__proto__ 에 set() 메서드를 추가한다.
sportsObj.__proto__에 추가하더라도 __proto__가 아닌 Sports.prototype에 추가된다.
왜냐하면, Sports로 생성한 다른 인스턴스에서 추가한 set() 메서드를 공유하기 때문이다.

set() 메서드가 호출되면 sportsObj 인스턴스의 __proto__ 에 있지만, __proto__는 프로퍼티
검색과 경로를 제공하기 위한 것으로 실제 호출되는 메서드는 인스턴스를 생성한 Sports.prototype에 연결된 메서드이다.