Tag Archives: javascript

Vòng lặp trong JavaScript và sự thấu hiểu phụ nữ.

I. Lời mở

Có người nói rằng Code cũng như một người con gái vậy, đôi khi họ là tuýp người nóng nảy breakpoint hiện đầy trên trán, họ có thể đưa ra những lời nóng nảy mà chảy ra bug;  có lúc họ lại hiền hòa, êm dịu biết chiều lòng người. Dù là tuýp người nào thì việc khởi đầu và tiếp cận với một người phụ nữ là khó, không phải ai cũng làm được. Một lập trình viên một khi đã làm chủ được những dòng code, họ hiểu được mình đang kiến tạo những gì, họ biết vấn đề cần giải quyết ở đâu, họ nâng lên được thì họ có thể đặt xuống được. Vì vậy qua bài viết này, mình mong mọi người sẽ có một cái nhìn mới mẻ về hành trình code dạo của một lập trình viên cũng như tích lũy thêm hành trang để có thể chinh phục cô nàng thú vị JavaScript này nha. 

Chủ đề của hôm nay đó là: vòng lặp.

II. Hiểu nàng

Đầu tiên bản thân chúng ta phải thể hiện được sự quan tâm, thể hiện được thành ý của mình với nàng. Bạn chào buổi sáng hàng ngày, bạn nhắn tin chúc ngủ ngon mỗi tối. Bạn, chính bạn đang nằm trong một vòng lặp hàng ngày do chính bạn tạo ra. JS cũng có những vòng lặp, vòng lặp sinh ra là để giúp chúng ta thực hiện những thao tác lặp lại mà không phải viết nhiều dòng mã cồng kềnh. Những dòng mã cồng kềnh sẽ khó để thấu hiểu, khó để chỉnh sửa hệt như phụ nữ vậy. Và tất nhiên bất kì một hành động gì trong nhân gian đều là điều kiện ảnh hưởng lẫn nhau, tác động đến hành động lặp của bạn. Khi chúng ta kiến trúc một vòng lặp, bạn cần phải lưu ý đến điều kiện của vòng lặp (thứ tác động đến hành động lặp). Các vòng lặp sẽ dừng lại hay chuyển hướng gọi hàm khác khi đáp ứng đủ điều kiện mà bạn đưa ra.

Ảnh minh họa
Ví dụ: khi bạn có một loạt các ý tưởng để mở lời tại sao không thử hết các trường hợp.

Ảnh minh họa
Và ta được kết quả như sau

Như bạn thấy đấy thay vì bạn phải mất thời gian nhập từng dòng tin nhắn thì bạn chỉ cần có một vòng for() việc viết 1 lúc nhiều tin nhắn sẽ dễ dàng hơn. Đó chính là ý nghĩa của vòng lặp trong JS.
Vòng lặp trong JS có thể chia làm 2 dạng được dùng rộng rãi: vòng lặp for() và vòng lặp while()
for() sẽ hữu dụng khi bạn muốn chạy những cụm mã nhiều lần với những giá trị khác nhau cho mỗi lần. Như ở ví dụ trên mỗi lần mình lặp lại là một giá trị khác của tin nhắn.

  • Vòng lặp for() sẽ bao gồm những dạng:
    • for lặp lại hành động nhiều lần.
    • for/in lặp lại hành động theo các thuộc tính (properties) của đối tượng (object).
    • for/of lặp lại hành động thông qua các giá trị của một đối tượng (object).

while() sẽ hữu dụng khi bạn muốn chạy những cụm mã trong khi điều kiện bên trong ngoặc vẫn đúng.

Ảnh minh họa
Điều kiện trong ngoặc được đưa ra là (i<4) miễn là khi (i<4) việc lặp vẫn được tiếp tục và ta sẽ được kết quả:
Ảnh minh họa
  • while() sẽ bao gồm những dạng sau:
  • while và do/while lặp lại hành động trong khi điều kiện đưa ra vẫn đúng.

III. Hành động tốt

Một khi bạn đã nắm bắt được rằng: “ À thì ra JS có vòng lặp, mục đích của vòng lặp sinh ra để làm gì, có những vòng lặp nào” thì  bạn đã qua giai đoạn hiểu nàng. Tiếp tới, dựa vào những gì chúng ta biết được mà tấn công thể hiện bản thân thôi.

A. Hành động tốt For()

Ảnh minh họa
  1. Statement 1: được thực hiện một lần duy nhất khi bắt đầu vòng lặp. 
  2. Statement 2: xác định điều kiện để thực thi việc lặp. Đây sẽ là chốt chặn để việc lặp có được tiếp tục hay không.
  3. Statement 3: được thực thi mọi lúc trong suốt vòng lặp.
