JavaScript: 값에 의한 전달과 참조에 의한 전달

사진 작성자 Erol Ahmed 에 Unsplash

참조로 인수를 전달하는 것과 값으로 인수를 전달하는 것의 가장 큰 차이점은 무엇입니까?

기본 값

JavaScript에서도 다른 많은 언어와 마찬가지로 어느 시점에서 이 개념을 접하게 될 것입니다. 호출 스택 및 힙으로 돌아가서 데이터가 저장되는 위치, Primitives ( Number , String , Boolean , Undefined , Null , Symbol , BigInt )는 호출 스택에 저장됩니다. Objects ( Object Literal , Arrays , Functions , more...), 힙에 저장됩니다.

기본 값을 만들 때 JavaScript는 값 이름으로 고유 식별자를 만듭니다. 그런 다음 값과 함께 주소에 메모리를 할당합니다. 식별자는 주소를 가리키지만 값 자체는 가리키지 않습니다. 기본 값은 변경할 수 없습니다. 즉, 값을 재할당하거나 다른 곳에서 변경하더라도 값이 존재하는 다른 곳에서는 변경되지 않습니다.

let season = "Fall";
let nextSeason = season;
season = "Winter";
console.log(season);
console.log(nextSeason);
//// Returns
// Winter 
// Fall

그래도 season 값이 Winter로 재할당되었습니다. , 변경해도 nextSeason 처음에 Fall로 설정되었습니다. . 변경되지 않은 상태로 유지됩니다.

참조 값

새 객체를 생성하면 메모리 주소로 힙에 저장되고 값 자체로 저장됩니다. 변수를 객체로 선언할 때 변수에 대해 생성된 식별자는 스택의 메모리 부분을 가리키며, 이는 차례로 객체가 저장된 힙의 메모리 부분을 가리킵니다.

이 때문에 하나의 개체에 대해 여러 복사본이 생성될 때마다 메모리에 새 개체가 생성되지 않습니다. 원래 개체에 대해 동일한 식별자를 가리킬 뿐입니다. 따라서 한 개체를 변경하면 동일한 메모리 주소를 가리키는 모든 개체가 변경되는 효과가 있습니다.

const dog = {
    name: "Beau",
    age: 15
};
const puppy = dog; 
puppy.age = "10 months";

console.log('Puppy:', puppy)
// Returns
// Puppy: {name: 'Beau', age: '10 months'}

console.log('Dog:', dog)
// Returns 
// Dog: {name: 'Beau', age: '10 months'}

Primitives와 Objects의 차이점을 이해하는 것이 중요합니다. 그렇지 않으면 코드에 꽤 불쾌한 놀라움과 버그가 발생할 수 있기 때문입니다. 또한 함수로 이동할 때 참조에 의한 전달과 값에 의한 전달의 차이점을 이해할 수 있도록 합니다.

값으로 전달

함수로 이동하여 기본 값을 인수로 함수에 전달하면 함수가 함수 자체 외부에서 함수 컨텍스트 내부에서 해당 값을 조작하더라도 값이 그대로 유지됩니다.

전:

let x = 1;
function alter(arg) {
    arg = 100;
    return arg;
};

change(x)
// Returns 100 
console.log(x)
// returns 1

참조로 전달

함수에 참조 유형을 전달할 때 복사되는 것은 메모리 힙에 대한 참조 객체입니다. 둘 다 메모리의 동일한 개체를 가리킵니다. 객체가 함수에서 조작될 때 두 참조가 동일한 객체를 가리키므로 객체 자체를 조작하는 것과 같습니다. 한 곳에서 변경하고 다른 모든 곳에서 개체가 변경되었습니다.

const dog = {
    name: "Beau",
    age: 15
};

const happyBirthday = function(arg){
     arg.age = arg.age + 1;
} 

happyBirthday(dog)
console.log(dog)
// Returns 
dog {name: 'Beau', age: 16}

결론

요약하자면, 기본 유형이 함수에 전달되면 복사본이 생성됩니다. 객체를 함수에 전달할 때 객체 자체를 전달하는 것과 같습니다. 이는 다시 큰 문제로 이어질 수 있으므로 주의해야 합니다.

추가 읽기

value vs reference

academind