변수 교환(Swapping)은 구조 분해 할당(Destructuring) 덕분에 매우 간단해졌습니다. 전통적인 JavaScript에서는 두 변수의 값을 바꾸기 위해 반드시 세 번째(임시) 변수를 사용해야 했습니다. 물론 어렵지는 않지만 코드가 길어지고 번거로운 작업이었습니다. 반면 최신 JavaScript에서는 임시 변수 없이도 한 줄의 코드로 값을 교환할 수 있습니다. 지금부터 자세히 알아보겠습니다.
예제 1 – 임시 변수를 사용하는 전통적인 방식
아래 예제에서는 "tmp"라는 임시 변수를 이용해 두 변수의 값을 교환합니다. 이 방식은 동작에는 문제가 없지만, 코드가 상대적으로 길어진다는 단점이 있습니다.
<html>
<body>
<script>
var a = "Sachin";
var b = "Tendulkar";
document.write("Before swapping-"+ " "+ a + " " +b);
var tmp = a; // a의 값을 임시 변수에 저장
a = b; // b의 값을 a에 대입
b = tmp; // 임시 변수에 저장된 값을 b에 대입
document.write("</br>");
document.write("After swapping-"+ " " + a + " " +b);
</script>
</body>
</html>
출력 결과
Before swapping- Sachin Tendulkar After swapping- Tendulkar Sachin
구조 분해 할당을 활용하면 이 과정이 훨씬 쉬워집니다. 별도의 변수를 선언할 필요가 없으며, 코드 길이도 크게 줄어듭니다.
예제 2 – 구조 분해 할당을 사용하는 현대적인 방식
아래 예제에서는 세 번째 변수 없이 구조 분해 할당만으로 두 변수의 값을 교환합니다. 앞선 예제와 비교하면 코드가 훨씬 간결해진 것을 확인할 수 있습니다.
<html>
<body>
<script>
var a = "Sachin";
var b = "Tendulkar";
document.write("Before swapping-"+ " "+ a + " " +b);
[a,b] = [b,a]; // 구조 분해 할당으로 값 교환
document.write("</br>");
document.write("After swapping-"+ " " + a + " " +b);
</script>
</body>
</html>
출력 결과
Before swapping- Sachin Tendulkar After swapping- Tendulkar Sachin
동작 원리
[a,b] = [b,a] 구문은 우변에서 새로운 배열 [b, a]를 먼저 생성한 뒤, 좌변의 배열 패턴을 통해 각 요소를 순서대로 a와 b에 할당합니다. 이 과정이 단일 표현식 내에서 평가되기 때문에 값이 서로 덮어써지지 않고 안전하게 교환됩니다.
참고로 이 문법은 ES6(ECMAScript 2015)에서 도입되었으므로, 모든 모던 브라우저와 Node.js 환경에서 정상적으로 동작합니다. 다만 매우 오래된 브라우저(예: Internet Explorer)에서는 지원되지 않으므로, 필요하다면 Babel 같은 트랜스파일러를 사용하는 것이 좋습니다.