문제 발생
Naver Map의 검색 api를 가지고 기능을 만들고 있다.
중간에 경유를 하는 경우에 waypoint를 입력 해줘야 하는데 이게 기존 API에는 위도, 경도 순서로 나오는데 해당 경우에는 경도,위도 순서로 파라미터를 넘겨줘야하는 이슈가 있었다.
이 문제를 해결하는 과정에서 배열 복사에 대한 공부를 하게 되어서 정리 해본다.
배열복사 문제점
기존 배열을 복사하는 경우가 많다. 새로운 변수에 기존 변수를 선언하는 방식으로 복사를 하게되면 복사된 배열이나 원본 배열을 수정하면 둘 다 변경되는 이슈가 있다.
const arr = [1,2,3,4];
const copy = arr;
copy.reverse();
console.log(arr); // [4,3,2,1]
console.log(copy); // [4,3,2,1]얕은 복사
그래서 spread문법이나 slice함수 등을 이용하여 얕은 복사를 하여서 원본 배열과 분리시키는 방법을 사용한다.
const arr = [1,2,3,4];
const copy = [...arr];
copy.reverse();
console.log(arr); // [1,2,3,4]
console.log(copy); // [4,3,2,1]splice는 깊은 복사인가?!
기존 배열에는 영향을 끼치지 않아서 splice는 깊은 복사로 보일 수 있지만, 원시값을 저장한 1차원 배열이다. 그래서 배열 안의 배열이나 객체가 있는 경우에는 위와 같은 방법을 사용하면 기본 배열에도 문제가 생긴다. arr을 복사하여 배열 내의 1,2번째 값만 reverse 함수로 배열 내의 순서를 반대로 적용하려고 했다.
const arr = [
[37.358408, 127.1059342],
[37.356808, 127.1192342],
[37.369708, 127.1116342],
[37.363708, 127.1065342]
];
const copy = [...arr];
copy.splice(0, 1); // copy 배열의 첫번째 요소 제거
copy.splice(-1, 1); // copy 배열의 마지막 요소 제거
copy.forEach((item, i) => {
copy[i] = item.reverse();
});
console.log(copy);
/*
[127.1192342,37.356808],
[127.1116342, 37.369708]
*/
console.log(arr); //
/*
arr의 값
[
[37.358408, 127.1059342],
[127.1192342, 37.356808],
[127.1116342, 37.369708],
[37.363708, 127.1065342]
]
*/그런데 그렇게 적용했더니 복사했던 원본의 값까지 변경된 것이 아닌가 배열의 배열까지 복사하는 즉 깊은 복사를 사용해야만 해당 문제를 해결할 수 있었다.
깊은 복사 적용
JSON.parse와 JSON.stringify를 활용하는 방법으로 아래와 같이 사용하면 된다.
const arr = [
[37.358408, 127.1059342],
[37.356808, 127.1192342],
[37.363708, 127.1065342]
];
// JSON.parse(JSON.stringify( 원본배열 ));
const copy = JSON.parse(JSON.stringify(arr));
copy.splice(0, 1);
copy.splice(-1, 1);
copy.forEach((item, i) => {
copy[i] = item.reverse();
});
console.log(copy);
/*
[
[127.1192342,37.356808],
[127.1116342, 37.369708]
]
*/
console.log(arr);
/*
[
[37.358408, 127.1059342],
[37.356808, 127.1192342],
[37.369708, 127.1116342],
[37.363708, 127.1065342]
]
*/
Software Engineer