왜 우리는 자바스크립트를 이렇게 작성합니까?

시작하기 전에 이것이 다소 거칠거나 부정적으로 보일 수 있다는 것을 알고 있습니다. 하지만 그것은 제 의도가 아닙니다. 왜 우리가 이런 식으로 코드를 작성하게 되었는지 궁금합니다. 이 문서의 모든 샘플은 다음 문서에서 가져온 것입니다.

지난 몇 년 동안 여기 Dev.to에서 많은 기사를 읽었고 다음과 같은 JavaScript를 계속 접하게 되었습니다.

const isPalindrome = string => {
  let revString = [...string].reverse().join('')

  const palindromeCheck = () => string === revString ?  true : false

  return palindromeCheck()
}

그리고 사람들이 왜 이런 코드 작성을 선호하는지 궁금하지 않을 수 없습니다. 내장 함수, 람다 및 기타 기능을 많이 사용하지만 원하는 것보다 읽기가 조금 더 어려울 수 있으며 실제로 수행하는 작업에 대해 생각하면 그다지 효율적이지 않습니다.

이것을 분해해보자:

Spread [...string] 함수를 사용하여 문자열을 문자 배열(메모리 할당)로 만든 다음 해당 배열을 뒤집습니다(적어도 컴파일러에서 이 작업이 수행되기를 바랍니다. 하지만 의심스럽습니다). 우리는 그 백업을 새로운 문자열로 결합합니다(메모리 할당).

두 번째로 기본적으로 단일 비교만 수행하는 하위 함수를 선언합니다. 이것은 말 그대로 아무 목적도 없는 것 같습니다.

저는 개인적으로 다음과 같이 작성합니다.

function isPalindrome(s) {

  for (var i = 0; i < s.length / 2; ++i) {

    if (s[i] != s[s.length - 1 - i]) {

      return false;
    }
  }

  return true;
}

분명히 몇 줄 더 있고 아마도 매우 "늙어 보이는"것 같지만 저는 늙었습니다. ). 문제는 이것이 더 빠르게 실행되고(약간) 제 생각에는 적어도 읽고 이해하기가 더 쉽습니다. 하지만 어쩌면 내가 미쳤을 수도 있습니다.

이 예도 같은 기사에서 두드러집니다.

const sum = (...args) => [...args].reduce((acc, num) => acc + num, 0)

물론, 내가 항상 피해야 한다고 생각하는 것, 즉 가독성이 좋지 않은 것을 피하는 더 읽기 쉬운 대안이 실제로 선행됩니다.

function sum() {
  let total = 0

  for (let num of arguments) {
    total += num
  }
  return total
}

그것이 어떻게 작동하는지 스스로에게 물어볼 방법은 없습니다.

그러나 이 예제에서는 "새로운"재미있는 기능인 인수 배열에 "of"연산자를 사용합니다. 안타깝게도 jsbench.me를 사용하여 두 한 줄 버전을 비교하면 성능이 저하되고 두 번째 버전은 첫 번째 버전보다 92% 느린 것으로 보고됩니다. 이것은 아마도 한두 번 실행되는 함수에는 중요하지 않을 것입니다. 그러나 성능을 노골적으로 무시하는 이러한 종류의 패턴을 계속 따르면 결국에는 많은 문제에 직면하게 될 것입니다. 그 사람들의 ; ).

나는 구식 자바 스크립트를 다시 사용했습니다.

function sum() {

  var sum = 0;

  for (var i = 0; i < arguments.length; ++i) {        

    sum += arguments[i];
  }

  return sum;
}

매우 간단하고 매우 빠르며 우리의 오래된 한 줄 챔피언은 위의 기능보다 74% 느린 것으로 보고되었습니다.

반올림하여 세 번째 함수를 사용하겠습니다.

const captilizeAllWords = sentence => {
  if (typeof sentence !== "string") return sentence

  return sentence.split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

Split, Map, Slice, Join.. 여기에서 많은 배열 작업이 실행됩니다. 좀 더 기본적인 접근 방식을 시도해 보겠습니다.

function captilizeAllWords(s) {

  var capitalize = true;
  var returnValue = '';

  for (var i = 0; i < s.length; ++i) {

    var c = s[i];

    if (c == ' ') { 

      capitalize = true; 

    } else if (capitalize) {

      c = c.toUpperCase();
      capitalize = false;
    }

    returnValue += c;
  }

  return returnValue;
}

이것은 훨씬 더 명시적입니다. 역시나 조금 더 길다. 그리고 다시 빨라졌습니다. JSBench는 여기에서 첫 번째 변형이 33% 더 느렸다고 보고합니다. 이 솔루션의 또 다른 이점은 실제로 탭이나 줄 바꿈 이후에 이 작업을 수행하려는 경우 달성하기 위해 코드에 대해 많은 생각을 하지 않아도 됩니다.

그것은 새로운 스타일의 기사에 대해 호언장담하는 이 오래된 개발자를 위한 것입니다. 바라건대 이것은 다른 것이 없다면 건전한 토론으로 이어질 수 있습니다 =).

야채를 먹고, 코드를 읽을 수 있게 만들고, BENCHMARK를 잊지 마세요!