📚 JavaScript 객체
📕 객체란?
객체에는 숫자, 문자, 불리언 값, 함수 등 자바스크립트에서 사용되는 모든 값들을 담을 수 있다.
사용방법
자바스크립트에서 객체는 아래와 같이 key : value 값으로 나뉜다.
const object = {
key : value,
name : "ming",
"my job" : "개준생",
};
console.log(object.name); // ming
console.log(object["my job"]; // 개준생key값이 변수 명으로 사용할 수 없는 값을 포함하고 있다면, 따옴표를 이용해 문자열로 나타낼 수 있다. 이 외의 경우에는 따옴표를 생략하고 사용한다.
이미 정의되어 있는 변수에 value를 부여하고 싶다면 아래와 같이 할 수 있다.
const a = 'age';
const object = {
[a] : 3,
};
console.log(object); // { age : 3 }
console.log(object[a]); // 3
console.log(object.age); // 3변수 명을 대괄호로 감싸고 key값을 선언하면, key값이 a가 되는 것이 아니라 a가 가지고 있는 문자열인 age가 된다.
위와 같은 방법으로 객체에 함수도 담을 수 있다.
const object = {
getName : function() {
console.log("ming");
},
getNameShort(){
console.log(this.name); // ming
},
getNameWithArrowFunction : () => {
console.log(this.name); // undefined. 이때의 this는 전역
},
};📗 구조분해할당
아래와 같은 객체가 있을 때, 각각을 나누어 변수에 저장하고 싶다면 객체 아래에 쓰여진 것과 같이 하나씩 지정해주면 된다.
const obj = {
id: 1,
name: "ming",
age: 25,
habit: "hiking".
}
const id = obj.id;
const name = obj.name;
const age = obj.age;
const habit = obj.habit;이러한 작업은 여러번 반복적으로 진행해야 해서 비효율적이다.
사용방법
구조분해할당을 이용해 아래와 같이 한 줄로 정리할 수 있다.
const obj = {
id: 1,
name: "ming",
age: 25,
habit: "hiking".
}
const {id, name, age, habit} = obj;
const {id, habit} = obj; // 만일 name과 age값이 필요없을 때📘 얕은복사와 깊은복사
얕은복사 (Shallow Copy)
아래와 같은 코드가 있을 때, 결과는 아래 설명과 같다.
const obj1 = {
id : 1,
name : 'ming',
age : 25,
habit : 'hiking',
};
obj1.email = 'dev.vming@gmail.com';
const obj2 = obj1;
console.log('변경전');
console.log('obj1 : 'obj1);
console.log('obj2 : 'obj2);
obj2.email = 'empty';
console.log('변경후');
console.log('obj1 : 'obj1);
console.log('obj2 : 'obj2);obj1과 obj2의 email은 동일하게 변경 전 ‘dev.vming@gmail.com’, 변경 후 ‘empty’로 변경된다. obj2의 값만 변경하였는데도 obj1의 값도 변경되었음을 확인할 수 있다. 이 현상을 얕은복사 라고 한다.
깊은복사 (Deep Copy)
깊은복사 를 하고 싶다면 아래와 같이 전개구문을 사용하여 새로 객체를 만들어주면 된다.
전개구문에 대해서는 아래에서 더 살펴보기로 한다.
const obj1 = {
id : 1,
name : 'ming',
age : 25,
habit : 'hiking',
};
const obj2 = {...obj1, email: 'dev.vming@gmail.com};
console.log('변경전');
console.log('obj1 : 'obj1);
console.log('obj2 : 'obj2);
obj2.email = 'empty';
console.log('변경후');
console.log('obj1 : 'obj1);
console.log('obj2 : 'obj2);이렇게 하면 obj2라는 새로운 객체를 만든 것이기 때문에, 변경 전의 obj1에는 email이 없고 obj2에는 입력한 email이 있다. 변경 후에도 obj2의 email만 ‘empty’ 로 값이 변경된다.
중첩 객체에서의 복사
객체 내에 객체를 가지고 있을 때는 아래의 코드와 같다.
const obj1 = {
id : 1,
name : 'ming',
age : 25,
habit : 'hiking',
deepObj: {
deep: 'abc',
}
};
const obj2 = {...obj1, email: 'dev.vming@gmail.com};
console.log('변경전');
console.log('obj1 : 'obj1.deepObj.deep);
console.log('obj2 : 'obj2.deepObj.deep);
obj2.deepObj.deep = 'deep';
console.log('변경후');
console.log('obj1 : 'obj1.deepObj.deep);
console.log('obj2 : 'obj2.deepObj.deep);이렇게 하면 변경 후에도 obj1과 obj2 모두 .deepObj.deep값이 ‘deep’으로 바뀌게 된다. 펼침연산자가 깊이가 있는 객체 내부의 객체까지 펼쳐주지는 않는다.
이를 해결하기 위한 방법은 아래의 코드와 같다.
const obj1 = {
id : 1,
name : 'ming',
age : 25,
habit : 'hiking',
deepObj: {
deep: 'abc',
}
};
const stringObj1 = JSON.stringfy(obj1);
const obj2 = JSON.parse(strinObj1);
console.log('변경전');
console.log('obj1 : 'obj1.deepObj.deep);
console.log('obj2 : 'obj2.deepObj.deep);
obj2.deepObj.deep = 'deep';
console.log('변경후');
console.log('obj1 : 'obj1.deepObj.deep);
console.log('obj2 : 'obj2.deepObj.deep);obj1을 JSON형태의 문자열로 변경했다가, 다시 obj2를 만들어주면서 객체의 형태로 변환하는 것이다. 이때 변경 후에 obj1의 deep은 ‘abc’, obj2의 deep은 ‘deep’이 나오게 된다.
📙 전개구문 (spread)
전개구문이란 위에서 살펴보았듯, 깊은복사를 할 때 사용한다. 형식은 ...객체명 이다.
사용방법
전개구문을 사용하면 객체 내 내용을 추가할 때도 용이하다.
let obj1 = {
name : 'ming',
age : 25
}
let obj2 = { ...obj1 , address : 'seoul'};
console.log(obj2); // { name : 'ming', age : 25 , address : 'seoul'}위 방법과 동일하게 객체 내 내용을 변경할 수도 있다.
let obj1 = {
name : 'ming',
age : 25
}
let obj2 = { ...obj1 , name : 'dang'};
console.log(obj2); // { name : 'dang', age : 25 , address : 'seoul'}📒 단축속성명
변수를 객체 내에 담는 경우 아래와 같이 작성할 수 있다.
let name = 'ming';
let age = 25;
let person = {
name : name,
age : age
};
console.log(person); //{ name: 'ming' , age: 25 }이때 key와 변수의 값이 동일하므로 생략하여 아래 코드와 같이 표현할 수 있다.
사용방법
let name = 'ming';
let age = 25;
let person = {
name,
age
};
console.log(person); //{ name: 'ming' , age: 25 }이와 같이 반복되는 변수를 생략해 표기하는 방식을 단축할당 (object shorthand assignment)라고 한다.
📓 참고
(유튜브) 라매개발자 - 자바스크립트 객체 정리하기 1편
(유튜브) 라매개발자 - 자바스크립트 객체 정리하기 2편
(유튜브) 코당알려주는누나 - 리액트 시작전 모르면 낭패보는 자바스크립트 문법 싹! 정리!
