[SeSACXCodingOn] 웹풀스택과정 2W_06 _02: pass by value, pass by reference

면접 기술질문의 꽃! 변수를 넘겨주는 방법인 pass by value와 pass by reference에 대해 알아보겠습니다. 우선 변수를 넘겨주는 방법은 언어마다 다르기 때문에 우선 javascript에 한해서만 정리해보겠습니다.

 

먼저 javascript 에는  원시타입(primitive Type)과 참조타입(Reference Type)이라는 자료형이 있습니다. 

 

원시타입	참조타입
-숫자 (number) -문자열(String) -불린 (Boolean) -undefined -null	-객체 (Object) -배열(Array) -함수( Function)

 

먼저 원시 타입 데이터가 변수에 할당될 때는 해당 변수가 원시 데이터의 '값'을 보관합니다. 즉, 변수에 값이 할당될때마다 할당된 메모리에 저장된 값을 바로 변경하게 되는 것입니다.  반면 자바스크립트의 참조타입 데이터는 크기가 정해져 있지 않고, 변수에는 '값'이 아닌 변수의 값이 저장된 힙 메모리의 '주소값'을 저장합니다.  즉, 변수에는 주소값을 가지고 있고 이 주소값을 이용하여 변수의 값에 접근합니다. 

 

Pass By Value

Pass By Value 는 원시 타입 데이터들이 변수에 값을 복사하여 할당하는 방법입니다. 

 

// pass by value
// : 원시 타입은 값(value)이 복사되어 전달
let num = 1;
let num2 = num;
console.log(num, num2); // 1 1
console.log(num === num2); // true

num = 5; // 1 -> 5
console.log(num, num2); // 5 1
console.log(num === num2); // false

Pass By Reference

Pass By Reference 는 참조 타입 데이터들이 변수에 값이 있는 메모리 '주소값'을 복사하여 할당하는 방법입니다. 

참조타입인 객체와 배열로 예시 코드를 보겠습니다. 

// pass by reference
const obj = { one: 1, two: 2 };
const obj2 = obj;
console.log(obj, obj2); // { one: 1, two: 2 }
console.log(obj === obj2); // true

obj.five = 5;
console.log(obj, obj2); // { one: 1, two: 2, five: 5 }
console.log(obj === obj2); // true
// obj와 obj2는 현재 같은 데이터도 같고 참조값(address, 주소)도 같다

//////
const obj3 = { one: 1, two: 2 };
const obj4 = { one: 1, two: 2 };
console.log(obj3, obj4);
console.log(obj3 === obj4); // false
// why? obj3와 obj4는 현재 같은 데이터를 같지만, 서로 다른 별도의 객체
// 즉, 참조값(address, 주소)가 다르다

obj3.five = 5;
console.log(obj3, obj4);
console.log(obj3 === obj4); //false

///////////
const arr = [1, 2];
const arr2 = arr;
// arr과 arr2 서로 같은 참조값을 가짐

console.log(arr, arr2);
console.log(arr === arr2); // true

arr.push(5);
console.log(arr, arr2);
console.log(arr === arr2); // true

const arr3 = [1, 2];
const arr4 = [1, 2];
console.log(arr3, arr4);
console.log(arr3 === arr4);

arr3.push(5);
console.log(arr3, arr4);
console.log(arr3 === arr4); //false