ibm x redhat ai 과정 JS

얕은 복사/ 깊은 복사

스프레드(Spread) 구문 이란?

스프레드 구문(...)은 배열이나 객체와 같이 반복 가능한(iterable) 데이터를 하나씩 펼쳐서(Unpack) 개별 요소로 만드는 역할을 합니다.

• 배열 펼치기: console.log(...ary)는 1, 2, 3... 처럼 값을 낱개로 출력합니다.

• 나머지 매개변수 (Rest): const [a, ...c] = ary2; 처럼 구조 분해 할당 시 남은 요소들을 다시 배열로 묶을 때도 사용합니다.

• 배열/객체 결합: const ary6 = [...ary3, ...ary4]; 처럼 여러 데이터를 하나로 합칠 때 유용합니다.

    <script>
        //JSON(자바스크립트 객체 표기법)
        const pro={
            age: 22
        }
        
        //분할대입
        const {age} = pro;
        console.log(age);

        //객체 분할 대입
        const{age2=33}=pro;
        console.log(age2);

        //... 스프레드(spread)구문: 배열 내부의 값을 순서대로 펼친다
        const ary=[1,2,3,4,5,6,7,8];
        console.log(ary);
        console.log(...ary); //배열 안의 값만 결과로 출력

        const ary2 = [1, 2, 3, 4, 5];
        const [a, ...c] = ary2;  //배열에서 남은 요소를 변수에 담을 때 스프레드 구문 활용

        console.log(a); // 출력: 1
        console.log(c); // 출력: [2, 3, 4, 5]
        
        const[a1,b1,c1,d1,e1]=ary2;
        console.log(e1); //5
 	</script>

얕은 복사 (Shallow Copy) vs 깊은 복사 (Deep Copy)

복사를 이해할 때 가장 중요한 것은 "데이터가 저장된 메모리 주소(참조값)"를 복사하느냐, 아니면 "값 자체"를 새로운 공간에 복사하느냐의 차이입니다.

<script>
const ary3=[10,20];
        const ary4 = [30,40];

        const ary5=[...ary3]; //얕은 복사(객체의 참조값=주소값을 복사함)
        console.log(ary3);
        console.log(ary5);

        ary5[0] = 100;
        console.log(ary3);
        console.log(ary5);
        //스터디: 얕은복사/ 깊은복사 정리

        const ary6=[...ary3, ...ary4];
        console.log(ary6)

        ///////////
        //...스프레드(spread)구문 : interable구조(배열, 객체, )
        const obj={
            v1:10,
            v2:20
        }
        const obj2={
            v3:30,
            v4:40
        }
        const obj3 = {...obj}
        console.log(obj3);

        //obj,obj2 다 펼쳐서 obj4에 저장 후 출력
        obj4={...obj, ...obj2};
        console.log(obj4);

        //ary8에 ary3을 얕은복사해서 저장
        const ary8 = [...ary3];
        ary8[0]=100; //스프레드 구문 사용하면 -> 완전한 새로운 배열 생성-> 기존 배열에 영향 안줌.
        console.log(ary8);
        console.log(ary3);
    </script>

1. 얕은 복사 (Shallow Copy)

• 가장 겉면의 값만 복사하는 방식입니다. 만약 배열 내부에 또 다른 객체나 배열이 있다면, 그 내부 객체는 주소값만 복사되어 원본과 복사본이 서로 연결됩니다.
  - 1단계 값만 복사 (참조값 전달)
  - 복사본의 내부 객체 수정 시 원본도 바뀜
  

2. 깊은 복사 (Deep Copy)

• 원본과의 모든 연결을 끊고 완전히 새로운 독립적인 복사본을 만드는 방식입니다. 내부의 중첩된 객체들까지 모두 새롭게 생성합니다.
  - 복사본 수정 시 원본 유지
  - 내부 중첩 구조까지 모두 복사

  const deepCopy = structuredClone(original); 등을 사용하여 연결 고리 완전히 끊음