[2주차 -2] 김상윤

Part2-2팀 /2주차-2/김상윤.md

@@ -0,0 +1,100 @@
+자바스크립트에서 객체(Object)는 참조(reference) 타입입니다 그래서 객체를 "복사"할 때 주의해야 합니다
+
+1. 참조에 의한 복사란?
+const obj1 = { name: "Tom" };
+const obj2 = obj1; (복사)
+
+여기서 obj2는 새로운 객체가 아니라 obj1이 가리키는 같은 메모리 주소를 가리킵니다
+즉, 두 변수는 같은 객체를 공유합니다
+
+obj2.name = "Jerry";
+console.log(obj1.name); // Jerry
+
+obj1도 값이 바뀐 것처럼 보입니다.
+실제로는 하나의 객체만 있고, 두 변수가 같은 객체를 참조하고 있기 때문에 obj1 값도 jerry로 보이는것 입니다
+
+
+2. 얕은 복사 (Shallow Copy)
+
+객체의 1단계 속성까지만 복사하고, 그 안에 또 다른 객체가 있으면 여전히 참조를 공유합니다
+전개 연산자 (...)
+(전개 연산자란(spread문법)배열이나 객체의 요소를 펼쳐서 새로운 배열 혹은 객체를 만드는것이다)
+예)
+const user = { name: "Tom", address: { city: "Seoul" } };
+const copy = { ...user }; // 얕은 복사
+
+copy.name = "Jerry"; 
+console.log(user.name); // Tom (독립적)
+
+copy.address.city = "Busan";
+console.log(user.address.city); // Busan 
+
+3. 깊은 복사 (Deep Copy)
+
+객체 내부의 중첩된 객체까지 전부 새로운 메모리에 복사하는 방식.
+
+JSON 변환 (단, 함수/심볼/undefined는 사라짐)
+const deepCopy = JSON.parse(JSON.stringify(user));
+
+structuredClone (최신 브라우저/Node.js 지원)
+const deepCopy = structuredClone(user);
+
+structuredClone은 자바스크립트에 내장된 깊은 복사(Deep Copy) 함수입니다
+객체를 통째로 복사할 때, 안에 있는 중첩 객체나 배열까지 모두 새로운 메모리에 복사해줍니다
+즉, 원본 객체와 복사본은 전혀 다른 메모리를 가지게 되므로, 복사본을 수정해도 원본에는 전혀 영향을 주지 않습니
+이 함수는 Date, Map, Set, ArrayBuffer 같은 자료형도 제대로 복사할 수 있어서, 단순히 JSON 방식으로 복사할 때보다 훨씬 안전하고 범용성이 넓습니다
+하지만 함수나 DOM 요소 같은 특수한 값은 복사할 수 없고, 그런 경우 에러가 나거나 복사가 되지 않습니다
+
+옵셔널체이닝(Optional Chaining)이란?
+옵셔널 체이닝(Optional Chaining, ?.(옵셔널 체이닝의 연산자))은 자바스크립트에서 객체 속성에 안전하게 접근하기 위한 문법입니다
+
+보통 객체 안에 중첩된 속성이 있는지 확실하지 않을 때, 직접 접근하면 오류가 날 수 있다
+예를 들어, 없는 속성을 읽으려고 하면 TypeError: Cannot read property ... of undefined 같은 에러가 발생합니다.
+
+옵셔널 체이닝은 이런 경우에 "존재하지 않으면 그냥 undefined를 반환하고 넘어가는" 안전 장치예요.
+
+예)
+obj?.prop
+→ obj가 null이나 undefined라면 에러 대신 undefined 반환.
+
+obj?.[expr]
+→ 대괄호 표기법에서도 사용 가능.
+
+obj?.method?.()
+→ 메서드가 없을 때도 에러 대신 undefined 반환.
+
+장점
+긴 중첩 속성을 접근할 때 안전함
+if 문으로 일일이 null 체크하는 코드가 줄어듦
+가독성이 좋아짐
+
+주의할 점
+
+왼쪽 피연산자가 null 또는 undefined일 때만 멈추고 undefined를 반환합니다.
+false, 0, "" 같은 falsy 값은 정상적으로 접근됩니다.
+쓰기(=, 할당)에는 쓸 수 없고, 읽기 전용으로만 사용합니다
+
+예시코드)
+
+기본 객체 접근
+const user = { name: "Tom" };
+
+console.log(user?.name);     // "Tom"
+console.log(user?.age);      // undefined (에러 안 나고 안전하게 undefined)
+
+중첩 객체 접근
+const user = { profile: { city: "Seoul" } };
+
+console.log(user?.profile?.city);   // "Seoul"
+console.log(user?.address?.city);   // undefined (address가 없어도 에러 안 남)
+
+배열 접근
+const users = [{ name: "Tom" }, null, { name: "Jerry" }];
+
+console.log(users[0]?.name); // "Tom"
+console.log(users[1]?.name); // undefined (null이라도 안전하게 접근)
+메서드 호출
+const user = {greet: () => "Hello"};
+
+console.log(user.greet?.());  // "Hello"
+console.log(user.sayBye?.()); // undefined (sayBye가 없어도 에러 안 남)