Small Grey Outline Pointer JavaScript :: 객체 메서드 Object methods
본문 바로가기
Dev./JavaScript

JavaScript :: 객체 메서드 Object methods

by sso. 2022. 7. 3.

계산 된 프로퍼티 Computed property
객체 메서드 Object methods

 

 

 

 

객체 복제 Object.assign()

// Object.assign(): 객체 복제

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

const cloneUser = user;
//이렇게 하면 클론이 될까? 안된다 왜냐하면
//user 변수에는 객체 자체가 들어가있는게 아니라 객체가 저장되어 있는 메모리주소인 객체에 대한 참조값이 저장 됨
//따라서 클론유저를 만들어 유저를 담아도 그 참조값만 저장된다

const newUser = Object.assign({}, user);
// 여기서 빈 객체 {} 는 초기값 두번째 매개변수로 들어온 객체들이 초기값에 병합 된다
{} + {name: 'Mike', age : 30} 

newUser.name='Tom';
console.log(user.name); //결과: 'Mike' , 위에서 이름을 바꾸어도 변함 없다 
newUser != user //같은 객체가 아니다

Object.assign({gender:'male'}, user);
//성별 값만 있는 객체가 user를 병합 총 3개의 프로퍼티를 가지게 된다
// gender : 'male' , name : 'Mike' , age : 30

Object.assign({name: 'Tom'}, user);
//이렇게 되면 user값을 덮어 쓰게 된다 Tom 대신 Mike가 됨

 

 

 

두개 이상의 객체 병합 Object.assign

/* 두개 이상의 객체도 병합 가능 */
const user = {
    name : 'Mike'
}
const info1 = {
    ae: 30,
}
const info2={
    gender :'male',
}
Object.assign(user, info1, info2)

user <- info1

user <- info2

이렇게 합쳐진다 

 


 

객체 프로퍼티의 key를 배열로 반환 

Object.keys() : 키 배열 반환

/* Object.keys() : 키 배열 반환 */
//객체 프로퍼티의 key를 배열로 반환

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

Object.keys(user); //user 객체를 Object.keys의 인수로 전달
Object.values(user);
Object.entries(user);

 

Object.keys() : 키 배열 반환 ["name", "age", "gender"]

 

Object.valuse() : 값 배열 반환

객체에 value에 해당하는 'Mike' , 30 , 'male' 

["Mike", 30, "male"] 배열로 반환

 

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

["name","Mike"]

["age",30]

["gender","male"]

 

 

 

Object.fromEntries(): 키/값 배열을 객체로

/* Object.fromEntries(): 키/값 배열을 객체로 */
const arr =
[
    ["name","Mike"],
    ["age",30],
    ["gender","male"]
];

Object.fromEntries(arr);

 

{

name : 'Mike',

age : 30,

gender : 'male',

}

 

 

 

 

 

예제

//예제

let n ="name";
let a ="age";

const user = {
    [n] : 'Mike',
    [a] : 30,
    [1+4]:5,
};

console.log(user);

{5: 5, name: 'Mike', age: 30}

 

 

 

function makeObj(key, val){
    return{
        [key] : val
    }
}

const obj= makeObj('이름', 33);
console.log(obj);

{이름: 33}

//어떤것이 key가 될 지 모를 때 사용하면 좋다

 

 

Object.assign()

const user={
    name: "Mike",
    age: 30,
};

const user2=user; 
user2.name="Tom";

console.log(user);
console.log(user2);

{name: 'Tom', age: 30}

{name: 'Tom', age: 30}

 

기존에 있던 user와 user2의 이름이 모두 바뀌었다

모두 하나의 객체로 보고 있는 것 따라서 복사를 할 때에는

Object.assign() 을 사용해준다

 

const user={
    name: "Mike",
    age: 30,
};

const user2=Object.assign({},user); 
console.log(user);

{name: 'Mike', age: 30}

 

 

 

const user={
    name: "Mike",
    age: 30,
};

const user2=Object.assign({},user); 
user2.name="Tom";

console.log(user);
console.log(user2);

{name: 'Mike', age: 30}

{name: 'Tom', age: 30}

 

기존에 있던 user와 user2의 값이 각각 나온다 

 

 

 

Object.fromEntries
let arr=[
    ['mon','월'],
    ['tue','화']
]
//배열 안에 배열이 2개가 있음 key와 value

728x90

'Dev. > JavaScript' 카테고리의 다른 글

Javascript :: 나머지 매개변수, 전개 구문  (0) 2022.07.19
Javascript 문법 정리  (0) 2022.07.18
JavaScript :: 구조 분해 할당  (0) 2022.07.15
JavaScript :: Symbol  (0) 2022.07.15
Javascript :: 콜백 함수/동기와 비동기  (0) 2022.07.11

댓글