데이터 타입

자바스크립트의 데이터 타입은 크게 원시 자료형(Primative Type)과 참조 자료형(Reference Type) 두 가지로 나뉜다.

원시 자료형은 값이 할당될 때, 값을 그대로 할당하고

참조 자료형은 값이 할당될 떄, 값이 저장된 주소값을 참조한다는 차이가 있다.

원시 자료형

Number, String, Boolean, null, undefined가 여기에 포함되고, ES6에서는 Symbol도 추가되었다.

var a = 100;

이렇게 변수 a가 선언되었다고 하자

컴퓨터에는 이런식으로 데이터가 저장될 공간을 확보한 뒤, 확보한 주소값을 변수명과 매칭시키는 방식으로 데이터를 저장한다.

여기서

var b = a;

이런 식으로 b를 선언하면

이처럼 "데이터 값"을 복사해온다. 이런 경우를 깊은 복사(Deep Copy)라고 하는데

a = 10;

이런 식으로 a의 데이터 값을 변경해 줘도

애초에 b는 데이터 값만을 복사해온 것이기 때문에 영향을 받지 않는다.

실제 실행된 화면이다. a값이 변경되어도 b값은 변경되지 않는걸 볼 수 있다.

참조 자료형

자바스크립트에서는 원시 자료형이 아닌 모든 것이 참조 자료형이다. 대표적으로 배열, 객체, 함수 같은 것이 있다.

var a = [1,2];

이번에는 이런 배열이 선언되었다고 하자

컴퓨터에서는 이런 식으로 배열을 저장할 장소를 마련하고, 각 원소를 저장할 장소도 마련한 다음 그곳에 값을 넣고, 최종적으로 배열을 담은 주소값을 변수명과 매칭하는 방식으로 데이터를 저장한다.

여기에서 원시 자료형 때처럼

var b = a;

이런 식으로 b를 선언하면

이런 식으로 데이터 값만을 복사하는게 아닌 "주소 값"을 복사해온다. 이런 경우를 얕은 복사(Shallow Copy)라고 한다.

이 경우 깊은 복사와 달리

a[0] = 3;

이런 식으로 값을 바꿔주면

지정된 주소값의 데이터만 바뀌기 때문에 a와 b가 모두 영향받는다.

이것은 실제 실행된 화면이다. a[0]만을 바꿨는데 a와 b 모두 값이 바뀐 것을 확인할 수 있다.

실제 상황 발생

관련 내용:https://velog.io/@yoosj97/%EB%B0%A9%EC%9D%98-%EA%B0%9C%EC%88%98

어제 프로그래머스 레벨 5 문제를 풀던 도중에 발생한 일이었다.

point=[0,0]과 end=[point[0],point[1]]을 각각 key값으로 하는 Map을 하나 선언했는데 point와 end가 각각 다른 key값으로 인식되어 문제가 발생했다.

이 경우 둘 다 값 자체는 [0,0]인데 어째서 다른 key값으로 인식했는지 이해하지 못했었는데 위에서 공부한 내용을 생각하며 표를 작성해보면

point[0]와 point[1]을 복사하는 것은 깊은 복사가 이루어졌을 것이기 때문에 위와 같은 상황이 나왔을 것이다.

따라서 point와 end는 서로 다른 주소값을 가리키는 변수라 다르다고 판단될 수 밖에 없는 것이다.

그렇다고 point[0]와 point[1]값만을 바꿔주면 다른 key로 인식할까 싶지만 point에 저장되어 있는 주소값은 변경되지 않기 때문에...

이렇게 하나의 Key에 모든 값이 통합되어 들어가게 된다.

결국 기존에 해결한 방법처럼 좌표값을 담은 배열을 새로 가공하여 하나의 문자열로 바꾸어 넣어주는 것이 가장 쉬운 해결 방법인 것 같다.

참고

https://hanamon.kr/javascript-%EB%B3%80%EC%88%98%EC%9D%98-%ED%83%80%EC%9E%85-%EC%9B%90%EC%8B%9C%ED%98%95%EA%B3%BC-%EC%B0%B8%EC%A1%B0%ED%98%95/
https://webclub.tistory.com/638
https://doitnow-man.tistory.com/130
https://cocobi.tistory.com/156