Ảnh minh họa
Bạn hãy thử test để biết kết quả xem!!!

Ví dụ: để in ra nỗi niềm tâm tư như ví dụ trước bạn có thể dùng for thay vì while: với Statement 1 thiết lập giá trị đầu cho i trước vòng lặp và chỉ thực hiện 1 lần duy nhất.
– Statement 2 xác định điều kiện để vòng lặp hành động. Khi tình yêu chưa tới được 3000.
– Statement 3 tăng giá trị tình yêu lên 1000 sau mỗi vòng lặp cho đến khi tình yêu của bạn đủ 3000.

Một vài chú ý cho hành động tốt for() mà mình nghĩ bạn nên biết:
– Statement 1 có thể có hoặc không, công nàng JS này không quan tâm điều kiện ban đầu của bạn là gì, chỉ cần bạn biết nắm bắt thời cơ ghi điểm là ok. Thay vì khai báo i = 0; bạn có thể khai báo từ ban đầu khi khởi tạo: var i = 0; thế là ta bỏ qua được Statement 1 rồi. 

Ảnh minh họa


– Statement 2 dùng để đánh giá biến điều kiện mà bạn đã khởi tạo để quyết định dừng vòng lặp hay không. Statement 2 cũng có thể có hoặc không, nếu bạn không muốn để Statement 2 thì bạn có thể sử dụng câu lệnh điều kiện (if/then/else) và break; để dừng vòng lặp đúng lúc. Nếu không có lệnh dừng thì vòng lặp sẽ là vô hạn, ảnh hưởng xấu tới browser cũng như là mã lệnh của bạn. Không cô gái nào thích những chàng trai nói liên tục mà!!
– Statement 3 có thể có hoặc không, nó cũng dùng để cài đặt giá trị sau mỗi lần lặp cho biến điều kiện. Bạn có thể cài đặt giá trị cho biến i ở bên trong vòng for() thay cho Statement 3.
– Tuy nhiên dù là trường hợp nào thì vòng lặp for() cần ít nhất một Statement trong 3 Statement. Một vòng lặp for() không có Statement là một vòng lặp vô nghĩa và không chạy được.

Ảnh minh họa
↦ tình yêu này sẽ không đi về đâu!!

B. Hành động tốt for/in

Khi được bạn tiếp cận, người phụ nữ sẽ có những cái nhìn tổng thể về bạn qua đánh giá, con gái thường yêu bằng mắt mà. Ví dụ cô nàng này đã đưa ra các đánh giá bên ngoài về anh Đạt và liệt kê lại.

Ảnh minh họa
Ảnh minh họa
Và đây là kết quả sau khi chạy mã.

for/in sử dụng để lặp lại/ sử dụng các thuộc tính trong một đối tượng lần lượt. Bạn nên dùng for/in khi muốn gọi ra các thuộc tính(properties) của một đối tượng (Object) mà không phải gọi từng thuộc tính một bằng cách Object[properties]. Như ở trên anh Đạt có những đặc điểm: Tên, tuổi, số đo 4 vòng.

C. Hành động tốt for/of

  1. Cô gái bạn chọn có một list anh trai mưa mà bạn cần phải biết tên và làm thân.
Ảnh minh họa
Đối tượng được dùng cho for/in có thể là một mảng(Array), một xâu(String), Maps, NodeList,….
Vòng lặp này sẽ có ích cho việc liệt kê từng phần tử của một đối tượng.
Và đây là kết quả thu được.

D. Hành động tốt while và hành động tốt do/while

Cả hai hành động tốt này đều có kiểu cấu trúc giống nhau:

Ảnh minh họa
While()
Ảnh minh họa
do while()

Chú ý rằng condition bên trong dấu ngoặc là không thể không có vì nó là điều kiện để vòng lặp chạy.
Điều khác biệt duy nhất giữa 2 hành động tốt này đó chính là:
– Với vòng lặp while() mã lệnh sẽ được thực hiện sau khi điều kiện đưa ra được thỏa mãn.
– Với vòng lặp do/while() mã lệnh sẽ thực hiện một lần trước khi kiểm tra. Có nghĩa là khi điều kiện trả về trong condition là false đoạn mã lệnh bên trong do{} vẫn có thể chạy ít nhất 1 lần nữa trước khi vòng lặp được dừng. Như khi cô nàng này muốn dừng cuộc nói chuyện mà bạn vẫn cố gắng nhắn nốt dòng tin cuối. Trong vài trường hợp thì điều này là không cần thiết và có thể khiến kết quả đưa ra không như ý.
Để minh họa cho sự khác nhau này mình xin đưa ra ví dụ sau:

