자바스크립트의 Destructuring은 배열이나 객체에서 필요한 값을 추출하여 할당하는 강력한 기능입니다. 이 기능을 활용하면 객체나 배열에서 원하는 값들을 손쉽게 추출하거나 변경할 수 있습니다.

객체의 특정 값 변경하기

먼저 객체에서 특정 값만 변경하는 방법을 살펴보겠습니다. 아래의 예제 코드에서는 원래의 객체를 유지하면서 객체의 특정 속성을 변경하는 방법을 보여줍니다.

const person = {
  name: "John",
  age: 30,
  occupation: "Developer"
};

// name 속성의 값을 변경하기
const updatedPerson = { ...person, name: "Jane" };

console.log(updatedPerson);
// 결과: { name: "Jane", age: 30, occupation: "Developer" }

위의 예제에서는 spread 연산자인 ...을 사용하여 기존의 person 객체를 복사한 뒤, 원하는 속성 값을 변경했습니다. 이렇게 하면 updatedPerson 객체에는 name 속성만 변경된 형태로 저장됩니다.

배열의 특정 값 변경하기

배열에서 특정 값을 변경하는 방법도 Destructuring을 사용하여 간단하게 구현할 수 있습니다. 아래의 예제 코드에서는 원래의 배열을 유지하면서 배열의 특정 인덱스의 값을 변경하는 방법을 보여줍니다.

const numbers = [1, 2, 3, 4, 5];

// 2번째 인덱스의 값을 변경하기
const updatedNumbers = [...numbers.slice(0, 2), 10, ...numbers.slice(3)];

console.log(updatedNumbers);
// 결과: [1, 2, 10, 4, 5]

위의 예제에서는 slice() 메서드를 사용하여 변경하려는 인덱스 앞과 뒤의 값들을 추출한 뒤, spread 연산자를 사용하여 변경하려는 값을 배열에 삽입하였습니다. 이렇게 하면 updatedNumbers 배열에는 특정 인덱스의 값만 변경된 형태로 저장됩니다.

Destructuring은 자바스크립트에서 매우 유용한 기능으로, 객체나 배열에서 특정 값을 변경하거나 추출할 때 편리하게 사용할 수 있습니다. 적절히 활용하여 코드를 간결하고 가독성 있게 작성해보세요!

#javascript #destructuring