12.Javascript 계산된 프로퍼티, 객체 메소드

01. 계산된 프로퍼티

객체를 생성할 때 프로퍼티를 변수로 받아 오거나 계산을 해서 만들 수 있다.

let a = '나이';

const user = {
	name : 'Ant',
    	[a] : 27,
	[2+3] : 5,
	['취미를' + ' 적어주세요'] : '축구'
};

이렇게 user라는 객체를 생성해주면 [a]에는 '나이'라는 값이 들어가고 [2+3]과 ['취미를' + '적어주세요']에는

각각 5와 취미를 적어주세요라는 키값이 적용된다.

 

 

02. 객체 메소드

- 객체 복제 Object.assign( );

객체를 복제할 때 단순히 객체의 이름으로 다른 변수를 생성해주면 생성해준 객체의 데이터 값을 바꿀 때 기존 객체의 값도 같이 변경이되는 오류가 발생한다. 이에 있어서 Object.assign( ); 을 사용해주면 온전히 새로운 객체를 같은 내용으로 복사하여 사용할 수 있다.

const user = {
    name : 'Ant',
    age : 27,
    gender : 'male'
};

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

이렇게 Object.assign( );으로 userCopy에 user의 프로퍼티들을 복사할 수 있다.

두 번째 매개 변수부터 들어온 값이 { }(초기값)에 들어간다.

user의 프로퍼티 값들이 { } + { name : 'Ant', age : 27, gender : 'male' } 이렇게 들어가게 된다.

여기서 예를 들어 { } 안에 { hobby : 'football' }을 넣어준다면 기존 user의 복사된 프로퍼티들에 + 가 되어서 생성이 된다.

* { } 안에 { name : 'Jane' }이란 프로퍼티를 생성하면서 만들어주면 기존 user 값이 우선적으로 덮어 씌워진다.

 

 

- 키 배열 반환 Object.keys( );
객체의 프로퍼티에서 키에 해당하는 부분을 배열로 변환시키는 메소드이다.

const user = {
    name : 'Ant',
    age : 27,
    gender : 'male'
};

const userKeys = Object.keys(user);

userKeys는 user의 키값들이 배열이 되면서 [ "name", "age", "gender" ] 라는 값을 갖게 된다.

 

 

- 값 배열 반환 Object.values( );

객체의 프로퍼티에서 값에 해당하는 부분을 배열로 변환시키는 메소드이다.

const user = {
    name : 'Ant',
    age : 27,
    gender : 'male'
};

const userValues = Object.values(user);

userValues는 user의 값들이 배열이 되면서 [ "Ant", 27, "male" ] 라는 값을 갖게 된다.

 

 

- 키/값 배열 반환 Object.entries( );

객체의 프로퍼티에서 키와 값을 배열로 변환시키는 메소드이다.

const user = {
    name : 'Ant',
    age : 27,
    gender : 'male'
};

const result = Object.entries(user);

 

이렇게 변환을 시키면 result는

[
    ["name","Ant"],
    ["age",27],
    ["gender","male"]
];

각각의 프로퍼티가 배열로 변하면서 배열안에 프로퍼티라는 배열이 있게 된다.

 

 

- 키/값 배열을 객체로 반환 Object.fromEntries( );

키와 값으로 이뤄진 배열을 객체로 반환시키는 방법이다.

const userArray = [
    ["name","Ant"],
    ["age",27],
    ["gender","male"]
];

const userObj = Object.fromEntries(userArray);

이렇게 배열안에 키와 값으로 나눠진 형태를 가지고 있다면, Object.fromEntries( );를 사용하여 객체로 반환이 가능하다.

 

변환을 시키면 userObj는

{
	name : "Ant",
	age : 27,
	gender : "male"
};

라는 객체로 반환이 된다.