Hướng dẫn why is javascript so frustrating? - tại sao javascript lại gây khó chịu như vậy?

Và làm thế nào bạn có thể tránh phát điên vì chúng

JavaScript là một ngôn ngữ rất linh hoạt cho phép bạn giải quyết cùng một vấn đề từ các quan điểm rất khác nhau. Đồng thời, cộng đồng khổng lồ xung quanh nó liên tục phát hành các ý tưởng và công cụ mới để các nhà phát triển sử dụng.

Điều này đang giúp ngành công nghiệp phát triển web tiến lên với tốc độ rất nhanh. Và đó cũng là lý do tại sao một công nghệ được sử dụng rộng rãi như vậy trong một ngành công nghiệp ngày càng phát triển là rất bực bội đối với những người mới đến-và các nhà phát triển có kinh nghiệm hơn nữa.

Để lại những điều kỳ quặc hài hước để tweet mà bạn có thể thấy với các quy tắc của người vận hành hoặc cưỡng chế (tức là thực hiện Tôi đã thấy các nhà phát triển mới đấu tranh trong lần tiếp xúc đầu tiên của họ với ngôn ngữ.

4 Cách khai báo một chức năng - tất cả đều làm điều tương tự?

Một trong những điều đầu tiên bạn muốn làm khi học một ngôn ngữ mới là hiểu cách khai báo các cấu trúc cơ bản nhất mà bạn sẽ sử dụng trong suốt mã của mình.

Tuy nhiên, với JavaScript, thời điểm bạn bắt đầu nghịch ngợm với các chức năng, bạn phát hiện ra rằng tất cả các tùy chọn này đều có kết quả tương tự (ít nhất là thoạt nhìn):

Thực sự, JavaScript? Tôi có thực sự cần bốn cách khác nhau để làm điều tương tự không?

Được cho phép, họ không làm điều tương tự, nhưng nếu không ai nói với bạn khác, làm thế nào bạn có thể tự mình tìm ra cái đó?

Sử dụng từ khóa function

Đây là cách cơ bản nhất để xác định hàm và nó bao gồm hai ví dụ đầu tiên trong đoạn trích ở trên. Hai chức năng đó hoàn toàn giống nhau khi nói đến các tính năng và khả năng. Trong thực tế, bạn có thể đề cập đến chúng chính xác theo cùng một cách.

Lợi ích duy nhất của việc gán hàm cho một biến (và nó sẽ phải là một được tuyên bố với let thay vì const) là bạn có khả năng gán lại nó để trở thành một thứ khác. Về cơ bản, bạn có thể xác định lại chức năng, đó là điều bạn có thể làm nếu bạn sử dụng cú pháp function name() bình thường.

Sử dụng hàm tạo chức năng

Không phải ai cũng biết về hàm tạo Function, cho phép bạn xác định chức năng mới bằng một chuỗi mã.

Kết quả? Vâng, nó giống như với cú pháp trước đó. Tuy nhiên, hàm tạo này cho phép bạn xác định một chức năng trong thời gian chạy với mã đến từ - theo nghĩa đen - bất cứ nơi nào.

Cái này có an toàn không? Quái gì không! Là người anh em họ thân của hàm eval, với hàm tạo này, bạn phải cẩn thận hơn về nội dung của chuỗi mà bạn biến thành một hàm. Nó có khả năng có logic độc hại bên trong nó. Tuy nhiên, nó cũng cung cấp cho bạn rất nhiều sự linh hoạt trong quá trình thực hiện.

Điều này có hiệu suất không? Không thực hiện như có chức năng được phân tích cú pháp trong giai đoạn phân tích cú pháp. Tuy nhiên, nếu bạn sử dụng hàm tạo này, bạn cần điều này xảy ra trong thời gian chạy, vì vậy hãy để nhãn cho nó một loại có thể, tùy thuộc vào số lượng bạn sử dụng nó.

Và bây giờ bạn cũng có các hàm mũi tên (=>)

Việc bổ sung mới nhất vào không gian chức năng JavaScript là các hàm mũi tên. Đây là một loại chức năng đặc biệt. Chúng không hoạt động chính xác như những cái trước và bạn nên biết về những khác biệt đó bởi vì có nhiều thứ hơn là đường cú pháp:

• Các chức năng mũi tên don lồng có ràng buộc this của riêng họ. Thông thường, các chức năng có cách truy cập vào bối cảnh thực thi (như phạm vi toàn cầu, đối tượng window hoặc nhiều hơn). Tuy nhiên, các chức năng mũi tên don lồng. Điều này có nghĩa là chúng có thể được sử dụng làm phương thức đối tượng và khi được xác định bên trong các chức năng khác (ví dụ như các cuộc gọi lại), chúng có thể sử dụng một cách an toàn tham chiếu this chỉ vào chức năng cha mà không có vấn đề gì.
• Họ không có đối tượng "2" — 2 = 01. Bên trong các hàm bình thường, bạn có quyền truy cập vào đối tượng "2" — 2 = 01, cho phép bạn lặp lại các tham số. Điều này là tuyệt vời để tạo các chức năng với số lượng tham số thay đổi. Các chức năng mũi tên don lồng làm việc theo cách đó. Tuy nhiên, bạn có thể đạt được kết quả tương tự với các tham số REST.
• Bạn có thể sử dụng chúng với "2" — 2 = 03, "2" — 2 = 04 hoặc "2" — 2 = 05. Điều này một lần nữa là do thiếu ràng buộc this, mà các phương pháp này yêu cầu bạn chỉ định.
• Họ có thể được sử dụng làm máy phát điện. Vâng, các chức năng của máy phát điện cũng là một điều. Tuy nhiên, bạn có thể sử dụng các hàm mũi tên làm trình tạo vì từ khóa "2" — 2 = 07 đã giành được công việc bên trong chúng.

Các hàm mũi tên giống như các phiên bản nhẹ của các hàm bình thường và do đó, chúng rất tuyệt vời cho một số kịch bản-đặc biệt là hoạt động như các hàm gọi lại hoặc các hàm một dòng nhanh có thể được đơn giản hóa và giúp mã dễ đọc hơn.

Có quá nhiều lựa chọn để chọn từ

Giống như với các chức năng, hệ sinh thái JavaScript có thể cảm thấy quá sức. Bạn đang muốn tham gia phát triển Frontend? Bạn sẽ chọn khung nào? Nó sẽ được phản ứng, Vue, hoặc có thể góc cạnh?

Điều gì sẽ xảy ra nếu bạn đang tìm kiếm một bundler? Gói web? Rollup? Vite?

Những gì người quản lý gói tốt nhất? Nó là npm hay sợi? Có gì khác biệt? Còn các lựa chọn khác thì sao?

Thành thật mà nói, nếu tôi phải bắt đầu học JavaScript ngày hôm nay, tôi sẽ chỉ bị choáng ngợp. Tôi cũng sẽ khá kiệt sức.

Một trò đùa đang diễn ra về JavaScript là trong thời gian bạn đưa bạn đến chớp mắt, ba khuôn khổ mới đã được phát hành. Và hãy nhìn xem, tôi không ở đây để nói rằng không đúng. Nhưng bạn cũng không cần phải lo lắng về họ.

Ngay cả trong bối cảnh của JavaScript, cho một khung hoặc một công cụ để trở thành tiêu chuẩn mới, thời gian cần phải vượt qua. Được cho phép, luôn có những người chấp nhận sớm sẽ nhảy vào tầm nhìn của một khuôn khổ mới, nhưng bạn không phải như vậy. Bạn có thể chờ đợi nó, chọn một trong những người chơi lớn ngay bây giờ, tập trung vào người đó trong một thời gian, và sau đó bắt đầu nhìn ra.

Tìm hiểu về các lựa chọn thay thế cũng sẽ giúp bạn tốt hơn ở loại bạn đã sử dụng. Điều đó đúng với mọi thứ trong ngành của chúng tôi. Theo thời gian, bạn sẽ bắt đầu thấy các mẫu lặp đi lặp lại giữa các khung, công cụ và thậm chí các ngôn ngữ đến một điểm mà nó sẽ dễ dàng hơn để chọn công nghệ mới.

Phạm vi biến đổi - đặc biệt là với VAR - rất khó hiểu

Nếu bạn sử dụng "2" — 2 = 08 để khai báo các biến của bạn, hãy dừng ngay bây giờ. Dừng nó lại. Cách "2" — 2 = 08 hoạt động chỉ là quá chung chung và có thể dẫn đến sự nhầm lẫn.

Nhưng nếu bạn phải biết, "2" — 2 = 08 hoạt động ở phạm vi chức năng hoặc ở phạm vi toàn cầu. Điều này có nghĩa là nếu bạn khai báo một biến với nó ở bất cứ đâu bên trong một hàm, biến đó sẽ có thể truy cập ở bất cứ đâu trong chức năng đó. Nếu bạn tuyên bố nó bên ngoài, nó sẽ là toàn cầu.

Một số người nghĩ rằng các biến được tuyên bố với "2" — 2 = 08 luôn là toàn cầu (Tôi đã nghe nói rằng một trong nhiều cuộc phỏng vấn). Đó không phải là trường hợp, và đây là một ví dụ:

Đây là một đoạn mã rất ngớ ngẩn, nhưng nó chứng minh quan điểm của tôi. Lưu ý cách bạn có thể truy cập hai biến được xác định bên trong bối cảnh rất rõ ràng (function2 vì nó được khai báo bên trong vòng lặp function3 và function4 vì nó có nghĩa là chỉ mục cho vòng lặp đó). Lý tưởng nhất, bạn không thể truy cập các biến đó.

Còn Const và Let?

Vâng, đó là những người bạn muốn làm việc cùng. Cả hai đều giúp bạn xác định các biến của bạn và cả hai đều sử dụng phạm vi khối. Nói cách khác, chúng sẽ chỉ có thể nhìn thấy - và có thể truy cập - bên trong khối hạn chế nhất mà họ đã tuyên bố.

Nếu bạn khai báo một biến với let bên trong khối của câu lệnh function6 nằm trong khối của vòng function3 bên trong hàm, biến của bạn sẽ chỉ tồn tại bên trong function6.

Điều tương tự cũng xảy ra với các biến const. Sự khác biệt duy nhất giữa những điều này và những cái được tuyên bố với let là bạn có thể gán lại các biến này. Họ hằng số.

Tuy nhiên, hãy chú ý ngôn ngữ tôi đã sử dụng: Tôi đã nói, giá trị của họ có thể thay đổi. Tôi đã nói, họ có thể được chỉ định lại. Đây là một sự khác biệt quan trọng bởi vì trong khi chúng giống nhau đối với các loại cơ bản (như số, chuỗi và booleans), chúng không giống nhau với các loại phức tạp (như đối tượng).

Nếu bạn đang mong đợi các đối tượng của mình là bất biến bởi vì bạn đã tuyên bố chúng là hằng số, thì hãy nghĩ lại. Đoạn trích ở trên cho thấy rằng bạn thực sự có thể thay đổi giá trị của một tham chiếu không đổi. Đầu ra của mã này có thể được nhìn thấy bên dưới:

Tất nhiên, bạn có thể gán một giá trị mới cho let1, nhưng bạn có thể thấy vấn đề tiềm năng mà quan niệm sai lầm này về const có thể gây ra.

Xử lý lỗi trộn với mã async

Mã ASYNC nói chung là một khái niệm mà mọi người chỉ tham gia vào JavaScript don luôn luôn nhận được. Và tôi hiểu nó. Tôi đã mất khá nhiều thời gian để lập bản đồ kiến ​​thức PHP của mình tới JavaScript khi tôi bắt đầu đối phó với Ajax (vâng, tôi đã già đó).

Việc bắt các lỗi xảy ra không đồng bộ không phải lúc nào cũng đơn giản - đặc biệt nếu bạn cho rằng có ít nhất ba cách để viết mã không đồng bộ:

• Sử dụng các chức năng gọi lại. Đây là cách lâu đời nhất, và có lẽ là khó nhất để phát hiện. Các chức năng thực hiện các cuộc gọi async bên trong có thể ném các lỗi như là ngoại lệ, vì vậy khối let3 tiêu chuẩn của bạn đã giành được công việc. Kiểm tra giá trị trả lại của các chức năng này cũng không thể vì chúng không trả lại bất cứ điều gì. Bạn phải dựa vào cuộc gọi lại và mẫu lỗi đầu tiên. Điều này có nghĩa là đảm bảo chức năng gọi lại của bạn đối số đầu tiên của bạn luôn là lỗi từ cuộc gọi không đồng bộ. Nếu đối số đó trống, thì không có lỗi. Nếu không, hành động phù hợp. Đây không phải là một mô hình rất sạch sẽ và các cuộc gọi lại nói chung đã được chứng minh là gây ra mã rất khó đọc-và điều này không giúp ích gì.
• Sử dụng lời hứa. Lời hứa yêu cầu bạn phải bắt lỗi bằng cách sử dụng một phương pháp liên quan đến lời hứa cụ thể: let4. Một lần nữa, trừ khi bạn đến từ một ngăn xếp công nghệ thân thiện không đồng bộ tương tự, hứa hẹn bạn yêu cầu bạn phải thích nghi và suy nghĩ khác biệt. Tuy nhiên, điều cần lưu ý là những lời hứa có khối let3 ngầm bên trong chúng, vì vậy bất kỳ ngoại lệ nào được ném trong cơ thể họ sẽ kích hoạt sự từ chối. Nhìn vào ví dụ sau:

• Sử dụng let6. Và bây giờ, để kết thúc tất cả, cú pháp let6 mới biến mã không đồng bộ thành mã trông đồng bộ và cho phép sử dụng các khối ____33 để nắm bắt các ngoại lệ được ném bởi các hàm async. Tất cả mọi thứ tôi nói đó là có thể với các cuộc gọi lại và lời hứa bây giờ có thể thực hiện được nhờ cú pháp mới này. Yay, không khó hiểu chút nào!

Bạn có thể thấy khối let3 đang bắt được lỗi được ném bởi hàm const0. Giải pháp thay thế này chắc chắn là cách dễ nhất để giải quyết, cách dễ đọc nhất và là người tốt nhất để người mới bắt đầu sử dụng.

Sự kết luận

JavaScript đôi khi có thể bực bội, nhưng chỉ vì chúng ta có xu hướng quá đơn giản hóa nó - đặc biệt là khi chúng ta chỉ bị ướt chân. Có rất nhiều điều để tìm hiểu về ngôn ngữ, và trong khi nó cung cấp rất nhiều sự linh hoạt, nó cũng có rất nhiều quy tắc để ghi nhớ.

Nhưng đừng lo lắng. Chỉ cần nhớ rằng cần có thời gian để làm chủ một ngôn ngữ, và trong khi lỗi mà bạn có thể có vẻ do một hành vi phi logic, mọi thứ đều có một lời giải thích hợp lý.

Thế còn bạn? Điều khó chịu nhất về JavaScript mà bạn đã tìm thấy là gì?