Ảnh minh họa
Ở đây mình khởi tạo i = 1 và in ra màn hình và tăng giá trị sau mỗi lần lặp
Ảnh minh họa
Và kết quả in ra được 9 số từ 1 tới 9.

Còn nếu sử dụng do/while() với mục đích tương tự:

Ảnh minh họa

Kết quả thu được sau khi dùng vòng lặp do while là:

Ảnh minh họa

Đó, trước khi điều kiện (i<10) được trả về false thì phần mã trong thân vòng lặp đã được thực hiện và in ra The number is 10. 
Gợi ý của mình đưa ra là tùy vào trường hợp xử lý điều kiện các bạn nên chọn cho mình vòng lặp phù hợp nhất. Phải có lúc nhu có lúc cương thì đại nghiệp mới có thể thành công.

IV. Lời kết

Và đó là những gì mình có thể đem tới cho các bạn trong lần này. Mong rằng qua bài này các bạn sẽ hiểu rằng vòng lặp sinh ra với mục đích thực hiện những công việc cần lặp lại nhiều lần dễ dàng hơn. Cùng với đó là biết cách lựa chọn những vòng lặp cho mình vào từng trường hợp để tối ưu hóa kết quả mong muốn.
Câu cuối dành cho các bạn, trong những kì quan trên thế giới, phụ nữ là điều khó nắm bắt nhất, khó để thấu hiểu nhất vì vậy những lập trình viên như chúng ta cần phải chăm chỉ mày mò tìm hiểu, cần phải kiên trì thì mới đơm được trái ngọt cuối cùng.

Những điều thú vị về console API trong Java Script

Console API

Trong quá trình học tập cũng như làm việc chắc hẳn những lập trình viên như chúng ta cũng sẽ gặp phải lỗi, không ít thì nhiều =)) Mỗi lúc như vậy thì các coder tài ba lại dùng mọi cách để debug xem lỗi ở đâu mà sửa, việc debug đã gắn liền với các lập trình viên trở thành một phần không thể thiếu trong cuộc sống cũng như đặc trưng của cái nghề “việc nhẹ lương cao” này rồi.

Nếu đem so sánh các công cụ debugger chuyên nghiệp của các IDE hay browser với console.log() của chúng ta thì đó là một cuộc chiến không cân sức. Tuy nhiên console API còn nhiều điểu hay ho hơn chứ không chỉ có mỗi console.log() đâu nhé. Hơn nữa chúng ta cũng cần biết cách debug với console API vì mỗi lập trình viên chuyên nghiệp không thể thiếu được kĩ năng quan trọng này. Trong bài viết này các bạn và mình sẽ cùng nhau tìm hiểu xem console API có những gì thú vị nhé!

Console.log()

Chắc hẳn ai làm lập trình cũng biết làm log() huyền thoại này. console.log() sẽ in ra chuỗi, số, object được truyền vào nó. Bạn có thể truyền bất kỳ object nào trong JS vào console.log() và nó sẽ in ra màn hình console cho bạn.

Sử dụng log() để in ra các đối tượng khác nhau

Tuy nhiên các tham số trong nó thì chưa chắc tất cả mọi người đã biết, bảng dưới là thông tin một số tham số trong console.log()

Cú phápÝ nghĩa
%o / %OThay thế object
%d / %iThay thế số nguyên
%sThay thế chuỗi
%fThay thế số thực
%cThay đổi style

Một số ví dụ:

console.log('Hello %o',{name:'Nguyen Tuan Quang', department:'blockchain'},'!' );

Kết quả:

Sử dụng tham số trong console.log()

Tương tự với %d,%s,%f. Với %c thì hơi đặc biệt hơn khi ta có thể chèn thêm css vào đây:

let css = "text-shadow: -1px -1px hsl(0,100%,50%),1px 1px hsl(27, 100%, 50%),3px 2px hsl(54, 100%, 50%),5px 3px hsl(81, 100%, 50%),7px 4px hsl(135, 100%, 50%),9px 5px hsl(162, 100%, 50%),11px 6px hsl(189, 100%, 50%),13px 7px hsl(243, 100%, 50%),14px 8px hsl(270, 100%, 50%),16px 9px hsl(297, 100%, 50%); font-size: 40px;";
console.log("%c Style: Sun*", css);
Tham số %c trong console.log()

Có phải bạn thấy sặc sỡ đúng không nào? Khi vào cửa sổ console khi đang sử dụng Facebook bạn sẽ thấy dòng chữ STOP to và màu đỏ, cũng như những dòng cảnh báo ở dưới. Và chúng được tạo ra bằng cách console.log() với %c đó.

