Học JavaScript bằng trí tưởng tượng

theanh

Administrator
Nhân viên
Nhiều năm trước, tôi đã đặt mục tiêu trở thành một lập trình viên cao cấp. Tôi đã đạt được mục tiêu đó! Tôi ước mình có thể nói rằng đó là vấn đề của sự chăm chỉ và kiên trì, nhưng không, thế là chưa đủ. JavaScript đã cản trở tôi, và trong khi vật lộn với nó, tôi đã tình cờ đọc được một câu ngớ ngẩn trong cuốn sách kinh điển của Marijn Habernecker, Eloquent JavaScript. Về chủ đề biến, có đoạn:
“Bạn nên tưởng tượng các ràng buộc như xúc tu chứ không phải là hộp. Chúng không chứa các giá trị; chúng nắm bắt các giá trị — hai ràng buộc có thể tham chiếu đến cùng một giá trị.”

— Marijn Habernecker



Một phép so sánh như thế này thuộc loại so sánh trẻ con, chủ yếu dành cho người mới bắt đầu để hiểu các khái niệm cơ bản. Chúng vui nhộn và giải trí nhưng không phải là thứ sẽ biến bạn thành một nhà phát triển cao cấp.

Nhưng nó khiến tôi chú ý. Ngay cả theo một cách nhỏ, phép ẩn dụ trẻ con này đã giúp tôi trở thành một nhà phát triển tốt hơn. Nó đã khắc phục một hiểu lầm cơ bản: chúng ta không đặt giá trị vào các biến. Nếu các biến hoạt động giống như các thùng hoặc các thùng chứa, thì điều này có thể đúng như thế nào?
Mã:
const count1 = 10;const count2 = count1;
Làm sao có thể có cùng một giá trị 10 trong hai thùng khác nhau? Cùng một thứ không thể ở hai nơi cùng một lúc, đúng không?!

Nhưng phép ẩn dụ về con bạch tuộc đã giải quyết được tình thế tiến thoái lưỡng nan này cho tôi. Hai xúc tu chắc chắn có thể nắm bắt cùng một giá trị! Đó là một hình ảnh trực quan cho thấy bản chất cơ bản của các giá trị! Cho tôi tất cả các tài liệu khoa học máy tính trên thế giới về các biến trong tầm tay tôi, và chúng sẽ không hữu ích với tôi bằng con bạch tuộc tưởng tượng này.

Tại sao tất cả JavaScript không thể giống như thế này?

Tìm kiếm thêm tài liệu học trực quan của tôi​

Tôi nhận thấy một khoảng cách đáng thất vọng giữa việc thực hiện các bài tập vòng lặp và hàm đơn giản mà bạn thấy trong hầu hết các khóa học dành cho người mới bắt đầu và thực sự xây dựng các chương trình.

Vấn đề là gì? Tôi vẫn chưa đạt đến trình độ có thể giải mã hàng đống văn bản kỹ thuật khô khan. Tôi muốn nhiều bạch tuộc hơn!

Vì vậy, tôi đã tìm kiếm chúng ở khắp mọi nơi. Tôi đã quét internet để tìm các tài nguyên học tập trực quan và trừu tượng: Google, YouTube, Medium, TikTok và mọi cuốn sách mà tôi có thể tìm thấy. Tôi phát hiện ra rằng hầu hết các tài liệu “học trực quan” đều phù hợp với một trong ba nhóm sau.

Đầu tiên là trải nghiệm học tập theo trò chơi, như các nền tảng vừa học vừa chơi CodeCombatElevatorSaga. Mặc dù vô cùng sáng tạo và chứa đầy những câu chuyện và nhân vật giúp bạn xây dựng các chương trình thực tế với các mô hình thực tế, nhưng loại hình học tập này lại mang tính thủ tục. Trọng tâm là sử dụng các khái niệm thay vì đi sâu vào bản chất của chúng.



Nhóm thứ hai là cú pháp được biểu diễn bằng đồ họa hoặc giải thích kỹ thuật. Bạn đã từng thấy một loạt biểu tượng cảm xúc hình quả táo và quả cam chưa? Hay sơ đồ vòng lặp sự kiện chưa? Những thứ này có thể chia nhỏ các khái niệm đáng sợ thành một phương tiện trực quan dễ hiểu hơn. Chúng có thể là phương tiện hỗ trợ trực quan mạnh mẽ giúp biến đổi thuật ngữ kỹ thuật khó hiểu. Ví dụ bao gồm loạt bài tuyệt vời “JavaScript Visualized” của bài này của Ram Maheshwari.



