Array, Map ... 리스트의 함정 (Call By Reference)

자바스크립트에서 리스트(Array, Map...) 를 사용할 때 꼭 알고 있어야하는 것이 있다.

아래와 같은 코드로 로직을 짜다가

분명 나는 map 에서 꺼낸 객체를 새로운 array 에 담고 싶어서 5번 라인과 같이 new Array() 후 push 했는데,

array 의 데이터를 변경했는데 map 데이터까지 변경되어 당황했다 ;;

var map = new Map();
map.set(0, "zero");
map.set(1, "one");
 
var array = new Array();
map.forEach(function(element){
    array.push(element);
})
 
if (array[0] == map.get(0)) { console.log("=="); }
else { console.log("!=="); }
 
if (array[0] === map.get(0)) { console.log("==="); }
else { console.log("!==="); }

그 말은 즉,

array[0] 과 map.get(0) 은 주소값이 같다는 뜻이고,

나는 Call By Value 를 생각했지만, JAVA Script 에서는 Call By Reference 가 되어버린다는 것이다.

출력 콘솔 -> 

찾아보니, 자바스크립트에서의 5가지의 원시타입인

boolean, number, string, null, undefined 만 Call By Value 가 된다고 해서

아래 코드 처럼 JSON 을 활용하여 json -> string 변환 후 string -> json 다시 변환하여 사용했다 ..

var map = new Map();
map.set(0, "zero");
map.set(1, "one");
 
var array = new Array();
map.forEach(function(element){
    var elementStr = JSON.stringify(element);
    array.push(JSON.parse(element));
})
 
if (array[0] == map.get(0)) { console.log("=="); }
else { console.log("!=="); }
 
if (array[0] === map.get(0)) { console.log("==="); }
else { console.log("!==="); }

그러니 Call By Value 로 바뀌고 원하는대로 구현할 수 있게 되었다.

참으로 배워도 배워도 모르는게 투성이다 :)

잘 정리해두고 또 기억해야지. 

참고 사이트 : https://blueshw.github.io/2018/09/15/pass-by-reference/