[JS] : Call By Value / Call By Reference

 

Call by value ?

식별자가 갖고있는 주소값으로 갔을 때 할당된 데이터가 존재하면 call by value 이다.

기본형 데이터 타입에서 발생한다.

 

Call by reference ?

식별자가 갖고있는 주소값으로 갔을 때 할당된 데이터가 존재하는게 아니라
실제 데이터가 있는 주소값을 참조하고 있다면 그건 call by reference 이다.

참조형 데이터 타입에서 발생한다.

 

JS 데이터 타입의 종류

JS에서 데이터 타입은 2가지 종류로 나뉜다고 한다.

 

기본형 = 단일한 값을 담을 수 있는 타입

1. Number

2. String

3. Boolean

4. Undefined

5. Null

6. (ES6) Symbol

...

 

참조형 = 연관된 데이터를 담을 수 있는 타입

참조형에는 최상위 객체에 Object 라는 객체가 있고, 참조형의 모든 요소는 Object의 하위요소로 잡힌다.
하위요소에는 아래 보기들이 있다.

1. Array

2. Function

3. Date

4. Map

5. Set

6. Promise

7. RegExp

...

 

데이터 타입을 나누는 기준 (중요)

1. 값의 저장 방식

2. 불변성 여부

 

데이터의 복제 방식 (기본형과 참조형의 차이점)

기본형 : 데이터가 담겨있는 메모리의 주소값을 바로 복제

참조형 : 데이터가 담겨있는 메모리의 주소값을 나타내는 주소값을 복제

 

불변성 여부

기본형 : 불변성을 가진다. = 불변하다.

참조형 : 불변성을 갖지 않는다. = 가변하다.

 

이해되지 않는 부분

기본형의 불변하다라는 부분이 이해가 되지 않음.

예시

var a = 6;

a = 'abc';

console.log(a); // abc

var 라는 선언문은 재할당 및 재선언이 가능한 용어이다.

var를 통해서 a를 선언하고, 선언한 a에 6이라는 값을 할당한 후에 바로 다음줄에서 "재할당"을 통해서 a에 abc를 재할당 하게 된다면,

결과적으로 console.log 로 출력값은 재할당된 abc가 찍히게 된다.

처음 할당한 값인 6에서 a가 가진값은 abc로 변했으니 !

"이렇게 되면, 결국 기본형의 값은 불변한 것이 아니라 변한것이 아니냐" 라는 생각이 든다.

하지만, 프로그래밍에서 불변성 여부를 판단할때는 "메모리 관점"에서 봐야 한다고 한다.

그래서 메모리에 데이터가 정확히 무엇인지 공부하고자 한다.

 

데이터와 메모리 ?

1. 비트 ( bit )

• 컴퓨터가 이해할 수 있는 가장 작은 단위 = 0 과 1
• 메모리를 구성하기 위한 가장 작은 조각 = 비트
• 하나의 비트에는 0 또는 1로 구성되어 있다.

2. 바이트 ( byte )

• 컴퓨터가 비트조각 하나하나를 찾아가며 데이터를 비교하기는 비효율적이기 때문에,
  비트 8개를 모아서 하나의 데이터를 나타내는 새로운 단위인 byte를 만들어냈다.

3. 메모리 ( memory )

• 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해서 구분된다.
• 따라서, byte 는 서로서로 구분이 가능하다고 볼 수 있다.

 

데이터가 메모리에 할당되는 방식

1. 기본형 데이터

예시 코드

var kwon; // 변수명 선언
kwon = abc; // 데이터 할당

< 메모리 표 >

식별자 = 변수명 영역
식별자 영역에는 kwon 라는 식별자의 값을 먼저 세팅한다.
메모리표의 왼쪽부터 쭉~ 탐색해서 오면서 빈공간을 찾고, 빈공간을 찾았다면 거기에 데이터를 저장한다.

주소	...	1002	1003	1004	1005	1006	1007	1008	1009
데이터	...	이름 : kwon 데이터 : @5003

데이터 = 변수 영역
데이터 영역에는 abc 이라는 변수의 값을 세팅한다.
데이터 영역에서도 왼쪽부터 쭉 ~ 탐색을 하면서 빈공간을 찾고, 찾았다면 거기에 데이터를 저장한다.

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	...	...	abc

 

위의 메모리표 해석

1002번 이라는 주소값에는 kwon이라는 변수명이 담겨있고, 데이터에는 @5003번이라는 주솟값이 담겨있으며, 해당 주소값이 가지는 데이터를 확인하기 위해 데이터 영역을 살펴보면,

데이터 영역의 5003번 이라는 주소값에는 abc라는 우리가 할당한 데이터값이 담겨있다.

 

값을 바로 할당하지 않고, 식별자 영역 / 데이터 영역 나누는 이유 !!

1. 자유로운 데이터 변환을 위해서

