Javascript-3 (computed property, Object method)

Patrick·2021년 4월 10일
0

Javascript

목록 보기
3/18
post-thumbnail

우선 Computed property에 대해서 정리하자!
computed property(계산 된 프로퍼티)는 이런 식으로 사용 할 수 있다.
이런 예제가 있다고 해보자!

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

이는 [ ]를 사용해서 쓸 수도 있다
즉,

let a = 'age';
const user = {
	name : 'Mike',
	[a] : 30 //  age: 30
} 

이렇게 [ a ]라고 사용해도 a라는 문자열이 아니라, 변수 a에 할당된 값이 들어가게 된다.
이를 computed propery라고 부른다.

또 다른 예제를 한번 보겠다.
아래와 같이 식 자체를 넣는 것도 가능하다!

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

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


이번에는 Object Methods 즉, 객체에서 사용 할 수 있는 메소드들에 대해서 알아보겠다.

Object.assign() : 객체를 복제한다

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

만약 이런 것이 있을 때,

const newUser = user

이렇게 하면 복제가 될까? NO!!!
그냥 객체에 의한 참조값이 저장된다.
즉, name과 age를 user와 newUser가 공유하게 되는 것 뿐이다

이를 동일하게 복제하려면 Object.assign을 사용하면 된다

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

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

{} 빈 객체는 초기 값이며, 두번째 매개변수(user)가 초기값에 병합된다
즉, {} + { name: 'Mike', age: 30 } 이렇게 되면서 복제가 된다.
복제가 되었으므로 newUser의 내용을 바꿔도 user에는 변화가 없다.

그리고 여기서 key array만 반환하고 싶다면? Object.keys

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

Object.keys(user); // ['name', 'age', 'gender']

이렇게 사용 할 수 있으며,

반대로 value만 반환 받고 싶다면? Object.values

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

Object.values(user); // ['Mike', 30, 'male']

이렇게 해줄 수 있다.

만약 key와 value를 모두 배열로 반환 받고 싶다면? Object.entries

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

Object.entries(user);//
[
	['name', 'Mike'],
	['age', 30],
	['gender', 'male'],
]

key와 value의 배열을 객체로 변환하고 싶다면? Object.fromEntries

const arr = 
[
	['name', 'Mike'],
	['age', 30],
	['gender', 'male'],
]

Object.fromEntries(arr);
{
	name : 'Mike',
	age : 30,
	gender : 'male',
}
profile
예술을 사랑하는 개발자

0개의 댓글