JavaScript - Call By Value, Call By Reference

 

 

함수형 컴포넌트를 다루다 보니 정작 함수에 대해 모르는 부분이 많다는 생각이 들었다

그래서 이번 포스팅은 Call By Value, Call By Reference 를 정리해 보았다

 

 

함수를 호출하는 방법은 Call By Value, Call By Reference 요 두 가지 방법이 있다

→ 값을 호출할거냐 참조를 호출할거냐 두가지 방식으로 본다

→ 내가 이해한 개념은 함수 안에서 값을 어떻게 다루느냐 였다

 

 

이 부분을 이해하려면 c 언어의 포인터와 스택의 개념을 알아야 할 필요가 있다

그리고 인자와 매개변수의 차이도 잘 알아야 한다 (백문이 불여일견 )

function getUser(name, age) { // name 이랑 age 가 매개변수
	return { name, age };
}

getUser('John', 24); // 'John'이랑 24가 인자

 

 

Call By Value

함수안에서는 매개변수로 받은 값은 실제 변수의 값이 아니라 복사된 값이다.

즉, 함수 안에서 값을 아무리 지지고 볶아도 실제 변수 값은 변동이 없 - 다

 

// callByValue
void Swap(int x, int y) // x, y는 a, b를 복사한 값이다 (원본아님)
{
	int tmp = x;
	x = y;
	y = tmp;
}

Swap(a, b); // a, b의 값을 직접 내려보낸다

 

 

Call By Reference

함수안에서는 매개변수로 주소값을 받아 실제 변수(인자)의 값에 접근이 가능하다

즉, 함수 안에서 값을 가지고 놀면 실제 변수의 값이 영향을 받는다

// callByReference
void Swap(int *a, int *b) // a, b는 포인터를 활용해 직접 값에 접근 가능하다
{
	int tmp = *a;  // a의 값
	*a = *b; 	   // a의 값을 b의 값으로 교체
	*b = tmp;	   // b의 값을 a의 값으로 교체
}

Swap(&a, &b); // a, b의 주소값을 내려보낸다

 

 

 

자바스크립트에서는

• 원시타입의 경우 call by value로 동작
• 참조타입의 경우 call by reference로 동작

 

자바스크립트는 포인터 같은 개념이 없기 때문에,

대부분의 경우 값을 복사해서 사용하는 Call by Value 방식으로 사용한다.

 

 

하지만 객체는 예외였다. (참조에 대한 개념을 가장 많이 느낀 녀석)

객체를 복사해서 전달했지만 안타깝게도 객체 껍데기만 복사되었고

그 알맹이인 a의 값까지는 복사가 안되서 직접 접근이 가능했기 때문이다

aha 그래서 깊은복사 얕은 복사의 개념이 나왔군

const a = { b: 1 };    // a 객체를 선언
 
function change(obj) { // 체체체인지함수 선언
	obj.b = 2;     // 객체의 값 변경해버리기
}

change(a);	// 함수 실행해보면
console.log(a); // { b: 2 } b 값을 함수에서 1 → 2로 변경한 것을 확인!

 

 

 

직접 콘솔에 쳐봤더니 예상한 결과대로 잘 나오는 것을 알 수 있다

 

 

 

 

 

 

 

ref: https://kangworld.tistory.com/64