TIL-2024.03.25 - JS - 외부 객체와 내부 객체

 

목표:

- 외부객체

- 내부객체

 

 

- 객체의 "외부 객체"는 객체의 기본 구조로. 이는 객체의 프로퍼티들을 포함하고 있는 부분.
- 내부 객체는 객체 내부에 포함되어 있는 객체며, 이는 객체의 프로퍼티 중에서 객체 자체를 값으로 가지고 있는 프로퍼티를 의미.

 

 

const obj = {
  outerProperty: "Outer",
  innerObject: {
    innerProperty: "Inner"
  }
};

 

위의 예제에서 

• "외부 객체"는 obj 전체입니다. outerProperty와 innerObject가 이 객체의 외부 구조를 이룹니다.
• "내부 객체"는 innerObject입니다. innerProperty가 이 객체의 내부 구조를 이룹니다.

 

-------- 외부객체와 내부객체

 

1. 외부 객체:
   • 객체의 기본적인 구조를 형성.
   • 외부 객체의 프로퍼티에는 원시 값이나 다른 객체를 가짐.
   • 외부 객체는 외부에서 직접 접근할 수 있는 객체의 일부.
2. 내부 객체:
   • 다른 객체 내부에 포함.
   • 내부 객체는 외부 객체의 프로퍼티 값으로서 객체를 가짐.
   • 내부 객체는 일반적으로 외부 객체에 의존적이며, 주로 외부 객체의 특정 부분에서 사용.

 

내부 객체는 외부 객체 내에서만 의미가 있고, 외부 객체를 벗어나면 접근 불가하며, 내부 객체의 변경은 외부 객체에 영향을 미칠 수 있습니다. 이와는 반대로 외부 객체의 변경은 내부 객체에 영향을 미치지 않습니다. >> 중요 !

 

 

 

어제의 TIL 추가 사항 (얕은 복사 VS 깊은 복사): 

JavaScript에서 객체를 복사할 때 얕은 복사(shallow copy)를 사용하면, 객체의 외부 구조는 복사되지만 내부 객체는 동일한 참조를 유지합니다. 이 말은 복사된 객체와 원본 객체가 같은 내부 객체를 공유한다는 뜻입니다. 이러한 동작은 스프레드 연산자({...})를 사용하여 객체를 복사할 때 발생합니다.
따라서 주어진 코드에서 copiedObj는 obj의 복사본이지만, 내부 객체는 동일한 객체를 참조합니다.

 

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = {...obj}

 

 

- 이 상태에서 copiedObj와 obj는 외부 구조는 같지만 내부 객체는 별개입니다. 즉, obj.b와 copiedObj.b는 같은 객체를 가리키고 있습니다.

- 따라서 copiedObj.b.c = 3를 실행하면, copiedObj의 내부 객체인 b의 c 프로퍼티가 변경됩니다. 하지만 이 내부 객체 b는 원본 객체 obj와 공유되기 때문에, obj.b.c도 변경됩니다.

 

copiedObj.b.c = 3;
console.log(obj.b.c); // 출력: 3

그러나,

copiedObj.a = 5를 실행하면, copiedObj의 외부 객체에 새로운 값을 할당합니다. 이 작업은 obj의 외부 객체와는 별개의 작업으로 처리되기 때문에, obj 객체는 변경되지 않습니다. (외부객체이기 때문!)

copiedObj.a = 5;
console.log(obj.a); // 출력: 1 (변경되지 않음)

이러한 동작은 객체의 복사본이 원본 객체와 완전히 독립적이지 않고 일부는 공유되는 경우에 발생합니다. 이것이 얕은 복사의 특성입니다. 따라서 내부 객체에 대한 변경은 복사본과 원본 모두에 영향을 미치지만, 외부 객체에 대한 변경은 복사본에만 영향을 미칩니다.