[ Javascript ES6 ] 변수 값 교환하기

변수 값을 어떻게 서로 바꿀 수 있을까?

가장 단순한 방법으로 새로운 변수를 만들고 값을 복사해서 두 변수의 값을

서로 교환 할당하는 방식이 있을 것이다.

쉽게 떠올릴 수 있는 가장 확실한 방법이기도 하다.

 

• 새로운 변수를 활용한 예제 코드

let data1 = "It's String";
let data2 = 10;

console.log(data1) // "It's String"
console.log(data2) // 10

let copyData1 = data1;
data1 = data2;
data2 = copyData1;

console.log(data1) // 10
console.log(data2) // "It's String"

 

이러한 올드한 방식 말고 또 하나의 값을 교환하는 현대적인 방법이 있다.

바로 구조 분해 할당을 활용하여 값을 교환하는 방법이다.

 

 

구조 분해 할당

ES6부터 사용 가능하며 배열을 변수로 분해할 수 있도록 하는

특별한 문법이다. 몇가지 예제코드를 통해 쉽게 이해할 수 있다.

 

• 구조 분해 할당 예제 코드

// 기본적으로 활용하는 방식
let arr = ["Ze", "Riong"];
let [firstName, surname] = arr;

console.log(firstName); // Ze
console.log(surname);  // Riong

// 필요하지 않은 데이터는 , 를 사용해서 건너뛰기가 가능하다.
let array = ["A", "B", "C", "D", "E"];
let [a, , c, ,e] = array;

console.log(a) // "A"
console.log(c) // "C"
console.log(e) // "E"

// 할당 연산자 우측에 배열 뿐 아니라 모든 이터러블(반복 가능한 객체)이 올 수 있다.
let [a, b, c] = "all";
let [on, tw, th] = new Set([1, 2, 3]);

console.log(a, b, c) // a l l
console.log(on, tw, th) // 1 2 3

 

이렇게 구조 분해 할당에 대해 이해했다면 대충 감이 올 수도 있다.

아래 예제 코드를 통해 어떻게 변수 값을 교환할 수 있는지 알아보자.

 

 

구조 분해 할당을 활용한 변수 값 교환

변수는 이터러블 구조가 아닌데 어떻게 구조 분해 할당을 활용할까?

답은 간단하다. 변수를 배열에 넣어 이터러블하게 만들고 재할당하는 방식이다.

백문이 불여일견!

 

let str = "string";
let num = 230;

console.log(str) // "string";
console.log(num) // 230;

// 배열 내부에 변수를 넣어 이터러블 구조를 만들고 swap
[str, num] = [num, str];

console.log(str) // 230;
console.log(num) // "string";

 

 

마치며...

운이 좋게 서류합격을 하고 기술 면접을 보았는데 두 변수의 값을 서로 할당해주기 위한 방법을 서술해보라는 질문이 있었다. 나는 올드한 방식으로 새로운 변수를 선언하고 값을 할당하는 방식으로 설명하였고 면접이 끝나고 찾아보니 구조분해할당을 활용하는 트렌드한 방법이 존재했었다... 분명 당시의 질문 의도는 이러한 방식을 활용한 변수 값 교환에 대해서 설명하길 바랐을 것이다. 앞으로도 좀 더 다양한 방식에 대한 자료를 찾고 이해하기 위해 노력해야겠다.