Converting strings to numbers with vanilla JavaScript

In JavaScript, you can represent a number is an actual number (ex. 42), or as a string (ex. '42').

If you were to use a strict comparison to compare the two, it would fail because they’re two different types of objects.

var num1 = 42;
var num2 = '42';
if (num1 === num2) {
    console.log(true);
} else {
    console.log(false);
}
// Will log `false`

Today, let’s look at three different ways to convert a string into a number.

parseInt() #

The parseInt() method converts a string into an integer (a whole number).

It accepts two arguments. The first argument is the string to convert. The second argument is called the radix. This is the base number used in mathematical systems. For our use, it should always be 10.

var text = '42px';
var integer = parseInt(text, 10);
// returns 42

parseFloat() #

The parseFloat() method converts a string into a point number (a number with decimal points). You can even pass in strings with random text in them.

var text = '3.14someRandomStuff';
var pointNum = parseFloat(text);
// returns 3.14

Number() #

The Number() method converts a string to a number.

Sometimes it’s an integer. Other times it’s a point number. And if you pass in a string with random text in it, you’ll get NaN, an acronym for “Not a Number.”

As a result of this inconsistency, it’s a less safe choice than parseInt() and parseFloat(). If you know the format of the number you’d like, use those instead. If you want the string to fail with NaN if it has other characters in it, Number() may actually be a better choice.

// Convert strings
Number('123'); // returns 123
Number('12.3'); // returns 12.3
Number('3.14someRandomStuff'); // returns NaN
Number('42px'); // returns NaN

Browser Compatibility #

All three methods work in all modern browsers, and IE6 and up.

Promise là khỉ gì ?

Bài này biên về Promise, khá phức tạp, nếu chưa hiểu các bạn có thể in ra đem vào để trong toilet, mổi lần vào đó thì cầm lên đọc giết thời gian. Mình đã làm và thành công, nhất là những hôm táo bón. Có khi đọc nhập tâm quá chui ngược vào. Không biết có phải là hiện tượng phản phác quy chân ko nữa. ahihi.

Ghi chú:

Nếu tên function là dạng tiếng mẻo, thì mình sẽ viết camelCase, vd: doSomething()
Nếu tên function là tiếng việt ko dấu, để dễ đọc mình sẽ viết underscore, vd: dung_khoc_ma_vui_cuoi_len()
Các bạn code kiểu gì thì code, quan trọng là nhất quán, dùng 1 style thôi, đừng như mình !

Bắt đầu chém gió thôi:

Tờ giấy ghi nợ là Promise.

Ai cũng từng 1 lần cho bạn mượn tiền, có đứa hứa sẽ trả (pending), có đứa trả (fulfilled), và cũng có đứa một đi không trở lại (reject).
Đây cũng 3 trạng thái của Promise.

1. Lúc còn là tờ giấy nợ, pending.
2. Lúc dc trả tiền, Promise dc resolve, đây là trạng thái fulfilled trong truyền thuyết. Chúng ta cũng có kết quả trả về là số tiền cầm trên tay, ôi những thứ tưởng đã mất khi quay trở về mới thật vi diệu làm sao, bố mày thề ko bao giờ cho mượn tiền nữa.
3. Lúc bị quịt, Promise bị reject, đây là trạng thái cuối cùng trước khi chúng ta lao ra quán nhậu để chia tay 1 cuộc tình. Có thể là tình yêu, hoặc là tình bạn.

Khi nào dùng Promise.

Khi 1 function đang kẹt nhưng hứa sẽ trả tiền cho chúng ta vào 1 tương lai xa. Nhưng chúng ta lại cần dùng số tiền đó trong 1 function khác. Khi đấy Promise sẽ đóng vai trò là giá trị chúng ta cần, để chúng ta có thể gán nợ ngay, mà ko cần đợi thằng kia trả tiền.
Lúc này anh em cứ nghĩ Promise là 1 tờ giấy lộn, nhưng có tác dụng thật, là minh chứng (proxy) cho cục tiền nợ có nguy cơ mất 99% kia.

tra_tien_em_anh_oi() // trả về 1 Promise.
  .then(function(tien) {
    // chúng ta có thể làm gì đó với số tiền này ngay lập tức
    // ơ làm gì đây
    return nhau_an_mung(tien);
  })
  .catch(function(ly_do_quit){
    console.log(ly_do_quit);
  })

tra_tien_em_anh_oi() sẽ ko phun ra xu nào, mà chỉ trả về tờ giấy nợ Promise. Tạm thời chưa nói đến cách tạo. Anh em chú ý thằng .then và .catch đây là 2 method của Promise.prototype, chỉ gọi dc khi new Promise lên.
Nếu chưa biết prototype là gì thì anh em tham khảo bài biên này http://kipalog.com/posts/prototype-la-khi-gi-

