자바스크립트 디스트럭처링 은 구조화된 배열 또는 객체로 부터 해당 요소를 분리하여 1개 이상의 변수로 개별적으로 할당할 수 있는 개념입니다.
예를 들어 객체의 속성 요소에 대응하는 값 혹은 인덱스 순서에 의거하여 변수에 자동 할당하게 됩니다.
자바스크립트 디스트럭처링은 배열과 객체 모두 활용할 수 있습니다.
객체 디스트럭처링
일반적으로 객체에서 변수를 가져오려면 다음과 같이 코드를 작성할 수 있습니다.
<script>
let elements = {
browser : "Chrome",
env : "Window10"
}
let browser = elements.browser;
let env = elements.env;
console.log( browser, env );
</script>
객체 디스트럭처링을 활용하면 다음과 같이 활용할 수 있습니다. 단, 객체 내의 요소 이름과 받아오고자 하는 변수의 이름이 동일해야 값을 나눌 수 있습니다.
<script>
const elements2 = {
browser2: "Chrome",
env2: "Window10",
};
const { browser2, env2 } = elements2;
console.log(browser2, env2);
</script>
Nested 객체에서도 적용할 수 있습니다. 역시 요소의 이름과 변수이름은 동일해야 합니다.
<script>
const elements2 = {
browser2: "Chrome",
env2: "Window10",
programming2 : {
code : "visual studio code",
git : "github"
}
};
const { browser2, env2 } = elements2;
console.log(browser2, env2);
const {code, git} = elements2.programming2;
console.log( code, git );
</script>
만약 다른 이름의 변수를 사용하고 싶다면 다음과 같이 재정의 할 수 있습니다.
<script>
const elements2 = {
browser2: "Chrome",
env2: "Window10",
programming2 : {
code : "visual studio code",
git : "github"
}
};
const { browser2, env2 } = elements2;
const {code, git} = elements2.programming2;
//code를 code2로, git은 git2로 변수명을 바꿈
const { code : code2, git : git2 } = elements2.programming2;
console.log( code2, git2 );
</script>
만약 해당 요소에 없는 객체값을 할당하기 위해서는 아래처럼 변수 선언 및 값을 할당 함으로써 값을 부여할 수 있습니다.
<script>
let studentInfo = {
id : "1001",
name : "철수"
}
//기본값을 할당하여 변수 할당 요소를 추가할 수 있음
let { id, name, age = "20" } = studentInfo;
console.log(id, name, age);
// 결과: 1001 철수 20
</script>
스트링 역시 객체이므로 다음과 같이 속성값을 적용할 수도 있습니다.
<script>
const subjectString = "SAPUI5 자바스크립트";
// subjectString 래퍼 객체 요소 중 length 속성을 추출
const { length } = subjectString;
// subjectString의 길이 13
console.log(length);
</script>
이를 함수의 매개변수에 적용하여 디스트럭처링을 활용할 수 있습니다. 객체로 넘어가는 매개변수 중 파라메터로 선언된 변수 중 동일한 프로퍼티를 갖는 변수에 객체로 부터 할당됩니다.
<script>
function funcDestructuring({ x, y }) {
console.log(
`x ${x} * y ${y} 의 곱의 결과는 ${x*y} 입니다.`
);
}
funcDestructuring({ subject: "기능 설명", x: 40, y: 22 });
// 할일 HTML은 완료 상태입니다.
</script>
객체 디스트럭처링을 활용하여 다음과 같이 파라메터에 적용할 수 있습니다. 파라메터 객체 postion 요소를 받아 postion 매개변수에, theme에 속한 color만을 요소로 하여 color 변수에 담게 됩니다.
<script>
// 함수 인자값을 destructuring 하여 받음
function loadSetting({ postion, theme: { color } }) {
console.log(postion); // { follow: true, alert: true }
console.log(color); //blue
}
loadSetting({
postion: {
x_axis: 300,
y_axis: 400,
},
theme: {
color : "red",
},
});
</script>
배열 디스트럭처링
배열에 대한 디스트럭처링는 다음과 같이 []를 사용하면 됩니다. 배열에는 구분할 수 있는 이름이 없으므로 인덱스 순서를 기반으로 할당을 하게 됩니다.
<script>
const arrValues = [1,2,3,4,5,6,7];
//두 개의 변수만을 선언했으므로 2개의 요소만 가져온다.
const [first, second] = arrValues;
console.log( first, second );
</script>
위의 경우 2개의 변수만을 선언했으므로 배열의 첫번째, 두번째 요소만을 갖고 오고 됩니다.
따라서 이를 split 함수를 응용하여 날짜로부터 연도, 월, 일을 분리하는 로직을 손쉽게 작성할 수 있습니다.
<script>
const date = "2022-03-27";
const [year, month, day] = date.split("-");
console.log("연도 : " + year);
console.log("월 : " + month);
console.log("일자 : " + day);
</script>
Rest파라메터를 활용한 배열 요소 디스트럭처링
배열의 경우 인덱스 순서에 따라 할당할 변수의 개수만큼을 반환하게 됩니다. 이 때 레스트 파라메터를 사용하면 변수의 개수 이후의 값은 모두 레스트 파라메터로 할당되게 됩니다.
<script>
const numbArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [numb1, numb2, ...others] = numbArray;
console.log(numb1);
console.log(numb2);
console.log(others);
// 레스트 파라매터에 정의된 요소는 배열 형태로 반환이 됨
others.forEach((elem) => {
console.log(elem);
});
</script>
단, 레스트 파라메터는 항상 할당 변수 위치상 가장 뒤에 위치되어야 합니다.
이상으로 자바스크립트 디스트럭처링 에 대해서 알아보았습니다. 좀 더 세부적인 사항은 모질라 웹문서 구조 분할 할당 내용을 확인해 보시기 바랍니다.
그 밖에 자바스크립트 코딩에 기초가 되는, 자바스크립트에서 사용되는 문자열 메소드 및 템플릿 리터럴 사용 예제도 참고해보시기 바랍니다.