Console.dir()

Hàm dir() này lúc đầu mình định không chia sẻ chi tiết nhưng thấy khá hay nên mình đặt ngay sau console.log(). Với console.dir() bạn có thể hiển thị dữ liệu theo dạng cây phân cấp, bạn có thể tương tác để xem các thuộc tính bên trong. Ví dụ:

console.dir() giúp hiển thị các thuộc tính bên trong

Rất tiện lợi phải không nào, khi làm việc với bất kì đối tượng nào bạn chỉ cần dir() ra là có thể lấy được các giá trị thuộc tính của nó một cách dễ dàng.

Khi sử dụng với một đối tượng HTML, bạn sẽ thấy console.log() hiển thị dạng cấu trúc HTML của đối tượng đó, còn console.dir() sẽ hiển thị các thuộc tính của đối tượng.

console-log-vs-dir
Khác biệt giữa log() và dir()

Chắc hẳn bạn đã nghi ra cần sử dụng dir() vào lúc nào rồi chứ?

Console.table()

Ngoài việc in ra màn hình console bằng console.log() thì chúng ta có thể dùng console.table(). Hàm này rất hữu ích khi làm việc với mảng, object, và dữ liệu dạng JSON. Chẳng hạn như ví dụ sau:

var car1 = { name : "Audi", model : "A4" }
var car2 = { name : "Volvo", model : "XC90" }
var car3 = { name : "Ford", model : "Fusion" }

console.table([car1, car2, car3]);
In thông tin với console.table()

Các phần tử đối tượng hay mảng sẽ được in ra trên một dòng với số cột là tên các key, thuộc tính và giá trị của phần tử. Chắc hẳn nhìn sẽ trực quan hơn log() rất nhiều đúng không nào.

Console.clear()

Khi chúng ta viết quá nhiều lệnh thì màn hình console sẽ có một mớ hỗn độn và trông rất rối mắt. Cũng giống như lệnh xóa màn hình trong C thì console.clear() sẽ xóa sạch màn hình console của bạn giúp bạn thực hiện những lệnh tiếp theo với không gian làm việc sạch sẽ. Có lẽ bạn sẽ thích hàm này khi làm việc đó.

Xóa màn hình với console.clear()

Console.count()

Hàm console.count([label]) trả về số lần được gọi của đối tượng truyền vào trong count(). Nếu không có tham số sẽ mặc định trả về số lần được gọi với label default.

Ví dụ:

for (i = 0; i < 10; i++) {
  console.count();
}

Kết quả sẽ là:

console.count() với tham số mặc định

Nếu truyền tham số vào hàm count() sẽ trả về số lần gọi function với label đã truyền vào, lưu ý là tuy cùng truyền vào một function nhưng với các giá trị label khác nhau thì hàm count() sẽ thực hiện độc lập, không cộng dồn.

Có thể truyền label vào console.count()

Console.group()

console.group() cho biết là sẽ bắt đầu một nhóm các phương thức trong màn hình console. Tất cả các câu lệnh hay thông bào tiếp theo sẽ nằm trong nhóm này. Để kết thúc nhóm ta sử dụng lệnh console.groupEnd()

console.group() nhóm các phương thức tiếp theo được gọi

Còn nữa, phương thức console.groupCollapsed(label) biểu thị sự bắt đầu của một nhóm thông báo bị thu gọn. Tất cả những hàm được gọi tiếp theo sẽ được nhóm vào một label, chúng ta có thể nhấn vào label để mở rộng hay thu gọn nhóm.

console.groupCollapsed() giúp tạo một nhóm có thể thu gọn

Console.trace()

Đây là một hàm rất hữu ích trong việc debug. console.trace() sẽ in ra nguồn gốc đối tượng mà dẫn đến câu lệnh gọi này. Sẽ rất hữu ích khi truy code flow. Câu này nếu thử ngay vào browser console thì sẽ không có ý nghĩa lắm. Để hiểu rõ hơn bạn cần cho nó vào trong code của mình để xem.

Đây là một ví dụ:

Sử dụng console.trace()

Console.warn(), Console.error()

Hai hàm này chức năng cũng giống như console.log() thôi nhưng sẽ hiển thị với màu và kiểu đặc trưng. warn() là cảnh báo nên sẽ có màu vàng còn error() sẽ có màu đỏ để hiển thị lỗi. Các bạn hãy tự thử trên console để xem nó thế nào nhé!

console.warn("This is a warning!");
console.error("This is an error!");

