자바스크립트 구조 분해 : 배열 분해하기, 변수 값들 교환하기

들어가며

자바스크립트에서는 파이썬처럼 임시 변수를 두지 않고 두 변수 값을 변경할 수 없는 것처럼 보였습니다. 그러나 기초 알고리즘 문제를 풀다가 “자바스크립트 구조 분해” 방법에 대해 알게 되었습니다.

이걸 이제야 알다니….

우선 두 변수 값 교환에 대해서 파이썬 부터 간단하게 설명해보겠습니다.

파이썬에서는 임시 변수를 두지 않고 두 변수의 값을 변경 할 수 있습니다.아래와 같은 코드를 보시면 중간 변수를 두지 않고 두 변수 간의 값을 바꾼 것을 확인 할 수 있습니다.

a = 'a'
b = 'b'
a, b = b, a
print(a)  # b

js에서는 동일한 방법으로는 불가능 합니다

let a = "a";
let b = "b";

a, b = b, a;
console.log(a);  // a

대신 아래와 같이 구조 분해를 이용하면 파이썬과 동일한 구현 할 수 있습니다.

let a = "a";
let b = "b";

[a, b] = [b, a]
console.log(a);  // b

이런 신박한 구조 분해는 어떻게 사용하는 걸까요?

자바스크립트 구조 분해

“자바스크립트 구조 분해” 구문을 사용하면 배열의 값을 추출하거나 객체의 속성을 고유한 변수로 추출할 수 있습니다

배열 분해

// Example 1: Extracting values from an array
const numbers = [1, 2, 3];

// Extracting values into separate variables
const [first, second, third] = numbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(third);  // Output: 3

이 예에서 구조 분해 할당 [first, second, third] = numbersnumbers 배열의 값을 별도의 변수 first, secondthird로 추출합니다.

객체 분해

// Example 2: Extracting properties from an object
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// Extracting properties into separate variables
const { name, age, city } = person;

console.log(name);  // Output: 'John'
console.log(age);   // Output: 30
console.log(city);  // Output: 'New York'

이 예에서 구조 분해 할당 { name, age, city } = person은 person 개체에서 name, age 및 city 속성을 별도의 변수로 추출합니다.

구조 분해를 이용한 문제 풀이

구조 분해를 이용해서 아래와 같은 문제에서 활용 할 수도 있습니다.

코딩테스트 연습 – 인덱스 바꾸기 | 프로그래머스 스쿨 (programmers.co.kr)

인덱스 바꾸기 문제

문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.

function solution(my_string, num1, num2) {
    my_string = my_string.split('');
    [my_string[num1], my_string[num2]] = [my_string[num2], my_string[num1]];
    return my_string.join('');
}

참고하면 좋은 글

Leave a Comment

목차