[내보내번] JavaScript - Explaining Value vs. Reference in Javascript

GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리의 내용 중 공부하고 싶은 아티클을 내가 정리할 겸 기억할 겸 작성하는 번역글이다. 33가지 중 세 번째인 기본형과 참조형(Value Types and Reference Types)에 관련된 내용이다.

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Arnav Aggarwal 님이 작성하신 Explaining Value vs. Reference in Javascript 이다. 중간중간 예제들이 개념 잡기 아주 좋았다. 내용 중간중간🤔이 아이콘이 보인다면 본문에 나와 있지 않은 번역하며 추가한 말이다.
(Primitive type은 기본형으로 primitive value는 원시 값으로 번역하였다.)

Medium

---

이 아티클은 나의 온라인 코스인 Step Up Your JS: A Comprehensive Guid to Intermediate JavaScript에서 발췌했다. 이곳에서 자유롭게 인터랙티브 코드 플레이그라운드와 온라인 퀴즈를 보라. 

자바스크립트는 5개의 값으로 전달되는 데이터 타입: Boolean, null, undefined, String, Number가 있다. 우리는 이들을 기본형이라고 부른다. 

자바스크립트는 3개의 참조로 전달되는 데이터 타입: Array, Function, Object가 있다. 이들은 기술적으로는 모두 객체이고, 그래서 총칭하여 객체라고 한다. 

기본형

기본형이 변수에 할당된 경우, 우리는 그 변수가 원시 값을 가지고 있다고 생각할 수 있다. 

var x = 10;
var y = 'abc';
var z = null;

x는 10을 가지고 있다. y는 'abc'를 가지고 있다. 이 개념을 굳히기 위해서, 이 변수들과 각각의 값이 메모리에서 어떻게 보이는지에 이미지를 유지(maintain)할 것이다. 

이러한 변수들을 다른 변수에 할당할 때 '='를 사용하고 값을 새로운 변수로 복사한다. 그들은 값으로 복사가 된다. 

var x = 10;
var y = 'abc';

var a = x;
var b = y;

console.log(x, y, a, b); // -> 10, 'abc', 10, 'abc'

a와 x 모두 10을 가지고 있다. b와 y 모두 'abc'를 가지고 있다. 그들은 값 자체가 복사된 것이기 때문에 별개이다. 

하나의 값이 바뀐다고 다른 것도 바뀌지 않는다. (🤔:x가 바뀐다고 a가 바뀌거나, b가 바뀐다고 y가 바뀌지 않음.) 변수는 서로에 대해 아무런 관계가 없다고 생각하라. 

var x = 10;
var y = 'abc';

var a = x;
var b = y;

a = 5;
b = 'def';

console.log(x, y, a, b); // -> 10, 'abc', 5, 'def'

객체

혼란스러울 수도 있지만, 나와 함께 참고 읽어보자. 일단 다 읽어보면 쉽게 느껴질 것이다.

원시 값이 아닌 값이 할당된 변수는 해당 값에 대한 참조가 제공될 것이다. 그 참조는 메모리에서 객체의 위치를 가리킨다. 변수는 실제로 값을 가지고 있지는 않다. 

객체는 컴퓨터 메모리의 어떤 장소에 생성이 된다. arr = []라는 코드를 작성하면, 메모리에 배열을 하나 생성한 것이다. 변수 arr가 받는 것은 주소 즉 배열의 위치이다. 

address가 값으로 전달받는 새로운 데이터 타입이라고 생각해보자. number나 string같이 말이다. address는 참조로 전달되는 값의 메모리 내 위치를 가리킨다. 문자열이 따옴표(''나 "")로 표시되는 것처럼 주소는 화살표 괄호, <>로 표시된다. 

참조형 변수에 할당하고 사용할 때 작성하고 보는 것은 다음과 같다: 

1) var arr = [];
2) arr.push(1);

위의 첫 번째와 두 번째 줄을 메모리에서 표현하는 다음과 같다: 

1. 

2. 

arr 변수에 담긴 값(value)과 주소(address)는 고정되어 있다. 메모리에 있는 배열이 변경된다. arr를 사용해서 값을 추가하는 것과 같은 무언가를 하면 자바스크립트 엔진은 메모리에 있는 arr의 위치에 가서 그곳에 저장된 정보로 작업한다. 

참조에 의한 할당

참조형의 값, 즉 객체가 '='를 사용해서 다른 변수로 복사되면 해당 값의 주소는 마치 원시 값인 것처럼 복사되어 넘어간다. 객체는 값 대신 참조로 복사된다. 

var reference = [1];
var refCopy = reference;

위의 코드는 메모리에서 아래와 같이 보인다. 

