Function parameters in JavaScript — Clean Code - Lee-hyuna/33-js-concepts-kr GitHub Wiki

원본 출처: https://medium.com/@kevin_peters/function-parameters-in-javascript-clean-code-4caac109159b

웹 개발자로서 나는 자바 스크립트 코드를 많이 다뤄야 한다. 난 자바 스크립트를 사랑한다. 의심할 여지가 없다. 하지만 가끔 언어적 특성을 받아들이지 않는 사람들이 쓴 코드를 싫어한다. 내 생각에 대부분의 실수가 일어나는 시간은 기능적 변수에 있습니다. 매개 변수가 많은 함수는 대부분 오래 된 것이며 많은 위치에서 변경할 수 없습니다. 이 문제는 많은 개발자들이 공감할 문제입니다.

이제 많은 매개 변수를 사용하여 RESTAPI끝점을 호출하는 기능을 가정해 보겠습니다. 이 HTTP호출은 필터가 많은 GET가 됩니다. 이 예에서는 API호출을 이용해 Twitter트윗 타임 라인을 확인하겠습니다. 설명서는 https://developer.twitter.com/en/docs/tweets/timelines/api-reference/get-statuses-home_timeline에서 확인할 수 있습니다.

이제 간단한 기능을 만들어 보겠습니다. 쿼리 파라미터를 함수 인수로 사용합니다.

그런 다음 이 기능을 다음과 같이 부릅니다.

이것은 꽤 합리적인 것 같습니다. 하지만 생각해 보세요. 이 기능은 당신의 코드 베이스에서 100번 사용되고(이것을 가정하자), 그리고 이제 트위터는 다른 파라미터를 포함하도록 API를 변경하고 있다. API호출 비즈니스 로직의 기능을 다음과 같이 변경해야 합니다.

이제 문제는 마지막 인수를 포함하도록 기능의 모든 호출자를 변경해야 한다는 것입니다. 이에 대한 해결책은 기본 매개 변수를 추가하는 것입니다. 이 기능은 ES6부터 지원됩니다. 따라서 기본 파라미터를 마지막 파라미터로 사용하기 위해 기능을 다시 인자화하겠습니다.

문제 해결:)함수 호출자를 모두 변경할 필요는 없습니다. 문제는 필요한 매개 변수가 포함되면 해당 매개 변수를 함수에 추가하고 모든 함수 호출자를 변경해야 한다는 것입니다. 확장성이 별로 없습니다. CleanCode(청소 코드)라는 책에서 쉬운 해결책을 찾을 수 있습니다. 한 기능에 두개 또는 세개 이상의 파라미터가 있는 경우 파라미터를 하나의 개체로 제공하십시오. 이제 여러개의 매개 변수 대신 개체를 사용할 수 있도록 함수를 변환해 보겠습니다.

그래도 이 매개 변수는 매우 상세해 보이고 기본 매개 변수도 지워집니다.

다음과 같은 두가지 ECMAScript기능을 사용할 수 있습니다.

• 개체 구성 해제
• 기본 매개 변수(이전에 사용한 적이 있음)

이제 여기서 할 일은 아주 간단합니다. 매개 변수로 지정된 개체를 속성에 제거하고 구조화되지 않은 속성에 대한 기본 매개 변수를 추가합니다.

이제 개체가 있는 함수를 호출할 수 있지만 확장성 및 기본 매개 변수의 이점도 누릴 수 있습니다.

개체를 함수 매개 변수로 사용하는 또 다른 좋은 이유는 호출자 함수의 속성 이름을 지정해야 하기 때문입니다. 이것은 간접적인 문서로 다른 개발자들이 읽을 수 있도록 많은 도움을 준다. 여기서 주요 이점은 기능이 변경되고 코드가 이동되기 때문에 현대 소프트웨어 개발에서 매우 중요한 기능의 확장성입니다. 따라서 동적이고 확장 가능한 기능이 핵심입니다.