[JS] 객체 메소드(object method):: assign()으로 객체 복사, 값 참조하기, 계산된 프로퍼티(computed property)

본 포스팅은 유튜브 코딩앙마 님의
"자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다.

계산된 프로퍼티(computed property)

객체를 생성할 때, 프로퍼티 key로 `[ ]`를 사용할 수 있다.

 

객체 속성 이름(key)으로 [변수명]을 사용하면 해당 변수에 할당된 값이 속성 key로 설정되고,

[식]을 사용하면 식이 계산된 결과가 key로 설정된다.

const a = "age";

const user = {
	name: "mankkong",
	[a]: 22, // age: 22
	[1 + 4]: 5 // 5: 5
};

function MakeObj(key, val){
	this.[key] = val;
};

객체 메소드(object method)

.assign()

객체를 복사하기 위해 새로운 변수에 기존의 객체를 그대로 전달하게 되면 객체의 값(value)가 아니라 객체가 저장된 메모리 주소(reference)가 복사되어 저장되기 때문에, 결과적으로 두 변수가 동일한 객체를 가리기케 된다.

 

아예 새로운 주소를 갖는 별개의 객체로 복사하고 싶은 경우에는 `assign()` 메소드를 사용할 수 있다. 

const user = {
	name: "mankkong",
	age: 22,
};

// object.assign() -> 객체 복제
const newUser1 = user; // 객체가 복사 되는 게 아니라 메모리 주소만이 저장됨 (동일한 개체를 가리킴)
const newUser2 = Object.assign({}, user); // {} 빈 객체(초기값)에 user 객체가 병합

`assign()` 메소드는 정확히 말하면 복제 메소드라기보다는 병합 메소드!

여러 개의 객체를 하나로 합친 결과를 새로운 객체로 반환해준다. 

 

- 병합할 때 초기값에 다른 프로퍼티가 있다면 -> 추가로 병합한다.
- 초기값에 같은 key의 프로퍼티가 있다면 -> 덮어쓰기
- 두 개 이상의 객체도 병합 가능하다. -> `object.assign({}, obj1, obj2);`

 

.keys() .values()

`keys()`와 `values()` 메소드를 사용하면 객체가 갖는 모든 속성 키와 속성 값을 배열 형태로 받아볼 수 있다.

// object.keys() -> 키 배열 반환
const key = Object.keys(user); // ["name", "age"]

// object.values() -> 속성 값 배열 반환
const val = Object.values(user); // ["mankkong", 22]

 

.entries() .fromEntries()

`entries()` 메소드는 객체의 각 속성 키와 그에 해당하는 속성 값을 배열로 묶어서 만든 entry를 반환한다.

반대로 `fromEntries()`는 1개 이상의 `[속성 키, 속성 값]`이 저장된 배열(= entry)을 받아서 객체 형태로 변환한다.

// object.entries() -> 키/값 모두 배열 반환
const entry = Object.entries(user); // [["name", "mankkong"], ["age", 22]]

// object.fromEntries() -> 키/값 배열을 객체로 반환
const arr = [["name", "mankkong"], ["age", 22]] // => entries
const obj = Object.fromEntries(arr); // {name: "mankkong", age: 22}