JavaScript_참조형 복사하기(Reference Type Copy)

⭐지난 시간에 참조형 값은 변수에 할당될 때 값 자체가 아니라 주소값이 할당된다고 배움⭐

📷캡쳐이미지로 간단하게 모아보기

let numbers1 = [1,2,3]; //numbers1에 이 배열의 주소값이 할당됨.
let numbers2 = numbers1; //numbers1이 가지고 있는 주소값이 복사가 돼서 numbers2만 변경했지만

numbers2.push(4); //코드를 실행했을 때 numbers1도 변경된 모습 확인.

console.log(numbers1);
console.log(numbers2);
//[1, 2, 3, 4]
[1, 2, 3, 4]

상황에 따라서는 이 참조형 값을 그대로 복사하고 싶을 수도 있다.
말 그대로 이 numbers2만 변경하고 싶을 수가 있다. 이럴때 배열의 경우 slice 메소드를 활용한다. slice 메소드를 호출할 때 파라미터로 아무런 값도 전달하지 않으면 원래 값이 그대로 리턴되는 특성을 활용해서 마치 배열을 복사하는 것과 같은 효과를 얻을 수 있다.

let numbers1 = [1,2,3];
let numbers2 = numbers1.slice();

numbers2.push(4);

console.log(numbers1);
console.log(numbers2);
//
[1, 2, 3]
[1, 2, 3, 4]-->numbers2만 변경됨.

😲그런데 객체는 어떨까?

let course1 = {		//첫번째 코스 데이터를 담은 객체
	title: '파이썬 프로그래밍 기초',
    language: 'Pyton'
};

let course2 = course1; 
				
course2.title = '알고리즘의 정석'; //첫번째 코스 담은 객체를 복사해서 title만 바꿔줬지만 실행해보면 course1도 title이 변경됨.

console.log(course1);
console.log(course2);

//{ title: '알고리즘의 정석', language: 'Python' }
{ title: '알고리즘의 정석', language: 'Python' }

객체에는 slice같은 메소드가 없다.❌ 사실 객체에도 assign메소드를 사용하면 복사를 할 수가 있다.

let course1 = {
	title: '파이썬 프로그래밍 기초',
    language: 'Python'
};

let course2 = {}; //(1)course2에 빈 객체를 만들어준다.

for(let key in course1) { 
	course2[key] = course1[key]; //똑같은 프로퍼티를 가지고 이지만 서로 독립적인 객체로 복사 가능.
};

course2.title = '자료 구조';

console.log(course1);
console.log(course2);
//{ title: '파이썬 프로그래밍 기초', language: 'Python' }
//{ title: '자료 구조', language: 'Python' }-->course2의 title만 바뀐것 확인.

⭐⭐
그런데 for문은 너무 course1과 course2에만 한정적이다. 그래서 만약 course3나 course4가 생긴다면 또 for를 작성해야함. 그래서 for문을 활용해서 함수로 만들어준다. 함수를 사용해야 하니까 가장 위로 올려주면 훨씬 효율적인 코드로 활용 가능하다.

function cloneObject(object) { //(1)파라미터로 복사할 객체를 전달받음.
	let temp = {}; //(2)임시로 빈 객체를 만듦.
   
    for (let key in object) {
    	temp[key] = object[key]; //(3)for..in문 통해 객체를 복사
    }
 return temp; //(4)임시 객체를 리턴.
};

let course1 = {
	title: '파이썬 프로그래밍 기초',
    language: 'Python'
};

let course2 = cloneObject(course1); //(5)함수를 호출하는 값을 변수에 할당해주면 복사된 객체가 변수에 담김. 그래서 course3이 생길때도 함수를 이렇게 활용 가능.

let course3 = cloneObject(course1);

course2.title = '자료 구조';
course3.title = '객체 지향 프로그래밍';

console.log(course1);
console.log(course2);
console.log(course3);
// { title: '파이썬 프로그래밍 기초', language: 'Python' }
// { title: '자료 구조', language: 'Python' }
// { title: '객체 지향 프로그래밍', language: 'Python' }