.then

Con hàng này dc gọi khi Promise resolve, tất nhiên khi đấy chúng ta sẽ lấy dc tiền, và làm gì với số tiền đó là tuỳ chúng ta.
Muốn .then nhiều lần cũng dc, khi đấy Promise sẽ thực hiện các function trong .then theo thứ tự. Tụi mẻo gọi vụ này là Chaining. Đây là lý do nhiều ng thích Promise, vì nó giúp chúng ta tổ chức và code rất kotex.

tra_tien_em_anh_oi() 
  .then(function(tien) {
    return nhau_an_mung(tien);
  })
  .then(function(tien_con_lai_sau_khi_nhau){
    return mat_xa(tien_con_lai_sau_khi_nhau);
  })
  .then(function(){ // het tien 
    return hue_oi();
  });

Lưu ý trong cái .then thứ 2, giá trịtien_con_lai_sau_khi_nhau là kết quả của function nhau_an_mung, sau đó tiền, à ko có sau đó nữa vì đã hết tiền, .then cuối cùng ko có giá trị gì truyền vào cả !
Anh em cũng chú ý là .then sẽ nhận vào 1 function, nếu chọi cái khác vào, tuy nó cho phép chúng ta có quyền im lặng .then(null) nhưng những gì chúng ta nói, nó sẽ coi như chưa nói gì cả. Ngay cả truyền 1 Promise cho nó, nó cũng lơ luôn. Ăn có thể ăn bậy, nhưng nói không thể nói bậy. Luôn truyền cho .then một function nhoé.
Và nhớ return, return 1 Promise khác cũng dc, mà 1 giá trị tuỳ ý cũng dc. Cái này anh em cứ buông tay tuỳ tiện mà làm. Ngay cả return null cũng viết vào luôn, cho nó rõ ràng.

.catch

Trong trường hợp tra_tien_em_anh_oi ko trả tiền, tức là Promise bị reject, thì con hàng này sẽ chạy, tất nhiên là ko có tiền, nhưng chúng ta sẽ nhận dc lý do quịt nợ một cách lịch sự, có thể chỉ là 1 string, hoặc cũng có thể là 1 exception. Nói chung chúng ta sẽ có lý do, để còn báo cáo lại cho quan bà ở nhà.
Promise ưu việt hơn callback ở chổ chúng ta có thể khạc nhổ exception một cách bừa bãi mà ko lo lắng vì .catch sẽ lụm dc hết.**

Viết function tra_tien_em_anh_oi

function tra_tien_em_anh_oi() {
  // tạo và trả về 1 Promise, khi này Promise ở trang thái pending
  return new Promise(function(resolve, reject) {
    // tâm sinh lý ngẫu nhiên 
    var isHappy = Math.random() >= 0.5;

    // nếu vui thì gọi resolve để trả tiền 
    if (isHappy) {
      var tien = 1000;
      return resolve(tien); //  Promise dc fulfilled  
    }

    // không vui quịt luôn
  // nhớ cho ng ta biết lý do vì chúng ta là lập trình viên lịch sự.
    var reason = 'lịt pẹ bố dek trả đấy làm gì nhau';
    reject(reason); //  Promise ở trạng thái reject
  });
}

Promise Hell

Tuy nói Promise giúp tổ chức code, và tránh callback hell, nhưng nếu viết code ko khô thoáng và sạch sẽ thì anh em vẫn rơi vào Promise Hell. Do đó lúc nào chúng ta cũng phải dùng kotexcode.
Promise Hell vì nested .then ngu.

  tra_tien_em_anh_oi()
    .then(function(tien){
      return nhau_an_mung(tien)
        .then(function(tien_con_lai){
          return mat_xa(tien_con_lai)
            .then(function(){
              return hue_oi();
            })
        })
    })

Viết lại thành Kotexcode

  tra_tien_em_anh_oi()
    .then(nhau_an_mung)
    .then(mat_xa)
    .catch(console.error.bind(console));

Các vấn đề thường gặp

Sau đây là kinh nguyệt và các tâm đắc khi dùng Promise, anh em có thể tham khảo và góp ý hộ iem.

Code đang sync, ngứa nên covert qua async

// code sync
function nhau_an_mung() {
  return 500;
}

// wrap lại bằng Promise
function nhau_an_mung() {
  return Promise.resolve(500);
}

Tỉ dụ ta có functionve_nha, chỉ chạy khi đã uong_ruou và hut_thuoc, mà 2 sở thích đời thường này lại có thể cùng lúc tiến hành. Cho nhanh chết.

// thay vì
e_nhau_khong()
  .then(uong_ruou)
  .then(hut_thuoc)
  .then(ve_nha)
  .catch(console.log);