Nhóm thứ ba gần hơn với những gì tôi tìm kiếm: trải nghiệm học tập theo phương pháp tương tự. Các nhà phát triển thích một phép tương tự hay. Chúng tôi luôn sử dụng chúng trong các bài đăng trên blog và hướng dẫn bằng video. Chúng giúp giải thích các khái niệm rất kỹ thuật. Một nguồn tài nguyên mà tôi tìm thấy, CodeAnalogies, đặc biệt ấn tượng, với các phép tương tự cho mọi thứ từ mạng phân phối nội dung đến các khuôn khổ MVC.



Nhưng học theo phương pháp tương tự có những hạn chế đối với tôi. Tất cả các phép tương tự đều không liên quan! Chúng không liên quan đến nhau. Chúng rất tuyệt để giúp tôi hiểu một chủ đề riêng lẻ nhưng không giúp tôi nhìn thấy bức tranh toàn cảnh. Vấn đề với JavaScript là mọi thứ đều được kết nối. Làm thế nào để mở rộng phép tương tự của báo chí đối với các đối tượng để mô tả sự kế thừa nguyên mẫu?

Cuối cùng, tôi nhận ra rằng điều tôi muốn nhất là thứ gì đó đáng nhớ. Tôi muốn hợp nhất mọi thứ mình học thành một định dạng trực quan để dễ nhớ lại khi cần — dù là trong một cuộc phỏng vấn hay khi viết mã. Thật không may, hầu hết các phép loại suy đều hoàn toàn dễ quên. Người ta có thể lấy bao nhiêu mảng chó, mèo và chuối?

Xây dựng các biểu diễn trực quan của riêng tôi​

Chỉ có một giải pháp cho vấn đề này: tạo các biểu diễn trực quan của riêng tôi cho cây kiến thức JavaScript của tôi. Nhưng trước tiên, tôi cần tìm ra cách để ghi nhớ một điều gì đó.

Tôi luôn quan tâm đến các phương pháp ghi nhớ theo kiểu ghi nhớ. Đây là những "mẹo" ghi nhớ, chẳng hạn như "cung điện trí nhớ". Chúng giúp mã hóa trực quan lượng lớn thông tin để dễ nhớ lại hơn. Những người tham gia cuộc thi trí nhớ thế giới sử dụng nó để ghi nhớ thứ tự của nhiều bộ bài và chuỗi số ngẫu nhiên.

Nguyên tắc cơ bản là: Bạn có thể lấy bất kỳ ý tưởng nào và biến nó thành hình ảnh. Ví dụ, một mảng có thể là một con cá đuối gai độc dưới đại dương. Điều đó tốt, nhưng vẫn chưa đủ. Bí quyết là làm cho hình ảnh trong đầu trở nên kỳ lạ, buồn cười và lố bịch nhất có thể. Những hình ảnh khác thường là những hình ảnh lưu lại trong trí nhớ.

Bài học lớn đầu tiên của tôi​

Vậy thì, đây là một trong những biểu diễn ghi nhớ đầu tiên của tôi về mảng JavaScript:



Tôi rất tự hào về điều này. Chúng tôi có một người bán hàng rong cá đuối đang bán trái cây, nhắc nhở tôi rằng mảng chứa dữ liệu. Anh ta có một thiết bị hình vuông đặc biệt để nhặt từng mục riêng lẻ, biểu diễn cú pháp dấu ngoặc vuông để chọn mục. Anh ta có một chiếc kính một mắt để nhắc tôi rằng mảng có các phương thức tìm kiếm. Anh ta có một chiếc thòng lọng cao bồi ám chỉ đến các vòng lặp, v.v.

Đó là một mô tả vui nhộn. Nhưng tôi đang cố học JavaScript để kiếm việc! Nếu con cá đuối đeo kính một mắt lố bịch này không giúp tôi trở thành một lập trình viên giỏi hơn thì nó đã phá hỏng mục đích. Bài kiểm tra cuối cùng: tôi có sử dụng hình ảnh này của một người bán hàng rong mảng làm điểm tham chiếu khi viết mã không? Không. Hóa ra là hoàn toàn, hoàn toàn vô dụng.

Tôi không cần một cách để nhớ thuật ngữ mảng. Biết rằng chúng có các phương thức tìm kiếm không cho tôi biết cách thực hiện tìm kiếm. Ngay cả một cái đuôi dao quân đội Thụy Sĩ với tất cả các phương thức mảng chính như .sort(), .push().unshift() cũng tỏ ra vô nghĩa khi tìm kiếm trên Google trong hai giây.

