14. Destructuring Assignment(구조 분해 할당), Mutable과 Immutable

Destructuring Assignment(구조 분해 할당)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 자바스크립트 표현식입니다.

 

배열 분해하기

위의 예시 코드를 보면 arr의 두 원소를 one, two로 각각 분해하여 할당해준 것을 확인 할 수 있다.

 

배열의 갯수가 많아진다면 선택할 값만을 뽑고 나머지를 ...을 사용해서 표현할 수 있습니다.

위 코드를 실행하면 콘솔창에 a, b, ["c","d","e","f"] 가 출력된다.

기본값

만약 할당하고자 하는 변수의 개수가 분해하려는 배열의 원소보다 많더라도 에러를 발생하지 않고 할당 값이 없으면 undefined로 할당합니다. undefined로 할당하고 싶지 않다면 기본값을 =을 통해서 설정할 수 있습니다.

예시 코드

위 예시 코드를 실행하면 a b c D가 콘솔창에 출력된다.

 

 

객체 분해하기

기본 문법 

위의 예시와 같이 객체의 key 이름을 이용해서 그 값을 변수로 받아오는 것이 가능하다 위 코드의 결과는 콘솔창에 max, 12, 20000이 출력된다.

 

중첩 구조 분해

배열 안의 객체나 배열, 객체 안의 배열이나 객체도 위와 같은 과정을 반복하는 것으로 분해하는 것이 가능하다. 이를 테면 아래의 예시 코드들과 같다. 

 

예시 코드

 

 

Mutable과 Imutable의 차이

Mutable과 Imutable의 차이는 뜻 그대로 변하는 값과 변하지 않는 값이라는 단순한 차이가 있지만 코딩에서는 이보다 더 깊은 이해를 요한다.

 

Mutable 타입의 대표적인 예는 객체, 배열들이 있고 Imutable 타입의 대표적인 예는 문자열, 숫자타입이 있다. 

가장 핵심적으로 알아야할 것은 Mutable은 원본 데이터를 변화시키려고 하고 Imutable 원본데이터를 유지하려고 한다는 것이다. 이러한 특징이 잘 나타나는 것이 데이터 복사이다.

 

Mutable과 Imutable의 복사

imtable한 값의 복사는 변수 간의 대입만으로 가능하고 단순하므로 따로 설명하진 않겠다. 하지만 mutable한 데이터의 복사는 2종류의 복사로 나뉘게 된다. 이게 바로 얇은 복사와 깊은 복사이다. 

 

얇은 복사

얇은 복사를 진행한 경우 mutable한 데이터는 복사된 값이 바뀌면 복사한 값이 바뀌고 복사한 값이 바뀌면 복사된 값이 바뀐다.

 

위 사진처럼 arr의 값이 바뀌면 복사된 arr2의 값도 바뀌는 것을 확인할 수 있다.

 

이 문제를 해결하기 위한 것이 바로 깊은 복사이다.

 

깊은 복사

위 사진을 보면 알 수 있듯 깊은 복사가 진행되면 복사한 값이 바뀌어도 복사된 값은 바뀌지 않게 된다.

 

또한 이러한 특징은 데이터 타입 뿐 아니라 메서드에서도 나타난다. 

 

문자열 메서드

immutable : slice(), replace(), split()... 등

대부분이 immutable하다.

 

배열 메서드의 Mutable과 Imutable

immutable : concatArr(), find(), map()... 등 함수의 결과 배열의 값이 바뀌지 않는다.

mutable : pop(), push(), shift()... 등 함수의 결과 배열의 값이 바뀐다.