// nên viết thế này
e_nhau_khong()
  .then(function(){
    return Promise.all([
      uong_ruou(),
      hut_thuoc()
    ])    
  })
  .then(ve_nha)
  .catch(console.error.bind(console));

Cách viết đầu tiên chậm vì muốn đốt điếu thuốc phải ráng nhịn đến khi tàn cuộc nhậu, tỉ dụ uong_ruou cần 1 tiếng, hut_thuoc cũng 1 tiếng thì ta cần 2 tiếng mới về đến nhà.
Cách viết thứ 2 dùng Promise.all code chạy nhanh gấp nhiều lần so với cách 1 vì uong_ruou và hut_thuoc sẽ dc chạy song song, cùng lúc ( parallel ) nên chỉ tốn 1 tiếng là đã xong. Nhanh gấp đôi.
Kinh nguyệt là cái gì chạy parallel dc thì cho chạy parallel hết. Tốc độ cải thiện rất vi diệu !

Một ví dụ khác, ta cần đi thư viện mượn sách, để đi ta cần tiền và thẻ sinh viên, mà thẻ sinh viên thì phải có tiền vì hôm qua thua bóng đem cầm mẹ rồi. (case này giả tỉ chuộc thẻ ko mất tiền nhoé)

Anh em nghe mùi chắc cũng biết nested .then

function findMoney()
  .then(function(money){
    // findMoney trả về .. money
    // truyền money vào findCard để chuộc thẻ sinh viên
    return findCard(money)
      .then(function(card){
        // có thẻ thì đi thư viện tìm sách
        return findBooks(money, card) // findBooks cần tiền và sách từ các Promise trên
          .then(function(books){
            // lựa sách 18+ đọc thôi
            return readEpicBooks(books.filter(function(book){
              return !! (book.categoryName === '18+');
            }));
          });
      });
  })
  .catch(console.error.bind(console));

Trường hợp như trên nested .then hơi khó tránh tuy nhiên muốn tránh vẫn có nhiều cách, ví dụ như dùng scope chẳng hạn.
Anh em nào chưa biết scope thì xem ở đây http://kipalog.com/posts/scope-va-closure-la-khi-gi-

var money
findMoney()
  .then(function(_money){
    money = _money;
    return findCard(money);
  })
  .then(function(card){
    return findBook(money, card);
  })
  // .....

Hoặc cũng có thể dùng Promise.all

var money = findMoney();
var card = moneyPromise.then(findCard);

Promise.all([money, card])
  .then(function(res){
    return findBooks(res[0], res[1]);
  })
  .then(console.log.bind(console))
  .catch(console.error.bind(console))

Có điều nếu chỉ nested .then 1 cấp thì cũng ko cần phải tự tay bóp dái chi cho đau. Kinh nguyệt là tuỳ trường hợp nếu thấy rối và khó đọc thì chúng ta mới cần refactore.

Túm cái váy lại

Promise.resolve('em xin hết ạ');
à mà quên, câu hỏi có trúng chưởng:
Code sau đây ngu ở chổ nào, hãy đưa ra 10 lý do chứng minh quocnguyen đẹp trai.

doSomething().then(function () {
  doSomethingElse();
});

JS Truyền Kì – Chương 3 : Quần hùng cát cứ

Mục lục

• Chương 1 – Lược sử giang hồ
• Chương 2 – Võ lâm dậy sóng
• Chương 3 – Quần hùng cát cứ
  • Hồi thứ bảy – Framework mê hồn trận
  • Hồi thứ tám – Cái sướng và cái khổ của bách tính
  • Hồi cuối – Bí kíp phòng thân

Tóm tắt phần trước: NodeJS và hàng loạt các framework ra đời, làm giang hồ đại loạn.
Lưu ý: Chương này có ích cho hầu hết các bạn front-end developer hoặc những bạn làm việc nhiều với JavaScript. Nếu bạn là back-end developer hoặc không dùng javascript thì đọc giải trí cũng được.

Hồi thứ bảy – Thế cục giang hồ

Thuở xưa, chỉ cần rành Javascript và jQuery là có thể độc tẩu giang hồ; thành thục một chút kĩ thuật AJAX nữa là có thể cưỡi mây lướt gió, tiếu ngạo quần hùng. Tiếc thay, thời đấy không còn nữa. Hiện tại, chỉ tính riêng front-end đã có hơn 63 JavaScript framework, con số này vẫn tiếp tục gia tăng (nguồn).

Dân đen rơi vào cảnh lầm than. Mấy chục framework này hợp lại thành một trận đồ bát quái làm điên đảo từ những coder kinh nghiệm cho tới dân mới vào nghề. NodeJS và vô số thư viện/framework front-end lẫn back-end… làm giang hồ đã loạn nay càng thêm loạn. Xin kể sơ qua một số framework JS đang làm mưa làm gió (nguồn):

