달리기반 🏃 | 참조형 타입에 조오금 추가하기

자바스크립트 달리기반에 들어가서 꼴찌를 하고 있는 것 같은..ㅎㅎ
이론 2번째 시간에는 계속 어려워했던 참조형 타입, 얕은 복사와 깊은 복사에 대해 보충 수업을 들었다.

저번에 정리한 내용과 비슷하지만 새로운 용어들도 있고 배열과 객체를 다시 정리하면 좋을 것 같아서 짧게 적어보려고 한다.

끝나지 않는... 참조형 타입(얕은복사, 깊은복사)

참조형타입에는 뭐가 있었냐! 바로 객체, 배열, 함수 등이 있다.
이름에서도 알 수 있듯이 직접 값을 가지지 않으며, 값이 저장된 메모리 '주소'를 가지고 있다.
참조해서 값을 가지기 때문에 같은 참조형 변수를 여러 개 만들면 다른 변수에도 영향을 미칠 수 있다.

이번에 메모리영역에 2가지가 존재하는데 이 이름을 알 수 있었다.

스택	힙
원시 값 및 참조	객체 및 함수
컴파일 타임에 크기 알 수 있음	런타임에 크기 알 수 있음
고정된 크기의 메모리 할당	객체 당 제한 없음

⭐️ 참조형 데이터는 값을 직접 가지지 않고, 해당 값이 저장된 메모리 주소를 가리킨다는거!!!
오늘을 마지막으로 정리하기!!

배열과 객체를 얕은복사와 깊은복사로 복사하기

얕은복사(Shallow Copy) : 배열과 객체의 참조를 복사하며, 원본 배열,객체와 동일한 주소를 참조하기 때문에 서로 영향을 미친다.

• 배열에서의 얕은복사

let original = ['Apple', 'Banana', 'Cherry'];
let shallowCopy = original;

shallowCopy[1] = 'Blueberry';
console.log(original); // ['Apple', 'Blueberry', 'Cherry']
console.log(shallowCopy); // ['Apple', 'Blueberry', 'Cherry']

• 객체에서의 얕은복사

let original = {
    name: 'John',
    age: 30
};
let shallowCopy = original;

shallowCopy.age = 31;
console.log(original); // { name: 'John', age: 31 }
console.log(shallowCopy); // { name: 'John', age: 31 }

깊은복사(Deep Copy) : 배열과 객체 모든 요소를 새로운 배열에 복사하여 원본 배열과 복사된 배열이 서로 '다른' 객체를 참조하게 만든다. 따라서 한 배열을 수정해도 다른 배열에 영향을 미치지 않는다!

• 배열에서의 깊은복사

function deepCopy(o) {
  var result = {};
  if (typeof o === "object" && o !== null)
    for (i in o) result[i] = deepCopy(o[i]);
  else result = o;
  return result;
}

const obj1 = {
  a: 1,
  b: [1, 2, 3]
};

var obj2 = deepCopy(obj1);

console.log(obj1 === obj2);
console.log(obj1);
console.log(obj2);

• 객체에서의 깊은복사

let original = {
    name: 'John',
    age: 30
};
let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.age = 31;
console.log(original); // { name: 'John', age: 30 }
console.log(deepCopy); // { name: 'John', age: 31 }

중첩된 참조형 타입의 복사 문제

여러 참조형 타입이 중첩되어있는 경우
얕은 복사는 예상치 못한 참조를 남길 수 있어 객체를 사용 및 수정할 때 영향을 미치는 문제가 발생할 수 있다.

객체 안의 배열 안의 객체

let original = {
    name: 'Alice',
    friends: [
        { name: 'Bob' },
        { name: 'Charlie' }
    ]
};

let shallowCopy = { ...original };

shallowCopy.friends[0].name = 'Bobby';

console.log(original.friends[0].name); // 'Bobby'
console.log(shallowCopy.friends[0].name); // 'Bobby'

얕은 복사는 최상위 레벨의 속성만 복사하기 때문에 객체 안의 객체(중첩된 객체)나 배열의 참조를 '그대로' 복사한다. 따라서 번거롭더라도 깊은복사를 해야 안전하게 복사하여 사용할 수 있는 것이다.

---

참조형타입이 어렵지만 이런 원리로 데이터를 저장하고 관리된다는 것을 이해해야 실수를 범하지 않을 수 있고 map,filter 같은 메소드를 활용하여 자유자재로 원하는 데이터만 가지고 프로그래밍을 할 수 있다.
한번에 이해되지 않는 어려운 개념이니까 정리된 강의자료랑 영상들 보면서 익숙해지고 이해할 수 있도록 노력하자!