[JavaScript] 객체(Object) - for .. in 반복문

객체(Object)와 for in 반복문

📘 for (let 변수 in 객체){동작 부분}

객체의 모든 key를 돌며 동작을 수행

let myCourse = { title: '자바스크립트',
                language: 'JavaScript',
                '필요 시간': 10
               }

// 객체 안의 모든 프로퍼티 중 값이 숫자형인 프로퍼티 모두 삭제
for (let property in myCourse) {
  if (typeof myCourse[property] === 'number') {
      delete myCourse[property]; 
  }
}
console.log(myCourse); 
// { title: '자바스크립트', language: 'JavaScript' }

📘 객체 복사

반복문을 통해 객체를 복사하거나, 객체 안의 모든 key 또는 값(value)을 확인할 수 있다.

let copyCourse = {}

for(let key in myCourse){
  copyCourse[key] = myCourse[key];
}

for (let k in copyCourse) {
  console.log(k);
} // title language

for (let v in copyCourse) {
  console.log(copyCourse[v]);
} // 자바스크립트 JavaScript

// 안의 프로퍼티는 같지만 서로 다른 객체이다.
console.log(Object.is(myCourse, copyCourse)); //false

📘 반복해서 객체를 복사하는 경우

복사를 여러번 하기 위해서는 함수로 선언하여 좀 더 효율적인 코드로 활용할 수 있다.

function cloneObject(object){
  let tempObj = {}
  
  for(let key in object){
  	tempObj[key] = object[key];
  }
  return tempObj;
};

let myCourse = { title: '자바스크립트', language: 'JavaScript'}

let copyCourse1 = cloneObject(myCourse);
let copyCourse2 = cloneObject(myCourse);
let copyCourse3 = cloneObject(myCourse);

// 복사한 객체의 프로퍼티를 바꿔도 원본은 바뀌지 않음
copyCourse1.title = '자바';

console.log(copyCourse1); // { title: '자바', language: 'JavaScript' }
console.log(myCourse); //{ title: '자바스크립트', language: 'JavaScript' }

💡 중첩해서 객체, 배열이 있는 경우

객체나 배열 안에 중첩해서 객체나 배열이 있는 경우에는 참조값이 복사되어 예상하지 못한 결과를 얻을 수도 있다.

• Object.assign(), 배열.slice() 로 복사해도 동일한 문제 발생

let myCourse = { title: '자바스크립트', language: 'JavaScript', teacher: ['김자바']};
let copyCourse = {};

for(let key in myCourse){copyCourse[key] = myCourse[key]};

copyCourse.title = '자바';
copyCourse.teacher.push('박박사');

console.log(copyCourse); 
//{ title: '자바', language: 'JavaScript', teacher: [ '김자바', '박박사' ] }
console.log(myCourse); 
// { title: '자바스크립트', language: 'JavaScript', teacher: [ '김자바', '박박사' ]}

✍🏻 해결 방법

function cloneObject(object){
  if (object === null || typeof object !== 'object'){
    return object;
  }
  
  let temp;
  if(Array.isArray(object)){
    temp = [];
  } else{
    temp = {};
  }
    
  for (let key of Object.keys(object)) {
    temp[key] = cloneObject(object[key])
  }
    
  return temp;
};
  
  
let myCourse = {title: "자바스크립트", language: "JavaScript", teacher: ["김자바"]};
let copyCourse = cloneObject(myCourse);

copyCourse.title = "자바";
copyCourse.teacher.push("박박사");
console.log(copyCourse); 
//{ title: '자바', language: 'JavaScript', teacher: [ '김자바', '박박사' ] }
console.log(myCourse); 
// { title: '자바스크립트', language: 'JavaScript', teacher: [ '김자바']}