[javascript] 객체 선언, 복사, 변경

객체 초기화

구문	설명
{}	초기화
{키:값, 키:값, ...}	초기화
객체[키]	값 가져오기
객체.키	값 가져오기
객체[키] = 값	값 변경
객체.키 = 값	값 변경

예제

// 빈 객체
const object = {};

// 객체 선언과 함께 값 세팅
const testData = {
  id: 1,
  name: 'name1',
  data: '데이터'
};

// 값 확인
console.log(testData.id);
console.log(testData['name']);

// 값 변경
testData.id = 2;
testData['name'] = 'name2';

// 여러 데이터를 가진 객체선언
const response = {
  result: true,
  list: [
    {id:1, name:'이름1', data: '데이터1'},
    {id:2, name:'이름2', data: '데이터2'},
  ]
};

// 값 확인
console.log(response.list[0].name);  // 이름1

// 클래스 데이터 선언
const myClass = {
  method1: function() {
    console.log('메소드1 실행');
  },
  method2: () => {
    console.log('메소드2 실행');
  }
};

myClass.method(); // "메소드2 실행" 출력

 

객체 복사하기

메소드	설명
Object.assign({}, 복사대상)	객체를 복사 (Shallow Copy - 복사 전 데이터를 참조)
{...복사대상}	객체를 복사 (Shallow Copy - 복사 전 데이터를 참조)
직접구현 필요	객체를 복사 (Deep Copy - 새로운 객체)

Deep Copy 구현예제

// Deep Copy 메소드 구현
function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])=="object" && obj[i] != null)
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

예제

const testObject = {
  result: true,
  testData: [
    {id:1, name:'이름1'},
    {id:2, name:'이름2'},
  ],
  method1: function() {
    console.log('메소드1 실행');
  }
};

// 객체 복사 (Shallow Copy)
const testObject2 = Object.assign({}, testObject);

// 객체 복사 (Shallow Copy)
const testObject3 = {...testObject};

// 주의 : 원본 데이터를 변경하면 복사한 데이터도 변경 된다.
//        복사한 데이터를 변경하면 원본 데이터도 변경 된다.
testObject.testData[0].id = 100;
console.log(testObject3.testData[0].id)  // 100으로 변경되어 있음

// 객체 복사 (Deep Copy)
testObject4 = cloneObject(testObject); // 참조하지 않고 새로운 객체로 사용된다.