티스토리 뷰

 JavaScript의 비구조화 할당은 객체나 배열로부터 속성이나 요소를 변수에 쉽게 할당할 수 있도록 하는 표현식이다. 이 기능은 ES6(ECMAScript 2015)에서 도입되었으며, 코드의 간결성과 가독성을 향상시키는 데 도움이 된다.


객체 비구조화 할당

객체의 비구조화 할당을 사용하면 객체의 속성을 직접 변수로 할당할 수 있다.

 

const obj = { a: 1, b: 2, c: 3 };

// 전통적인 방식
const a = obj.a;
const b = obj.b;
const c = obj.c;

// 비구조화 할당
const { a, b, c } = obj;

추가 기능:

  • 기본값 할당: 객체에 해당 속성이 없을 경우, 기본값을 할당할 수 있다.
const { a, b, c, d = 4 } = obj;

 

  • 새로운 변수 이름 사용: 다른 이름의 변수에 속성을 할당할 수 있다.
const { a: alpha, b: beta } = obj;

배열 비구조화 할당

배열의 비구조화 할당은 배열 요소를 변수로 추출한다.

const arr = [1, 2, 3];

// 전통적인 방식
const first = arr[0];
const second = arr[1];

// 비구조화 할당
const [first, second] = arr;

함수 매개변수에서의 비구조화 할당

함수 매개변수에서도 비구조화 할당을 사용할 수 있다. 이는 함수 내에서 객체나 배열의 속성을 쉽게 사용할 수 있게 한다.

function greet({ name, age }) {
  console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
}

greet({ name: "Alice", age: 30 });

 

비구조화 할당은 코드를 더 간결하고 읽기 쉽게 만들며, 객체와 배열의 데이터에 빠르고 쉽게 접근할 수 있도록 한다. 이러한 방법은 코드의 가독성을 높이는 데 기여한다.

'WEB > 자바스크립트' 카테고리의 다른 글

[JS] async와 await  (0) 2024.01.08
[JS] Promise  (0) 2024.01.08
[Javascript] onkeydown 속성을 이용한 예제  (0) 2021.05.14
[Javascript] 페이지 변경 <replace>  (0) 2021.05.14
[Javascript] 문서의 정보 표시  (0) 2021.05.14
Comments