lodash로 깊은복사 해결

정상적인 예시

            var array = ['사과', '포도', '바나나']
            var temp = {
                name: ''
            }
            var name = ['이름1', '이름2']
            //////////////////////////////////////
            for(var i=0; i<2; i++){
                temp.name = name[i]
                console.log(array, i)
                array.push(temp.name)
            }
            //////////////////////////////////////
            console.log('b', array) 
            this.testb = array   // vueJs data로 선언되어있음

다음과 같이 .push()를 하게되면 해당 array로 잘 들어가야 한다.

문제 발단

            var array = ['사과', '포도', '바나나']
            var temp = {
                name : ''
            }
            //////////////////////////////////////
            for(var i=0; i<1; i++){
                temp.name = '망고'

                array.push(temp)
                
                temp.name = '딸기'
                
                array.push(temp)
                
            }
            //////////////////////////////////////
            console.log('c', array)
            this.testc = array / vueJs data로 선언되어있음

다음 코드의 결과물도 위의 결과물처럼 잘 적용되어 나온다고 생각했다.

하지만,

???..

분명 '망고'로 삽입했는데 '딸기'가 두 개 들어갔다.
이 부분에 대해서 고민한 끝에 한 가지 의심을 반견했다.

참조 값에 대한 복사의 문제라는 점을 회사 선임님이 제시해주셨다.
↗바로가기

😒그럼 얕은 복사로 되어있는 코드를 어떻게 간단히 깊은 복사로 변경해야할까...

발견한 것은 lodash를 이용해보면 매우 간단히 된다하였다.

npm i lodash

import _ from 'lodash'

수정 코드

            var array = ['사과', '포도', '바나나']
            var temp = {
                name : ''
            }
            //////////////////////////////////////
            for(var i=0; i<1; i++){
                temp.name = '망고'

                array.push(_.cloneDeep(temp)) // 변경
                
                temp.name = '딸기'
                
                array.push(_.cloneDeep(temp)) // 변경
                
            }
            //////////////////////////////////////
            console.log('c', array)
            this.testc = array

이것으로 해당 temp를 바라보는 것이 아닌 값을 정확히 가져오는 것을 확인할 수 있습니다.
여기서 사용된 것은 _.cloneDeep() 해당 객체를 깊은 복사 해주는 것입니다.