[JAVASCRIPT] 구조 분해를 사용하여 변수값 교환하기

JAVASCRIPT

---

변수값 교환

ES6의 구조 분해 문법(Desctructuring)은 객체의 프로퍼티나 배열의 요소를 변수로 쉽게 추출할 수 있게 해주는 문법입니다. 이 문법을 활용하면 두 개 이상의 변수의 값을 간단하게 교환할 수 있습니다.

 

구조 분해 없이 변수의 값을 교환할 때에는 주로 아래와 같이 구현합니다.

let str1 = "One";
let str2 = "Two";
console.log(str1, str2); // One Two

let temp = null;
temp = str1;
str1 = str2;
str2 = temp;

console.log(str1, str2); // Two One

temp라는 새로운 변수를 활용해서 한쪽의 값을 임시로 저장한 후, 각 변수에 차례대로 값을 초기화해 주는 방식입니다.

 

아래 코드와 같이 temp 없이 바로 교환해 버리면 한쪽값이 유실되기 때문에 반드시 temp라는 새로운 변수가 필요합니다.

let str1 = "One";
let str2 = "Two";
console.log(str1, str2); // One Two

str1 = str2;
str2 = str1;

console.log(str1, str2); // Two Two

 

Destructing assignment

구조분해 할당(Destructing assignment) 문법을 활용하면 새로운 변수 없이, 더 깔끔하게 구현할 수 있습니다.

let str1 = "One";
let str2 = "Two";
console.log(str1, str2); // One Two

[str1, str2] = [str2, str1]

console.log(str1, str2); // Two One

 

위 구조 분해 문법의 기능을 표현해 보면 아래와 같습니다.

str1 = [str2, str1][0];
str2 = [str2, str1][1];

단, 차례대로 str1에 값이 할당된 후 str2에 할당되는 것이 아니라 str1과 str2에 값이 동시에 할당됩니다.

 

같은 방식으로 3개 이상의 변수의 교환도 깔끔하게 구현할 수 있습니다.

let str1 = "One";
let str2 = "Two";
let str3 = "Three";
console.log(str1, str2, str3); // One Two Three

[str1, str2, str3] = [str2, str3, str1];

console.log(str1, str2, str3); // Two Three One