작성자Federico Kereki
읽기 쉽고 이해하기 쉬운 JavaScript 코드를 작성하시겠습니까?무점 스타일은 당신과 미래의 관리자들이 부차적인 세부 사항이 아니라 함수와 그 의미에 관심을 가지도록 더 좋은 코드를 작성하는 데 도움을 줄 것입니다.본고에서 우리는 이러한 프로그래밍 스타일과 그 장점, 그리고 가능한 단점을 중점적으로 소개할 것이다!따라서 본고는 함수 프로그래밍 기술을 응용하여 코드를 강화하는 추세에 따라 우리가 이전chaining and fluent interfaces에서의 작업과 같다.

무점 콘셉트가 뭐예요?

무점 스타일은 모든 함수 프로그램에 매개 변수를 지정할 필요가 없는 것과 관련이 있습니다.점 이라는 용어는 이름 없는 매개변수와 관련이 없는 함수 매개변수를 나타냅니다.이 범례에서 우리는 독자가 함수가 무엇인지 주목하고 그 매개 변수의 구체적인 명칭에 관심을 갖지 않기를 바란다.

Pointfree style is also known as tacit programming by its champions, or as Pointless Programming by its detractors!

이런 스타일은 함수를 작성하거나 흐르는 물 함수를 작성할 때 함수 프로그래밍에서 흔히 볼 수 있는 모델이다.그 사상은 더욱 높은 추상적인 단계에서 일하고 함수의 기능을 주목하며 매개 변수 호출 등 작은 세부 사항을 피하는 것이다.읽을 코드가 더 적으면 더 빨리 이해할 수 있습니다.그럼에도 불구하고 부적절하거나 극단적으로 사용하면 스타일이 없어 코드를 더욱 어려워질 수 있습니다!
우리는 실제적인 예를 하나 봅시다. 이렇게 하면 우리는 약간의 풍격도 체험할 수 있습니다.

하나의 예

조던 씨는 모리에 연극Le Bourgeois Gentilhomme의 한 배역(자산계급 신사)으로 40여 년 동안 산문으로 강의를 했고 심지어는 자신조차도 몰랐다는 것을 놀랍게 알게 되었다.이 시리즈의 독자로서, 당신은 우리가 이전에 이미 약간의 풍격을 사용했다는 것을 알아차리지 못했을 것입니다.
링크와 유창한 인터페이스에 관한 글에서 저Mastering JavaScript Functional Programming의 책에 있는 코드를 보았습니다. 저희는 정의(기본적으로 무의미한) 작업부터 시작합니다.

const testOdd = x => x % 2 === 1;
const testUnderFifty = x => x < 50;
const duplicate = x => x + x;
const addThree = x => x + 3;

우리는 이 조작 순서를 하나의 그룹에 적용할 것이다.우선, 우리는 짝수를 줄였다.그리고 우리는 남은 것을 배로 늘렸다.그 후에 우리는 50개 이상의 결과를 포기했고, 마지막으로 우리는 남은 결과에 3개를 더했다.

const myArray = [22, 9, 60, 24, 11, 63];

const a0 = myArray
  .filter(testOdd)
  .map(duplicate)
  .filter(testUnderFifty)
  .map(addThree);
// [ 21, 25 ]

모든 상황에서 우리는 함수의 매개 변수를 지정하지 않았다.우리는 .filter(x => x % 2 === 1)이 아니라 명명 함수를 사용했다. 이것은 약간의 스타일도 아니다.생성된 코드는 더욱 치밀하고 읽기 쉽다. "홀수만 보존하고 모두 복제하며 숫자를 50 이하로 유지하고 마지막에 3을 모두 추가한다."
무점 스타일에서, 당신은 함수 이름만 볼 수 있고, '추가 JS'도 있습니다.이런 스타일은 간결함을 실현했지만, 당신은 좋은, 이해하기 쉬운 함수명을 선택하려고 노력해야 합니다.A famous saying, "컴퓨터 과학에서 두 가지 어려운 일: 캐시 실효와 명칭..."이런 스타일을 사용하면 두 가지 유형의 함수를 얻을 수 있습니다. 하나의 작업과 명확한 명칭을 가진 짧은 함수, 그리고 다른 함수를 조율하는 긴 함수, 무점 스타일을 사용하여 가독성을 높일 수 있습니다.

또 다른 예

다른 예, 조금 더 현실적인 예를 봅시다.제목을 'title case' 로 변환하거나 최소한 간략한 버전으로 변환해야 한다면, 모든 단어의 알파벳은 대문자로 되어 있다. (실제 제목 칸 형식에서 일부 단어의 알파벳은 제목이 시작되지 않으면 대문자로 쓰지 않는다.)우리는 일부 함수를 사용하여 점 없는 방식으로 이 점을 실현할 수 있다.우선, 두 가지 표준 함수식 프로그래밍 도구: 파이프와 맵을 봅시다.

const pipeline = (...fns) => fns.reduce((result, f) => (...args) => f(result(...args)));

const map = fn => arr => arr.map(fn);

