[JS] 값을 전달하는 방식(pass by value, pass by reference)

🔴 값을 넘겨주는 방식

우선 javascript에서 값을 넣어주는 방식에 대해 알아보기전에 타입에 대해 알아볼 필요가 있다.

• 원시타입
  원시 타입 데이터는 변수에 할당될 때, 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다.
  종류 : Number, String, Boolean, undefined, null

• 객체타입
  참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며 변수에는 데이터에 대한 참조가 저장이 된다. 변수의 값이 저장된 힙 메모리의 주소값을 저장하는 것이다.
  종류 : Object, Array, Function

✔ Pass By Value

 원시 값은 pass by value의 형식으로 값을 넘겨준다. 원시 값은 변경 불가능한 값, 즉 읽기전용 값이다. 그렇기 때문에 데이터의 신뢰성을 보장한다.

var score = 80;

var copy = score;

console.log(score, copy) // 80 80
console.log(score === copy) // true

 위와 같이 score의 80을 copy로 복제 한다. 이를 값에 의한 전달이라 한다. 그렇기 때문에 copy는 80이 된다. 하지만 값이 동일할 뿐이지 두 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.

var score = 80;

var copy = score;

console.log(score, copy) // 80 80
console.log(score === copy) // true

score = 100;

console.log(score, copty); //100 80
console.log(score === copy); // false

 또한 score변수와 copy변수는 별도의 메모리 공간이므로 score를 변경해도 copy에 영향을 주지 않는다.

✔ Pass By Reference

 객체 값은 pass by reference의 형식으로 값을 넘겨준다. reference를 해석하면 말 그대로 값을 참조하는 것이다. 객체를 복사하면 참조 값이 복사되어 전달 된다.

var person ={
	name : "Choi"
};

var copy = person

 위와 같이 person객체를 복사하여 copy에 할당하였다. person과 copy는 저장된 메모리 주소는 다르다 하지만 동일한 참조 값을 가진다. 두 개의 식별자가 하나의 객체를 고유하는 것이다. 그렇기 때문에 하나의 변수의 객체값이 달라지면 영향을 받는다.

var person ={
	name : "Choi"
};

var copy = person

console.log(copy === person) // true

copy.name = "Kim"

person.address = "Seoul";

console.log(person) // {name: "Kim" , address : "Seoul"}
console.log(copy) // {name: "Kim" , address : "Seoul"}

✔ Call By Value / Call By Reference

 위에서 알아본 것처럼 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달로 동작한다. 함수를 호출할 때 매개변수도 변수와 동일하게 취급받으므로 원시 값과 객체도 동일한 방식으로 동작한다.

function changeVal(primitive, obj){
  primitive += 100;
  obj.name = "Kim";
}

var num = 100;
var person = {name : "Choi"}

console.log(num) // 100
console.log(person) // {name : "Choi"}

/**함수에 넣기*/
changeVal(num, person)

console.log(num) // 100
console.log(person) // {name : "Kim"}

 원시 값은 함수에의 값이 변경되지 않지만 객체 타입은 참조 값의 원본이 훼손되는 부수 효과가 발생한다.

👍올바른 피드백은 언제든지 환영입니다~!