[자바스크립트 ES6+ 기본] 12. Object 오브젝트

is()

• 두 개의 파라미터 값과 값 타입을 비교
  • 같으면 true, 아니면 false 반환

const result = Object.is(10, "10");
log(result);

const one = {}, two = {};
log(Object.is(one, two));

// false
// false

• 오브젝트 비교 목적이 아님

  • []와 [] 비교, {}와 {} 비교는 false

• JS 값 비교 방법

  • 값과 타입까지 모두 비교: ===
  • 타입은 비교하지 않고 값만 비교: ==

log((undefined == null));
log((undefined === null));
log(Object.is(undefined, null));

// true
// false
// false

• Object.is()와 === 비교 차이
  1) NaN 비교

log((NaN === NaN));
log(Object.is(NaN, NaN));
log((NaN === 0 / 0));
log(Object.is(NaN, 0 / 0));

// false
// true
// false
// true

2) +0과 -0 비교

log((0 === -0));
log(Obejct.is(0, -0));

// true
// false

• 활용한 형태

function check(data){
  if (Obejct.is(typeof data, "object")){
    log(data);
  } else {
    	log("object 타입이 아님");
  };
};
check({value: 10});
check(200);

// {value: 10}
// object 타입이 아님

---

오브젝트 복사

assign()

• 두 번째 파라미터의 오브젝트 프로퍼티를
  • 첫 번째 파라미터의 오브젝트에 복사하고 첫 번째를 반환
  • own property만 복사

const sports = {
  event: "축구",
  player: 11
};
let dup = {};

Object.assgin(dup, sports);
log(dup);

// {event: 축구, player: 11}

첫 번째 파라미터 작성

• 첫 번째 파라미터는 반드시 작성

try {
  const obj = Object.assign(null, {});
} catch (e) {
  log("null 작성 불가");
};

// null 작성 불가

• Number, String, Symbol, Boolean 값 작성

const obj = Object.assign(100);
log(obj.valueOf());

// 100

두 번째 파라미터 작성

• 열거 가능 오브젝트 작성

let obj = {};
Object.assign(obj, {ten: 10});
log(obj);

const one = Object.create({}, {
  book: {value: 100, numerable: false},
  sports: {value: 200, enumberable: true}
});
Object.assign(obj, one);
log(obj);

// {ten: 10}
// {ten: 10, sports: 200}

• 오브젝트 다수 작성

const book = {title: "책"};
const sports = {item: "축구"};
const obj = Object.assign({}, book, sports);
log(obj);

// {title: 책, item: 축구}

• 값을 작성

let obj = {ten: 10};
Object.assign(obj, undefined, null, 200);
log(obj);

const one = {un: undefined, nu: null};
Object.assign(obj, one);
log(obj);

// {ten: 10}
// {ten: 10, un: undefined, nu: null}

• 값과 오브젝트를 작성
  • 값이 설정된 인스턴스 형태

const obj = Object.assign(100, {book: 200});
log(obj.valueOf());
log(obj.book);

// 100
// 200

---

Deep Copy

• Object를 할당하면 프로퍼티 값이 연동됨
  • 한 쪽 오브젝트의 프로퍼티 값을 바꾸면 다른 오브젝트의 프로퍼티 값도 바뀜

const sports = {
  iten: "축구"
};
let copy = sports;
sports.item = "농구";
log(copy.item);

// 농구

• assing() 함수로 복사

const sports = {
  item: "축구";
};
let copy = {};
Object.assign(copy, sports);
sports.item = "농구";
log(copy.item);

// 축구

• 그래도 연동되는 형태

const book = {
  item: {title: "자바스크립트"}
};
let copy = {};
Object.assign(copy, book);
copy.item.title = "책";
log(book.item.title);

// 책

• 연동되지 않게 하려면 프로퍼티 단위로 복사

const book = {
  item: title: "자바스크립트"}
};
let copy = {};
for (let key in book){
  let value = book[key];
  copy[key] = {};
  for (let name in value){
    copy[key][name] = value[name];
  };
};
book.item.title = "책";
log(copy.item.title);

// 자바스크립트

• JSON 함수 활용

const book = {
  item: {title: "자바스크립트"}
};
const copy = JSON.parse(JSON.stringify(book));
book.item.title = "책";
log(copy.item.title);

// 자바스크립트

---

Object 변환

entries()

• 열거 가능한 오브젝트의 {key: value}를
  • [[key, value]] 형태로 변환

