JavaScript에서 배열과 객체를 복사하는 방법

먼저 두 가지 개념을 철저히 이해해야 합니다.

값으로 전달합니다.

참조로 전달합니다.

값으로 전달

그것은 단순히 함수를 호출하는 동안을 의미합니다. 함수 내에서 직접 값을 인수로 전달하고 있습니다.

예:

// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

// function calling
greet("Hemendra");// <- we're passing value as an argument

// prints --> hello Hemendra!

참조로 전달

이는 단순히 함수를 호출하는 동안 함수 내부의 값 대신 상수 또는 변수의 참조를 인수로 전달한다는 의미입니다.

예:

// function declaration
function greet(name){
    console.log(`hello ${name}!`);
}

const name = "Hemendra";

// function calling
greet(name); // <-- we're passing a reference of a constant called name  

// prints --> hello Hemendra!

아주 간단하죠?

예, 간단합니다!

그러나 여기서 이해해야 할 것이 더 있습니다. 예를 들어 이것을 이해합시다.

예:1

// You might have written something like this before

let score = 10;
let temp = score;
temp = temp + 2;

console.log(`score is ${score}`); // prints-> score is 10
console.log(`temp is ${temp}`); // prints-> temp is 12

예: 2

// You might have done something like this as well

let todos = ["T1", "T2];
let tempTodos = todos;
tempTodos.push("T3");

console.log(`old todos are ${todos}`); 
// prints-> old todos are T1, T2, T3
console.log(`temp todos are ${tempTodos}`); 
// prints-> temp todos are T1, T2, T3

잠깐만요??



네, 저도 초보때 이랬습니다. 위의 예에서 무슨 일이 일어났는지 이해해 봅시다.

이것을 기억

JavaScript에서 기본 데이터 유형으로 작업하는 동안 해당 값을 복사합니다.

EG: string, number, boolean, symbol, undefined, null .

JavaScript에서 기본이 아닌 데이터 유형으로 작업하는 동안 해당 참조를 복사합니다.

EG: arrays, objects, functions
설명

첫 번째 예에서는 기본 데이터 유형을 사용했기 때문에 점수와 임시 변수의 값이 다릅니다.

그러나 두 번째 예에서는 원시가 아닌 데이터 유형인 배열을 사용했으며 변수를 복사하는 동안 값 대신 참조를 갖게 되었습니다. 따라서 변수 todos와 tempTodos 모두 메모리에서 동일한 값을 가리키고 있었습니다.

따라서 tempTodos 변수를 변경하는 동안 todos 변수도 변경되었습니다.

팁:

응용 프로그램을 구축하는 동안 종종 개체 배열을 만납니다.
개체 배열을 수정하는 여러 함수를 만듭니다.

하지만 이 개념을 기억하세요.

JavaScript에서 배열 또는 객체가 복사되는 방식,

그렇지 않으면 앱에서 많은 버그에 직면하게 될 것입니다.


더 많은 블로그 게시물을 보려면 나를 따르십시오.
이 블로그가 도움이 되었는지 알려주세요.