로다스를 내려놓을 때가 됐어요.

오늘날의 JavaScript 세계에는 비슷한 문제를 약간 다른 방식으로 해결하는 도구가 많이 있다.어떤 공구는 단순성으로 구동되고, 어떤 공구는 구성성으로 구동되며, 또 어떤 공구는 확장성으로 구동된다.Lodash는 날로 심각해지는 문제를 해결하기 위해 만들어진 소수의 라이브러리 중 하나이며, 다행히도 마이크로소프트의 원견으로 인해 이 라이브러리들은 더 이상 존재하지 않는다.
내가 말한 것은 당연히 인터넷 익스플로러 11이다.
lodash가 창립되었을 때 ES6는 웹 개발자들의 눈에 보이는 약간의 미광일 뿐 대부분의 전단 개발자들의 생각과 소망이었다.Bootstrap, jQuery, 밑줄,prototype과 대량의 다른 도구의 세계에서 lodash는 일치하고 뚜렷한 인터페이스를 제공한다.과정, 함수식 프로그래밍, 그리고 우리가 당연하다고 생각하는 모든 장점과 풍부성은 여러 해 후의 일이다.
오늘까지 뛰자;우리는 ES11 시대에 살고 있습니다.브라우저는 더 이상 같은 표준에서 경쟁하지 않습니다.세계에서 가장 많이 사용되는 세 종류의 브라우저는 웹키트나 크롬을 사용하는데, 표준은 일치하며, 대부분의 브라우저는 사용과 행위에 있어서 거의 차이가 없다.IE, Safari, Firefox, 심지어 OS의 버전에 따라 자바스크립트나 CSS를 맞춤형으로 만들 필요가 없습니다. 왜냐하면 모두 조금씩 다르기 때문입니다.
우리는 지금 한 번만 할 수 있을 뿐만 아니라, 아주 잘한다.효율은 지금까지 이렇게 높은 적이 없었다.그러나 그 IE11 트롤은 여전히 그곳 동굴에 살고 있다. 우리는 트롤을 키우고 피할 방법을 찾아야 한다.다행히도, 우리는 core js와 babel 두 가지 전송 도구에 의존할 수 있으며, IE11에서 IEEdge 18까지 지원할 수 있는 ES5와 자바스크립트를 출력할 수 있다.
이것은 우리를 교묘하게 블로그의 주제로 이끌었다. 로다스가 더 필요합니까?

로다스가 필요합니까?
Transpiler, 컴파일러, 구축 도구는 파일 크기 귀속 문제를 다른 방식으로 해결하려고 합니다. 예를 들어 웹 패키지는 트리 진동을 사용하여 사용하지 않은 코드를 식별합니다.그러나lodash는 완고해서 파일 크기를 줄이는 것은 고통스러운 라이브러리이다..get처럼 간단한 것을 사용해도 대량의 코드를 가져올 수 있다.왜?그것은 자신에게 의존하고, 자신의 라이브러리에 있는 도구에 의존한다.cloneDeep는 대량의 코드를 추가한 또 다른 실용 프로그램이다.
100개 이상의 유틸리티 지원이 있으며 대부분은 더 이상 필요하지 않습니다.Babel은 ES6+ 코드를 이전 브라우저와 호환되는 ES5 코드로 교차 컴파일하는 업계 표준입니다.시간의 추이에 따라 전통적인 브라우저의 사용자가 옮겨지면 이렇게 할 필요가 없다.

lodash 팽창을 줄이기 위해 구축 조정
개발자들은lodash가 컴파일링 구축에 가져오는 팽창을 줄일 방법이 거의 없다.하지만 몇 가지 강력한 선택이 있다.