Điều này khó hơn tôi nghĩ. Tôi đã học được bài học lớn đầu tiên của mình:

Bài học lớn thứ hai của tôi​

Sau nhiều lần suy nghĩ và nhiều, rất nhiều lần thử thất bại, tôi đã cố gắng thể hiện một thứ mà tôi luôn vật lộn: hàm. Cấu tạo của một hàm sẽ như thế nào? Tôi đã đưa ra biểu diễn khá tệ này:



Ở trên cùng, chúng ta có những lính dù ngớ ngẩn biểu diễn các tham số. Chúng ta gửi các tham số qua lối vào, ( ), và chúng kết thúc trong một nhóm được chứa (tức là thân hàm). Chúng bắt đầu tranh cãi, và đó là cách chúng ta có thể nhớ các đối số.

Thật không may, điều này cũng đã đi vào thùng lỗi. Biểu diễn cú pháp không hữu ích. Tốt hơn là nên làm quen thông qua nhiều lần luyện tập viết. Cũng có những sai sót nguy hiểm trong phép loại suy. Nó gợi ý rằng các tham số và đối số là giống nhau; điểm khác biệt duy nhất là vị trí của chúng.

Một sự trừu tượng như thế này với lý thuyết sai lầm được đưa vào thực sự sẽ khiến tôi trở thành một nhà phát triển tệ hơn! Tôi cần đào sâu hơn vào bản chất thực sự của mọi thứ.

Sự đột phá​

Giải pháp là trở thành nguyên tử. Tập trung vào khái niệm nhỏ nhất sẽ cung cấp cho tôi lớp đầu tiên mà tôi có thể sử dụng để vẽ nên bức tranh về JavaScript. Tôi quay lại với chú bạch tuộc thân thiện của chúng ta, nơi mọi thứ bắt đầu.

Những xúc tu đang nắm bắt điều gì? Giá trị!

Giá trị thường bị bỏ qua và có vẻ không phải là chìa khóa để mở khóa những bí ẩn của JavaScript. Nhưng ý tưởng đơn giản này là một bước đột phá đối với tôi: nếu mã chảy, chúng ta có thể tưởng tượng dòng chảy đó như một đại dương hoặc một dòng sông. Chúng ta tìm thấy gì trong dòng chảy này? Các đảo!



Các giá trị là các đảo, và mỗi đảo có một vị trí và kích thước cố định. Vậy là xong! Đó chính xác là những gì tôi đang tìm kiếm. Nó vẫn không cải thiện kỹ năng của tôi với tư cách là một nhà phát triển. Nhưng tôi biết nó có tiềm năng.

Từ phép loại suy đến mô hình​

Lớp này đến lớp khác, tôi bắt đầu xây dựng tầm nhìn về JavaScript bằng cách tập trung vào bản chất của mọi thứ và cách chúng liên quan đến những thứ khác. Đầu tiên là các hòn đảo. Sau đó là các vị thần đèn, phù thủy độc ác, tàu bay và người điều khiển rùa. Sự phấn khích của tôi tăng lên khi các lớp nhỏ hơn, các nguyên tắc cơ bản, có thể được kết hợp để tạo ra sự hiểu biết toàn diện về các chủ đề phức tạp hơn như các phép đóng.

Mỗi hình ảnh không phải là một phép loại suy đơn giản. Đó là một mô hình tinh thần — một cách suy nghĩ. Nó cung cấp một lăng kính để diễn giải từng khái niệm nhưng đòi hỏi trí tưởng tượng. Tôi gọi chúng là imagimodels.

Tôi biết từ những lần thử trước rằng việc tập trung vào danh sách là không hiệu quả. Bí mật nằm ở bản chất của mọi thứ chứ không phải chúng làm gì. Khi nghĩ về điều đó, đó chính là vấn đề của tôi khi học JavaScript từ đầu. Cuối cùng, tôi không gặp vấn đề gì khi khiến một thứ gì đó hoạt động. Vấn đề là tôi hầu như không có ý tưởng mơ hồ nào tại sao.

Phát triển một vũ trụ nhiều lớp đáng nhớ​

Với cách tiếp cận này, một thế giới trừu tượng của JavaScript đã được dựng lên:



Hình ảnh này giúp tôi xác định các khái niệm JavaScript cơ bản cho phép gán, phạm vi cục bộ và giá trị nguyên thủy. Tất nhiên, đây không phải là hình ảnh độc lập và bạn sẽ không thể xác định các khái niệm này nếu không có ngữ cảnh. Cần có một câu chuyện để đan xen JavaScript và phép loại suy với nhau.

