[Tech] 프로토타입 체인 & 깊은 복사, 얕은 복사

프로토타입(prototype)은 무엇인가?!

• 프로토타입은 사전적 의미로, 최종 결과물이 나오기 전 만들어보는 시제품 or 초기 모델을 의미한다.
• 자바스크립트는 특히, 프로토타입 기반 객체지향 프로그래밍 언어이다.
• 자바스크립트에서의 프로토타입은, 객체의 원형을 의미한다.
• 따라서, 자바스크립트의 모든 객체는 프로토타입을 가지며,
  프로토타입의 property(속성)과 method(메서드)를 상속 받는다.

프로토타입 체인은?!

• 전에 작성했던 스코프 체인처럼, 프로토타입 또한.
  자신의 프로토타입을 통해 다른 객체의 속성과 메서드를 상속받는 구조를 갖는다.
• 이 구조를 활용해 해당 객체에 속성과 메서드가 없는 경우, 상위로 연결된 프로토타입 객체에서 찾는다.

---

깊은 복사와 얕은 복사

깊은 복사

• 다음과 같이, 새로운 메모리를 할당하여 완전히 복사하는 것이다.
  

• 방법으로, JSON.stringify()와 JSON.parse()로 깊은 복사가 가능하다.

  const original = { name: 'jaegeon', age: 26 };
  const copy = JSON.parse(JSON.stringify(original))
    
  copy.age = 27;
  console.log(original);  // 26
  console.log(copy);      // 27
  

얕은 복사

• 다음과 같이, 기존의 메모리 주소 값을 복사하여 가리키는 것이다.
  
• 원래 값을 지키고 복사가 가능하나 그 점 때문에 수정 시, 원래 값에 영향을 끼칠 수 있으므로 주의해야 한다.

• 방법으로, Object.assign()과 ...(스프레드 연산자)로 얕은 복사가 가능하다.

  const original = { name: 'jaegeon', age: 26 };
  const copy = { ...original }
    
  copy.age = 27;
  console.log(original);  // 27
  console.log(copy);      // 27
  

---

✨ 출처

프론트엔드 기술 면접 질문
Blog, [JS 프로토타입] 클래스보다 깊은 세계, 자바스크립트 프로토타입 완전 정복

---