객체 메소드(Object methods), 계산된 프로퍼티(Computed property)

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

계산된 프로퍼티는 아래와 같습니다.

let a = 'age';

const user = {
	name : 'Mike',
	age : 30
}

// 위 식을 아래처럼 쓸 수 있습니다.

const user = {
	name : 'Mike',
	[a] : 30
}

변수에 할당된 값을 객체의 key 로 넣을 수 있습니다. 아래 처럼 식 자체를 넣는 것도 가능합니다.

const user = {
	[1+4] : 5,
	["안녕"+"하세요"] : "Hello"
}

user 
-> {5: 5, 안녕하세요: "Hello"}

아래와 같이 key 값이 바뀌는 객체를 만들 때 유용합니다.

function makeObj(key, val){
	return {
		[key]: val,
	};
}
const obj = makeObj("나이", 33);
console.log(obj); 

---

아래 객체 메소드를 살펴보겠습니다.

Object.assign()
Object.keys()
Object.values()
Object.entries()
Object.fromEntries()

---

Object.assign() 은 객체를 복제합니다. 아래와 같이 대입하는 것은 객체 자체를 복제하는 것이 아니라 하나의 객체에 두 변수가 접근하는 것을 의미합니다.

const user = {
	name : 'Mike',
	age : 30
}
const cloneUser = user;
// cloneUser 를 바꾸면, user 도 바뀌는 상태

동일하게 복제하려면 Object.assign() 메소드를 써야 합니다.

const newUser = Object.assign({}, user);

여기서 빈 객체 {} 는 초기값이고 두번째 매개변수로 들어온 객체가 초기값에 반영됩니다.

const user = {
	name : 'Mike',
	age : 30
}
Object.assign({ gender : 'male' }, user);
// 이렇게 하면 설명만 있는 객체에 유저를 병합하는 것
// 총 3개 프로퍼티 가지게 됨 

const user = {
	name : 'Mike',
	age : 30
}
Object.assign({ name : 'Jane' }, user);
// 초기값에 같은 key 값이 있다면, 매개변수로 들어오는 내용이 덮어 씀

두개 이상의 객체도 합칠 수 있습니다.

const user = {
	name: 'Mike'
}
const info1 = {
	age: 30
}
const info2 = {
	gender: 'male'
}
Object.assign(user, info1, info2)

---

Object.keys() 메소드는 객체의 key 를 배열로 반환합니다.

const user = {
	name: 'Mike',
	age: 30,
	gender : 'male',
}
Object.keys(user); // ->  ["name", "age", "gender"]

---

Object.values() 메소드는 객체의 value 를 반환합니다.

const user = {
	name: 'Mike',
	age: 30,
	gender : 'male',
}
Object.values(user); // ->  ['Mike', 30, 'male']

---

Object.entries() 메소드는 key 와 value 를 배열로 묶어서 반환합니다.

const user = {
	name: 'Mike',
	age: 30,
	gender : 'male',
}
Object.entries(user); 
[
	["name", "Mike"],
	["age", 30],
	["gender", "male"]
]

Object.fromEntries() 는 반대로 동작합니다. key 와 value 로 붂은 배열을 객체로 만들어줍니다.

const arr = [
	["name", "Mike"],
	["age", 30],
	["gender", "male"]
]
Object.fromEntries(arr);
{
	name: 'Mike',
	age: 30,
	gender : 'male',
}