Front-End - Main Menu/html5 + CSS3 + JavaScript (종합 예제)

KS - JavaScript 전개 연산자 (깊은 복사 & 얕은 복사)

ITRecipe 2024. 3. 7. 20:48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //사야 할 물건 목록 
        const 물건_200301 = ['우유', '식빵']
        
        //얕은복사
        //const 물건_200302 = 물건_200301
        
        //깊은복사 = clone(복제) 하는것으로 이해하면 됨.
        const 물건_200302 = [...물건_200301]
    
        물건_200302.push('고구마')
        물건_200302.push('토마토')

        //출력
        console.log(물건_200301)
        console.log(물건_200302)
    </script>
</head>
<body>
    
</body>
</html>

 

operator_expansion_6-3-6 : 실행결과

얕은 복사와 깊은복사의 차이를 간략하게 정리하면
얕은 복사는 주소값을 복사하여 그대로 출력하는 반면,

깊은 복사는 객체가 가진 실제값을 가져온다.
즉, 복제를 하여 새로이 생성한 값을 가져와서 출력 해준다는 개념이다.

JS에서 제일 많이 사용되며 중요한 개념이니 지속적인 이해와 학습이 필요한 개념이기도 하다.