실제로 Javascript에서 가져오기를 변경할 수 있습니다.

최근에 Javascript에서 가져온 개체를 변경할 수 있다는 사실을 깨달았습니다. 흥미롭죠? 나는 항상 가져온 개체가 요청/액세스될 때마다 새로운 복사본을 제공한다고 생각했습니다. 분명히 그렇지 않습니다.

변형은 가져오기를 요청한 파일에만 영향을 미치는 것이 아니라 특정 가져오기를 사용 중인 모든 파일에서도 변형이 발생합니다.

예를 들어 catList 파일을 가져오고 catListPopper 파일에서 변경한 다음 catListLooker에서 catList를 가져올 때 동일한 결과를 기대할 수 없습니다. 이제 catList와 catListLooker 모두 변경된 가져오기(동일한 참조)를 공유하기 때문입니다.

자세히 설명하겠습니다.



이 다이어그램을 백엔드 애플리케이션으로 상상할 수 있습니다. API 끝점은 개체를 가져와서 변경한 다음 결과로 JSON 개체를 반환할 수 있습니다. 그런 다음 다른 파일이cat.js 를 가져오지만 고양이로 가득 찬 객체 배열을 가져오는 대신 결과로 빈 배열을 가져옵니다. 왜요? Javascript의 특성으로 인해 객체는 기본적으로 변경할 수 없으며
가져오기는 호출된 후 상태를 다시 시작하지 않습니다.

이 동작을 이해하려면 한 단계 더 깊이 들어가야 합니다. 요즘에는 Webpack 또는 SWC와 같은 번들러를 사용하여 코드를 실행하고 사용자 지정합니다. 그들이 하는 일은 모든 코드를 요약하는 것입니다.
단일 파일로 만들고 동일한/공통 어휘 범위를 공유하도록 하여 웹 사이트를 요청할 때 각 파일을 개별적으로 다운로드할 필요가 없습니다. 위의 시나리오를 재현해 봅시다.



우리는 서로 다른 파일에서 작업한다고 생각하지만 실제로는 결국 단일 파일에서 작업하고 있습니다. 그러나 이 동작을 방지하는 것은 실제로 매우 쉽습니다.



보시다시피 CatList를 다른 변수인 console.log 및 pop()에 복사하면 둘 다 다른 개체를 참조합니다.

var n = [
      { name: "Cat1" },
      { name: "Cat2" },
      { name: "Cat3" },
      { name: "Cat4" },
    ];
    //function that copies catlist into some other variable.
    console.log(n);
    a.pop(), a.pop(), a.pop(), a.pop();

개체의 변이를 성공적으로 방지했습니다.

결론

원치 않는 동작을 제거하려면 코드를 가능한 한 변형이 없도록 유지하는 것이 중요합니다. 간단한 복사로 작업 시간을 절약할 수 있습니다.
따라서 새로운 시간은 개체를 가져오고 변경하는 동안 두 번 생각하십시오. 돌연변이가 없는 상태를 유지하세요!