Destructuring을 사용하여 자바스크립트에서 중복 코드 제거하기

14 Sep 2023

javascript

코드 중복은 개발 과정에서 흔히 발생하는 문제입니다. 이는 코드의 가독성과 유지 보수를 어렵게 만들 수 있습니다. 자바스크립트에서는 이러한 문제를 해결하기 위해 Destructuring 문법을 사용할 수 있습니다. Destructuring을 사용하면 객체나 배열에서 값을 추출하여 변수에 할당하는 작업을 간단하게 처리할 수 있습니다. 이를 통해 중복 코드를 제거하고 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.

객체 Destructuring

객체 Destructuring을 사용하면 객체의 속성을 변수에 바로 할당할 수 있습니다. 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.

const person = {
  name: "John Doe",
  age: 30,
  address: "123 ABC Street",
};

const name = person.name;
const age = person.age;
const address = person.address;

console.log(name); // "John Doe"
console.log(age); // 30
console.log(address); // "123 ABC Street"

객체 Destructuring을 사용하면 위의 코드를 다음과 같이 간결하게 작성할 수 있습니다.

const { name, age, address } = person;

console.log(name); // "John Doe"
console.log(age); // 30
console.log(address); // "123 ABC Street"

배열 Destructuring

배열 Destructuring을 사용하면 배열의 요소를 변수에 할당할 수 있습니다. 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.

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

const firstNumber = numbers[0];
const secondNumber = numbers[1];
const thirdNumber = numbers[2];

console.log(firstNumber); // 1
console.log(secondNumber); // 2
console.log(thirdNumber); // 3

배열 Destructuring을 사용하면 위의 코드를 다음과 같이 간결하게 작성할 수 있습니다.

const [firstNumber, secondNumber, thirdNumber] = numbers;

console.log(firstNumber); // 1
console.log(secondNumber); // 2
console.log(thirdNumber); // 3

요약

Destructuring을 사용하여 자바스크립트에서 중복 코드를 제거할 수 있습니다. 객체 Destructuring은 객체의 속성을 변수에 할당하는 작업을 간결하게 처리할 수 있고, 배열 Destructuring은 배열의 요소를 변수에 할당하는 작업을 간결하게 처리할 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

#JavaScript #Destructuring