객체Objcet에서 사용 가능한 methods와 Computed property

* Computed property : 대괄호[]로 묶어주면 문자열이 아니라 변수에 할당된 값이 들어감

let a = "age";

const user = {
       name : "Jin",
       age : 30,
}

/*같은 식*/
let a = "age";

const user = {
    name : "Jin",
    [a] : 30,//age : 30과 같음
}//대괄호[]로 묶어주면 a라는 문자열이 아니라 변수a에 할당된 값이 들어감

/*다른예시*/
let a = "name";
let b = "age";

const user = {
    [a] : "Jin",
    [b] : 30,
}

console.log(user);//{name : "Jin", "age" : 30}

/*어떤것이 키가 될지 모를 때 유용함*/
function makeObj(key, val){
    return{
        [key] : val,
    }
}

const obj = makeObj("성별", "male");

console.log(obj);//{성별 : "male"}

//---------------------------------------------------------------------------------------------
/*식자체를 넣는 것도 가능함*/
const user = {
    [1 + 4] : 5,
    ["안녕" + "하세요"] : "Hello",
}//>user{5 : 5, 안녕하세요 : "Hello"}

---

* 객체에서 사용할 수 있는 methods들

- Object.assign() : 객체 복제

const user = {
    naem : "Jin",
    age : 30,
}

const cloneUser = user;//cloneUser를 만들어서 user를 넣어주면 복제 안됨
/*
user변수에는 객체 자체가 들어가 있는 것이 아니라 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장되어 있음
즉 cloneUser를 만들어 user를 넣어주면 객체가 복사되어 들어가는 것이 아니라 그 참조값만 복사됨
하나의 객체를 두 변수가 접근하고 있는 것을 말함
*/

//------------------------------------------------------------------------------------------
const user = {
    name : "Jin",
    age : 30,
}

const newUser = Object.assign({}, user);
/*
{
    name : "Jin",
    age : 30,
}빈객체{}에 user가 병합

여기서 빈객체{}는 초기값을 말함
두번째 매개변수부터 들어온 객체들이 초기값에 병합됨
*/

{} + {name : "Jin", age : 30} = {
                                    name : "Jin",
                                    age : 30,
                                }//빈객체{}에 user가 병합
                            
//-------------------------------------------------------------------------------------------
/*이름을 바꿔도 user는 변함없음*/
const newUser = Object.assign({}, user);

newUser.name = "Tom";

console.log(user.name);//Jin

newUser!=user//newUser와 user는 같은 객체가 아님

//-------------------------------------------------------------------------------------------
/*다른예*/
Object.assign({gender : "male"}, user);
/*
{
    gender : "male",
    name : "Jin",
    age : 30,
}성별 값만 있는 객체가 user를 병합하는 것
*/
                                          
//-------------------------------------------------------------------------------------------
/*병합하는데 키가 같으면*/
Object.assign({name : "Tom"}, user);
/*
{
    //name : "Tom",
    name : "Jin",
    age : 30,
}Tom위에 Jin을 덮어쓰게 됨
*/
                                          
//-------------------------------------------------------------------------------------------
/*두개이상 객체도 합칠 수 있음*/
const user = {
	name : "Mike"
}
const info01 = {
	age : 30
}
const info02 = {
	gender : "male"
}

Object.assign(user, info01, info02)//1. user가 먼저 info01을 병합하고 2. 그다음에 user가 info02를 병합함

- Object.keys() : 키 배열 반환

const user = {
    name : "Jin",
    age : 30,
    gender : "male",
}

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

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

 

const user = {
    name : "Jin",
    age : 30,
    gender : "male",
}

Object.values(user);//["Jin", 30, "male"]

- Object.entries() : 키+값 배열 반환

const user = {
    name : "Jin",
    age : 30,
    gender : "male",
}

Object.entries(user);
/*
[
    ["name", "Jin"],
    ["age", 30],
    ["gender", "male"]
]
*/

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

const arr =
[
    ["name", "Jin"],
    ["age", 30],
    ["gender", "male"]
];

Object.fromEntries(arr);
/*
{
    name : "Jin",
    age : 30,
    gender : "male",
}
*/

 

---

/*잘못된 복제 방법*/
const user = {
    name : "Jin",
    age : 30,
}

const user02 = user;

console.log(user02);//{name : "Jin", age : 30}

//만약 user02의 name을 바꿔주면
const user02 = user;
user02.name = "Tom";

console.log(user);//{name : "Tom", age : 30}
console.log(user02);//{name : "Tom", age : 30} 둘다 바껴버림, 모두 하나의 객체를 말하고 있음

/*정확한 복제 방법*/
const user = {
    name : "Jin",
    age : 30,
}

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

console.log(user02);//{name : "Jin", age : 30}

//만약 user02의 name을 바꿔주면
user02.name = "Tom";

console.log(user);//{name : "Jin", age : 30} 기존의 user는 그대로
console.log(user02);//{name : "Tom", age : 30} user02만 바뀜

//-------------------------------------------------------------------------------------------
/*키값 배열로 반환*/
const user = {
    name : "Jin",
    age : 30,
}

const result = Object.keys(user);

console.log(result);//["name", "age"]

//-------------------------------------------------------------------------------------------
/*값을 배열로 반환*/
const user = {
    name : "Jin",
    age : 30,
}

const result = Object.value(user);

console.log(result);//["Jin", 30]

//-------------------------------------------------------------------------------------------
/*키값과 값 둘다 배열로 반환*/
const user = {
    name : "Jin",
    age : 30,
}

const result = Object.entries(user);

console.log(result);
/*
[Array, Array] : name : "Jin"이렇게 하나의 배열, age : 30이렇게 하나의 배열이 나옴
즉,
[
    ["name", "Jin"],
    ["age", 30]
]
*/

//-------------------------------------------------------------------------------------------
/*배열을 객체로 반환*/
let arr = [
	["mon", "월"],
    ["tue", "화"]
]

const result = Object.fromEntries(arr);

console.log(result);//{mon : "월", tue : "화"}