[JavaScript] 객체 메소드(Object Method)

 

이번 시간은 객체에서 사용할 수 있는 객체 메소드(Object Method)와 Computed propery에 대해 알아볼 것이다.

 

 

 

 

Computed property

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

user라는 객체를 선언해주었다. 이 때 [a] 는 a라는 문자를 배열에 넣은 것이 아니라,

위에 let으로 선언해준 변수 a로 할당된 값이 들어간다. 즉 age : 30 인 것과 같은 것이다.

 

이를 Computes property(계산된 프로퍼티) 라고 부른다.

 

아래와 같이 식 자체를 넣는 것도 가능하다.

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

 

 

Methods

이번에는 객체에서 사용할 수 있는 몇가지 메소드에 대해 배워보도록 하자.

 

1. Object.assign( )

: 객체를 복제하는 메소드이다.

const user = {     name : 'Ujin',     age : 30 } const cloneUser = user;

이렇게 cloneUser에 user를 넣어준다고 객체가 복사되는 것이 아니다.  

user 객체가 저장되어있는 메모리 주소인, 객체에 대한 참조 값이 저장이 된다.

즉 cloneUser에는 user 객체가 복사되는 것이 아닌 대한 참조 값인 name, age가 복사되는 것이다.

 

만약 cloneUser의 name이나 age를 바꾼다면 user에 있는 name과 age도 같이 바뀌게 된다.

이는 하나의 참조 값을 공유하기 때문이다.

 

때문에 객체를 동일하게 복제할 때는 Object.assign( )이라는 메소드를 사용한다.

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

이렇게 하면  { } 빈 객체에 user가 병합됨으로 user의 참조 값을 가진 객체가 생성되는 것이다.

이때 newUser의 값을 바꾼다고 해서 user의 값이 바뀌지는 않는다.

 

 

const newUser = Object.assign({ gender : 'male'}, user);

이렇게 하게 되면 gender 값을 가진 객체에 user를 병합하게 되는 것이고, 

newUser는 총 세개의 프로퍼티를 가진 객체가 되는 것이다.

 

 

const newUser = Object.assign({ name : 'Jane'}, user);

이렇게 name 을 Jane으로 바꾼다면 원래 user가 가지고 있던 Ujin이 Jane으로 덮어씌워지는 것이다.

 

 

 

2. Object.keys( )

: 키 배열을 반환하는 메소드이다.

const user = {    name : 'Mike',    age : 30,    gender : 'male' } Object.keys(user);

이렇게 사용하면 user에 있는 key 값인 name, age, gender 가 배열로 반환되는 것이다.

 

 

 

3. Object.values( )

: 값 배열 반환

 

반대로 Object.values는 값 배열을 반환한다.

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

이렇게 되면 객체의 value에 해당하는 'Mike, 30, 'male' 이 배열에 담겨 반환된다.

 

 

 

4. Object.entries( )

: 키 / 값 배열 반환

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

이 메소드를 사용하면 키와 값을 쌍으로 묶어 배열에 담아 반환시켜준다.

[ ["name", "Mike"], ["age", 30 ], ["gender", "male"] 이런 형태로 반환시켜준다.

 

 

 

5. Object.fromEntries( )

: 키 / 값 배열을 객체로

 

이는 위의 함수와 반대로 키와 값을 가진 배열을 넣어주면 객체로 만들어주는 메소드이다.

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

위와 같이 사용해주면  { name : 'Mike, age : 30, gender : 'male } 이런 형태의 객체가 만들어지는 것이다.

 

 

 

 

 

 

 

 

* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.