자바스크립트 Destructuring assignment: 배열과 객체로부터 간편한 값 추출하기

자바스크립트의 Destructuring assignment는 배열이나 객체에서 원하는 값만을 추출해 변수에 할당하는 방법입니다. 이를 사용하면 코드의 가독성이 높아져 불필요한 코드를 줄일 수 있습니다.

배열에서 값 추출

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

위의 코드에서 Destructuring assignment는 배열 arr에서 첫 번째, 두 번째, 세 번째 요소인 1, 2, 3을 변수 a, b, c에 각각 할당합니다. 이렇게 하면 각 요소에 대해 따로 변수를 선언할 필요가 없어집니다.

객체에서 값 추출

const obj = {name: 'John', age: 28};
const {name, age} = obj;
console.log(name); // John
console.log(age); // 28

객체에서도 마찬가지로 Destructuring assignment를 적용할 수 있습니다. 위의 코드에서 obj 객체에서 name, age 프로퍼티 값을 추출해 변수 name, age에 할당합니다.

기본값 설정하기

const arr = [1];
const [a = 0, b = 2] = arr;
console.log(a); // 1
console.log(b); // 2

배열에서 값 추출 시 기본값을 설정할 수 있습니다. 위의 코드에서는 arr 배열에서 첫 번째 요소인 1을 변수 a에 할당하고, arr 배열의 두 번째 요소가 없기 때문에 기본값으로 2를 할당합니다.

나머지 요소 추출하기

const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

배열에서 Destructuring assignment를 적용하면 나머지 요소를 추출할 수도 있습니다. 위의 코드에서 arr 배열의 첫 번째 요소를 변수 a에, 두 번째 요소를 변수 b에, 나머지 요소를 배열로 변수 rest에 할당합니다.

결론

Destructuring assignment를 사용하면 코드의 가독성을 향상시킬 수 있습니다. 값 추출에 필요한 변수를 따로 선언하는 것을 줄이기 때문입니다. 배열이나 객체에서 원하는 값만 추출해 변수에 할당하면 불필요한 코드를 줄일 수 있어 프로그래밍 코드를 더욱 깔끔하게 만들 수 있습니다.

자바스크립트 Destructuring assignment: 배열과 객체로부터 간편한 값 추출하기