[JavaScript] Object (객체), Object 복사[Copy], 합치기[Merge], key와 value추출하기, Object 키(key)에 변수 할당하기[Computed property](Object.assign, Object.keys, Object.values, Object.entries) [Deep Copy, Shallow Copy]

📝Object (객체)

var book ={
	title : "채식주의자",
	author : "한강",
	price : "120000"
}

console.log(book.title); // 채식주의자

var book =[
	{
		title : "채식주의자",
		author : "한강",
		price : "120000"
	},
	{
	title : "육식주의자",
	author : "두강",
	price : "130000"
	}	
] // 배열 + 객체



console.log(book[0].title); // 채식주의자
console.log(book[1].title); // 육식주의자

// 객체

자바스크립트는 객체를 지정할 수 있고 속성 : 속성값으로 이루어져있습니다. 또한 배열로 여러개를 만들 수도 있습니다.

 

// Object (you can change inner value even if const)
const person  = {name : 'smith', age : 20};
console.log(`name : ${person.name}, age : ${person.age}`);
person.name = 'hommer'
console.log(`name : ${person.name}, age : ${person.age}`);

 

 

값에 직접 접근해 해당 내용의 값을 바꿀수도 있습니다.

 

📝Object Key를 변수로 할당하기 [Computed property]

// Computed property
let a = 'age';
const user1 = {
    name : 'Mike',
    // age : 30
    [a] : 30 // "키"에 변수를 할당할 수 있다
}
console.log(user1); //{ name: 'Mike', age: 30 }

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

console.log(user2); // { '5': 5, '안녕하세요': 'Hello' }

 

📝Object 복사하기 (잘못된 버전) [주소복사]

const user = {
    name : 'Mike',
    age : 30
}
const cloneUser = user; // 주소 복사

/** 값 변화 **/
cloneUser.name = "Bob";
user.age = 10;

console.log(`name : ${user.name}, user.age : ${user.age}`);           // name : Bob, user.age : 10
console.log(`name : ${cloneUser.name}, user.age : ${cloneUser.age}`); // name : Bob, user.age : 10

그냥 = 으로 퉁쳐버리면 값이 복사가 되는게 아니라 주소가 복사됩니다. 그래서 서로에게 영향을 끼치기 때문에 생각한대로 프로그램이 안 돌아갈 수 있습니다.

 

 

📝Object 복사하기 [값 복사]

const user = {
    name : 'Mike',
    age : 30
}
const realCloneUser = Object.assign({}, user);

realCloneUser.name = "Bob";
user.age = 10;

console.log(`name : ${user.name}, user.age : ${user.age}`);                   // name : Mike, user.age : 10
console.log(`name : ${realCloneUser.name}, user.age : ${realCloneUser.age}`); // name : Bob, user.age : 30

Object.assign( ${기존 객체 값 [없을 시 {} 빈 값]}, ${복사할 값}) 을 이용해 값을 복사할 수 있습니다

 

📝기존 Object에 값 추가 및 덮어씌우기(overwrtie) 및 객체 합치기

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

/** --- Clone Json Object [add] --- **/
const cloneUser1 = Object.assign({gender:'male'}, user); // 복제 + 원하는 값 추가
console.log(cloneUser1); // { gender: 'male', name: 'Mike', age: 30 }


/** --- Clone Json Object [overwrite] --- **/
const cloneUser2 = Object.assign({name:'Bob'}, user); // 복제 + 원하는 값 추가
console.log(cloneUser2); // { gender: 'male', name: 'Mike', age: 30 }


/** --- Merge Json Object --- **/
const name =  {name : 'Mike'}
const age =  {age : 40}
const gender =  {gender : 'female'}

const mergeUser = Object.assign(user, age, gender);
console.log(mergeUser); // { name: 'Mike', age: 40, gender: 'female' }

Object.assign( ${합칠 객체}, ${합칠 객체} ...) 을 이용해 객체를 합칠 수 있습니다

 

📝Object Key, Value 추출하기

const user = { name: 'Mike', age: 40, gender: 'female' }


/** --- Extract Json Keys, Values --- **/
const keys = Object.keys(user);
const values = Object.values(user);
console.log(keys);   // [ 'name', 'age', 'gender' ]
console.log(values); // [ 'Mike', 40, 'female' ]


/** --- Extract Json Keys + Values --- **/
const entries = Object.entries(user);
console.log(entries); // [ [ 'name', 'Mike' ], [ 'age', 40 ], [ 'gender', 'female' ] ]

 

• Object.keys( ${키를 추출할 객체} ) 을 이용해 객체의 키를 배열로 추출할 수 있습니다.
• Object.keys( ${값을 추출할 객체} ) 을 이용해 객체의 값을 배열로 추출할 수 있습니다.
• Object.entries( ${키와 값을 추출할 객체} ) 을 이용해 객체의 키,값을 배열로 추출할 수 있습니다.

 

🔗 참고 및 출처

https://www.youtube.com/watch?v=6NZpyA64ZUU&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=3