Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점)

배열에 예제문제 풀이를 준비하던 도중 문제가 발생하였다......

​

문제는 아래와 같다.

var numberArr = [["1", "2"],
                 ["3", "4"]];

function shiftTable(){
  var copyArr = numberArr;  //문제가 되는 부분

  for(i=0; i<numberArr.length; i++){

    for(j=0; j<numberArr[i].length; j++){
        if(i==0 && j==0){
          copyArr[i][j+1] = numberArr[i][j];
        }else if(i==0 && j==1){
          copyArr[i+1][j] = numberArr[i][j];
        }else if(i==1 && j==0){
          copyArr[i-1][j] = numberArr[i][j];
        }else if(i==1 && j==1){
          copyArr[i][j-1] = numberArr[i][j];
        }
    }
  }
}

 

 

함수 shiftTable 내부에 첫줄

var copyArr = numberArr;

형태로 배열을 복사하게 되면 어떻게 될까?

​

배열 데이터를 출력해보면 정상적으로 복사가 된 것 같지만 사실 이것은 주소값이 복사 된 것이다.

먼저 선언한 numberArr라는 배열의 주소값을 copyArr이라는 변수가 참조하기 시작한다.

​

그럼 어찌되었든 간에 값을 똑같이 복사 했을텐데 뭐가 문제냐라고 의문이 생길 수 있겠지만

​

반복문 구간에서 문제점을 볼 수 있다.

 

1	2
3	4

 

간단하게 4칸짜리 테이블의 데이터가 빙글 빙글 돌아가는걸 표현하기 위해 인덱스가 증가함에 따라

하드코딩으로 해당 위치값을 옮기는 걸 표현한 소스인데

​

최초 반복문 동작하면 i=0; j=0; 값의 상태에서 처음 if 조건을 만족하고

copyArr[i][j+1] = numberArr[i][j]; 문장이 실행이 된다. (numberArr[i][j] 의 값은 현재 "1")

여기서 서로 같은 주소값을 바라보고 있다보니

copyArr 값이 [["1", "1"], ["3", "4"]] 으로 바뀌고 동일한 주소값을 바라보는 numberArr도 동일하게 값이 바뀌어 버린다.

​

그럼 자바스크립트에서 배열을 복사 할 때, 우린 무엇을 사용해야 할까?

검색을 해보니 slice() 메소드를 활용하면 된다고 나와있어서 사용해보았지만 결과는 동일하게 서로의 값을 참조하고

독립적인 배열로 동작하지 않는다.

(확인 결과 1차원배열은 독립적으로 동작하지만 2차원배열은 독립적으로 동작하지 않는 점을 확인했다.)

​

​

독립적인 배열의 값만 복사하기

​

방법) JSON.parse(JSON.stringify(배열)) 활용하기

var numberArr = [["1", "2"],
                 ["3", "4"]];

var copyArr = JSON.parse(JSON.stringify(numberArr));
copyArr[0][1] = numberArr[0][0];
console.log(copyArr) // ["1", "1"], ["3", "4"];
console.log(numberArr) // ["1", "2"], ["3", "4"];

 

JSON 데이터를 파싱할 때 사용하는 메소드인데 배열을 복사 할 때도 사용할 수 있다.

​

이 방식을 이용하여 독립적인 값을 가지는 배열을 복사 할 수 있다.