Ember, Angular, React, Express, Grunt, Bower, npm, Broccoli, Gulp, Lodash, Underscore, rxjs, Knockout, SocketIO, Threejs, D3, Backbone, Ionic, Angular2, React Native, Redux, Alt, Reflux, Webpack, Bluebird, Q, Express, Mocha, Jasmine, Chai, Koa, Less, Sass, Postcss, Impressjs, Revealjs.

Để bình về thế cuộc, xin trích hai câu thơ trong “Vịnh Framework” do Hoàng thiếu hiệp, môn chủ của Tôi đi code dạo Phái sáng tác.

Mấy ai còn nhớ ngày xưa
Ji Qi (jQuery), A Jắc (AJAX) là thừa sức chơi
Bây giờ khổ lắm ai ơi
La (AngularJS) trên, Rét (React) dưới, tội đời thằng cu.. đơ (coder)

Giang hồ đồn rằng mấy câu thơ lưu danh thiên cổ này được sáng tác khi tác giả đang thưởng rượu ngắm trắng. Kẻ hèn này thì nghĩ rằng nó được sáng tác khi thằng tác giả đang phê cần ngáo đá (Bằng chứng là phía trên nó bảo là hai câu, phía dưới lại lòi ra tận bốn câu).

Đại hiệp ở chương 1 : Ngày xưa rành jQuery tại hạ sống ổn lắm. Giờ võ lâm loạn quá, chẳng biết nên luyện thêm Angular hay React 😥

Muốn biết dân tình (developer) dưới thời loạn sống như thế nào, mời xem tiếp hồi sau.

Hồi thứ tám – Cái sướng và cái khổ của bách tính

Tạp Khúc Gia triều Nguyên từng nói: “Hưng, bách tính khổ; vong, bách tính khổ”, ý là đã chấp nhận kiếp developer thì đời nào cũng khổ. Nói vậy mà không phải vậy. Sự ra đời, cạnh tranh của các framework làm công việc của developer trở nên dễ dàng hơn nhiều. Mọi thứ đều có sẵn, chỉ cần sử dụng thư viện/framework là xong:

• Muốn dựng web với nodejs ư? Chỉ cần cài express. Muốn viết RestAPI ư? Dùng express cũng chơi được luôn.
• Muốn viết app di động ư? Ionic (dựa trên Angular) có mặt. Nếu cần mạnh mẽ hơn thì chơi React Native (dựa trên React) luôn.
• Muốn viết JS chuẩn ES6 ư? Chỉ cần cài Gulp, cài Babel là xong.

Song, bên cạnh cái sướng, cái khổ cũng nhiều lắm. Với các developer có kinh nghiệm, việc có quá nhiều framework làm họ cảm thấy khó khăn khi lựa chọn công nghệ phù hợp để theo đuổi. Với các developer mới vào nghề, mọi chuyện còn tệ hơn nhiều.

Thân developer 12 bến nước

Ngày xưa, nếu muốn học web tĩnh, kẻ nhập môn chỉ cần làm 3 bước sau để bắt đầu:

1. Mở Notepad
2. Gõ HTML, sau đó dán link CDN của jQuery, Angular vào
3. Bắt đầu code

Còn bây giờ, muốn làm một trang web đơn giản, chỉ hiển thị 2 dòng, ta phải làm khoảng 11 bước như sau:

1. Cài NodeJS
2. Tạo project mới bằng cách gõ npm init
3. Cài Webpack
4. Tạo 1 file webpack.config.js, sửa file cho phù hợp
5. Cài Babel
6. Tạo file .babelrc và sửa file .babelrc
7. Cài React
8. Mở Nodepad hoặc IDE
9. Tạo 1 file index.js, một file index.html
10. Trong file index.html trỏ đường dẫn tới file index.js
11. Bắt đầu viết code trong file index.js

Dĩ nhiên, nếu làm theo 11 bước thì code sẽ “sướng” hơn. Tuy nhiên, điều tại hạ muốn nhấn mạnh là thực trạng của JavaScript: quá nhiều framework ra đời, làm cuộc sống của developer trở nên phức tạp hơn và gây vô số khó khăn cho những người mới nhập môn. Các developer Tây Dương bày tỏ quan điểm trên:

• http://developers.redhat.com/blog/2016/02/03/angular-react-and-javascript-framework-fatigue/
• https://www.allenpike.com/2015/javascript-framework-fatigue/
• https://coderexample.com/dealing-javascript-framework-fatigue/