파이프화 (현재 사용 중 some proposals 는 첫 번째 함수를 하나의 매개 변수에 적용한 다음에 결과를 두 번째 함수에 전달하고, 그 결과를 세 번째 함수에 전달하는 것을 고려하고 있다. 리눅스와 Unix에서 파이프는 입력을 가져와 처리하고, 파이프의 다음 함수에 전달한다.우리의 map(...) 함수는 .map(...) 방법의 curried 버전으로 함수 프로그래밍에 더욱 적합하다.
이제 타이틀 케이스에 문자열을 만들 수 있는 도구가 있습니다.

const separateStringIntoWords = (str) => str.split(" ");

const firstToUpper = (str) => str[0].toUpperCase() + str.slice(1).toLowerCase();

const joinWordsIntoString = arr => arr.join(" ");

const makeTitleCase = pipeline(separateStringIntoWords, map(firstToUpper), joinWordsIntoString);

제목을 대소문자로 변환하려면 다음과 같이 makeTitleCase(...)만 사용하십시오.

makeTitleCase("GO TO sTaTeMeNt conSIDered HARMful");
// "Go To Statement Considered Harmful"

너는 더 간결하게 쓸 수 있다. 심지어는 한 줄. 그러나 그것이 더 뚜렷하니?

const makeTitleCase2 = (str) => str.split(" ").map(word => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" ");
makeTitleCase2("GO TO sTaTeMeNt conSIDered HARMful");
// "Go To Statement Considered Harmful"

이 코드를 이해하려면 독자는 순서대로 분할을 의식해야 한다(...)제목을 별도의 단어로 구분하여 매핑(...)각 단어의 첫 번째 문자를 대문자로 변환하고 연결(...)마지막으로 이 단어들을 하나의 표제로 조합해라.상당히 숙련된 자바스크립트 개발자에게 이런 작업이 응용 프로그램 중 한 곳에서만 이루어진다면 이 코드는 된다.그러나 만약 당신이 몇 군데에서 분리하고 대문자와 연결을 필요로 하며, 더욱 뚜렷하게 하려면, 나는 초기의 무점 양식 버전이 더욱 이해하기 쉽다고 생각한다.
우리 한 걸음 더 나아가자.타이틀 캐스팅 함수를 디버깅하고 싶다고 가정하십시오.원래대로 makeTitleCase(...)는 옳다고 여겨질 수 있습니다. 왜냐하면 당신은 세 가지 함수를 사용했기 때문입니다. 하나는 (가능성이 높습니다!)문자열을 가져와 단어로 나누고, 두 번째 문자열은 첫 번째 알파벳의 대문자로 모든 단어를 비추고, 마지막 문자열은 여러 단어로 하나의 문자열을 구성한다.이러한 보조 기능은 다른 곳에서 사용할 수 있기 때문에 이것은 낭비가 아니다.나는 길수록 코드가 뚜렷해진다고 믿는다.

오픈 소스 세션 재방송

생산 환경에서 웹 응용 프로그램을 디버깅하는 것은 어렵고 시간도 소모될 수 있다.OpenReplay는 풀스토리, 로그 로켓과 Hotjar의 소스 대체품이다.사용자가 한 모든 것을 감시하고 재방송할 수 있으며, 모든 문제에 대한 응용 프로그램의 표현을 보여 줍니다.
이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.
OpenReplay는 현재 유일하게 사용할 수 있는 오픈 소스 대안입니다.

즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.

문제.

비록 우리가 전에 이미 말했지만, 여전히 약간의 함정이 너를 길을 잃게 할 수도 있다.JavaScript의 클래식 퀴즈는 다음 호출의 다른 결과를 설명해야 합니다.

const numbers = [22,9,60,12,4,56]
numbers.map(Number.parseFloat); // [22, 9, 60, 12, 4, 56]
numbers.map(Number.parseInt);   // [22, NaN, NaN, 5, NaN, NaN]

왜 이러지?관건은 Number.parseFloat(...) 단일 인자 - 해석할 문자열을 수신하고 Number.parseInt(...) 두 번째 선택할 수 있는 인자, 즉 숫자의 기수를 허용하는 것이다.array.map(...) 방법은 세 개의 매개 변수를 사용하여 귀하가 제공한 함수를 호출합니다.번호parseFloat(…)두 개의 추가 숫자는 무시하지만, 숫자는 무시합니다.parseInt(…)두 번째를 기수로 모든 문제가 뒤따를 것이다.이 경우 화살표 기능을 사용하는 것이 정확합니다.

numbers.map((x) => parseInt(x));   // [22, 9, 60, 12, 4, 56]

추가 인자가 있는 함수를 사용할 때 (여기는 필요 없는 인자) 함수 프로그래밍은 다른 해결 방안을 제공합니다.우리는 higher order function 주어진 함수를 일원 함수로 변환할 수 있다.

const unary = fn => (...args) => fn(args[0]);

이제 우리의 해석 문제는 사라졌다.

numbers.map(unary(Number.parseInt));   // [22, 9, 60, 12, 4, 56]

언제든지 자신이 작성하지 않은 함수에 대해 아무런 스타일도 사용하지 않을 때 이런 오류에 노출된다.조심하다

요약

JavaScript 프로그래밍에서 무점 스타일은 유효한 모델입니다. 이것은 이해할 수 있고, 명명된, 간단한 단일 목표 함수에 집중하고, 예견할 수 있는 방식으로 조합하는 데 도움을 줄 수 있습니다.해봐!