[공부했던 것 정리] 배열의 불변성, 가변성[1]

 

 

mutable : 변화 가능한(가변)

immutable : 변화 가능하지 않은(불변)

 

 

 

 

코드스테이츠 배열의 메소드 강의를 들으면서 immutable에 대한 설명을 들었다. 배열에 있어서 immutable이란 본래 원본이 손상되지 않는 것을 말한다. 여기서 원본이라 함은 array변수를  최초 선언하고 그 안에 [1,2,3]이라는 배열을 할당하면 [1,2,3]이 원본이 되는 것이다. 

let array = [1,2,3];  // [1,2,3] 원본 

 

이렇게 선언을 하게 되면 아래 그림처럼 array이라는 이름으로 메모리 특정 위치에 배열 [1,2,3]이 보관된다. 

 

 

 

여기서 새로운 배열을 선언해보자

let newArr = [1,2,3];

 

이 newArr이라는 배열은 위에서 선언한 array배열과 똑같은 [1,2,3]이라는 배열이 할당되어 있다. 그러면 이 둘은 서로 같을까? 

Boolean(array === newArr); // 반환되는 값은 true일까 false일까?

 

 

같지 않다.

Boolean(array === newArr); // false 

 

그 이유는 newArr의 [1,2,3]이 아까 선언한 array [1,2,3]과는 다른 위치의 메모리에 보관되기 때문이다. 

그래서 결과적으로 서로 다른 위치의 메모리에 보관되었기 때문에 두 배열은 같지 않다.

 

 

 

 

다시 array와 newArr를 배열로 재정의해보자. 

 

let array = ["apple","kiwi"]; 로 정의하고

let newArr = array 라고 정의하면 

newArr는 ["apple","kiwi"]을 할당받게 된다. 

 

console.log(array) // ["apple","kiwi"]

console.log(newArr) // ["apple","kiwi"]

 

그렇다면 이때 array와 newArr를 같은지 다른지 비교해보면 

Boolean(array === newArr);// true

true를 반환한다. 

 

그 이유는 아래 그림처럼 서로 메모리의 같은 위치에 ["apple","kiwi"]가 보관되었기 때문이다.

 

 

이 의미를 좀 더 풀어쓰면,

let newArr = ["apple","kiwi"]라고 할당하지 않고 먼저 정의한 array를 newArr에 할당하게 되면 

newArr도 array의 ["apple","kiwi"]가 위치한 메모리를 가리키게 된다.  

 

 

그렇다면 이때 newArr를 수정하면 array도 수정될까?? 

배열의 가장 마지막 element를 제거하는 메소드인 pop을 newArr에 사용해보자.

 

newArr.pop(); // "kiwi"

console.log(newArr); // ["apple"] 

newArr에 마지막 element인 키위가 제거되었고

 

그리고 array를 확인해보면

console.log(array); // ["apple"]

똑같이 kiwi가 삭제되었음을 알 수 있다. 즉  array를 할당한 newArr를 수정시키면 

동시에 array도 수정이 된다. 즉, 처음 정의한 원본(array)가 수정된 것이다. 

 

 

 

 

실제 이렇게 원본이 수정됨을 인지하고 고의적으로 원본을 수정하면 괜찮겠지만, 

만일 실수로 그랬다면 원치 않는 상황이 올 수 있다. 

이런 원치 않은 상황은 수정과 삭제가 자유로운 컴퓨터에서 매우 빈번하게 일어나는 일이다. 

원본이 훼손되는 다양한 사건, 사고가 일어나는 것이다.

그렇기에 더욱 '원본의 불변함(immutability)'에 대한 중요성이 부각되고 있다. 

1탄 끝.

 

※다음 포스팅은 원본이 훼손되지 않게 배열을 수정, 변경하는 방법에 대해 올리겠습니다.