[JavaScript] 함수 매개변수 전달 패턴 - 설정 객체 패턴

dhkim 6월 12, 2023

 



Javascript의 함수 인자는 개수나 타입에 대한 제약이 없기 때문에 함수정의를 찾아가 직접 확인하는 경우나,

수 많은 매개변수의 추가로 가독성이 떨어지게 된다.


1) 인자가 많아질 경우 인자 순서를 파악하기 어려움.

1
2
3
// 후순위 유효한 값을 갖는 경우, 중간 값을 null로 채워 순서를 맞추는 경우

func('param1', null, 'parma3', 'param4', null, 'param6');

2) 인자를 추가할 경우, 우선순위에 따라 순서가 바뀌게 될 때의 Side Effect

1
2
3
4
5
// 수정된 함수의 인자(c)를 작성자가 인식하지 못한 경우

function temp (a, b, c) { }

temp('apple', 'banana');


설정 객체 패턴이란, 쉽게 말해 위와 같은 인자들을 하나의 Object에 key-value 형태로 전달하는 것을 의미한다.


쉬운 예제로 Grid Library를 Wrapping하여 Custom Grid를 만드는 과정을 보인다.



1. Class 생성자 매개변수

 Grid의 너비, 높이 등의 옵션을 생성 옵션으로 갖는 Grid Class를 생성한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export class CustomGrid {

    #width;
    #height;
    #resize;
    #scroll;
    #backgroundColor;

    constructor(args){

        if(args != undefined){

            this.#width             = 'width'           in args ? args.width            : '' ;
            this.#height            = 'height'          in args ? args.height           : '' ;
            this.#resize            = 'resize'          in args ? args.resize           : '' ;
            this.#scroll            = 'scroll'          in args ? args.scroll           : '' ;
            this.#backgroundColor   = 'backgroundColor' in args ? args.backgroundColor  : 'black' ;

        }

    }

}


2. CustomGrid 객체 생성

1
2
3
4
5
6
let myGrid = new CustomGrid({
    width: '100%',
    height: '50%',
    resize: false,
    scroll: true
});



3. 매개변수 정의  - jsDoc 활용

 위와 같이 설정 객체 패턴을 사용하여 매개변수의 추가와 순서에 대한 제약을 유연하게 하였다.

다만, 여전히 CustomGrid의 생성 인자의 구성에 대해서는 Class의 생성자 정의를 보아야 확실히 할 수 있다.

따라서, 이런 모호함을 없애기 위해 매개변수(Object)에 대해 정의하고 jsDoc을 통해 개발자가 CustomGrid 객체를 생성할 때 인자의 구성과 타입을 알 수 있도록 제시한다.

[CustomGrid 매개변수 정의]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/**
 * #Grid Options
 * 
 * @param {string} width : 너비
 * @param {string} height : 높이
 * @param {boolean} resize : 크기조정 여부
 * @param {boolean} scroll : 스크롤 여부
 */
export let GridArguments = {
    width  : '100%',
    height : '100%',
    resize : false,
    scroll : false
}


[생성자의 주석란 Parameter 타입을 위에서 정한 Object로 기입]

단, 타입의 경우 'GridArguments'의 jsDoc에 작성한 Paramter Type이 출력되는 것이 아닌 Object에 기본값으로 기입한 value의 타입이 출력됨.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export class CustomGrid {

    #width;
    #height;
    #resize;
    #scroll;
    #backgroundColor;

    /**
     * 생성자
     * 
     * @param {GridArguments} args 
     */
    constructor(args){

        if(args != undefined){

            this.#width             = 'width'           in args ? args.width            : '' ;
            this.#height            = 'height'          in args ? args.height           : '' ;
            this.#resize            = 'resize'          in args ? args.resize           : '' ;
            this.#scroll            = 'scroll'          in args ? args.scroll           : '' ;
            this.#backgroundColor   = 'backgroundColor' in args ? args.backgroundColor  : 'black' ;

        }

    }

}


[CustomGrid 생성]

1) 'CustomGrid' 클래스 타입에 마우스 오버할 때, 인자의 구성요소가 출력됨.

생성자 (constructor)에 jsDoc으로 작성된 GridArguments(Object)의 인자가 매칭되어 보임.



2) 인자요소(Object)를 입력할 때도 자동완성 key로 목록에 제시됨.


0 댓글