Javascript ... 문법 의미

 

const pagingParam = {pageNum = 1};

getList(pagingParam);

function getList(pagingParam){
	param = {
    	...pagingParam,
        pageRows: $("#pageRows").val(),
        searchColumn: $("#searchColumn").val()
    }
    
    //생략
}

다른 분의 소스를 분석하던 중,  ...pagingParam 은 왜 ...이 붙을까 궁금해서 찾아보았다!

이건 '비구조화 할당 문법'으로 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다! 

...pagingParam 으로 쓰면, 넘겨받은 pagingParam 배열 안에 들어있는 값들을 다 할당해준다!(주소값이 아니라 값들을 할당)

따라서 param = {pageNum = 1 , pageRows: $("#pageRows").val(),  searchColumn: $("#searchColumn").val() } 이렇게 된다!

 

예시 하나 더

const arr = [1, 2, 3]

let copy1 = arr; //주소값을 복사

let copy2 = [...arr]; //값을 복사

arr[0] = 100;

console.log(arr);       // [100, 2, 3]
console.log(copy1);     // [100, 2, 3]
console.log(copy2);     // [1, 2. 3]

 

------------------------------------------------------------------------------------------------------------

오늘 이걸 사용하여 수정한게 하나 있어서 추가하려고한다!

공통 js 로 datepickerOption 이 정의되어있는데.. 나는 기본정의된 것 말고 추가적인 옵션을 주고싶어서 수정!

const dateUtil = (function() {
    //default datepicker style option
    const datepickerOption = {
        firstDay: 0,
           //..생략..
        showAnim: 'fadeIn',
    };
    return {
    	//이게 기존 소스!
        datepicker: (selector) => {
            $(selector).datepicker(datepickerOption);
        },
        
        //이게 변경한 소스!
        datepicker: (selector, option) => {
            $(selector).datepicker({...datepickerOption, ...option});
        },
    }
 })();

 

기존에 datepicker 를 사용할때, 

dateUtil.datepicker("input[data-datepicker]");  

이렇게 호출했었는데,

만약 추가 옵션 설정이 필요한 경우에는

dateUtil.datepicker("input[data-datepicker]", {minDate: new Date(),});

이렇게 배열을 넣어주면 옵션이 추가로 셋팅가능하다!

* 만약 datepickerOption 에 이미 설정된 옵션을 덮어쓰고 싶다면 {...datepickerOption, ...option}

datepickerOption에 설정된 값은 건드리지못하게하고 추가 옵션만 주도록 하려면 {...option, ...datepickerOption} 이렇게 쓰면 된다.  

순서에 따라 배열을 더할때 뒷 부분의 값을 따르기때문!

 

참고 : https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9