Console. assert()

Với hàm assert() tham số đầu tiên của nó phải là boolean. Nếu tham số đầu tiên trả về true thì nó cũng ko làm gì luôn. Tuy nhiên nếu ngược lại thì các tham số tiếp theo sẽ được in ra giống console.error().

Ví dụ:

Console.assert()

Timing

Hàm này khá hay ho, giúp bạn đo lường thời gian thực thi (một cách “chân tay”). Cũng dễ hiểu thôi nên các bạn có thể tự thử nhé.

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms

Mở rộng

Ngoài ra còn một số hàm nữa trong console API mà mình liệt kê ở dưới mà không diễn giải chi tiết cho các bạn. Các bạn có thể tham khảo và nếu phù hợp có thể áp dụng cho công việc của mình:

  1. countReset()
  2. debug()
  3. dirxml()
  4. info()
  5. profile()
  6. profileEnd()

Kết luận

Vậy là chúng ta đã đi qua một lượt những thứ quan trọng về console api trong Java Script. Với những kiến thức trên hi vọng các bạn sẽ tự tin hơn trong lập trình cũng như debug code với console, hiểu các hàm trong console dùng vào mục đích gì. Mình xin kết thúc bài viết ở đây và cảm ơn các bạn đã đọc đến phần cuối cùng này!

Mọi thông tin tham khảo về console API các bạn có thể truy cập tại: https://developer.mozilla.org/en-US/docs/Web/API/Console

Rule Style Code trong Javascript và câu chuyện từ đất nước mặt trời mọc

Nếu có dịp ghé qua Nhật Bản và đi đến các trung tâm tâm thương mại hay bến tàu điện ngầm, bạn sẽ thấy người dân ở đây khi đi thang cuốn đều xếp gọn sang một bên. Nhiều bạn sẽ tự hỏi tại sao người ta phải làm như vậy, đứng như thế thì có tác dụng gì. Thực ra việc gì cũng có lý do của nó. Ở Nhật, vào những giờ cao điểm, lượng người qua lại ở những nơi công cộng là rất lớn, mà người Nhật lại thường dùng phương tiện công cộng để đi lại, vì vậy việc mọi người đứng dạt sang một bên chính là để nhường một lối đi cho những người đang muộn giờ làm có thể đi nhanh hơn mà không phải xếp hàng để họ kịp bắt chuyến tàu hay chuyến xe đến nơi làm việc.

Hình ảnh người Nhật khi đi thang cuốn tại Osaka

Một việc làm đơn giản mà ý nghĩa vôc cùng sâu sắc phải không các bạn. Đến đây, nhiều bạn đặt ra câu hỏi: câu chuyện đó có liên quan gì đến Rule style code trong javascript? Trước khi nếu ra ý kiến của bản thân mình về vấn đề này, chúng ta hãy cùng nhau khám phá xem Rule style code là gì và được sử dụng như thế nào nhé.

Rule style code là tập hợp những quy tắc ngầm của anh em Dev khi viết mã Js để code Js trông sáng sủa và sạch sẽ hơn. Trong bài viết này mình sẽ chỉ nêu ra một vài quy tắc thông dụng và phổ biến.

1. Sử dụng 2 space cho indent
function hello (name) {
console.log(‘hi’, name) //indent is 2 space
}

2. Sử dụng nháy đơn cho ” ‘ ” cho string
console.log(‘hello there’) // ✓ ok
console.log(“hello there”) // ✗ avoid


3. Thêm một space sau keyword của js
if (condition) { … } // ✓ ok
if(condition) { … } // ✗ avoid


4. Thêm một space trước dấu mở ngoặc đơn trong định nghĩa function
function name (arg) { … } // ✓ ok
function name(arg) { … } // ✗ avoid


5. Trước và sau toán tử Infix là space
// ✓ ok
var x = 2
var message = ‘hello, ‘ + name + ‘!’


// ✗ avoid
var x=2
var message = ‘hello, ‘+name+’!’


6. Sau dấu ‘ , ‘ là một space
// ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { … }


7. Giữ các câu lệnh else cùng dòng với dâu ngoặc nhọn của chúng
// ✓ ok
if (condition) {
// …
} else {
// …
}

// ✓ avoid
if (condition) {
// …
}
else {
// …
}


8. Câu lệnh if nhiều dòng phải dùng dấu ngoặc nhọn ‘{}’
// ✓ ok
if (options.quiet !== true) {
console.log(‘done’)
}
// ✓ avoid
if (options.quiet !== true)
console.log(‘done’)

9. Nhiều dòng trắng liên tiếp là không được phép
// ✓ ok
var value = ‘hello world’
console.log(value)

