Javascript-3 (computed property, Object method)
우선 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',
}
Author And Source
이 문제에 관하여(Javascript-3 (computed property, Object method)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@faunus/Javascript-3-computed-property-Object-method저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)