복제
자바스크립트에서 복제는 이미 존재하는 개체가 생성되지 않도록 개체 속성을 다른 개체에 복사하는 것뿐입니다.
자바스크립트 개체를 복제하는 몇 가지 방법이 있습니다.
1) 각 속성을 반복하고 새 개체에 복사합니다.
2) JSON 방식 사용.
3) object.assign() 메소드 사용.
각 방법에 대해 개별적으로 논의해 보겠습니다.
a) 각 속성을 반복하고 새 개체에 복사합니다.
이것은 각 속성이 반복되고 새 개체에 복사되는 javascript 개체를 복제하는 오래된 방법입니다. 간단한 방법이지만 거의 사용되지 않습니다.
예
<html>
<body>
<p id="cloning-1"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
for (let pro in sourceObject) {
if (sourceObject.hasOwnProperty(pro)) {
requiredObj[pro] = sourceObject[pro];
}
}
document.getElementById("cloning-1").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html> 출력
targetObject name = salman, age = 23, salary = 25000
b) JSON 방식
자바스크립트 개체를 복제하는 현대적인 방법 중 하나입니다. 이 방법에서 소스 개체는 JSON 안전해야 합니다.
예
<html>
<body>
<p id="cloning-2"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = JSON.parse(JSON.stringify(sourceObject));
document.getElementById("cloning-2").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary;
</script>
</body>
</html> 출력
targetObject name = salman, age = 23, salary = 25000
c) Object.assign()
이것은 자바스크립트 객체를 복제하기 위해 요즘 매우 자주 사용되는 고급 방법입니다. 이 방법은 얕은 복사만 수행하므로 중첩된 속성이 여전히 참조로 복사됩니다.
예
<html>
<body>
<p id="cloning-3"></p>
<script>
const sourceObject = {name:"salman", age:23, salary:25000};
let requiredObj = {};
requiredObj = Object.assign({}, sourceObject);
document.getElementById("cloning-3").innerHTML =
"targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary;
</script>
</body>
</html> 출력
targetObject name = salman, age = 23, salary = 25000