[인프런]Javascript입문 - 참조 변수와 Call by Reference (참조변수/일반변수, call by Value/call by Reference)

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

값에 의한 전달 이해하기

 

이번 시간에는 값에 의한 전달(call by Value)과 참조에 의한 전달(call by Reference) 을 비교해 볼 것이다.

변수에는 두 종류가 있다 : 참조 변수와 일반 변수.

 

참조 변수와 일반 변수 (참조 타입과 원시 타입)

"객체"를 변수에 할당하면 참조 변수가 되고,
"기본 타입"을 변수에 할당하면 일반 변수가 됩니다.

- 참조 변수(참조 타입, reference type) : 배열 등의 "객체"가 할당된 변수.
 (참조 변수에는 객체object, 배열array, 함수function 가 해당된다)
- 일반 변수(원시 타입, primitive type) : 참조 변수 외에 나머지 변수. <- 기본 타입(자료형)이 할당된 변수.
 (일반 변수에는 숫자number, 문자열string, 참/거짓boolean, null, undefined 가 포함된다)

※ 참고 : 다른 프로그래밍 언어의 "클래스class"라는 개념이 자바스크립트의 "참조타입/원시타입" 에 해당된다.

(그냥 외우기)

/////// 일반 변수 : 기본 타입(자료형)이 할당된 변수.
var a = 10;
var b = "hello" 
// 변수 a에 number(숫자)를 할당했으므로 a는 일반변수이다.
// 변수 b에 string(문자열)을 할당했으므로 b는 일반변수이다.

var c = 5 > 3; 
c; //true 
// 변수 c에 true(참/거짓)을 할당했으므로 c는 일반변수이다.


/////// 참조 변수 : 객체가 할당된 변수.
var d = [1, 2, 3, 4, 5]; 
// 변수 d에 배열을 할당했으므로 d는 참조변수이다.
// (배열도 객체이다!)

var e = {};
e.name = "honux";
e; 
// {name: "honux"}. 변수 e에 객체를 할당했으므로 e는 참조변수이다.

 

 

(일반 변수의 특징) 일반 변수에서 값 복사하기 및 바꾸기

일반 변수는 "값"을 복사해 그대로 저장하고, 다른 변수에 언제나 독립적으로 존재합니다.
(다른 변수가 바뀌더라도 원 변수는 변하지 않는다)

var a = 10;
var a2 = a; // 변수 a의 값을 읽어서, a2에 대입한다. 따라서 일반변수 a2에는 값이 들어간다.
a; // 10
a2; // 10 
a2 === a // true
// 변수 a와 a2는 둘 다 10이므로 같다. 따라서 true가 나온다.

// a를 15로 바꿔 본다.
a = 15
a; // 15
a2; // 10
a2 === a // false
// 변수 a는 15, 변수 a2는 10이므로 값이 다르다. 따라서 false가 나온다 (당연)

// 문자열string도 마찬가지이다.

var s1 = "hello";
var s2 = s1;
s1; // "hello"
s2; // "hello"
s1 === s2 // true
// 변수 s1과 s2는 둘 다 "hello"이므로 같다. 따라서 true가 나온다.

s1 = "hell";
s1 === s2 // false
// 변수 s1은 "hell", 변수 s2는 "hello"이므로 같지 않다. 따라서 false가 나온다.

위 코드에서 a와 a2, s1과 s2는 처음에 값은 같지만 사실은 다른 변수입니다.

 

 

참조 변수의 동작 방식 이해하기

참조 변수에는 일반 변수처럼 값이 들어있지 않고, "참조"만 들어있다.

참조 변수라는 것은 객체에 대한 별명 같은 것입니다.
우리가 객체를 만들면 객체가 생기고 변수에는 그 객체의 참조를 할당하는 건데..... 무슨 말인지 잘 모르겠죠?

같은 사람을 이름으로도 부르고, 별명으로도 부르고, 형오빠언니누나삼촌과 같은 다양한 호칭으로 부르는 것과 조금 비슷합니다.
(명칭은 각각 다르지만, 각각의 명칭이 가리키고 있는 것은 같다)

예를 들어 어떤 고양이A를 "야옹이"라고도 부르고 "나비"라고도 부르고 "애용이"라고도 부르지만,
"야옹이","나비","애용이"가 가리키는 대상은 고양이A로 모두 같다.
만약 고양이A의 몸무게가 1kg가 찌면, "야옹이","나비","애용이"도 1kg가 찔 것이다.

➕ 참조 값 reference value : '객체'와 같은 말이다.

 

아래 코드를 먼저 실행해 보세요.

var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1;
arr2; // [1, 2, 3, 4, 5]