// ✓ avoid
var value = ‘hello world’


console.log(value)

Okay, vậy là mình đã cùng các bạn điểm qua một số quy tắc viết Js. Quay lại câu chuyện ở đầu bài viết, như các bạn thấy đấy, nếu người ta không chịu đứng dạt hết sang một bên thì cũng chẳng ai làm gì được họ. Vì chẳng có luật lệ nào quy định phải đứng như thế nào khi đi thang cuốn cả. Nhưng người Nhật vẫn rất tuân thủ điều này, và ý nghĩa sâu sắc của nó cùng hình ảnh văn minh này đã cho chúng ta thấy văn hóa và ý thức kỷ luật của con người Nhật Bản. Tương tự, đối với các lập trình viên như chúng ta, chẳng ai bắt bạn phải viết code như trong Rule style code cả, nhưng đừng để sếp, đồng nghiệp đánh giá bạn khi nhìn thấy những dòng code xấu xó, lộn xộn, hay chính bản thân bạn cũng phải khó chịu khi đọc lại những gì mình viết ra. Hãy trân trọng những dòng code như những đứa con của mình. Bạn đã mất rất nhiều thời gian và tâm huyết để cho code của bạn chạy được, tại sao lại không dành chút thời gian để cho nó đẹp mắt hơn. Tốt gỗ thì hơn tốt nước sơn, nhưng nếu cả gỗ và nước sơn đều tốt càng tuyệt vời, đúng không nào?



== và === “đép” nên “yêu” ai ?

Khi bắt đầu tìm hiểu ngôn ngữ javascript, nếu bạn gặp khó khăn trong việc lựa chọn == hay === khi so sánh điều kiện. Bài viết này chính là bí kíp dành cho bạn :)). Nào chúng ta cùng tìm hiểu tại sao nhé!

Chuyện kể rằng: Ngày nảy ngày nay, gia đình javascript có 2 cô con gái xinh đẹp, thùy mị, đang độ tuổi “cập kê” là =====. Bỗng 1 ngày nọ có chàng Đép (dev) làng bên đi ngang qua bị thu hút bởi vẻ đẹp của cả 2 bàn ngỏ ý muốn “tìm hiểu” và kết duyên với 1 trong 2 nàng. Tuy nhiên, chàng “Đép” (dev) lại chưa biết gì về cả 2 mà chỉ nghe qua mấy bà hàng xóm C, C++, Java… kể lại. Vốn không mấy tin chuyện nghe đồn, “Đép” (dev) nhà ta bèn gặp anh “Gu-go-le” (google, gọi tắt là “Gu”) nổi tiếng “quan hệ rộng”, hiểu biết sâu để xin cách làm quen 2 nàng. Nghe “Đép” (dev) kể xong ngọn nguồn, anh “Gu” vỗ đùi đèn đét phấn khởi nói: “2 em nó nổi tiếng vậy mà giờ chú mới biết à. Kém lắm! Kém lắm!” và vỗ ngực nói: “Nếu không biết thì ngồi đây, làm ấm chè, để anh nói cho mà nghe”.

Khi so sánh == và === ta thường bắt gặp tình huống khá là “quái” như sau.

“Đép” tròn xoe mắt hỏi tiếp: “Sao lại có sự khác biệt như vậy hả anh ?”. Lão “Gu” ha hả cười.

  • Khi so sánh, === chỉ trả về true nếu như cả hai toán hạng đều cùng một kiểu và có cùng giá trị. Nếu so sánh khác kiểu, kết quả sẽ trả về false.
  • Khi so sánh, == sẽ cố gắng chuyển đổi kiểu của toán hạng, nếu như hai toán hạng có kiểu khác nhau, và chỉ bắt đầu so sánh sự bằng nhau khi đã thực hiện đổi kiểu xong. Nếu kiểu khác nhau, một trong hai, hoặc cả hai toán hạng sẽ được chuyển về một kiểu chung, hay còn gọi là kiểu trung gian. Như vậy so sánh đầu tiên sẽ là convertToNumber(“3”) === 3.
  • Đấy là so sánh chuỗi với số, khá là dễ hiểu phải không. Bây giờ đến với 1 trường hợp khác “rắc rối” hơn nhé.

Nghe đến đây, anh “Đép” trầm trồ và liên tục khen ngợi, nịnh hót lão “Gu” tài cao, hiểu rộng. Lão “Gu” được khen sướng tít cả mắt, hãnh dọng: “Giờ thì chú biết chọn ai mà yêu rồi nhé! “