const obj = {music: "음악", book: "책"};
const list = Object.entries(obj);
for (let keyValue of list){
  log(keyValue);
};

// [music, 음악]
// [book, 책]

• 작성한 순서가 바뀌는 경우

const obj = {10: "십", book: "책", 7: "칠"};
const list = Object.entries(obj);
for (let keyValue of list){
  log(keyValue);
};

// [7, 칠]
// [10, 십]
// [book, 책]

• 문자열은 문자 하나씩 분리

const list = Object.entries("ABC");
for (let keyValue of list){
  log(keyValue);
};

// [0, A]
// [1, B]
// [2, C]

values()

• 열거 가능한 오브젝트의 {key: value}를
  • 값만 [value1, value2] 형태로 변환

const obj = {music: "음악", book: "책"};
const list = Object.values(obj);
for (let value of list){
  log(value);
};

// 음악
// 책

• 작성한 순서가 바뀌는 경우

const obj = {10:"십", book:"책", 7:"칠"};
const list = Object.values(obj);
for (let value of list){
  log(value);
};

// 칠
// 십
// 책

• 문자열은 문자 하나씩 분리

const list = Object.values("ABC");
for (let value of list){
  log(value);
};

// A
// B
// C

fromEntries()

• [[key, value]] 형태를
  • {key: value} 형태로 변환

const list = [["one", 10], ["two", 20]];
const obj = Object.fromEntries(list);
log(obj);

// {one: 10, two: 20}

• 프로퍼티 키 값이 같으면 값 대체

const list = [["one", 10], ["one", 20]];
const obj = Object.fromEntries(list);
log(obj);

// {one: 20}

getOwnPropertyDescripters()

• Object의 프로퍼티 디스크립터를 반환
  1) 데이터 디스크립터

const obj = {music: "음악"};
const des = Object.getOwnPropertyDescriptors(obj);
for (let name in des.music){
  log(name + ": " + des.music[name]);
};

// value: 음악
// writable: true
// enumerable: true
// configurable: true

2) 악세스 디스크립터

const obj = {
  	get music(){}
};
const des = Object.getOwnPropertyDescriptor(obj);
for (let name in des.music){
  log(name + ": " + des.music[name]);
};

// get: get music(){}
// set: undefined
// enumerable: true
// configurable: true

• 상속 받은 오브젝트는 반환하지 않음

---

메소드 호출 방법

• prototype과 __proto__에 연결된 메소드를 호출하는 방법이 다름

• prototype에 연결된 메소드 호출

  • Array.prototype.slice()처럼 prototype을 작성하여 호출

function Book(){
  this.point = 100;
};
Book.prototype.getPoint = function(){
  log(Object.is(this, Book.prototype));
  return this.point;
};
log(Book.prototype.getPoint());
log(Book.prototype.getPoint.call(Book));

// true
// undefined
// false
// undefined

• __proto__에 연결된 메소드 호출
  • 인스턴스를 생성하여 호출
  • new 연산자로 생성한 인스턴스 구조

---

인스턴스에 함수로 추가

• new 연산자로 인스턴스를 생성하고

  • 인스턴스의 프로퍼티로 함수를 추가
  • 다른 인스턴스와 공유하지 않음

• 인스턴스에 추가한 수의 인스턴스 구조

---

__proto__에 메소드 추가

• __proto__에 function을 추가하면

  • prototype에 설정되며
  • 메소드로 추가하는 것과 같음
  • __proto__에 추가한 후의 prototype 모습

• 추가한 메소드를 인스턴스에 공유

---

setPrototypeOf(): 인스턴스 사용

• 첫 번째 파라미터 인스턴스의 __proto__에
  • 두 번째 파라미터의 prototype에 연결된 프로퍼티를 설정

let obj = {0: 10, length: 1};
Object.setPrototypeOf(obj, Array.prototype);

• 첫 번째 파라미터에 인스턴스 작성

  • setPrototypeOf() 실행 후 인스턴스 구조

• ES5에 getPrototypeOf()가 있음

---

setPrototypeOf(): prototype 사용

• 첫 번째 파라미터에 prototype 작성

• 첫 번째 파라미터의 prototype에

  • 두 번째 파라미터의 prototype에 연결된 프로퍼티를 설정

• prototype 연결 후의 인스턴스 구조

• 상속을 위한 목적이라면

  • super 등의 상속 처리 키워드를 제공하는 Class를 사용하는 것이 좋음