"Thọc sâu" (deep dive) vào JS

#1

Chúng ta cũng biết em JS khá là đỏng đảnh và khó hiểu. Thể nên, bọn Tây thường hay dùng từ “deep dive” để ám chỉ cần phải chọc sâu vô sau khi vờn vờn làm quen với em ấy. Mình lập topic này mỗi ngày post 3 câu hỏi hack-não một chút về JS được không nhỉ (2 ngày post 1 lần) cho vui:

+Câu 1: Tại sao lại có hoisting trong JS?
+Câu 2: Trong IIFE (ify), tại sao lại cần 2 ngoặc tròn ngoài cùng.
Ví dụ:

( function(document, cookie, callback){
   //code ở đây nhé
  }(this, this.cookie, googleCallback)
)

+Câu 3: Sự khác nhau giữa jQuery.each (aka $.each) và jQuery(“li”).each (aka $(“li”).each) là gì?

Nếu chương trình thành công, mình sẽ làm tương tự với các ngôn ngữ khác như PHP, Python, Perl, Ruby, …

4 Likes
#2

Ngoài ra, mình sẽ mỗi tuần post khoảng 4 challenge về JS, mọi người có thể vào đây test cho vui:

Phần thưởng sẽ là kha khá hackos và có lẽ mình sẽ set time để tổng kết 1st, 2nd, 3rd với các phần thưởng là các hoá đơn sách nhỉ?

2 Likes
#3

Bạn nào tự tin vào kiến thức JS của mình, thử làm quiz này xem sao.

[iframe id=“quizWidget-275957” width=“100%” height=“700px” frameborder=“0” border=“none” src=“https://www.boombox.com/widget/quiz/fi9xdWl6emVzLzI3NTk1Nw”][/iframe].

Link quiz: https://www.qzzr.com/c/quiz/275957/javascript-function

p/s: sao không nhúng được iframe nhỉ? @ltd xem có thể cài cái plugin này được k https://github.com/codeart/discourse-iframe

#4

Quiz 1 chút về ES6 (giờ là thời đại mới, năm 2016 rồi, ai lại vẫn viết code của ES3 hoặc ES5, thời năm 2000 hoặc 2009). Giờ phải tập code bằng ES6 thôi.

Về cơ bản, ES6 có 1 số điểm mới sau: https://github.com/addyosmani/es6-equivalents-in-es5

  • Hỗ trợ syntatic sugar (các kiểu đà điểu: lamda, arrow, rest params, proxy, spread …)
  • Hỗ trợ class (giúp cho OOP dễ hơn rất nhiều, đỡ phải viết closure siêu lằng nhằng)
  • Hỗ trợ modules (import, export) đơn gian, tránh bị conflict giuẵ các vendor với nhau.
    Bảng compatible của các browser với ES6 (đa phần là ok, chỉ có mobile browser của android thì hơi lởm, có thể bỏ qua, vì giờ android mặc định cài Chrome rồi)
    https://kangax.github.io/compat-table/es6/
    Học ES6 thì đỡ phải học Swift3 vì 80% cú pháp giống nhau ^^ (sau chuyển sang làm iOS cũng ngon)

[iframe id=“quizWidget-280638” width=“100%” height=“700px” frameborder=“0” border=“none” src=“https://www.boombox.com/widget/quiz/fi9xdWl6emVzLzI4MDYzOA”][/iframe]

Link quiz: https://www.qzzr.com/c/quiz/280638/es6-how-many-new-features-do-you-know

Comment số điểm đạt được nhé. Có thể làm lại nhiều lần ^^ (comment số điểm lần 1, lần 2, …)

1 Like
#5

Dựa vào câu hỏi và đáp án suy luận cũng trúng 60-69% thầy ơi :))

#6

quá khoai cho 1 bài test :fearful:

6491816623079424.png1351×672 32.5 KB

He, còn về mấy câu hỏi hack não thì em xin chia sẻ suy nghĩ chủa mình như sau:

+Câu 1: Tại sao lại có hoisting trong JS?

Muốn dùng biến tất nhiên mình phải khai báo trước :slight_smile: , mà script language nói chung và javascript nói riêng là hướng đến tính mèm dẻo và gần với ngôn ngữ tự nhiên nhất có thể nên có lẽ mấy ông não to nghĩ ra JS đã cho nó thêm một tính năng đó là hosting (dùng trước khai báo sau). Chính đặc điểm này lại góp phần tạo ra một em JS đầy thú vị và đôi lúc khó đoán :blush:.

+Câu 2: Trong IIFE (ify), tại sao lại cần 2 ngoặc tròn ngoài cùng.

phần bên trong ngoặc là declare còn ngoặc lại để trình thông dịch hiểu là một biểu thức và thực thi luôn.

+Câu 3: Sự khác nhau giữa jQuery.each (aka $.each) và jQuery(“li”).each (aka $(“li”).each) là gì?

sưj khác nhau lớn nhất ở đây có lẽ là contex, jQuery.each nhận một tham số array để duyệt theo, còn jQuery(“li”).each duyệt trên một đối tượng DomCollection. Cả hai đều bind call back với phần tử đang duyệt tới. jQuery(“li”).each là một method của DomCollection jQuery.fn.each = function ..... nên ta có thể viết

jQuery('li').each(doSomething).each(doSomethingElse);

còn jQuery.each không phải một method của Array nên không thể viết:

jQuery.each(someArray, doSomething).each(doSomethingElse);

I :heart: javascript because she is sexy :smiley:

1 Like
#7

Rất cám ơn Minh_meo, mai rảnh mình sẽ post câu trả lời theo ý kiến cá nhân nhé.
Đặt gạch ở đây trước.

#8

Sai sai thi phải, mới đọc khai niệm thì hoisting thì là hành vi mặc định của browser luôn chuyển việc khai bao biến lên đầu dù cho khai báo (chỉ khai báo không init) ở chỗ nào đi nữa.
Cái hoisting nếu không hiểu thì dê gây bug, mà tại sao js lại có hoisting thì cũng không rõ. :smiley:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?