Ở thời loạn thế này, muốn sống sót không đơn giản. May thay, tại hạ đã thu thập một số bí kíp phòng thân của các bậc tiền bối. Mời quí vị đọc các bí kíp này trong hồi cuối.

Hồi kết – Bí kíp phòng thân

Theo kinh nghiệm của mình và các tiền bối, thứ quan trọng nhất mà mọi developer cần có là căn bản. Nhớ nhé, học căn bản JS chứ đừng ham hố học framework trước. Căn bản này là những gì:

• Cơ bản JavaScript. Làm sao để luyện? Tìm đọc series JavaScript sida, phản phác qui chân và một số sách khác nhé.
• Học NodeJS và tìm hiểu npm. Đây là bắt buộc vì NodeJS dùng cho rất nhiều thứ chứ không chỉ front-end.
• Tập làm quen với ES6 vì đây là tương lai của JavaScript. Với Babel, ta đã có thể viết JS để chạy trên các trình duyệt cũ.
• Một số pattern và khái niệm cơ bản: Callback, Class, Module, Prototype, Promise, Ajax Rest API. Nhớ tìm hiểu các mô hình MVC và MVVM luôn.

Học xong những thứ này, bạn đã có căn cơ vững chắc trên con đường front-end. Bây giờ ta có thể tập trung chuyên sâu vào một framework (AngularJS, React) tùy theo yêu cầu công việc. Nếu đi theo con đường back-end với NodeJS, bạn cần tìm hiểu thêm về các thư viện cơ bản NodeJS, cơ chế pipe, MongoDB .. trước khi cắm đầu vào các framework như Express hoặc Sail.js nhé.
Hãy nhớ kĩ, đừng chạy theo đám đông mà hãy tìm hiểu và suy tính rõ ràng trước. Xin mượn hai câu thơ để mô tả thái độ mà một front-end developer nên có giữa thời loạn thế.

Sống yên vui, danh lợi mãi coi thường.
Tâm bất biến, giữa dòng đời vạn biến

Giữa thế cuộc xoay vần như hiện nay, ta có hai lựa chọn. Một là để mình bị cuốn theo thời thế, chạy theo những phù hoa lấp lánh. Hai là rèn căn bản thật vững để có thể giữ lòng “bất biến”. Có căn cơ vững chắc, mọi võ học hay framework đều có thể dễ dàng nắm tới tay.
Một số lời khuyên bổ ích khác:

• https://medium.freecodecamp.com/a-cautionary-tale-of-learning-to-code-my-own-eddb24d9d5a7#.i1t9d8g8d
• https://medium.freecodecamp.com/overcoming-javascript-framework-fatigue-741dac9370ee#.n51uv0rx8

JS Truyền Kì – Chương 2: Võ lâm dậy sóng

Mục lục

• Chương 1 – Lược sử giang hồ
• Chương 2 – Võ lâm dậy sóng
  • Hồi thứ tư – Thời đại hậu Ji Qui
  • Hồi thứ năm – Ma đầu thức tỉnh
  • Hồi thứ sáu – Giang hồ đại loạn
• Chương 3 – Quần hùng cát cứ

Tóm tắt phần trước: JavaScript ban đầu bị xem là một ngôn ngữ “cùi bắp” ở client side. Với sự ra đời của AJAX và jQuery, JS bắt đầu được sử dụng nhiều hơn 

Hồi thứ tư – Thời đại hậu Ji Qui

Trước đây, hầu hết developer ở server side đều viết được chút ít JS ở client side. Sau này, JS được dùng để xử lý DOM, validate data, truyền nhận dữ liệu từ server. Việc này làm developer phải bỏ nhiều thời gian để code JS ở client side hơn. Vì lẽ đó, giang hồ dần phân hóa thành Tiền Tận Tông (Front-End developer) và Hậu Tận Tông (Back-end developer).

Môn sinh Tiền Tận Tông là những kẻ làm việc với giao diện, làm việc với HTML/CSS và viết JavaScript. Môn sinh Hậu Tận Tông là những kẻ làm việc với server side, thiết kế hệ thống và database, xử lý dữ liệu bằng PHP, C#, Java. Nhiều kẻ trâu bò xin bái sư luôn cả hai tông môn, không kiêng dè gì cả.

Giải thích về back-end và front-end cho dân ngoại đạo

