들어가며
자바스크립트에서는 파이썬처럼 임시 변수를 두지 않고 두 변수 값을 변경할 수 없는 것처럼 보였습니다. 그러나 기초 알고리즘 문제를 풀다가 “자바스크립트 구조 분해” 방법에 대해 알게 되었습니다.
이걸 이제야 알다니….
우선 두 변수 값 교환에 대해서 파이썬 부터 간단하게 설명해보겠습니다.
파이썬에서는 임시 변수를 두지 않고 두 변수의 값을 변경 할 수 있습니다.아래와 같은 코드를 보시면 중간 변수를 두지 않고 두 변수 간의 값을 바꾼 것을 확인 할 수 있습니다.
a = 'a'
b = 'b'
a, b = b, a
print(a) # bjs에서는 동일한 방법으로는 불가능 합니다
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] = numbers는 numbers 배열의 값을 별도의 변수 first, second 및 third로 추출합니다.
객체 분해
// 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 속성을 별도의 변수로 추출합니다.
구조 분해를 이용한 문제 풀이
구조 분해를 이용해서 아래와 같은 문제에서 활용 할 수도 있습니다.
코딩테스트 연습 – 인덱스 바꾸기
문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.
코딩테스트 연습 – 인덱스 바꾸기 | 프로그래머스 스쿨 (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('');
}참고하면 좋은 글
자바스크립트 배열
JavaScript의 배열 (array)은 다양한 데이터 타입을 순서대로 저장하는 자료구조 입니다 각 요소는 인덱스로 접근 가능하며 동적으로 크기가 조절될 수 있는 것까지 파이썬의 리스트와 상당히 유사합니다… Read more
자바스크립트 객체
JavaScript에서 객체 는 키-값 쌍의 집합으로, 속성이나 동작을 나타내는 데이터 구조입니다. (파이썬의 딕셔너리와 키-값 쌍의 집합이라는 점이 유사합니다.) 객체는 중괄호 {}로 표현되며…. Read more