내가 위처럼 kwon이라는 식별자를 선언해서 1002번의 주소값에 데이터가 들어갔고,
1003번과 1004번도 똑같이 새로운 식별자 데이터가 들어와 있는 상태에서,

주소	...	1002	1003	1004	1005	1006	1007	1008	1009
데이터	...	이름 : kwon 데이터 : abc	.......	.......

이렇게 바로 abc를 할당했다고 쳤을 때, 1002번에 할당된 abc라는 데이터를 글자수가 100인 메모리값이 더 큰 데이터로 변경한다면 ?

글자수가 100인 대용량의 데이터를 담을 수 있을만큼
1002번 뿐만 아니라 그 이상의 주소값 자리까지 차지해야 변경된 큰 데이터를 다 담을 수 있기 때문에
1003번과 1004번에 저장된 데이터들도 전부 다 뒤로 몇 칸씩 밀려야 한다.

언제까지 ?
1002번에 재할당된 데이터가 메모리에 충분히 담길 수 있는 주소값까지 !

그렇기 때문에 비효율 적이다.
그래서 식별자 영역과 데이터 영역을 따로 나누어서 별도 공간에 데이터를 확보해 두고,
식별자 영역의 데이터에는 데이터 영역의 주소값을 가져올 수 있게 하는 것이다.

2. 메모리를 효율적으로 관리하기 위해서

알아두어야 하는 부분 한가지!

비교적 식별자 영역이 소모하는 메모리 양은 거의 항시 데이터 영역의 메모리 양보다 적다 가 Base !

만약, 1만개의 식별자를 생성했는데, 그 생성한 식별자에 할당된 변수가 같은 값이라면 ?

그 값을 1이라고 가정했을 때,

JS에서는 정수가 가지는 메모리 양은 8Byte이기 때문에 1만개의 값을 전부 새로운 주소값에 직접 할당했다면 차지하는 메모리 용량은 8만바이트가 된다.

하지만, 식별자의 영역에는 1만개의 식별자를 각 주소값에 할당하고,
1이라는 변수를 데이터 영역에서 1개의 주소값에 할당한 후에, 그 주소값을 식별자의 영역에 데이터 부분에 끌어와 쓴다면?

데이터 영역에서는 메모리 사용량이 1이라는 값을 하나의 주소값에 할당하는데 쓰인 8바이트가 전부이고,
식별자 영역에서는 1만개의 식별자를 할당했지만, 데이터 영역보다는 메모리 사용량이 적기 때문에 예로 1개당 2바이트로 잡으면,

직접할당 : 8만 바이트 = 식별자와 데이터 따로 각 영역에 할당 : 2만 8바이트 이기 때문에,
메모리 사용면에서 효율적으로 사용할 수 있기 때문이다.

위와 같은 2가지 이유로 할당된 데이터를 식별자 영역에 직접 할당하지 않고,
데이터 영역에 저장한 뒤 해당 주소값을 가져와서 사용하는 방식으로 처리하는 것이다.

 

위의 이해되지 않는 부분 해결

위에서 이해가 되지 않았던 불변성을 확인하는 과정의 예시 코드를 그대로 가져왔다.

1. var a = 6;

2. a = 'abc';

3. console.log(a); // abc

< 1번 줄 코드 메모리표 >

주소	...	1002	1003	1004	1005	1006	1007	1008	1009
데이터	...	이름 : a 데이터 : @5001

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	6

< 2번 줄 코드 메모리표 >

주소	...	1002	1003	1004	1005	1006	1007	1008	1009
데이터	...	이름 : a 데이터 : @5002

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	6	abc

불변성을 판단하기 위해서는 메모리 관점에서 봐야 한다 했었고, 불변함과 불변하지 않음을 메모리관점에서 정의하는 바는 다음과 같다.

불변하다 = 데이터 영역 메모리를 변경할 수 없다.
불변하지 않다 = 데이터 영역 메모리를 변경할 수 있다.

따라서, 데이터 영역의 5001번에 할당된 6의 값이 abc로 변경한것이 아닌, 새로운 주소값에 abc를 할당시켰고, 식별자 영역에서는 그 주소값을 가져온 것 이기 때문에, 6이 가진 메모리는 변경되지 않은 것이다.

 

깨알 습득 지식

이제 재할당으로 더 이상 사용이 되지 않은 5001번의 주소값이 가지는 6이라는 데이터는 JS안에 가비지컬렉터라는 친구가 있는데,
이런 쓸모가 없어진 코드들을 가비지컬렉터 친구들이 수거를 하고 다닌다고 합니다.

그렇게 JS 내에서 메모리를 관리해 나간다고 합니다.

 

데이터가 메모리에 할당되는 방식

2. 참조형 데이터

예시 코드

var obj1 = {
    a: 1,
    b: 'gd',
};

< 메모리 표 >