Qua câu chuyện vui ở trên, các bạn đã có lựa chọn khi so sánh sử dụng ===== rồi chứ. Nếu có ý kiến gì hãy comment bên dưới bài viết để mọi người cùng trao đổi nhé.

Closures trong Javascript

Closures trong Javascript

Javasript là một ngôn ngữ phổ biến hiện nay. Người biết về javascript thì nhiều nhưng người biết về một số corner của JS thì chắc không nhiều đến thế. Một trong những corner của JS là Closure. JS là một ngôn ngữ khá đặc biệt, đặc biệt ở chỗ JS mang hơi hướng của lập trình hàm (functional programming), khi mà function ở JS cũng là một first-class object, tức là function có thể được tạo mới (contruct new) tại run-time, được lưu dưới dạng một cấu trúc dữ liệu, được truyền qua parammeter, được dùng như một giá trị trả về. Chính vì đặc điểm ấy khiến cho Closure của JS không giống như những ngôn ngữ phổ biến khác.

Closure là gì? Closure là một hàm được viết lồng vào bên trong một hàm khác (hàm cha), có có thể sử dụng biến toàn cục, biến cục bộ của hàm cha và biến cục bộ của chính nó (lexical scoping).

Lexical Scoping

Cùng xem ví dụ sau:

Kết quả

init() một biến cục bộ name và một hàm getName(). Hàm getName() được khai báo bên trong hàm init() và chỉ tồn tại bên trong hàm init(). Hàm displayName() không có biến cục bộ nào của chính nó. Tuy nhiên, hàm getName() truy cập đến biến name vốn được định nghĩa ở hàm cha,  init() . Nếu bên trong hàm  getName() có khai báo biến cục bộ của chính nó, biến đó sẽ được sử dụng. Ta có thể thấy kết quả hiện lên màn hình là “Mozilla”, do đó hàm getName() đã sử dụng biến cục bộ của hàm cha init(). Đây chính là một ví dụ của lexical scoping.

Closure

Một số đặc điểm quan trọng của Closures trong javascript.

Hàm closures có thể truy cập tới biến số của hàm chứa nó, dù cho hàm đó đã return

Tiếp tục xem ví dụ sau:

Kết quả

Hình ảnh này chưa có thuộc tính alt; tên tệp của nó là image-7.png

Kết quả đoạn code trên tương tự như ví dụ về hàm init(), vậy sự khác nhau là gì?
Khi gọi hàm callName() sẽ return về hàm getName() và chưa hề chạy qua đoạn code trong hàm getName().
Trong những ngôn ngữ lập trình khác, biến cục bộ chỉ tồn tại trong quá trình hàm thực thi. Khi hàm chạy callName() chạy xong thì biến name sẽ không được sử dụng nữa. Nhưng ở đây nó vẫn trả về kết quả giống như hàm init() ở trên. Đây chính là một tính chất đặc biệt của javascript.
Trong trường hợp này, myName đang tham chiếu đến một Instance getName() được tạo ra khi chạy callName(). Instance getName() sẽ duy trì ở lexical environment, do đó biến name vẫn tồn tại.

Hàm closures lưu trữ biến số của outer function theo kiểu tham chiếu.

Xét ví dụ dưới đây:

Hàm objId trả về một đối tượng bao gồm 2 hàm closures là getId và setId. Các hàm Closures này sử dụng chung một biến cục bộ là id.
Ban đầu, gọi myObject.getId() thì kết quả trả về là 1 (giá trị của biến cục bộ). Sau đó, gọi myObject.setId(10). Nếu hàm closures chỉ lưu biến cục bộ theo giá trị thì nghĩa là giá trị của biến cục bộ id sẽ không thay đổi. Nhưng khi gọi tiếp myObject.getId() thì giá trị trả về là 10. Chứng tỏ, hàm Closures phải lưu biến cục bộ theo kiểu tham chiếu.

Closure Scope Chain

Mỗi closure chúng ta có 3 scopes:-

  • Scope cục bộ
  • Scope của function chứa closure
  • Scope global

Chúng ta có thể truy cập đến cả 3 scope này trong closure tuy nhiên sẽ ra sau nếu chúng lồng nhiều Closure với nhau. Như ví dụ sau:

Với ví dụ trên, chúng ta có thể nói toàn bộ closure sẽ có cùng scope với function cha.

Kết luận

Như vậy qua bài viết này chúng ta cần nắm được khái niệm về Closure trong javascript, và một số best practices trong việc sử dụng closure. Closure trong javascript hay sử dụng để tạo ra một cái bao mà các thứ trong đấy không được nhìn thấy bởi bên ngoài nhưng vẫn truy cập được từ bên trong, và thường được áp dụng cho một số design pattern trong js (tiêu biểu nhất là module pattern). Nắm được một số điểm quan trọng của Closure trong javascript và hiểu rõ về Closures Scope.

