[Typescript] Javascript의 Pass by Reference와 Pass by Value

서론

이번 포스팅에선 Javascript의 Pass by Reference(이하 by Ref.)와 Pass by Value(이하 by Val.)에 대한 이야기를 해볼까 한다.
(예제 코드들은 Typescript로 작성되었지만, 큰 차이는 없으므로 참고하기 바란다.)

TL;DR

• Javascript는 함수에 인자를 전달할때 무조건 by Val.로 전달한다.
• Object를 함수의 인자로 전달할 때도 by Val.로 전달되지만, "Objec에 대한 참조"를 Value로 하여 전달하기 때문에 Object를 함수로 전달하면 by Ref. 처럼 사용할 수 있다.
• Object를 대입한 a라는 변수를 함수의 인자로 전달하면 해당 인자를 by Ref. 처럼 사용할 수 있기 때문에, 함수 내에서 해당 인자의 속성 값을 수정하면 함수 외부에 있는 a의 속성 값이 바뀐다. 하지만, 근본적으로는 해당 인자는 by Val.로 써 "Object에 대한 참조"를 Value로 받은 것이기 때문에 해당 인자의 속성이 아닌 해당 인자 자체의 값을 바꾼다고 해도 함수 외부에 있는 a의 값은 바뀌지 않는다.

---

1. Javascript는 함수에 인자를 무조건 by Value로 전달한다.

Javascript는 기본적으로 함수에 인자를 by Val.로 전달한다. 그렇기 때문에 어떠한 변수를 함수 인자로 전달하고 해당 인자를 함수 내에서 수정한다고 해도 함수 외부에 있는 인자로 넣었던 변수의 값은 수정되지 않는다.

그렇다면 모든 인자는 값으로써 전달되는 것이기 때문에 함수 내에서 인자에 어떠한 값을 대입했을때 함수의 넣었던 변수는 바뀌지 않아야 정상일텐데, 아래 예제를 보면 이상하게 원본 변수의 값이 수정됨을 볼 수 있다.

그러면 위 예제에서 함수 changeVar의 x는 by Ref.로 받은 인자인 것일까?
사실은 저 x도 똑같이 by Val.로 받은 인자이다. 저 x에는 "변수 a에 대입된 Object에 대한 참조"가 값으로 들어있기 때문이다. 그림으로 보면 아래와 같다.

이 그림을 보면 알 수 있겠지만, 놀랍게도 Javascript는 정직하게 값을 함수의 인자로 전달하고 있었다. 변수 a에 Object를 대입한다는건 변수 a에 "Object에 대한 참조"라는 값을 대입해서 변수 a가 Object를 참조하도록 하는것이기 때문에, 함수에 변수 a를 인자로 전달하면 변수 a의 값인 "Object에 대한 참조"가 인자의 값으로 전달되게 된다. 그리고 해당 인자 또한 "Object에 대한 참조"를 값으로 가지고 있기 때문에 Object를 참조하게 되므로, 함수 내에서 Object를 참조하는 인자의 속성을 수정하면 함수 외부에 있는 변수 a 또한 같은 Object를 참조하고 있기 때문에 속성 값이 수정되게 되는것이다.

그대신 중요한 점은, 사용성으로 보기엔 by Ref.와 유사하지만 근본적으로는 by Val.이기 때문에 Object에 대한 참조를 값으로 받은 인자의 속성 값이 아니라 인자 그 자체의 값을 바꾼다고 해도 함수 밖에 인자로 넣었던 변수는 아무런 영향을 받지 않는다.