JS 데이터 - 객체

lbr·2022년 7월 11일
0

객체

Object.assign()

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

  • prototype이 붙어 있지 않는 메소드 들을 정적메소드(static) 라고 부릅니다.

    그래서 이러한 메소드들은 예를들어 {}(객체)뒤에 .saaign()을 붙여서 직접적으로{}.assign()을 사용할 수 없습니다.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(target === returnedTarget);
// true
  • Object.assign();에서 같은 속성의 경우 덮어쓰기합니다.

위에서 targetreturenedTarget 은 같은 객체입니다. 같은 객체(메모리 주소)를 가리키고 있습니다.

참고 : 참조형 - {}, [], function

const a = {k: 123};
const b = {k: 123};
console.log(a === b);
// false
  • 생긴것은 똑같지만 서로 다른 메모리 주소를 바라보고 있기 때문에 다르다고 판단합니다.

첫번째 object에 속성을 추가하는 것이 아닌, 새로운 object로 속성들을 구성하기.

const returnedTarget = Object.assign({}, target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(target === returnedTarget);
// false
  • 원본들을 수정하지 않고, 원본들의 속성들을 합쳐놓은 새로운 객체를 반환합니다.

복사본 만들기

const returnedTarget = Object.assign({}, target);

Object.keys(); 와 map활용

객체의 속성 이름들을 배열로 만들어 반환합니다.

cosnt user = {
  name: 'Heropy',
  age: 85,
  email: 'thesecon@gmail.com'
}

cosnt keys = Object.keys(user);
console.log(keys);
// ['name', age', 'email']

console.log(user['email']);
// thesecon@gmail.com

위의 key값들을 이용해서 map으로 값 추출하기

const values = keys.map(key => user[key]);
console.log(values);
// ['Heropy', 85, 'thesecon@gmail.com']

참고

  • user.email 로 객체의 속성들을 접근할 수 있지만, user['email'] 로도 접근할 수 있습니다.
    이러한 방식은 위의 map으로 값들을 추출할때 효과적으로 사용될 수 있습니다.

0개의 댓글