Bọn học đồ trong Hậu Tận Tông bản tính rất hung hăng hiếu chiến. Nội bộ tông này được chia thành nhiều phái nhỏ (C# phái, Java phái, PHP phái, C++ phái), không khí lúc nào cũng giương cung bạt kiếm. Các phái này luôn tranh cãi qua lại về vấn đề võ công của tao là mạnh nhất, chiêu thức của tao là nhanh nhất.
Trái lại, nhân sĩ Tiền Tận Tông rất đoàn kết một lòng. Sau khi thành thạo JS, họ chuyển qua học Ji Qui Đại Pháp, thành thạo cả hai thứ này là đủ vốn liếng hành tẩu giang hồ. Thuở ấy, một số công pháp (thư viện) JS trôi nổi như YUI, MooTool, cũng có vài kẻ theo học, nhưng cũng chẳng cạnh tranh lại Ji Qui thần thánh.
Năm Kỉ Sửu (2009), một gã ma đầu thức tỉnh, một bộ công pháp đản sinh. Như một viên đá ném vào giữa mặt hồ phẳng lặng, giang hồ đang yên bình bỗng dậy sóng.
Bộ công pháp này tên gì? Nó vô song bá đạo đến nhường nào? Xem hồi sau sẽ rõ.

Hồi thứ năm – Ma đầu thức tỉnh

Chuyện kể rằng, xưa kia có một gã kì tài võ học võ công cao ngút trời. Gã nhập môn bằng JS và tự thân tu luyện đến cảnh giới phản phác quy chân. Tiếc thay, một sợi khôn xe, tay lẻ khó vỗ. Do biết mỗi JS, gã chỉ có thể yên phận làm front-end developer đến hết đời.
Phẫn chí, gã lên núi Tùng Sơn gieo mình xuống vực tự sát. Nhờ phúc duyên thâm hậu, gã té núi không chết, lại rơi trúng sơn cốc của Độc Cô Cầu Bại. Trong cái rủi có cái may, gã nhặt được hai quyển Hà Đồ, Lạc Thư thất truyền đã lâu. Sau ba ngày ba đêm bế quan nghiền ngẫm những điều trong sách, gã hợp nhất Google Engine V8 và một số tuyệt học khác lại làm một, sáng tạo ra một bí tịch với tên gọi NodeJS.

Một truyền thuyết khác về NodeJS, bảy phần giả ba phần thật

Ngày NodeJS ra đời, cả võ lâm sửng sốt (Nguồn). JavaScript nay chạy được cả back-end và front-end. Môn sinh Hậu Tận Tông cười vì mình có thêm 1 ngôn ngữ để lập trình server-side. Môn sinh Tiền Tận Tông thì lòng nhao nhao như lửa đốt, háo hức được viết những dòng code server-side đầu tiên bằng JS, ngôn ngữ lọt lòng của họ.
Trước cơn sóng dữ do mình gây ra, gã đại ma đầu chỉ cười nhạt, nụ cười thơ ngây như một đứa nhóc junior dev vừa code xong chương trình đầu tiên. Tên của gã là … Ryan Dahl.

Chân dung Ryan Dahl đại ma đầu, cha đẻ của NodeJS lừng lẫy giang hồ

Tháng 5 năm Kỉ Sữu (2009), Thiên Hùng tinh vẫn lạc, báo hiệu một thời đại loạn thế bắt đầu. Tiền Tận Tông đoàn kết nay bỗng chia bè kết mảng. Kẻ thích giao diện thì ở lại Tiền Tận Tông làm Front-End developer chơi với JavaScript, jQuery. Kẻ thích làm việc với hệ thống, với dữ liệu thì chuyển qua Hậu Tận Tông làm Back-End developer chơi với NodeJS và MongoDB. Huynh đệ anh em, mới ngày trước còn ôm vai bá cổ nhau, ngày nay vì NodeJS mà tiên phàm cách biệt.
Một bộ phận khác có thực tài, học lén tinh hoa của cả Tiền Tận Tông và Hậu Tận Tông, kéo nhau lên Hoa (Quả) Sơn khai tông lập phái. Mãn Tắc Tông ra đời từ đây. Giang hồ gọi môn sinh của phái này là Full-Stack Developer.
Nội bộ lục đục, liệu tương lại Tiền Tận Tông sẽ thế nào? Giang hồ loạn lạc ra sao khi NodeJS xuất thế? Mời quí vị xem tiếp hồi sau.

Hồi thứ sáu – Giang hồ đại loạn

Năm Canh Dần (2010), Google gia tộc bố cáo một công pháp mới với tên gọi Ăn Gô Đại Pháp (AngularJS) cho bình dân bá tánh. Bản thân Ăn Gô khá mạnh mẽ, hỗ trợ double-binding dữ liệu, dependency injection, ajax, giúp công việc lập trình web trở nên rất nhanh chóng và hiệu quả. Lại có Google gia tộc hậu thuẫn, Ăn Gô Đại Pháp nhanh chóng lớn mạnh.  Người người tu luyện, nhà nhà tu luyện Ăn Gô La, trong đó có cả bần đạo.

Nhà nhà, người người dùng AngularJS

Các cụ có câu con gà tức nhau tiếng gáy, trâu buộc thì ghét trâu ăn, quả là không sai. Do ganh ghét sự nổi tiếng của Ăn Gô Đại Pháp, năm Quý Tị (2011), Facebook gia tộc bố cáo thiên hạ rằng Ăn Gô La đại pháp chậm chạp, nặng nề, cho xuất thế một bộ chiêu thức gọi là Rối An Tâm Pháp (React).
Rối An Tâm Pháp chỉ là một bộ tâm pháp cường thân kiện thể, không thể dùng để rèn luyện nội công (chỉ là một library để render view). Do đó, Facebook lại tiếp tục công bố Phờ Lắc thần công và Rì Đắc thần công (Flux and Redux). Nghe đồn Rối An Tâm Pháp và Rì Đắt Thần Công kết hợp lại sẽ thành một bộ tuyệt học có thể dời non lấp bể. Nhân sĩ giang hồ vốn nhẹ dạ cả tin, lại tiếp tục tu luyện.
Do chịu ảnh hưởng của React, Google lại khai tử Ăn Gô Đệ Nhất (Angular 1), cho ra đời Ăn Gô Đệ Nhị (Angular 2). Những kẻ nào đã học Angular 1 đành ngậm ngùi tự cung,… nhầm, tự phế võ công học lại Angular 2. Phẫn nộ ngập trời, oán than đầy đất nhưng bọn người Google Gia Tộc vẫn chẳng mảy may quan tâm. Thế mới thấy ngao ngán cho cái sự đời.

Vì Ăn Gô Đại Pháp và Rối An Tâm Pháp mà môn sinh Tiền Tận Tông nay huynh đệ tương tàn

Theo chân Ăn Gô Đại Pháp và Rối An Tâm Pháp, người người rủ nhau khai tông tập phái: Meteor, VueJS, Express, Knockout, SocketIO, Ionic Framework… Tiền Tận Tông trước kia vốn đoàn kết nay bỗng năm bè bảy mảng, chẳng khác gì Hậu Tận Tông ngày xưa.
Đọc đến đây, hẳn các đạo hữu cũng thắc mắc: Tình hình võ lâm (tức JavaScript framework) náo loạn như thế, nên học thứ gì, bỏ thứ chi? Đừng lo, những phân tích thời cuộc, bí kíp phòng thân trong loạn thế sẽ có trong chương cuối: Quần hùng các cứ. Mong các đạo hữu đón đọc.

Hết chương 2

(Note: AngularJS là framework, ReactJS chỉ là library. Bản chất của chúng khác nhau, kẻ nào so sánh 2 thứ này với nhau sẽ bị giang hồ phỉ nhổ).

JS Truyền Kì – Chương 1: Lược sử giang hồ

Lời tựa

Javascript là một ngôn ngữ mạnh mẽ, được sử dụng ở rất nhiều nơi từ front end cho đến back end. Phàm là lập trình viên, hễ mang cái danh web developer đều phải biết chút ít JavaScript.
Vì lẽ đó, hôm nay tại hạ sẽ dùng phong cách kiếm hiệp pha lẫn hư cấu để kể dăm chuyện xưa về lịch sử JavaScript và đánh giá chung về tình hình JavaScript hiện tại. Vì có một phần hư cấu nên các đạo hữu đọc xong nhớ kiểm chứng lại thông tin nhé.
Tác phẩm võ hiệp này bao gồm 3 chương, hoặc có thể dài hơn tùy hứng của tác giả:

• Chương 1 – Lược sử giang hồ
  • Hồi thứ nhất – Cội nguồn võ học
  • Hồi thứ hai – Anh hùng xuất thế
  • Hồi thứ ba – Thiên hạ thái bình
• Chương 2 – Võ lâm dậy sóng
• Chương 3 – Quần hùng cát cứ

Hồi thứ nhất – Cội nguồn võ học

Vào cái thuở hồng hoang của Web học, các bậc tiền bối sử dụng Perl, CGI để làm web động. Dần đà, một số ngôn ngữ mạnh hơn như PHP, Java, C# ra đời. Các ngôn ngữ này chạy trên server, đọc dữ liệu từ thư khố (database) và hiển thị thành HTML/CSS.
Bản thân HTML khá cứng nhắc, chỉ có thể dùng hiển thị dữ liệu. Các bậc trưởng lão trong Nội Các Tông (Netscape) thấy cần phải sáng tạo ra một công pháp mới để gắn vào trình duyệt của mình nhằm cạnh tranh với IE của Microsoft. Đại sư Brendan Eich đã đảm đương trọng trách này. Ngài vào một huyệt động bế quan 10 ngày, sau đó khai phá ra một công pháp mới. Ngài đặt tên nó là Giá Vân Sờ Ríp – JavaScript (JS).

Brendan Eich đại sư – Người sáng lập ra JavaScript

Thuở mới được tạo ra, chức năng của JS còn khá hạn chế: xử lý DOM, validate dữ liệu ở client-side. Bản thân công pháp có khá nhiều khuyết điểm, lại không hỗ trợ OOP nên JS bị người đời coi là thứ “tà môn”. Những kẻ tu luyện JS bị xem là tà mà ngoại đạo, bị giới lập trình chính thống (C#, Java) khinh rẻ.
Năm Bính Tuất (2006), với sự ra đời của Ajax, JS nay đã có thể giao tiếp được với server side. Như hổ mọc thêm cánh, JS một bước lên trời, được sử dụng ngày càng rộng rãi. Thế nhưng ví phỏng đường đời bằng phẳng cả, anh hùng hào kiệt có hơn ai! JS còn phải trải qua trăm đắng nghìn cay, qua bao cuộc bể dâu chìm nổi trước khi dương danh thiên hạ.
Muốn biết số phận JS về sau thế nào, xem hồi sau sẽ rõ. 

Hồi thứ hai – Anh hùng xuất thế

Sau khi Ajax ra đời, JS dần dần được sử dụng rộng rãi. Trước kia, mỗi lần muốn tải dữ liệu, người dùng phải tải lại toàn bộ trang. Với AJAX, JS có thể kết nối tới server, lấy dữ liệu và hiển thị rất mượt mà. Vào cái thuở khai thiên lập địa của Web Application (2005-2007), Google Maps và Gmail  sử dụng JS và Ajax, chạy mượt như Desktop app làm nức lòng bao lập trình viên.
Tiếc thay, trời xanh đố kị anh tài, con đường tiến thân của JS cũng lắm gập ghềnh trắc trở. Những năm 2006-2008, dân tình sử dụng IE, Opera, Firefox để duyệt web. Mỗi trình duyệt lại có 1 cách viết JS khác nhau, làm bao nhiêu dân đen (lập trình viên) phải bêu đầu mẻ trán. Sau một thời gian dùng JS, kẻ thì cảm thấy mệt mỏi, người thì bị tẩu hỏa nhập ma nên quyết định bỏ tà đạo để quay về đường ngay nẻo chánh, trở lại code C#, Java, PHP.
May thay, trời không phụ người có lòng. Theo lẽ đời tự ngàn xưa loạn thế xuất anh hùng. Năm Bính Tuất (2006), tại BarCamp NYC, một thiếu niên tên Jogn Resig, mắt phượng mày ngài, dáng như Tống Ngọc, mặt tựa Phan An hiện thân, công bố một cuốn bí kíp mang tên Ji Qui Thần Công (jQuery).

John Resig rhiếu hiệp, giờ đang làm cho Khan Academy

Cuốn bí kíp này thay đổi giang hồ ra sao? Mời xem hồi sao sẽ rõ.

Hồi thứ ba – Thiên hạ thái bình 

John Resig thiếu hiệp ngang trời xuất thế, thật đúng với câu anh hùng xuất thiếu niên. Ji Qui Thần Công của chàng ảo diệu vô song; nó hợp nhất thiên hạ, chỉ cần viết code một lần là chạy được trên nhiều trình duyệt, đồng thời làm JS dễ sử dụng hơn (xử lý DOM, ajax, animation, …). Giang hồ dậy sóng, những kẻ đang tu luyện JS liền đổ xô đi nghiền ngẫm sự ảo diệu của jQuery.
Các bậc đại sư cũng góp sức hoàn thiện jQuery để nó ngày càng mạnh mẽ hơn. Cho đến giờ, jQuery vẫn chiếm 96.2% thị phần các framework, được 70% các website sử dụng (nguồn). Dân nhập môn lập trình Web ngày nay vẫn phải học và thành thạo jQuery.
Sự ra đời của Ji Qui Thần Công làm cho cuộc sống của lũ dân đen (developer) thoải mái hơn nhiều. Ngày ấy, chỉ cần thành thục Javascript và jQuery là có thể độc tẩu giang hồ; biết thêm một chút kĩ thuật AJAX nữa là đã có thể cưỡi mây lướt gió, tiếu ngạo quần hùng.

Một đại hiệp cho hay: Với Ji Qui thần công, ta có thể vá trời lấp bể, nhấc tay làm mây, lật tay làm mưa, không gì không làm được

Thế nhưng, con tạo xoay vần, sao dời vật đổi. Năm Kỷ Sữu (2009), một gã ma đầu đã gây nên một sự kiện làm chấn động võ lâm. Muốn biết sự kiện này là gì, mời quí vị xem chương sau sẽ rõ.

JSON.stringify()

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

JSON.parse()

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true