먼저, 배열에서의 destructuring을 살펴보겠습니다. 배열에서는 원하는 위치의 값을 가져와서 변수에 할당할 수 있습니다. 아래 예제를 확인해보세요.

let arr = [1, 2, 3, 4, 5];

let [a, b, c, d, e] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

위의 코드에서는 arr 배열을 destructuring하여 각각의 값을 a, b, c, d, e 변수에 할당했습니다. 배열의 첫 번째 값이 a에 할당되고, 두 번째 값이 b에 할당되는 식으로 진행됩니다.

이제 객체에서의 destructuring을 알아보겠습니다. 객체에서는 값을 가져올 때 해당 값을 가진 키(key)를 사용하여 변수에 할당합니다. 아래 예제를 참고하세요.

let obj = { name: 'John', age: 30 };

let { name, age } = obj;

console.log(name); // 'John'
console.log(age); // 30

위의 코드에서는 obj 객체를 destructuring하여 name과 age 변수에 할당했습니다. 객체의 name 값을 name 변수에 할당하고, age 값을 age 변수에 할당하였습니다.

이제 실제로 특정 값의 변경을 해보겠습니다. 아래 예제를 살펴보세요.

let arr = [1, 2, 3];

let [a, b, c] = arr;

c = 10; // c 값을 변경

console.log(a); // 1
console.log(b); // 2
console.log(c); // 10
console.log(arr); // [1, 2, 3]

위의 코드에서는 배열 arr을 destructuring하여 각각의 값을 변수에 할당하고, c 값을 10으로 변경하였습니다. 이때, 변수 c의 값만 변경되며 원본 배열 arr은 변경되지 않습니다.

마찬가지로 객체에서도 특정 값의 변경이 가능합니다. 아래 예제를 확인해보세요.

let obj = { name: 'John', age: 30 };

let { name, age } = obj;

age = 40; // age 값을 변경

console.log(name); // 'John'
console.log(age); // 40
console.log(obj); // { name: 'John', age: 30 }

위의 코드에서는 객체 obj를 destructuring하여 변수에 할당하고, age 값을 40으로 변경하였습니다. 이때도 변수 age의 값만 변경되며 원본 객체 obj는 변경되지 않습니다.

Destructuring을 활용하여 특정 값을 변경하는 방법에 대해 알아보았습니다. Destructuring은 코드의 가독성을 높이고 편리한 값을 추출하는 방법이므로, 사용해보시면 좋을 것입니다. #JavaScript #Destructuring