식별자 = 변수명 영역
기본형 데이터와 동일하게 이루어 진다.

주소	...	1001	1002	1003	1004	1005	1006	1007	1008
데이터	...	이름 :  obj1 데이터 :  @7101 ~  @7102

데이터 = 변수 영역
기본형 데이터와 동일하게 이루어진다.
다만 참고할 부분은 참조형 데이터의 객체 키값은 다른 별도 공간에 저장되고,
모든 데이터는 이 곳 !! 데이터 영역에 저장된다는 것을 기억하자 !!

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	1	"gd"

(중요) 데이터 영역 내의 객체 별도 공간
참조형 데이터가 저장될 시에는 이렇게 참조형 데이터의 키값들이 별도로 저장될 수 있는 공간에 저장하게 된다.
빈 주소값에 객체의 key값이 들어가고, 해당 key 값이 가지는 value값을 나타내는 주소값이 같이 들어간다.

주소	...	7001	7002	7003	7004	7005	7006	7007	7008
데이터	...	이름 : a 데이터 :  @5001	이름 : b 데이터 : @5002

 

참조형 데이터의 가변성

가변성을 확인하기 위한 예시 코드

var obj1 = {
    a: 1,
    b: 'gd',
};

obj1.a = 23;

console.log(obj1); // 출력 값 : { a: 23, b: 'gd' }

위 코드를 기반으로 메모리 표를 확인해보았을 때,

< 메모리 표 >

식별자 영역은 변경되는 부분이 없습니다.

주소	...	1001	1002	1003	1004	1005	1006	1007	1008
데이터	...	이름 :  obj1 데이터 :  @7101 ~  @7102

이 아래로는 전부 데이터 영역인데, 여기서 참조형의 가변성이 드러납니다.
1. 데이터 영역에 재할당한 23이라는 값이 빈 메모리에 할당이 되어야 하구요. // 빈 메모리인 5003번에 할당
2. 데이터 영역내의 객체 별도 공간안에 7001의 주소값이 가져오는 데이터 주소가 변경되어야 합니다.
왜냐면 ? a의 값이 1이 아닌 23으로 재 할당 했기 때문에, a라는 이름을 갖고있는 7001 주소안의 데이터 주소는 1인값인 5001을 가져오는게 아니라 새로 할당받은 23이 할당된 주소값을 가져와야 하기 때문입니다.

데이터 영역의 변경된 결과는 다음 표와 같습니다.

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	1	"gd"	23

주소	...	7001	7002	7003	7004	7005	7006	7007	7008
데이터	...	이름 : a 데이터 :  @5003	이름 : b 데이터 : @5002

따라서, 데이터 영역의 메모리가 변경되냐 안되냐로 불변성을 나누기 때문에, 데이터 영역의 메모리가 변경되었으므로,
참조형 데이터는 불변하지 않다 === 가변하다.

 

중첩객체의 데이터가 할당되는 과정

그럼 이번엔 객체안의 객체가 메모리에 할당되는 과정은 어떻게 되는지 살펴보자.
위의 설명을 기반으로 혼자 테스트를 진행해보았는데, 틀렸다. ^^

중첩객체의 데이터 할당과정은 다음과 같다.

중첩객체 예시 코드

var obj1 = {
    a: 3,
    arr: [1, 2, 3],
};

< 메모리 표 >

표 구성은 다음과 같다.
항시 표는 식별자 영역 / 데이터 영역 으로 구성되어 있으며, 데이터 영역안에는 참조형 데이터일 경우 각 객체가 나타내는 별도 공간이 따로 있다고 생각하자 !!

식별자 영역

주소	...	1001	1002	1003	1004	1005	1006	1007	1008
데이터	...	이름 : obj1 데이터 : @7001 ~ @7002

데이터 영역

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	3	4	5

obj1의 별도 공간

주소	...	7001	7002	7003	7004	7005	7006	7007	7008
데이터	...	이름 : a 데이터 : @5001	이름 : arr 데이터 :  @8001 ~ @8003

arr의 별도공간
객체의 경우 key값에 따라 데이터를 관리했다면, 배열의 경우에는 인덱스 값으로 관리된다.

주소	...	8001	8002	8003	8004	8005	8006	8007	8008
데이터	...	i = 0 데이터 :  @5001	i = 1 데이터 :  @5002	i = 2 데이터 :  @5003

 

복사한 변수 메모리 할당 과정

예시 코드

var a = 10;
var obj = { b: 3, c: 'hi' };

// 다른 변수로 복사
var d = a;
var obj1 = obj;

< 메모리 표 >
편의를 위해 이제 식별자 영역과 별도공간에 이름 생략함.

식별자 영역

주소	...	1001	1002	1003	1004	1005	1006	1007	1008
데이터	...	a / @5001	obj / @7001 ~ @7002	d / @5001	obj1 / @7001 ~ @7002