각 변수는 동일 배열에 대한 참조를 갖고 있다. 즉 reference, refCopy를 변경할 경우 해당 변경 사항을 볼 수 있다:

reference.push(2);
console.log(reference, refCopy); // -> [1, 2], [1, 2]

2를 메모리의 배열에 추가했다. reference와 refCopy를 사용할 때, 같은 배열을 가리키고 있다. 

참조 재할당

참조 변수를 재할당하는 것은 이전 참조가 대체된다.

var obj = { first: 'reference' };

 메모리 내:

두 번째 라인을 추가하면:

var obj = { first: 'reference' };
obj = { second: 'ref2' }

obj에 저장된 주소가 변경된다. 첫 번째 객체는 여전히 메모리에 존재하고 다음 개체도 마찬가지다. 

위의 #234와 같이 남아있는 객체를 참조하는 것이 없으면 자바스크립트 엔진은 가비지 컬렉션을 수행할 수 있다. 이것은 프로그래머가 해당 객체에 대한 모든 참조를 잃었고, 해당 객체를 더 이상 사용할 수 없다는 것이다. 따라서 엔진은 그 객체를 메모리로부터 안전하게 삭제할 수 있다. 이러한 경우, 객체 {first: 'reference'}는 더 이상 접근 불가능하고 가비지 컬렉션을 위해 엔진을 사용할 수 있다. 

==와 ===

동등 연산자 ==와 ===가 참조형 변수에 사용될 때, 그들은 참조를 확인한다. 변수가 동일한 항목에 대해 참조가 포함되어 있으면, 비교에 대한 결과는 true가 된다. 

var arrRef = [’Hi!’];
var arrRef2 = arrRef;

console.log(arrRef === arrRef2); // -> true

만약 그들이 별개의 객체인 경우, 동일한 속성을 가지고 있다고 하여도 비교의 결과는 false 일 것이다. 

var arr1 = ['Hi!'];
var arr2 = ['Hi!'];

console.log(arr1 === arr2); // -> false

두 개의 별개의 객체가 있고 그들의 속성이 같은지를 보려면, 가장 쉬운 방법은 두 객체 모두 문자열로 변경하고 문자열들을 비교하는 것이다. 동등 연산자가 기본형을 비교할 때 단순히 값이 같은지를 확인한다. 

var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);

console.log(arr1str === arr2str); // true

다른 옵션은 객체를 반복문을 돌면서 각 속성이 같은지를 확인하는 것일 것이다. 

함수를 통한 파라미터 전달

원시 값을 함수에 전달할 때, 함수는 자신의 파라미터에 값을 복사한다. '='를 사용하는 것과 사실상 동일하다. 

var hundred = 100;
var two = 2;

function multiply(x, y) {
    // PAUSE
    return x * y;
}

var twoHundred = multiply(hundred, two);

위의 예제에서 hundred에 100을 주었다. multiply로 hundred를 넘겨주면 변수 x는 그 값 100을 받는다. '=' 할당을 사용한 것처럼 값이 복사된다. 다시, hundred의 값은 영향을 받지 않는다. 여기 multiply의 PAUSE 주석에서 멈추었을 때 메모리가 어떻게 보이는지에 대한 스냅샷이 있다. 

순수 함수

외부 스코프에 영향을 주지 않는 함수를 순수 함수라고 부른다. 함수가 원시 값만 파라미터로 받고 주변 스코프에서 변수를 사용하지 않는 한 외부 스코프에 어떤 것도 영향을 미치지 않기 때문에 자동으로 순수하다. 내부에서 생성된 모든 변수는 함수가 반환되자마자 가비지 컬렉트 된다. 

그러나 객체를 받는 함수는 주변 스코프의 상태를 변형할 수 있다. 한 함수가 하나의 배열 참조를 가져와서 가리키는 배열에 요소를 추가하는 것과 같이 변경하는 경우, 주변 스코프의 해당 배열을 참조하는 변수에서도 해당 변경사항을 볼 수 있다. 함수가 반환되고 난 후에 외부 스코프에서 변경사항은 유지된다. 이것은 추적하기 어려운 원치 않는 부작용을 야기할 수 있다. 

Array.map, Array.filter를 포함한 많은 기본 배열 함수들은 순수 함수로 작성된다. 이러한 함수들은 배열 참조를 가져와서 내부적으로 배열을 복사하고 원래 함수 대신 복사한 함수를 사용한다. 이것은 원본 함수가 변경되지 않게 해 주고, 외부 스코프에도 영향을 주지 않으며 새로운 배열에 대한 참조를 반환한다. 

순수 함수와 비순수(impure) 함수의 예시를 살펴보자 (🤔: impure function에 대한 용어를 찾지 못한 관계로 비순수로 작성함.)