필요한 기능은 lodash/* 또는 lodash.*를 통해서만 가져올 수 있습니다.

const _ = require("lodash"); // typical library import that will bring in the lodash base
const get = require("lodash.get"); // import the specific tool you need, needs to be imported through package.json
const get = require("lodash/get"); // import the specific tool from the lodash base library

lodash 배열/객체 도움말 프로그램을 기본 함수로 대체합니다.

const myArray = [];

// Lodash array fill 10 elements
const fill = require("lodash/fill");
fill(myArray, {foo: "bar"}, 0, 10);

// Native array fill 10 elements
myArray.fill({foo: "bar"}, 0, 10);

당신이 정말 편리한 실용 기능을 필요로 하는지 평가해 보세요. 당신이 정말 필요로 하는지cloneDeep입니까? 아니면merge입니까?Object spread operator 최소한의 코드로 대상을 통합할 수 있다.너는 심지어 더 이상 할 필요가 없다Object.assign.

// Merging objects
const myArray = [...[1, 2]]; // [1, 2]
const myFoo = { ...{foo: "bar"}, bar: "foo"}; // {foo: "bar", bar: "foo"}
const myFoo = { foo: "bar", ...{foo: "qwerty"}}; // {foo: "qwerty"}

Array functions 모든 브라우저에서 지원되며lodash의 많은 기능을 복사합니다

const myArray = [1, 2, 3];
// Map
console.log(myArray.map(val => val * 2)); // [2, 4, 6]

// Reduce
console.log(myArray.reduce((acc, val) => acc + val)); // 6

// Entries
const it = myArray.entries();
for (const entry of it) {
    console.log(entry);
    // [0, 1]
    // [1, 2]
    // [2, 3]
}

// Find
console.log(myArray.find(val => val === 3)); // 3

// Filter
console.log(myArray.filter(val => val > 1)); // [2, 3]

// Includes
console.log(myArray.includes(3)); // true

// Cast array
console.log([1]); // [1]

// Unique
console.log([...new Set([1,1,2,3])]); // [1,2,3]

babel 또는 corejs를 사용하여 ES6+ 코드를 구 브라우저와 호환되는 ES5 코드로 컴파일

JavaScript 핵심 기능을 사용하여 유형 추정 및 확인:

_.isArray([]); //true
Array.isArray([]); //true

_.isNull(null); //true
null === null; //true

_.isObject({}); //true
{} !== null && typeof {} === "object" && Object({}) === {}; //true

_.isBoolean(true); //true
Boolean(true); //true

수학과 날짜에 JavaScript 함수를 사용합니다.

_.now(); //1613434837495
Date.now(); //1613434837495

_.add(6, 4); //10
6 + 4; //10

_.ceil(4.1); //5
Math.ceil(4.1); //5

_.max([1,2,3]); //3
Math.max(...[1,2,3]); //3

JavaScript 객체 함수 사용:

_.assign({a: 0}, {a: 1}, {b: 2}); //{a: 1, b: 2}
{a: 0, ...{a: 1}, ...{b: 2}}; //{a: 1, b: 2}

_.omit({a: 0, b: 1}, ["a"]); //{b: 1}
const {a, ...obj} = {a: 0, b: 1}; //a=0, {b: 1}

_.pick({a: 0, b: 1, c: 2}, ["a", "c"]); //{a: 0, c: 2}
const {b, ...obj} = {a: 0, b: 1, c: 2}; //b=1, {a: 0, c: 2}

JavaScript 컬렉션 명령 사용:

_.forEach([1, 2], val => {});
[1,2].forEach(val => {});

_.find([1, 2], val => {});
[1,2].find(val => {});

_.filter([1,2], val => {});
[1,2].filter(val => {});

// Partition
_.partition([{foo: "bar", active: true},{foo: "foo", active: false}], val => val.active); 
// objects for [["bar"],["foo"]]

const partition = [];
[{foo: "bar", active: true},{foo: "foo", active: false}]
    .forEach(val => {
        if (!Array.isArray(partition[Number(!!val.active)])) partition[Number(!!val.active)] = [];
        partition[Number(!!val.active)].push(val);
    });
// objects for [["bar"],["foo]]

요약
우리 오늘 로다스 필요해?완전히 그렇지는 않습니다. 코어JS와 Babel은 ES6+ 코드를 ES5와 호환되는 코드로 컴파일하는 데 매우 잘하고 있습니다.lodash에서 제공하는 많은 크로스 브라우저 호환 기능은 현재 브라우저에서 로컬로 쉽게 복사할 수 있습니다.merge와cloneDeep에 대해 경량급 옵션이 있고 심지어 원생적인cloneDeep 방법도 있다. 구조에 함수가 포함되지 않으면 예를 들어 사용JSON.parse(JSON.stringify(original))도 있다.
필요에 따라 특정한 기능을 도입할 수 있지만 프로젝트와 응용 프로그램에 특정한 다른 기능을 쉽게 만들 수 있다get.
lodash는 대량의 기능 라이브러리를 제공하지만 대부분의 기능은 더 이상 필요하지 않습니다. 만약 컴파일러가 필요하지 않은 코드를 바꾸지 않거나 전체 응용 프로그램에서 lodash를 사용한다면,lodash를 응용 프로그램에 가져오는 비용은 600kb를 훨씬 초과할 수 있습니다.
ES6 이전에lodash는 절대적인 보석으로 jQuery가 그 당시처럼 다양한 크로스 브라우저 기능을 제공했다.현재 모든 브라우저는 자바스크립트 표준에 대한 처리가 기본적으로 같고 차이가 매우 적다.
JScript, 삼지창, 맥륜의 시대는 이미 지나갔다. 그날의 도구를 계속 사용하지 말고 본토로 가자!