[JavaScript] const로 할당한 값이 바뀌는 이유

코딩테스트 문제를 푸는 도중 알게 된 것인데, const 로 할당한 값이 바뀌는 경우는 처음봐서 기록해두려 한다. 

 

예를 들어서 rank라는 변수는 [3, 7, 2, 5, 4, 6, 1] 라는 배열이다. 

 

그리고 이 값을 sort를 사용해서 순서대로 나열하면 [1,2,3,4,5,6,7]이 될 것이다. 

 

이 때 처음 rank값을 저장하기 위해 다음과 같이 입력했다. 

 

  const originRank = rank;
  const sortRank = rank.sort((a, b) => a - b);

 

상수 originRank에는 기존의 rank, 상수 sortRank에는 rank를 정렬한 값으로 지정했다. 

 

이 두 값은 변하지 않도록 상수로 지정했다. 

 

내 의도대로라면 어디서든 originRank는 [3, 7, 2, 5, 4, 6, 1], sortRank에는 [1,2,3,4,5,6,7] 가 들어와야 한다. 그런데 문제를 푸는데 originRank가 sort된 이후에 sort된 값으로 바뀌었다. 

 

const는 변하지 않는 것 아니였나? 내가 잘못 알고있나? 너무 기초적인 것 같은데 모르는 내 자신이 부끄럽지만, 이번 기회에 제대로 정리해보려 한다. 

 

const 는 변수의 재할당을 막는다.

한번 할당된 값은 변경할 수 없다. 

그런데 정확히는, 이 불변함은 값이 불변이 아니라 변수에 대한 재할당이 불가능한 것이다.

 

이게 무슨 뜻이냐면, const로 지정한 originRank 값이  [3, 7, 2, 5, 4, 6, 1] 인 상태에서 originRank의 값을 바꾸려고 하면 상수는 불변하기 때문에 오류가 생긴다. 

 

그런데, 똑같은  [3, 7, 2, 5, 4, 6, 1] 라고 하더라도 rank =  [3, 7, 2, 5, 4, 6, 1], originRank = rank를 넣게 되면 오류는 일어나지 않는다.

이 때 originRank는 rank라는 값을 참조하고 있고, 참조하는 rank가 변하는 것이지 originRank가 변한 것은 아니기 때문에 rank가 변하면 originRank에도 영향을 미치고, originRank는 rank라는 값을 그대로 가지고 있기 때문에 변한 값이 아니라는 것이다. 

 

즉, 다음과 같이 비교할 수 있다. 

  let rank = [3, 7, 2, 5, 4, 6, 1];
  // const originRank = [3, 7, 2, 5, 4, 6, 1];
  const originRank = rank;
  const sortRank = rank.sort((a, b) => a - b);

 

rank 에 있는 값이 sort되어 바뀌면 originRank는 그대로 rank를 가지고 있지만,

rank가 어떤 값이 들어오든 originRank는 신경쓰지 않는다. 

그래서 originRank의 값이 달라진다. 

 

그렇다면 originRank에 원본 rank를 지정하려면 어떻게 해야 할까?

변수를 참조하게 되면 해당 변수가 바뀌면 const에서도 바뀔 수 있기 때문에 변수를 참조하는 것이 아니라 const에서 선언을 해줘야 한다. 

const originRank = rank.slice(); // 또는 [...rank];

rank 그대로를 선언하는 것이 아니라 rank와 똑같은 값을 복사하는 방법으로 선언해서 rank가 변하더라도 지장이 없도록 해야 한다.