Một câu chuyện là thứ đưa các khái niệm khác vào bức tranh, theo nghĩa đen. Ở đây, chúng ta có thể thấy một kết thúc:



Hình ảnh tiếp theo sử dụng các phương pháp ghi nhớ để ghi nhớ thuật ngữ hữu ích. Không giống như mảng và tham số, "ngữ cảnh thực thi" giống như thứ tôi sẽ đọc trong sách hướng dẫn của IBM từ những năm 1970. Đó là một thuật ngữ đáng sợ xứng đáng được miêu tả một cách đáng sợ.



Tôi đã tìm thấy mối liên hệ giữa "bối cảnh hành quyết" và cụm từ "người hành quyết nhận được lời nguyền", điều này đã truyền cảm hứng cho một hình minh họa về một đao phủ theo phong cách thời trung cổ cầm một chiếc rìu trên một tay và một lời nguyền, hoặc phép thuật của phù thủy, trên tay kia.

Tại sao lại là phép thuật? Nó không phải ngẫu nhiên. Nó được xây dựng dựa trên các lớp hiện có trước đó đại diện cho các khái niệm phụ khác. Phép thuật này gắn liền với sự hiểu biết của chúng ta về một lệnh gọi hàm và khiến bạn nghĩ đến các pháp sư và phù thủy, đúng không? Và đó là dấu ngoặc đơn trong mọi lệnh gọi hàm.

Điều này đặt ra câu hỏi, hàm là gì? Đó có phải là kết quả của phép lục giác hay phép thực thi? Đó có phải là chính lệnh gọi không? Chỉ có sự hiểu biết chắc chắn về các đối tượng mới giúp tôi xác định được điều thực sự đang diễn ra ở đây.

Như bạn có thể thấy, các lớp trực quan được xây dựng dựa trên nhau, giống như một cái cây có thân cây trung tâm phân nhánh theo các hướng khác nhau. Đó là cây kiến thức mà tôi muốn — không phải là cây chứa mọi chi tiết về JavaScript, mà là một nguồn tài nguyên ghi nhớ trung tâm, thống nhất có thể được so sánh và đánh giá, bổ sung, tranh luận và trên hết là truy xuất khi tôi cần.

Tôi gọi các minh họa của mình về các khái niệm JavaScript là “The Great Sync” và tôi sử dụng chúng để tiếp tục mở rộng sự hiểu biết của mình. Đây cũng là điều tôi hiện sử dụng để dạy người khác.


Lễ kỷ niệm các phương pháp học tập thay thế​

Hành trình học JavaScript của tôi từ thời điểm này có toàn là ánh nắng và hoa cúc không? Việc xây dựng thế giới này có khiến tôi vượt qua mọi bài kiểm tra JavaScript mà tôi cần vượt qua để có được công việc cấp cao đó không?

Không! Tôi chúc may mắn nhất đến bất kỳ ai nghĩ rằng họ có thể học JavaScript chỉ bằng cách xem một vài hình ảnh.

Điều tôi rút ra được lớn nhất từ mọi nỗ lực học tập của mình là: Mặc dù The Great Sync giải quyết được rất nhiều khó khăn cá nhân của tôi với ngôn ngữ này, nhưng liệu nó có tốt hơn bất kỳ tài nguyên nào mà tôi đã đề cập không? Nó có hữu ích gì nếu không có mã hóa thực tế — quá trình không mệt mỏi và đau đớn khi cố gắng làm cho mã của bạn hoạt động? Chắc chắn là không.

Đây là một công cụ, trong số nhiều công cụ, để "nhìn" JavaScript theo cách khác và thoát khỏi sự giới hạn của trình soạn thảo mã hoặc hướng dẫn trên YouTube.

Tất cả các cách tiếp cận này đều tôn vinh sự đa dạng và tiềm năng sáng tạo vô hạn của trải nghiệm học tập. Và chúng ta càng có nhiều, thì những người học bị mắc kẹt trong JavaScript càng có thể khám phá ra những con đường mới để hiểu.

Đọc thêm trên Tạp chí Smashing​

  • Các API JavaScript mà bạn chưa biết
  • Các công cụ học tập tương tác dành cho nhà phát triển front-end
  • Hướng dẫn về hình ảnh hóa âm thanh bằng JavaScript và GSAP
  • Khi CSS không đủ: Các yêu cầu của JavaScript đối với các thành phần có thể truy cập
 
Back
Bên trên