SERIES JAVASCRIPT: PHẦN 1 – JAVA SỜ CỜ RÍP LÀ GÌ?

Javascript

Xin chào các bạn, ở loạt series bài viết này, mình sẽ giới thiệu tới các bạn từ cơ bản đế nâng cao về Javascript – 1 phần kiến thức không thể thiếu của các lập trình viên WEB.

Ở phần đầu tiên, mình sẽ đem đến cho các bạn những giới thiệu chung, mục đích sử dụng và cách sử dụng Javascript vào website của các bạn như thế nào ở mức căn bản nhất. Hãy cùng bắt đầu nào!

Javascript hình thành như thế nào?

giới thiệu về Javascript

JAVASCRIPT được biết đến với tên gọi đầu tiên là MOCHA, tạo bởi Bredan Eich – 1 lập trình viên tại Netscape vào năm 1995. Sau này với các giai đoạn phát triển sau này, được đổi tên sang LIVESCRIPT và cuối cùng là JAVASCRIPT như ngày nay.

Các ngôn ngữ thịnh hành tại thời điểm đó như: Java, Ruby hay Python đang là xu hướng nên javascript chưa được coi trọng bời các lập trình viên. Nhưng với sự phát triển vô cùng mạnh mẽ và nhanh chóng thì javascript là điều không thể thiếu của bất kỳ website nào, thậm chí nó đã lấn sân sang cả bên phía Server side (NODE JS).

Tại sao sờ cờ ríp lại quan trọng đến vậy?

Các trang web ngày nay cần sự tương tác giữa người dùng với hệ thống hoặc hiệu ứng hình ảnh đẹp là điều bắt buộc. Nếu với chỉ HTML, CSS đơn thuần thì bạn chỉ có thể tạo ra 1 trang web tĩnh hay nói cách khác là chỉ hiển thị đơn thuần các thông tin đến với người dùng. Còn muốn có sự tương tác giữa người dùng với trang web, ví dụ như: người dùng click chuột vào 1 nút “Mở cửa sổ đăng ký” thì hiển thị lên 1 popup để người dùng nhập thông tin thì bắt buộc bạn phải sử dụng Javascript để xử lý. Hay nói cách khác, HTML, CSS chỉ giúp bạn xây nên 1 ngôi nhà đơn thuần với 4 bức tường bê tông, còn Javascript giúp các bạn thực hiện các hành động như là: mở cửa ra vào, tắt bật đèn, … Đến đây thì các bạn đã hiểu được tầm quan trọng của Javascript như thế nào rồi.

Áp dụng Javascript vào trang web của các bạn

Để sử dụng javascript vào trang web của các bạn hết sức đơn giản. Tất cả các trình duyệt ngày nay đã hỗ trợ nên các bạn không phải tải thêm thư viện nào cả. Để trình duyệt nhận diện được đoạn mã JS của các bạn thì các bạn viết trong cặp thẻ <script></script>.

Có 3 cách để các bạn viết các đoạn mã cho chương trình:

Internal – viết tại file HTML

Đoạn mã các bạn viết phải trong cặp thẻ script.

Đoạn mã đó bạn có thể đặt ở bất cứ đâu, có thể trong body, có thể trong head. Nhưng mình khuyên các bạn nên viết ở phần cuối trong body. Phần cuối mình sẽ giải thích tại sao nên viết như vậy.

External – viết ở 1 file JS ngoài rồi thực hiện nhúng

Ở cách viết này thì các bạn viết ra các đoạn mã code ở những file javascript bên ngoài và dùng thẻ script để nhúng vào website.

Như ví dụ trên, mình thực hiện viết ra file misa.js rồi thực hiện nhúng.

Inline – viết trực tiếp tại thẻ HTML

Cách viết này thì các bạn trực tiếp viết code trong thẻ HTML.

Như ví dụ trên, mình thực hiện trực tiếp hiển thị 1 thông báo trong sự kiện nhấn chọn nút Chào mừng của thẻ input.

như vậy, mình đã giới thiệu tới các bạn những tổng quan chung về javascript: lịch sử hình thành, mục đích sử dụng và cách sử dụng căn bản. Ở những bài viết sau, mình sẽ giới thiệu với các bạn những chương trình javascrip, tip, trick khi làm sản phầm thực tế cần áp dụng.

Xin chào và hẹn gặp lại các bạn ở những phần sau của series bài viết.