function changeAgeImpure(person) {
    person.age = 25;
    return person;
}

var alex = {
    name: 'Alex',
    age: 30
};

var changedAlex = changeAgeImpure(alex);

console.log(alex); // -> { name: 'Alex', age: 25 }
console.log(changedAlex); // -> { name: 'Alex', age: 25 }

이 비순수 함수는 객체를 받아 age 속성을 25로 변경한다. 받은 참조에 영향을 주기 때문에 곧바로 alex 객체를 변경한다. person 객체를 반환할 때 전달받은 동일한 객체를 반환하는 것에 주목하라. alex와 alexChanged는 동일한 참조를 갖고 있다. person 변수를 반환하고 새로운 변수에 해당 참조를 저장하는 것은 중복된다. 

순수 함수를 살펴보자

function changeAgePure(person) {
    var newPersonObj = JSON.parse(JSON.stringify(person));
    newPersonObj.age = 25;
    return newPersonObj;
}

var alex = {
    name: 'Alex',
    age: 30
};

var alexChanged = changeAgePure(alex);

console.log(alex); // -> { name: 'Alex', age: 30 }
console.log(alexChanged); // -> { name: 'Alex', age: 25 }

이 함수에서 JSON.stringify를 사용하여 전달받은 객체를 문자열로 변환하고 JSON.parse로 객체로 다시 파싱 한다. 이러한 변환을 수행하고 결과를 새로운 변수에 저장하여 새로운 객체를 생성했다. 그밖에도 원 객체를 루프를 돌면서 각 속성을 새로운 객체에 할당하는 것과 같은 방법도 있지만 위의 방법이 제일 간단한 방법이다. 새로운 객체는 원본과 같은 속성들을 가지고 있지만 메모리에서는 별개의 객체이다. 

age 속성을 새로운 객체에서 변경할 때, 원본은 영향을 받지 않는다. 이 함수는 순수하다. 자신의 스코프 밖에 있는 어떤 객채에도 영향을 줄 수 없는데 심지어 전달받은 객체에도 영향을 줄 수 없다. 새로운 객체는 반환되고 새로운 변수에 저장되어야 하고 그렇지 않으면 함수가 종료될 때 가비지 컬렉터에 의해 수집되어 객체는 더 이상 스코프에 더 이상 존재하지 않는다. 

스스로 점검해보기

값 vs. 참조는 코딩 인터뷰에서 자주 나오는 개념이다. 여기에 무엇이 로그 되어 출력되는지 스스로 생각해보라. 

function changeAgeAndReference(person) {
    person.age = 25;
    person = {
        name: 'John',
        age: 50
    };
    
    return person;
}

var personObj1 = {
    name: 'Alex',
    age: 30
};

var personObj2 = changeAgeAndReference(personObj1);

console.log(personObj1); // -> ?
console.log(personObj2); // -> ?

함수는 제일 먼저 전달받은 원본 객체의 age 속성을 변경한다. 그 후 변수에 새로운 객체를 재할당하여 그 객체를 반환한다. 여기 두 객체가 무엇을 출력하는지에 대한 결과이다. 

console.log(personObj1); // -> { name: 'Alex', age: 25 }
console.log(personObj2); // -> { name: 'John', age: 50 }

함수 파라미터를 통해 하는 할당은 기본적으로 '='로 할당하는 것과 동일하다는 것을 기억하라. 함수 내의 person 변수는 personObj1에 대한 참조를 가지고 있다. 따라서 처음에는 해당 객체에 직접 작용한다. (🤔: person 변수에는 personObj1에 대한 참조값이 들어있기 때문에 person.age = 25에 대해서 personObj1에 직접 age 속성이 변경되는 것을 말하는 것 같다.) person에 새로운 객체를 재할당하면, person 변수는 원본 객체에 대해 영향을 미치지 않는다. 

이 재할당은 personObj1이 외부 스코프에서 가리키는 객체를 변경하지 않는다. person은 재 할당되었기 때문에 새로운 참조를 갖지 이 재할당으로 personObj1이 변경되지는 않는다.

위 블록의 코드에 해당하는 코드는 다음과 같을 것이다: 

var personObj1 = {
    name: 'Alex',
    age: 30
};

var person = personObj1;
person.age = 25;

person = {
  name: 'john',
  age: 50
};

var personObj2 = person;

console.log(personObj1); // -> { name: 'Alex', age: 25 }
console.log(personObj2); // -> { name: 'John', age: '50' }

 함수를 사용할 때와의 한 가지 차이점은, person은 함수가 종료되면 더 이상 스코프에 존재하지 않는다는 것이다. 

그게 전부이다. 가서 코드를 작성해보라.