Programing/Design Patterns

javascript 설정 객체 패턴

리커니 2021. 10. 28. 16:03
반응형

javascript 설정 객체 패턴

 

설정객체 패턴은 간단하게 객체화된 매개변수 설정하여 전달하는 방식입니다.

 

예를들어 학생의 이름을 저장하는 함수가 있습니다.

단순하게 기본형 변수 파라메터를 전달받아 처리하도록 했다고 합시다.

 

const addMember(name){
	//name 저장 로직...
}

 

그런데 계속적으로 저장해야되는 정보를 추가해 달라는 요청을 받았습니다.

'나이를 추가해주세요.'

 

const addMember(name, age){
	//name, age 저장 로직...
}

'성별을 추가해주세요.'

 

const addMember(name, age, gender){
	//name, age, gender 저장 로직...
}

이런식으로 계속 추가가 된다면, 코드도 보기 싫어지고 순서도 중요해지게 됩니다.

이런 단점들을 보완하여 매개변수를 설정된 객체로 전달하는 것이 설정 객체 패턴입니다.

 

const param = {
    name : "geon",
    age : 30,
    gender : "male"
}
const addMember(param){
	//member 저장 로직...
}

 

이제는 코드도 깔끔해지고, 매개변수의 순서가 바뀌어 발생하는 오류도 없겠죠.

이렇게 설정 객체 패턴을 썼을 때의 장점은

 

1. 매개변수와 순서를 기억할 필요가 없다.

2. 선택적인 매개변수를 안전하게 생략할 수 있다.

3. 읽기 쉽고 유지보수하기 편하다.

4. 매개변수를 추가하거나 제거하기가 편하다.

 

입니다. 

그럼 단점에는 어떤 것들이 있을 까요?

 

1. 매개변수의 이름을 기억해야 한다.

2. property명은 압축되지 않는다.

 

설정 객체 패턴은 DOM 요소를 생성할 때나 CSS 스타일을 지정할 때 유용하게 사용할 수 있습니다.

 

참고 : JavaScript Patterns - 스토얀 스테파노프

반응형