티스토리 뷰
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
최근에 올라온 글
최근에 달린 댓글
TAG
- react-native
- react
- 이탈리안 레스토랑
- 인천 구월동 맛집
- 파니노구스토
- 맛집
- Async
- Promise
- javascript
- 정보보안기사 #실기 #정리
- AsyncStorage
- redux-thunk
- redux
- 인천 구월동 이탈리안 맛집
- await
- Total
- Today
- Yesterday