Functional JavaScript 입문(1)_javascript 스킬

지금 작업을 완료해야 한다고 가정해 보겠습니다. 가능한 한 함수형 언어의 원리에 따라 JavaScript 코드를 작성하세요.

다음 시리즈는 여러분이 나와 함께 그러한 여정을 시작할 수 있도록 고안되었습니다. 먼저, 함수형 언어에 대해 여러분이 마음 속에 갖고 있을 수 있는 몇 가지 오해를 바로잡아야 합니다.

JS 언어의 함수 표현은 심각한 오해를 받고 있습니다.

분명히 JavaScript의 기능적 패러다임을 매일 사용하는 개발자가 꽤 있습니다. 나는 JavaScript 개발자의 대부분이 이러한 사항을 실제로 이해하지 못한다고 말하고 싶습니다.

이유는 웹서버에서 사용하는 대부분의 개발언어가 C에서 파생되었기 때문이라고 생각하는데, 이 언어들은 함수형 언어가 아니라는 것은 누구나 다 아는 사실입니다.

일반적으로 혼란에는 두 가지 수준이 있습니다. 첫 번째 레벨은 jQuery에서 매우 일반적인 사용법인 다음 예제의 사용법에 대한 것입니다.

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

위 코드에서는 JavaScript의 악명 높은 콜백 함수인 익명 함수를 매개변수로 전달합니다. 이러한 함수가 호출됩니까? 별말씀을요!

위의 예는 함수형 언어의 주요 특징을 보여줍니다. 함수는 매개변수입니다. 반면에 이 예제는 단 세 줄의 코드만으로 위반할 수 있는 거의 모든 함수형 프로그래밍 패러다임을 위반합니다.

두 번째 수준의 혼란은 더 미묘합니다. 보세요: 소수의 최신 JS 개발자만이 자신을 어떻게 보는지 살펴보세요.

흠, 정말 좋네요! 하지만 저는 이미 함수형 프로그래밍을 완전히 이해하고 있으며 모든 프로젝트에서 Underscore.js를 사용합니다.

Underscore.js는 매우 유명하고 널리 사용되는 JavaScript 라이브러리입니다. 예를 들어, 단어 세트가 있고 각 단어의 처음 두 글자가 필요하다고 가정해 보겠습니다. Underscore.js를 사용하면 매우 간단하게 작성할 수 있습니다.

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

이 JavaScript 예제를 살펴보세요. 저는 기능적 스타일의 우아하고 실용적인 기능인 _.map과 _.first를 사용했습니다. 이에 대해 어떻게 생각하시나요?

underscore.js 및 _.map과 같은 함수는 함수형 패러다임의 유용한 예이지만, 이 예와 같이 이들을 하나로 묶는 것은 나에게 약간 혼란스럽습니다. 정말 이렇게 해야 하나요?

더 "기능적"이 되는 방법에 대해 생각하기 시작하면 위의 예를 다음과 같이 다시 작성할 수 있습니다.

// ...a little bit of magic
var firstTwoLetters = map(first(2));

잘 생각해 보면 이 코드 줄은 위의 5줄과 같은 효과를 냅니다. 많은 단어는 단지 매개변수이거나 자리표시자일 뿐입니다. 실제 논리는 맵 함수, 첫 번째 함수 및 상수 2를 의미 있는 방식으로 결합하는 데 있습니다.

여러분 중 일부는 다음과 같이 생각할 수도 있습니다. 이 예의 마법은 무엇입니까? 결국, 어떤 예를 마술적이라고 부르는 것은 자랑하는 것과 비슷합니다. 그렇죠?

위 예의 마법을 설명하기 위해 다음 두 기사를 사용할 계획입니다. 궁금하다면 계속 읽어보세요.

이 블로그 시리즈는 JavaScript 코드에 함수형 프로그래밍의 아름다움을 적용하는 데 도움을 주기 위한 것입니다.

다음 섹션에서는 JavaScript 언어의 다양한 기능적 요소와 비기능적 요소에 대해 논의하겠습니다. 이러한 지식을 통해 우리는 이러한 요소를 통합하여 마음 속에 완전한 기능적 프로그래밍 시스템을 천천히 형성하고 JavaScript에서의 성능을 이해할 수 있습니다.