배열 구조 분해(Destructuring Arrays)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
JavaScript 초보자 및 ES6 기능 활용을 원하는 개발자
핵심 요약
- 배열 구조 분해는 배열 요소를 한 줄로 변수에 할당할 수 있게 해주는 ES6 문법
...
rest 연산자를 사용해 배열의 나머지 요소를 새로운 배열로 추출 가능- 기본값 설정을 통해 배열 요소 누락 시 대체 값을 제공할 수 있음
useState
훅에서 구조 분해를 활용해 상태 값과 업데이트 함수를 간결하게 사용
섹션별 세부 요약
1. 배열 구조 분해의 기본 개념
- 배열 요소를 개별 변수에 할당하는 기존 방식의 번거로움을 줄임
const [firstName, lastName, age] = userProfile;
형식으로 간결하게 구현 가능- 배열 인덱스 기반으로 변수와 요소를 자동 매칭
2. 요소 생략 및 rest 연산자 사용
- 불필요한 요소를
,
로 생략해 특정 위치의 요소만 추출 가능 const [first, , third, , fifth] = numbers;
예시로 1,3,5번 요소만 추출...everyoneElse
로 나머지 요소를 새로운 배열로 묶을 수 있음- rest 연산자는 반드시 마지막 요소에만 사용 가능
3. 기본값 설정 및 예외 처리
- 배열 요소 누락 시 기본값을 설정해
undefined
방지 const [theme, fontSize = 16] = settings;
예시로 기본값 16 적용- 배열 요소가 존재할 경우 기본값 대신 실제 값 사용
4. 변수 교환 및 React 활용 예시
let [a, b] = [b, a];
로 두 변수의 값을 교환 가능- React의
useState
훅에서 구조 분해로 상태 값과 업데이트 함수 추출 const [count, setCount] = useState(0);
예시로 코드 가독성 향상
결론
- 배열 구조 분해는 코드 간결성과 가독성 향상을 위해 필수적인 ES6 기능
- rest 연산자와 기본값 설정을 통해 유연한 배열 처리 가능
- React 등 프레임워크에서의 활용으로 현대 JavaScript 개발 실무에 직간접적으로 기여