ECMAScript 비구조화(구조분해) 할당 문법 다루기
By 에디
조회수 | 6458
2024-05-23 21:53
이번 시간에는 ECMAScript 신규문법중 자바스크립트 배열과 객체에 신규로 적용된 비구조화(구조분해) 할당 문법에 대해
실습을 통해 기존 배열/객체 사용법과 신규 문법과의 차이점을 알아보도록 하겠습니다.
1) 자바스크립트 비구조화(구조분해) 할당 문법 소개 및 사용목적
자바스크립트 비구조화 또는 구조분해(Destructuring Assignment)할당 문법은
자바스크립트 객체나 배열의 속성을 해체하고 그 값을 개별 변수에 담을 수 있게 하는 ECMASCript 신규 문법으로 코드를 더 깔끔하게 만들고, 배열,객체 데이터에 접근하는 방법을 단순화하기 위해 사용됩니다.
ECMAScript-Basic 실습 폴더내에 destructuring-assignment.html 웹페이지를 하나 만들고 해당 문서내에서 ! 엔터키를 입력하여 기본적인 웹페이지 코드를 아래와 같이 자동으로 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destructuring Assignment</title>
</head>
<body>
<h1>배열/객체 비구조화(구조분해) 할당 문법</h1>
<script>
</script>
</body>
</html>
destructuring-assignment.html 문서를 저장하고 오른쪽마우스 클릭을 하여 Live Server를 통해 해당 웹페이지 문서를 바로 서버환경을 통해
여러분의 웹브라우저를 통해 웹페이지를 오픈해보고 웹브라우저 F12키를 눌러 개발자도구>콘솔 탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.
(VSCode에 확장 플러그인으로 LiveServer를 미리 설치해주시기 바랍니다.)
** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. **
2) 자바스크립트 기초 배열 문법 및 구조분해 문법 사용 비교
먼저 자바스크립트의 기본적인 배열 선언 및 값 할당 방식, 그리고 배열내 값을 추출하는 전통적인 방식을 실습해봅니다.
<script> ... </script> 블록안에 아래와 같이 문자열 배열을 정의하고 값을 할당 후 해당 배열안에서 값들을 추출해봅니다.
구조분해 문법이 제공되기 전에는 문자열 배열안에 있는 값은 개별변수를 정의하고 개별변수에 배열내 인덱스를 통한 배열내 값을 추출하여 개별변수에 매번 할당하여 사용해야 했습니다.
//예시1)기존 문법을 통한 배열내 값을 추출하는 방법
//문자열 배열을 정의하고 문자열 배열의 기본값을 할당하고 배열을 books란 상수에 할당합니다.
const books = ['React', 'Vue', 'Angular', 'Svelt', 'Jquery'];
//배열내 원하는 값을 추출하기위해 배열내 인덱스(0부터시작)를 이용해 개별값을 추출하여 개발변수에 저장하는 전통적인 방식
var book1 = books[0];
var book2 = books[1];
var book3 = books[2];
console.log("기본방식으로 배열에서 추출한 값:", book1, book2, book3);
웹브라우저 개발자 도구>콘솔탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.
비구조화 (구조분해) 할당 문법으로 배열내 값들을 추출하는 방식을 이용하면 아래와 같이 좀더 코드가 간결하고 코딩량을 줄일수 있습니다.
//예시2)구조분해 문법을 통한 배열내 값을 추출하는 방법
//배열값 추출 구조분해 문법 기초형식 : let/const [변수명,상수명] = [배열값];
let [book01, book02, book03] = books;
console.log("비구조화 할당방식으로 기존 배열에서 추출한 값:", book01, book02, book03);
const [book4, book5] = ['JAVA', 'C#', 'Python', 'PHP', 'JavaScript'];
console.log("비구조화 할당방식으로 배열에서 추출한 값:", book4, book5);
//구조분해 문법을 통한 첫번째값을 추출 변수에 할당하고 나머지값을 추가변수에 배열로 할당하기
let [book6, ...extraBooks] = ['자바', '닷넷', '파이썬', 'PHP', '노드'];
console.log("비구조화 할당방식으로 배열에서 나머지 값 배열로 추출하기:", book6, extraBooks);
//비구조화 할당 추가 예시
const [book7, book8, book9, book10, book11, book12 = '데이터베이스'] = ['자바', '닷넷', '파이썬', 'PHP', '노드'];
console.log("비구조화 할당방식의 배열값 상수출력예시3 :", book7, book8, book9, book10, book11, book12);
웹브라우저 개발자 도구>콘솔탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.
** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. **
3) 자바스크립트 기초 객체정의 문법 및 구조분해 문법 사용 비교
자바스크립트의 기본적인 객체 선언 및 값 할당 방식, 그리고 객체내 값을 추출하는 전통적인 방식을 실습해봅니다.
//예시3)자바스크립트 객체 구조 정의 및 값 할당하고 값을 추출하는 전통적인 방식
//자바스크립트 객체 정의 기초 문법 : const(let) 객체상수(변수)명 = {객체구조정의-속성및함수};
const techTrend = {
front: 'ReactNext.js',
backend: 'NodeNest.js',
server: 'Linux',
rdbms: 'PostgreSQL',
noSQL: 'MongoDB',
infra: 'AWS'
};
//기존 방식으로 객체의 속성 값을 추출해보자.
let frontTech = techTrend.front;
let backendTech = techTrend.backend;
let serverTech = techTrend.server;
console.log("기존 방식으로 추출한 객체내 개별 속성 변수값:", frontTech, backendTech, serverTech);
웹브라우저 개발자 도구>콘솔탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.
** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. **
자바스크립트 객체의 속성이나 함수를 비구조화 문법을 통해 변수나 상수값으로 추출해봅니다.
//예시4)구조분해 문법을 통한 객체내 속성값을 추출하여 변수/상수에 할당하는 예시
//비구조화된 방식으로 객체의 속성값을 추출해보자.
//배열값 추출 구조분해 문법 기초형식 : let/const [변수명,상수명] = [배열값];
const { front, backend, server, getAuthor } = {
front: 'React.js',
backend: 'Node.js',
server: 'Linux',
rdbms: 'MySQL=MariaDB',
noSQL: 'MongoDB',
infra: 'AWS',
getAuthor: function () {
return "강창훈";
}
};
console.log("비구조화 할당 방식으로 객체 값을 추출한 결과:", front, backend, server, getAuthor());
웹브라우저 개발자 도구>콘솔탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.
비구조화 할당문법을 이용하면 자바스크립트 배열/객체의 값을 다루는 코드를 더 간결하게 작성하고
변수에 속성 값을 쉽게 할당할 수 있으며 비구조화 할당은 모던 자바스크립트에서 자주 유용하게 활용되는 신규 문법 기능 중 하나입니다.
알림