데이터 영역

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	10	3	"hi"

obj 별도 공간

주소	...	7001	7002	7003	7004	7005	7006	7007	7008
데이터	...	b / @5002	c / @5003

 

복사한 변수 값을 변경할 때 !!

위와 동일한 코드에서 복사한 값만 변경할 것이다.

예시 코드

var a = 10;
var obj = { b: 3, c: 'hi' };

// 변수 복사
var d = a;
var obj1 = obj;

// 복사한 값 변경
d = 13;
obj1.b = 9;

< 메모리 표 >

식별자 영역

주소	...	1001	1002	1003	1004	1005	1006	1007	1008
데이터	...	a / @5001	obj / @7001 ~ @7002	d / @5004	obj1 / @7001 ~ @7002

데이터 영역

주소	...	5001	5002	5003	5004	5005	5006	5007	5008
데이터	...	10	3	"hi"	13	9

obj 별도 공간

주소	...	7001	7002	7003	7004	7005	7006	7007	7008
데이터	...	b / @5005	c / @5003

 

중요⭐️

여기서 중요한 점이 하나 있다.

// 첫 선언 당시
var a = 10;
var obj = { b: 3, c: 'hi' };

// 변수 복사
var d = a;
var obj1 = obj;

// 복사한 변수에 값 재할당
d = 13;
obj1.b = 9;

// 출력 값 : 
console.log(a, d); // 10 , 13
console.log(obj, obj1); // { b: 9, c: 'hi' } { b: 9, c: 'hi' }

< 기본형 >

10이라는 데이터가 할당된 a라는 식별자를 가져와 d에 복사했고, 복사한 d의 값을 재할당을 통해 13으로 변경해주었다.
따라서 우리가 원했던 값인 a = 10 / d = 13이 정상적으로 출력되었다.

⭐️ < 참조형 > ⭐️

b : 3 / c : "hi" pair 를 이루는 obj 를 가져와 obj1로 복사했고, 복사한 obj1의 b의 요소값만 9라는 데이터를 재할당 해주었다.
따라서 우리가 원한값은 obj = { b : 3 , c : "hi" } / obj1 = { b : 9 , c : "hi" } 이것이다.

하지만, 출력값을 확인해보면 obj = { b: 9, c: 'hi' } / obj1 = { b: 9, c: 'hi' } 로 obj1의 b 요소만 변경했음에도 불구하고 obj의 b요소까지 변경된 것을 확인할 수 있다.

이는 위의 메모리표를 확인해보면 obj 와 obj1이 서로 같은 데이터의 주소값을 바라보고 있다는 걸 알 수 있고, obj 1의 b 의 요소값을 변경하면서 obj 별도공간의 d의 데이터 주소값이 변경되었기 때문에 이런 원하지 않은 오류값을 만나게 된 것이다.

 

위 참조형의 오류 해결 방법

오류 해결 코드

var a = 10;
var obj = { b: 3, c: 'hi' };

var d = a;
var obj1 = { b: 12, c: 'hello' }; // 변수를 복사한 것이 아닌, 새로운 객체를 할당해주었다.

d = 13;
obj1.b = 9;

console.log(a, d); // 10, 13
console.log(obj, obj1); // { b: 3, c: 'hi' } { b: 9, c: 'hello' }

 

위 해결방법의 출력 값이 우리가 원하는 값으로 나오는 이유

4번 줄에서 변수 복사를 진행할 때 기존 obj라는 변수를 복사한 것이 아닌 새로운 객체를 할당했다.

그렇게 되면서 obj1도 새로운 obj1만의 별도공간이 데이터 영역내에 가지게 되었고, 그 안에서 데이터 주소를 가져오면서, 해당 데이터 주소를 갖고 있는 obj1의 영역의 주소값을 obj1이라는 식별자가 가지게 되었으니, 위의 오류가 해결이 된 것이다.

 

느낀 점

call by value 와 call by reference 에 대해서 알고 싶어서 데이터 타입부터 기본형 참조형, 나누는 기준, 그리고 메모리에 데이터가 할당되는 방식과 복사 후 값을 변경했을 때 일어나는 일들까지 기본형과 참조형의 차이에 대해서 하루종일 이 포스트를 정리했다.

여러가지 시청하고 찾아보면서 '아 그래도 이제 데이터가 메모리에 저장되는 방식과 기본형과 참조형의 차이는 확실하게 깨우치고 다음 단계로 넘어가는 것 같아서 너무너무너무 행복하다'

이런 오류가 생긴다는것이 참 신기하다. 이 부분에 대해서 앞으로 겪을 이슈가 무엇들이 있는지도 찬찬히 살펴봐야겠다.

 

#데이터_타입 #기본형 #참조형 #call_by_value #call_by_reference #복사 #이슈 #데이터 #메모리