[JavaScript] Pass By Reference

안녕하세요. 동기 여러분! 오늘은 Pass By Reference. 그럼 가봅시다!

 

Pass By Reference

 

오늘은 주제가 너무 난감하고 영어로 이해가 안되어 생활코딩의 블로그를 참조 하였습니다. 링크 : https://www.opentutorials.org/course/743/6507

참조 - 생활코딩

 

 

자바스크립트에서 원시 데이터(primitive data)를 제외한 모든 데이터 타입은 객체(Object)입니다.  

// JavaScript

let a = 1; // <- 원시 데이터 (Primitive data)

let a = { id : 1 }; // <- 객체 (Object)

객체를 다른 말로 참조형 데이터라고 하는데 이 친구는 원본 데이터를 참조하고 있는 친구라 원본이 바뀌거나 이 친구가 바뀌면 바뀌게 되는 아주 귀엽고 끔찍하게 이해하기 어려운 녀석이다.

 

원시 데이터를 인자로 받았을 때의 경우

/JavaScript

let a = 1; // <- 숫자로 된 데이터가 원시 데이터(Primitive data)

let func = b => {
	b = 2;
}
func(a);
console.log(a);

// 출력 : 1

 

그럼 참조(Reference)를 한 아래의 코드를 살펴봅시다.

빨간 네모 코드

// JavaScript

let a = { id : 1 };        

let func = b => {    
	b = { id : 2 };
}

func(a);
console.log(a.id);

// 출력 : 1

파란 네모 코드

// JavaScript

let a = { id : 1 };

let func = b => {
	b.id = 2;
}

func(a);
console.log(a.id);

// 출력 : 2

이 두 가지의 코드의 출력값이 다르게 나오는 것을 볼 수 있습니다. 왜 그런지 디버깅을 통해 뜯어봅시다.

 

첫 번째

네 번째 줄을 제외한 두 코드 모두 차이점이 없습니다. 디버깅 창에 object 아래에 id : 1이 생긴 게 보이죠? 참조(Reference)를 생성한 모습입니다.

 

두 번째

별 차이가 없는 모습

 

세 번째

 

네 번째

여기서 차이를 보입니다. 빨간 네모 코드에서는 a의 id :1이 그대로 있고, b가 id : 2를 받아가는 반면에 파란 네모 코드에서는 a의 id : 1이 사라지고 그 자리를 id : 2가 오고 b가 받아가는 모습을 확인할 수 있습니다.

 

다섯 번째

a의 값이 다른 두 코드

 

마지막

출력 값으로 빨간 네모 코드는 1이 파란 네모 코드는 2가 나왔습니다.

 

빨간 네모 코드에서 b로 들어온 인자는 a인데, b를 a로 대체를 해도 b가 가리키는 객체만 변경된 것이기 때문에 a가 그대로 온다.

 

파란 네모 코드에서 b는 객체 a의 참조(Reference)이다. 그래서 a.id = 2가 되므로 속성이 바뀌기 때문에 a에도 영향을 미친다.

 

---

오늘의 느낌

멘탈 개터지네 진짜