[JavaScript] 11. 자바스크립트 비구조화 할당

오늘은 객체 비구조화 할당이란 무엇인지 정리해보려고 합니다 :)

💡객체 비구조화 할당

ES6에서 추가된 문법 중 하나
객체 구조 분해라고도 불림
객체나 배열의 값을 새로운 변수에 간단히 대입시켜주는 문법

코드를 통해 객체 비구조화 할당에 대해 다루어 볼게요!

먼저, 학생의 정보를 출력해주는 printInfo() 함수를 만들어주었는데요! printInfo()함수는 student 객체를 매개변수로 받습니다.

아래 코드는 객체의 속성을 가지고 오기 위해 .을 사용한 방식입니다.

const student01 = {
    name : "김자바",
    grade : 2,
    department : "컴퓨터공학과"
};

const student02 = {
    name : "박순대",
    grade : 3,
    department : "식품영양학과"
};

const printStudent = (student) => {
    console.log(`${student.name}학생은 ${student.grade}학년, ${student.department} 소속입니다.`);
};

하지만, 위와 같은 방법을 사용하면 코드가 좀 더 길어지고 값을 가져오는데 번거로움이 생길 수 있는데요.

이 때, 객체 비구조화 할당을 이용하면 좀 더 간단한 코드로 보기 좋게 작성할 수 있습니다.

const printStudent = ({name,grade,department}) => {
    console.log(`${name}학생은 ${grade}학년, ${department} 소속입니다.`);
};

또한, 원하는 속성만을 가져와 사용할 수 있습니다.

const {name, grade} = student01
 console.log(`${name}, ${grade}`) // 출력 : 김자바, 2

이 외에도 새로운 변수에 값을 부여하여 사용할 수 있습니다.

 const {name : n, grade : g} = student01
 console.log(`${n}, ${g}`) // 출력 : 김자바, 2

참고 자료 및 사이트

JAVASCRIPT.INFO
MDN