JS스터디 『해체할당 + 함수』

 

해체할당은 불필요한 '불러오기'작업을 제거해준다.

가령, 아래와 같이 Data객체의 값을 불러오는 상황을 생각해보자.

 

const Data = {
            name:'홍길동',
            product:'아이폰12pro',
            phone:'010-xxxx-xxxx',
            address:'Seoul xxx',
            orderTime:'2021-05-04, 16:40:32',
            memo:'no Message'
        }
        
        
        function payInfo(order){
            const name = order.name;
            const product = order.product;
            const phone = order.phone;
            const address = order.address;
            const orderTime = order.orderTime;
            const memo = order.memo;

            //...Code
            return `주문고객은 ${name}, 제품명은 ${product} ...(중략)..`
        }


let orderInfo = payInfo(Data);
console.log(orderInfo);

//결과값

 

코드를 짤때, 아래와같이

객체의 변수를 불러오는 작업에 시간을 낭비하는 경우가 많다.

 

... const name = order.name; const product = order.product; const phone = order.phone; const address = order.address; const orderTime = order.orderTime; const memo = order.memo; ...

 

 

 

 

 

 

│해체할당

 

해체할당을 사용하면 변수를 할당하는 코드를 단 1줄로 줄일 수 있다.

 

const Data = {
            name:'홍길동',
            product:'아이폰12pro',
            phone:'010-xxxx-xxxx',
            address:'Seoul xxx',
            orderTime:'2021-05-04, 16:40:32',
            memo:'no Message'
        }
        
function payInfo(order){

            const {name, product, phont, address, orderTime, memo} = order;

            //...Code
            return `주문고객은 ${name}, 제품명은 ${product} ...(중략)..`
        }
        
        
let orderInfo = payInfo(Data);
console.log(orderInfo);

 

물론, 실행결과도 같고, 속도가 빠르며, 해석하기도 좋다.

하지만 JS프로그래머가 해체할당을 사용해야하는 강력한 이유는 '매개변수'에 있다. 

 

 

 

 

 

 

│매개변수 + 해체할당

 

최신 자바스크립트 라이브러리의 경우,

함수의 파라미터값으로 객체를 넣는 경우가 많다.

 

//zim.js예시

new Circle({
	width:50,
	color:red,
	radius:2,
	dashed:true
   //기타 속성값 입력
})

 

 

 

 

과거에는 argument방식을 사용했지만

해체할당을 사용한다면, 객체를 매개변수로 간단하게 이용할 수 있다.

 

function takePhoto(pic){
            const { title, name, time, format, size } = pic;
            result = `타이틀은 ${title}, 이름은 ${name} 입니다.`
            return result;
        }

let res = takePhoto({
            title:'웹돌이',
            name:'매개변수 & 해체할당'
          })
        
console.log(res);

//결과

 

 

 

 

해체할당에서 키값으로 지정하지 않은 객체도 펼침연산자로 넣을 수 있다.

가령, 해체할당으로 지정되지 않은 키값이 있는 Data를 'takePhoto()'함수에 넣어보자.

 

const Data = {
            name:'홍길동',
            product:'아이폰12pro',
            phone:'010-xxxx-xxxx',
            address:'Seoul xxx',
            orderTime:'2021-05-04, 16:40:32',
            memo:'no Message'
        };
        
function takePhoto(pic){
            const { title, name, time, format, size, } = pic;
            result = `타이틀은 ${title}, 이름은 ${name} 입니다.`
            return result;
        }

let res = takePhoto(Data)
          
console.log(res);

//결과

 

 

 

 

키값으로 지정되지 않은 값은 'undefined'가 반환된다.

이때 필요한 도구가 펼침연산자이다.

 

  const Data = {
            name:'홍길동',
            product:'아이폰12pro',
            phone:'010-xxxx-xxxx',
            address:'Seoul xxx',
            orderTime:'2021-05-04, 16:40:32',
            memo:'no Message'
        };



 function takePhoto(val){
 		const { title, name, time, format, size, ...others } = val;
			for(let item in others){
				console.log(`${item} : ${others[item]}`);
			}
		}

let res = takePhoto(Data)
console.log(res);

//결과

 

name을 제외한 키값은 펼침연산자 '...others'를 통해 해체할당이 이뤄지고,

for in문을 통해(매개변수가 객체라면) 해당값에 접근할 수 있다.

 

  

 

 

 

처음에는 해체할당 방식이 다소 낯설게 느껴질 수 있지만

「해체할당, 매개변수, 펼침연산자」 3가지 조합은

코드를 깔끔하게 만들수 있는 강력한 JS의 도구이다.