arr1.push(6);
arr1; // [1, 2, 3, 4, 5, 6]
arr2; // [1, 2, 3, 4, 5, 6]
arr1.push(10);
arr1; // [1, 2, 3, 4, 5, 6, 10]
arr2; // [1, 2, 3, 4, 5, 6, 10]

arr1 === arr2 // true

참조 변수의 특징 : 원 변수가 바뀌면, 참조 변수도 똑같이 바뀐다.
참조 변수는 원 변수와 완전히 똑같은 값을 가지기 때문에, arr1 === arr2는 언제나 true이다.

❓ 왜?
arr1도, arr2도 [1, 2, 3, 4, 5, 6, 10]이라는 같은 대상(배열=객체)을 참조하고 있기 때문에 둘의 값은 항상 같다.
일반 변수가 아닌, 객체를 할당한 "참조변수"이기 때문에 가능하다.

// 객체의 경우
var p1 = {};
var p2 = p1;
p1 === p2; // true
p1.name = "honux";
p1 === p2 // true.
p1; // {name: "honux"}
p2; // {name: "honux"}

var m1 = {name: "honux", age: 25};
var m2 = m1;
m1 === m2; // true
m2.name = "crong";
m2; // {name: "crong", age: 25};
m1; // {name: "crong", age: 25};
m1 === m2; // true

- 같은 대상을 참조하는 참조변수끼리는 언제나 같은 값을 가진다.
- 한 참조변수의 값을 바꾸어도 "참조 대상"의 값이 바뀌므로, 두 참조변수는 같다.

일반 변수와는 전혀 다른 결과가 나왔죠? 왜 그런지는 나중에 저절로 알게 됩니다. 일단 이게 참조 변수구나하고 기억해 둡시다.

 

---

 

함수 호출시의 변수

함수에서 두 코드의 동작 차이를 봅시다.

- 일반 변수 primitive type : 값에 의한 전달. call by Value
- 참조 변수 reference type : 참조에 의한 전달. call by Reference

아래 예제를 통해 이해해 보자.

 

값 전달 call by Value (일반 변수)

var foo = function(v) { 
    v = v * 2;
    console.log("foo: " + v);  
}

var n = 10; 
foo(n); // foo: 20 이 출력된다.
n; // 10.

함수 foo(v)에 n이라는 매개변수의 "값"인 10이 들어가, 2가 곱해지고 콘솔 창에 찍힌다.
n이 들어가는 게 아닌, n의 "값"인 10이 들어가기 떄문에 n은 그대로이다.

 

참조 전달 call by Reference (참조 변수)

// 배열의 경우
var arr = [1, 2, 3, 4, 5];
var append = function(arr, v) [
	arr.push(v);
};
append(arr, 10);
arr; // [1, 2, 3, 4, 5, 10]

var a = []; // 비어 있는 배열.
append(a2, 1);
a2; // [1]
append(a2, 2);
a2; // [1, 2]
append(a2, 100);
a2; // [1, 2, 100]

- 배열도 객체이기 때문에, 참조에 의해 값이 전달(call by Reference)되어
함수 내에서 바꾼 값이 함수 바깥에서도 바뀐다.
(함수 append 내에서 .push();를 하면 함수 바깥의 arr값도 변한다.)

// 객체의 경우
var p1 = {name : "honux"}
p1.weight = 67;
p1; // {name : "honux", weight : 67}

var diet = function(people) {
	people.weight -= 1;
    console.log("%s %d", people.name, people.weight);
};
diet(p1); // honux 66 
// 체중이 1 감소했다.
p1; // {name: "honux", weight: 61}

- 객체 p1 역시 참조에 의해 값이 전달되기 때문에,
함수 diet();내에서 people.weight를 -1씩 빼면 함수 바깥의 p1.weight도 -1씩 빠진다

✔ 일반 변수('값 참조' 예제)와 다르게..
함수의 매개변수로 참조변수를 넣고, 함수 안에서 값을 바꾸면 함수 바깥의 객체도 값이 바뀐다.
왜? p1과 people이 같기 때문!
-> 이러한 값 전달방식을 "참조에 의한 전달" call by Reference 이라고 부른다.

 

요약

• 값 전달 변수(=일반변수, primitive type)는 함수 내부에서 값을 바꿔도 외부에서는 그대로입니다.
  왜? 일반변수는 값만 전달해 주기 때문.
• 참조 전달 변수(=참조변수, reference type)는 함수 내부에서 값을 바꾸면 외부의 객체도 값이 바뀝니다.
  
  

 

이번 시간은 아주 중요한 내용이기 때문에, 꼭 숙지하고 다음 단계로 넘어가는 것을 추천한다.