[자바스크립트 js] 함수 Destructuring / 함수 구조 분해

  함수 구조 분해

• 가장 간단한 상황은 함수가 리턴하는 값이 배열일 때

fucntion getArray() {
	return ['뚝딱', '도깨비', '두올다'];
}

const [name1, name2, name3] = getArray();

console.log(name1);
console.log(name2);
console.log(name3);


//결과
//뚝딱
//도깨비
//두올다

 

 

 

• rest파라미터가 배열일 때

function printWinner(...arg) {
	const [macbook, ipad, airpods, ...coupon] = arg;
    
    console.log('이벤트 결과를 알려드립니다.');
    console.log(`맥북의 주인공은 '${macbook}'님 입니다.`);
    console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`);
    console.log(`에어팟의 주인공은 '${airpods}'님 입니다.`);
    console.log('뚝딱 무료 이용권 주인공은');
    
    for (let user of coupon) {
    	console.log(`'${user}'님`);
    }
    
    console.log(`이상 총 ${coupon.length}명 입니다.`);
}

printWinners('뚝딱', '도깨비', '두올다', '개자이너', '뚜기', '따기');


// 결과
// 이벤트 결과를 알려드립니다.
// 맥북의 주인공은 '뚝딱'님 입니다.
// 아이패드의 주인공은 '도깨비'님 입니다.
// 에어팟의 주인공은 '두올다'님 입니다.
// 뚝딱 무료 이용권 주인공은
// '개자이너'님
// '뚜기'님
// '따기'님
// 이상 총 3명 입니다.

 

 

 

• 조금 더 활용하면, 파라미터 부분에서 Destructuring문법을 바로 활용할 수 있다.

function printWinner([macbook, ipad, airpods, ...coupon]) {
    console.log('이벤트 결과를 알려드립니다.');
    console.log(`맥북의 주인공은 '${macbook}'님 입니다.`);
    console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`);
    console.log(`에어팟의 주인공은 '${airpods}'님 입니다.`);
    console.log('뚝딱 무료 이용권 주인공은');
    
    for (let user of coupon) {
    	console.log(`'${user}'님`);
    }
    
    console.log(`이상 총 ${coupon.length}명 입니다.`);
}

const ranks = ['뚝딱', '도깨비', '두올다', '개자이너', '뚜기', '따기'];
printWinners(ranks);


// 결과
// 이벤트 결과를 알려드립니다.
// 맥북의 주인공은 '뚝딱'님 입니다.
// 아이패드의 주인공은 '도깨비'님 입니다.
// 에어팟의 주인공은 '두올다'님 입니다.
// 뚝딱 무료 이용권 주인공은
// '개자이너'님
// '뚜기'님
// '따기'님
// 이상 총 3명 입니다.

 

 

 

• 객체도 배열 구조 분해 사용법과 동일

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

function printSummary(object) {
	console.log(`선택한 것은 '${object.title)'입니다.`);
    console.log(`가격은 '$(object.price)'입니다.`);
    console.log(`목표는 '${object.goal}'입니다.`);
};

printSummary(tooktak);

 

 

 

• 함수가 객체를 리턴한다면 Destructuring문법을 활용할 수 있다. (위 내용을 아래처럼 변환)

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

function printSummary(object) {
	const { title, price, goal } = object;
    
	console.log(`선택한 것은 '${title)'입니다.`);
    console.log(`가격은 '$(price)'입니다.`);
    console.log(`목표는 '${goal}'입니다.`);
};

printSummary(tooktak);

혹은 이렇게도 사용 가능하다.

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

function printSummary(object) {
	const { title, price, goal } = object;
    
	console.log(`선택한 것은 '${title)'입니다.`);
    console.log(`가격은 '$(price)'입니다.`);
    console.log(`목표는 '${goal}'입니다.`);
};

printSummary(tooktak);

 

 

 

• HTML의 DOM 이벤트를 다룰 때도 유용하게 사용할 수 있다.

const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
	event.target.classList.toggle('checked');
});

위에 코드를 더욱 간결하게.

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({target}) => {
	target.classList.toggle('checked');
});