{ "componentChunkName": "component---src-templates-post-template-jsx", "path": "/function-expression-trong-javascript/", "result": {"data":{"markdownRemark":{"html":"

Trong bài viết trước, mình đã tìm hiểu về hàm trong JavaScript. Cách khai báo hàm đó gọi là \"function declaration\". Bài viết này mình sẽ tìm hiểu về một khái niệm khác gọi là \"function expression\" hay dịch ra là \"biểu thức hàm\".

\n

Function expression là gì?

\n

Function expression hiểu đơn giản là hàm được định nghĩa trong một biểu thức, ví dụ:

\n
let sayHello = function () {\n  console.log(\"Hello from completejavascript.com\");\n};
\n

Có thể hiểu là mình khởi tạo một hàm, rồi gán hàm đó cho biến sayHello giống như bất kỳ loại giá trị nào khác (number, string, boolean,...). Bạn có thể in ra giá trị biến sayHello:

\n
let sayHello = function () {\n  console.log(\"Hello from completejavascript.com\");\n};\n\nconsole.log(sayHello);// ƒ () {\n//  console.log(\"Hello from completejavascript.com\");\n// }
\n

Kết quả hiển thị ra là một string biểu diễn hàm.

\n

Chú ý: trong câu lệnh console.log trên mình viết là sayHello mà không có cặp dấu ngoặc đơn (). Vì nếu có cặp dấu () thì đó nghĩa là gọi hàm.

\n
let sayHello = function () {\n  console.log(\"Hello from completejavascript.com\");\n};\n\nconsole.log(sayHello());// Hello from completejavascript.com\n// undefined
\n

Kết quả là function expression với sayHello được gọi, nên dòng chữ Hello from completejavascript.com được in ra.

\n

Sau đó là dòng undefined - vì biểu thức hàm sayHello không có return giá trị nào cả.

\n

Đặc điểm của function expression

\n

Vì biểu thức hàm cũng là một giá trị, nên bạn hoàn toàn có thể gán nó cho một biến khác, ví dụ:

\n
let sayHello = function () {\n  console.log(\"Hello from completejavascript.com\");\n};\n\nlet sayHi = sayHello;sayHi(); // Hello from completejavascript.com
\n

Khi đó, bạn gọi sayHi() cũng giống như gọi sayHello().

\n
\n

📝 Không chỉ function expression mà function declaration cũng là một giá trị.

\n
\n

Ví dụ:

\n
function sayHello() {  console.log(\"Hello from completejavascript.com\");\n}\n\nlet sayHi = sayHello;\nsayHi(); // Hello from completejavascript.com
\n

Hàm callback

\n

Vì bản chất hàm là một giá trị, nên bạn có thể truyền hàm vào một hàm khác.

\n

Ví dụ mình cần viết một hàm ask(question, handleYes, handleNo) với ba tham số:

\n\n

Code triển khai hàm ask như sau:

\n
function ask(question, handleYes, handleNo) {\n  const answer = confirm(question);\n  if (answer) {\n    handleYes();  } else {\n    handleNo();  }\n}\n\nfunction handleYes() {\n  console.log(\"You chose Yes!\");\n}\n\nfunction handleNo() {\n  console.log(\"You chose No!\");\n}\n\nask(\"Bạn muốn tiếp tục thực hiện chương trình không?\", handleYes, handleNo);
\n

Trong ví dụ trên, hàm confirm bật ra một hộp thoại hỏi người dùng \"Bạn muốn tiếp tục thực hiện chương trình không?\".

\n

Nếu người dùng chọn OK thì giá trị của answer là true. Khi đó, hàm handleYes được gọi. Ngược lại, khi answer là false thì hàm handleNo được gọi.

\n

Ở đây, hai tham số handleYes và handleNo gọi là hàm callback hay gọi tắt là callback.

\n
\n

💡 Ý tưởng của hàm callback là hàm này được truyền vào hàm khác, để gọi lúc cần thiết.

\n

Liên hệ thực tế như khi bạn gọi điện đến nhà một người bạn. Nhưng người bạn cần tìm không có nhà, mà bạn không thể giữ điện thoại đợi cho đến khi người đó về.

\n

Vì vậy, bạn để lại lời nhắn, kèm số điện thoại để khi nào người đó về sẽ gọi lại cho bạn.

\n

Có thể bạn quan tâm: Xử lý bất đồng bộ với callback, promise, async/await

\n
\n

Trong ví dụ trên, mình viết định nghĩa hai hàm handleYes và handleNo sử dụng \"function declaration\". Nhưng bạn có thể thay thế bằng biểu thức hàm như sau:

\n
function ask(question, handleYes, handleNo) {\n  const answer = confirm(question);\n  if (answer) {\n    handleYes();\n  } else {\n    handleNo();\n  }\n}\n\nask(\n  \"Bạn muốn tiếp tục thực hiện chương trình không?\",\n  function () {    console.log(\"You chose Yes!\");  },  function () {    console.log(\"You chose No!\");  });
\n

Vì thực tế là hai hàm handleYes và handleNo chỉ sử dụng bên trong hàm ask, nên mình có thể dùng function expression như trên mà không cần khai báo tên hàm.

\n
\n

📝 Những hàm như trên còn có tên gọi khác là \"anonymous function\" hay \"hàm ẩn danh\".

\n
\n

So sánh function expression với function declaration

\n

Đọc đến đấy chắc bạn cũng đã khá hiểu về biểu thức hàm rồi phải không?

\n

Sau đây, mình cùng xem những điểm khác nhau giữa biểu thức hàm (function expression) và định nghĩa hàm (function declaration).

\n

► Cú pháp khai báo:

\n

Function declaration: là hàm được định nghĩa độc lập, không nằm trong biểu thức hay câu lệnh nào cả.

\n
function sayHello() {\n  console.log(\"Hello!\");\n}
\n

Function expression: là hàm được định nghĩa với một biểu thức, sử dụng toán tử gán =.

\n
let sayHello = function () {\n  console.log(\"Hello!\");\n};
\n

► Thời gian khởi tạo:

\n

Function declaration: hàm được xử lý sớm hơn vị trí mà hàm được định nghĩa. Nghĩa là bạn có thể gọi hàm trước khi định nghĩa hàm.

\n
sayHello(); // Hello!\n\nfunction sayHello() {\n  console.log(\"Hello!\");\n}
\n

Function expression: hàm được tạo ra tại thời điểm chương trình thực thi xử lý tới đó. Nghĩa là bạn không thể gọi biểu thức hàm trước khi định nghĩa nó.

\n

Ví dụ sau bị lỗi cú pháp:

\n
sayHello(); // Uncaught ReferenceError: sayHello is not defined\n\nlet sayHello = function () {\n  console.log(\"Hello!\");\n};
\n

► Phạm vi của function declaration và function expression:

\n

Khi sử dụng strict mode, function declaration có phạm vi trong block. Bạn có thể gọi hàm ở bất kỳ đâu trong block đó, nhưng không sử dụng được ở bên ngoài.

\n

Ví dụ sau bị lỗi cú pháp:

\n
\"use strict\";\nlet isVietnamese = confirm(\"Bạn có phải người Việt Nam không?\");\n\nif (isVietnamese) {\n  function welcome() {    console.log(\"Chào bạn!\");  }} else {\n  function welcome() {    console.log(\"Hello!\");  }}\n\nwelcome(); // Uncaught ReferenceError: welcome is not defined
\n

Bởi vì hàm welcome được định nghĩa bên trong block của if nên chỉ dùng được bên trong block đó.

\n

Để sử dụng hàm welcome bên ngoài block, bạn có thể dùng function expression như sau:

\n
\"use strict\";\n\nlet isVietnamese = confirm(\"Bạn có phải người Việt Nam không?\");\nlet welcome;\nif (isVietnamese) {\n  welcome = function () {    console.log(\"Chào bạn!\");  };} else {\n  welcome = function () {    console.log(\"Hello!\");  };}\n\nwelcome(); // Không có lỗi
\n
\n

📝 Dĩ nhiên, đoạn code trên chỉ là ví dụ minh họa. Thực tế, bạn có nhiều cách để giải quyết bài toán này.

\n
\n

Nên viết hàm theo function declaration hay function expression?

\n

Câu trả lời là: tùy bạn.

\n

Tùy thuộc vào phong cách và mục đích của bạn mà lựa chọn cho phù hợp.

\n

Tuy nhiên, theo quan điểm cá nhân thì mình thấy dùng function declaration sẽ dễ nhìn hơn. Ngoài ra, function declaration còn giúp bạn thoải mái hơn trong việc cấu trúc code (không phụ thuộc nhiều vào thứ tự code).

\n

Tổng kết

\n

Bản chất của hàm là giá trị. Vì vậy, bạn có thể thoải mái gán, sao chép và truyền một hàm vào hàm khác dạng tham số.

\n

Khi một hàm được định nghĩa độc lập thì đó gọi là \"function declaration\". Ngược lại, khi một hàm được định nghĩa bên trong một biểu thức, đó gọi là \"function expression\".

\n

Khi một hàm được truyền vào bên trong hàm khác để gọi lại khi cần thiết, hàm đó được gọi là \"hàm callback\".

\n

Function declaration được xử lý trước khi chương trình chạy đến đó. Function declaration có phạm vi trong block, nên bạn có thể gọi hàm ở bất kỳ đâu trong block.

\n

Function expression được tạo ra tại thời điểm chương trình chạy đến vị trí khởi tạo hàm. Nên bạn chỉ gọi được hàm sau khi đã khởi tạo.

","timeToRead":7,"excerpt":"Trong bài viết trước, mình đã tìm hiểu về hàm trong JavaScript. Cách khai báo hàm đó gọi là \"function declaration\". Bài viết này mình sẽ tìm…","frontmatter":{"directory":"JavaScript","title":"Function expression trong JavaScript","date":"2017-05-09T09:00:00Z","tags":["Hàm"],"description":"Trong JavaScript, hàm cũng là một loại giá trị. Vì vậy, bạn có thể định nghĩa hàm như một biểu thức. Cái đó gọi là function expression.","keywords":"function expression","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"fixed","backgroundColor":"#283838","images":{"fallback":{"src":"/static/209d5fccc58f470c449f375a358e2714/bc51f/function-expression-trong-javascript.png","srcSet":"/static/209d5fccc58f470c449f375a358e2714/bc51f/function-expression-trong-javascript.png 660w","sizes":"660px"},"sources":[{"srcSet":"/static/209d5fccc58f470c449f375a358e2714/2b2b5/function-expression-trong-javascript.webp 660w","type":"image/webp","sizes":"660px"}]},"width":660,"height":400}}},"update":"2021-11-21T14:30:00Z"},"fields":{"slug":"/function-expression-trong-javascript/","date":"2017-05-09T09:00:00.000Z"}},"sameSeries":{"totalCount":18,"edges":[{"node":{"fields":{"slug":"/chuong-trinh-javascript-dau-tien/","date":"2017-04-27T20:00:00.000Z"},"excerpt":"Trong những bài viết trước, bạn đã biết các kiến thức tổng quan về JavaScript rồi. Hôm nay, mình sẽ bắt đầu viết chương trình JavaScript đầu…","timeToRead":8,"frontmatter":{"title":"Chương trình JavaScript đầu tiên","shortTitle":null,"tags":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/4dd49b6456450afe95e717f7f7adbd2c/bc51f/chuong-trinh-javascript-dau-tien.png","srcSet":"/static/4dd49b6456450afe95e717f7f7adbd2c/41200/chuong-trinh-javascript-dau-tien.png 165w,\n/static/4dd49b6456450afe95e717f7f7adbd2c/f979a/chuong-trinh-javascript-dau-tien.png 330w,\n/static/4dd49b6456450afe95e717f7f7adbd2c/bc51f/chuong-trinh-javascript-dau-tien.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/4dd49b6456450afe95e717f7f7adbd2c/322ad/chuong-trinh-javascript-dau-tien.webp 165w,\n/static/4dd49b6456450afe95e717f7f7adbd2c/de3b3/chuong-trinh-javascript-dau-tien.webp 330w,\n/static/4dd49b6456450afe95e717f7f7adbd2c/2b2b5/chuong-trinh-javascript-dau-tien.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-04-27T20:00:00Z","update":"2021-10-30T20:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/cau-lenh-trong-javascript/","date":"2017-04-28T20:00:00.000Z"},"excerpt":"Chương trình là tập hợp của các câu lệnh. Hay nói cách khác, câu lệnh trong JavaScript là đơn vị cơ bản xây dựng nên một chương trình. Vì…","timeToRead":5,"frontmatter":{"title":"Câu lệnh trong JavaScript","shortTitle":null,"tags":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/13a26912065f493bd304ddbaf88372fd/bc51f/cau-lenh-trong-javascript.png","srcSet":"/static/13a26912065f493bd304ddbaf88372fd/41200/cau-lenh-trong-javascript.png 165w,\n/static/13a26912065f493bd304ddbaf88372fd/f979a/cau-lenh-trong-javascript.png 330w,\n/static/13a26912065f493bd304ddbaf88372fd/bc51f/cau-lenh-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/13a26912065f493bd304ddbaf88372fd/322ad/cau-lenh-trong-javascript.webp 165w,\n/static/13a26912065f493bd304ddbaf88372fd/de3b3/cau-lenh-trong-javascript.webp 330w,\n/static/13a26912065f493bd304ddbaf88372fd/2b2b5/cau-lenh-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-04-28T20:00:00Z","update":"2021-10-31T20:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/use-strict-trong-js/","date":"2017-04-29T20:00:00.000Z"},"excerpt":"JavaScript tồn tại đến nay là hơn 20 năm. Vậy mà code JavaScript từ lâu giờ vẫn chạy tốt. Bạn có bao giờ thắc mắc lý do tại sao không? Đó là…","timeToRead":4,"frontmatter":{"title":"Use strict trong JS","shortTitle":null,"tags":["Strict Mode"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/e37de929382368b4b91a791351418166/bc51f/use-strict-trong-js.png","srcSet":"/static/e37de929382368b4b91a791351418166/41200/use-strict-trong-js.png 165w,\n/static/e37de929382368b4b91a791351418166/f979a/use-strict-trong-js.png 330w,\n/static/e37de929382368b4b91a791351418166/bc51f/use-strict-trong-js.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/e37de929382368b4b91a791351418166/322ad/use-strict-trong-js.webp 165w,\n/static/e37de929382368b4b91a791351418166/de3b3/use-strict-trong-js.webp 330w,\n/static/e37de929382368b4b91a791351418166/2b2b5/use-strict-trong-js.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-04-29T20:00:00Z","update":"2021-10-31T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/bien-la-gi-bien-trong-javascript/","date":"2017-04-30T20:00:00.000Z"},"excerpt":"Nếu như trong toán học có khái niệm biến số thì trong lập trình cũng có khái niệm biến. Đây là một thành phần không thể thiếu trong lập…","timeToRead":11,"frontmatter":{"title":"Biến là gì? Cơ bản về biến trong JavaScript","shortTitle":"Biến là gì? Biến trong JavaScript","tags":["Biến"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/82bb08577645a0479621b3a1ac27b5d4/bc51f/bien-la-gi-bien-trong-javascript.png","srcSet":"/static/82bb08577645a0479621b3a1ac27b5d4/41200/bien-la-gi-bien-trong-javascript.png 165w,\n/static/82bb08577645a0479621b3a1ac27b5d4/f979a/bien-la-gi-bien-trong-javascript.png 330w,\n/static/82bb08577645a0479621b3a1ac27b5d4/bc51f/bien-la-gi-bien-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/82bb08577645a0479621b3a1ac27b5d4/322ad/bien-la-gi-bien-trong-javascript.webp 165w,\n/static/82bb08577645a0479621b3a1ac27b5d4/de3b3/bien-la-gi-bien-trong-javascript.webp 330w,\n/static/82bb08577645a0479621b3a1ac27b5d4/2b2b5/bien-la-gi-bien-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-04-30T20:00:00Z","update":"2021-11-01T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/hang-la-gi-hang-trong-javascript/","date":"2017-05-01T20:00:00.000Z"},"excerpt":"Tương tự như biến, hằng cũng là một thành phần quan trọng trong lập trình JavaScript. Sau đây, mình sẽ tìm hiểu xem hằng là gì, cách khai…","timeToRead":10,"frontmatter":{"title":"Hằng là gì? Cơ bản về hằng trong JavaScript","shortTitle":"Hằng là gì? Hằng trong JavaScript","tags":["Hằng"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/b15102cf38a50f291ce569aca2cf91db/bc51f/hang-la-gi-hang-trong-javascript.png","srcSet":"/static/b15102cf38a50f291ce569aca2cf91db/41200/hang-la-gi-hang-trong-javascript.png 165w,\n/static/b15102cf38a50f291ce569aca2cf91db/f979a/hang-la-gi-hang-trong-javascript.png 330w,\n/static/b15102cf38a50f291ce569aca2cf91db/bc51f/hang-la-gi-hang-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/b15102cf38a50f291ce569aca2cf91db/322ad/hang-la-gi-hang-trong-javascript.webp 165w,\n/static/b15102cf38a50f291ce569aca2cf91db/de3b3/hang-la-gi-hang-trong-javascript.webp 330w,\n/static/b15102cf38a50f291ce569aca2cf91db/2b2b5/hang-la-gi-hang-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-01T20:00:00Z","update":"2021-11-03T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/kieu-du-lieu-trong-javascript/","date":"2017-05-02T20:00:00.000Z"},"excerpt":"Trong hai bài viết về biến và hằng trong JavaScript, mình có đề cập đến việc gán giá trị cho biến và hằng. Ở đó, mỗi giá trị đều có một kiểu…","timeToRead":12,"frontmatter":{"title":"Các kiểu dữ liệu trong JavaScript","shortTitle":null,"tags":["Kiểu dữ liệu","String"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/c9a12e83b97c9804fa9b2252c7c32ec5/bc51f/kieu-du-lieu-trong-javascript.png","srcSet":"/static/c9a12e83b97c9804fa9b2252c7c32ec5/41200/kieu-du-lieu-trong-javascript.png 165w,\n/static/c9a12e83b97c9804fa9b2252c7c32ec5/f979a/kieu-du-lieu-trong-javascript.png 330w,\n/static/c9a12e83b97c9804fa9b2252c7c32ec5/bc51f/kieu-du-lieu-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/c9a12e83b97c9804fa9b2252c7c32ec5/322ad/kieu-du-lieu-trong-javascript.webp 165w,\n/static/c9a12e83b97c9804fa9b2252c7c32ec5/de3b3/kieu-du-lieu-trong-javascript.webp 330w,\n/static/c9a12e83b97c9804fa9b2252c7c32ec5/2b2b5/kieu-du-lieu-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-02T20:00:00Z","update":"2021-11-04T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/chuyen-doi-kieu-du-lieu-trong-javascript/","date":"2017-05-03T19:00:00.000Z"},"excerpt":"Bài viết trước bạn đã biết về 8 kiểu dữ liệu cơ bản trong JavaScript. Và khi học về toán tử hay hàm, bạn sẽ thấy là các kiểu dữ liệu này có…","timeToRead":3,"frontmatter":{"title":"Chuyển đổi kiểu dữ liệu trong JavaScript","shortTitle":"Chuyển đổi kiểu dữ liệu trong JS","tags":["Kiểu dữ liệu"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/7a5137ae71ec619ae6ca07b75469c483/bc51f/chuyen-doi-kieu-du-lieu-trong-javascript.png","srcSet":"/static/7a5137ae71ec619ae6ca07b75469c483/41200/chuyen-doi-kieu-du-lieu-trong-javascript.png 165w,\n/static/7a5137ae71ec619ae6ca07b75469c483/f979a/chuyen-doi-kieu-du-lieu-trong-javascript.png 330w,\n/static/7a5137ae71ec619ae6ca07b75469c483/bc51f/chuyen-doi-kieu-du-lieu-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/7a5137ae71ec619ae6ca07b75469c483/322ad/chuyen-doi-kieu-du-lieu-trong-javascript.webp 165w,\n/static/7a5137ae71ec619ae6ca07b75469c483/de3b3/chuyen-doi-kieu-du-lieu-trong-javascript.webp 330w,\n/static/7a5137ae71ec619ae6ca07b75469c483/2b2b5/chuyen-doi-kieu-du-lieu-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-03T19:00:00Z","update":"2021-11-15T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/ham-tuong-tac-nguoi-dung-alert-confirm-prompt/","date":"2017-05-03T19:15:00.000Z"},"excerpt":"Trong bài viết về chương trình JavaScript đầu tiên, mình có đề cập đến việc hiển thị hộp thoại với hàm alert. Đây là một trong ba hàm giúp…","timeToRead":5,"frontmatter":{"title":"Tương tác người dùng với: alert, confirm và prompt","shortTitle":"Hàm alert, confirm và prompt","tags":["Trình duyệt"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/6dd138b66140e8ab67d101ec5479a038/bc51f/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.png","srcSet":"/static/6dd138b66140e8ab67d101ec5479a038/41200/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.png 165w,\n/static/6dd138b66140e8ab67d101ec5479a038/f979a/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.png 330w,\n/static/6dd138b66140e8ab67d101ec5479a038/bc51f/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/6dd138b66140e8ab67d101ec5479a038/322ad/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.webp 165w,\n/static/6dd138b66140e8ab67d101ec5479a038/de3b3/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.webp 330w,\n/static/6dd138b66140e8ab67d101ec5479a038/2b2b5/ham-tuong-tac-nguoi-dung-alert-confirm-prompt.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-03T19:15:00Z","update":"2021-11-18T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/toan-tu-la-gi-toan-tu-trong-javascript/","date":"2017-05-03T20:00:00.000Z"},"excerpt":"Trong toán học, bạn đã biết về các toán tử cơ bản như: cộng (+), trừ (-), nhân (*) và chia (/),... Trong JavaScript cũng có những toán tử…","timeToRead":12,"frontmatter":{"title":"Toán tử là gì? Các toán tử trong JavaScript","shortTitle":"Toán tử là gì? Các toán tử trong JS","tags":["Toán tử"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/28a02b740d28ba41efde457e2f2cf867/bc51f/toan-tu-la-gi-toan-tu-trong-javascript.png","srcSet":"/static/28a02b740d28ba41efde457e2f2cf867/41200/toan-tu-la-gi-toan-tu-trong-javascript.png 165w,\n/static/28a02b740d28ba41efde457e2f2cf867/f979a/toan-tu-la-gi-toan-tu-trong-javascript.png 330w,\n/static/28a02b740d28ba41efde457e2f2cf867/bc51f/toan-tu-la-gi-toan-tu-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/28a02b740d28ba41efde457e2f2cf867/322ad/toan-tu-la-gi-toan-tu-trong-javascript.webp 165w,\n/static/28a02b740d28ba41efde457e2f2cf867/de3b3/toan-tu-la-gi-toan-tu-trong-javascript.webp 330w,\n/static/28a02b740d28ba41efde457e2f2cf867/2b2b5/toan-tu-la-gi-toan-tu-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-03T20:00:00Z","update":"2021-11-06T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/toan-tu-so-sanh-trong-javascript/","date":"2017-05-04T20:00:00.000Z"},"excerpt":"Qua bài viết trước, bạn đã biết toán tử là gì, cũng như các loại toán tử trong JavaScript giúp cho việc tính toán. Tiếp theo, mình sẽ tìm…","timeToRead":14,"frontmatter":{"title":"Toán tử so sánh trong JavaScript","shortTitle":null,"tags":["Toán tử"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/49304b10105cbd8e9efdf2a6047dac00/bc51f/toan-su-so-sanh-trong-javascript.png","srcSet":"/static/49304b10105cbd8e9efdf2a6047dac00/41200/toan-su-so-sanh-trong-javascript.png 165w,\n/static/49304b10105cbd8e9efdf2a6047dac00/f979a/toan-su-so-sanh-trong-javascript.png 330w,\n/static/49304b10105cbd8e9efdf2a6047dac00/bc51f/toan-su-so-sanh-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/49304b10105cbd8e9efdf2a6047dac00/322ad/toan-su-so-sanh-trong-javascript.webp 165w,\n/static/49304b10105cbd8e9efdf2a6047dac00/de3b3/toan-su-so-sanh-trong-javascript.webp 330w,\n/static/49304b10105cbd8e9efdf2a6047dac00/2b2b5/toan-su-so-sanh-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-04T20:00:00Z","update":"2021-11-07T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/toan-tu-logic-trong-javascript/","date":"2017-05-05T20:00:00.000Z"},"excerpt":"JavaScript có bốn toán tử logic là: OR ||, AND &&, NOT ! và \"Nullish Coalescing\" ??. Trong đó, ba toán tử OR, AND và NOT là ba toán tử logic…","timeToRead":18,"frontmatter":{"title":"Toán tử logic trong JavaScript","shortTitle":null,"tags":["Toán tử"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/32294ea96dc7e5564a6ea4479a778205/bc51f/toan-tu-logic-trong-javascript.png","srcSet":"/static/32294ea96dc7e5564a6ea4479a778205/41200/toan-tu-logic-trong-javascript.png 165w,\n/static/32294ea96dc7e5564a6ea4479a778205/f979a/toan-tu-logic-trong-javascript.png 330w,\n/static/32294ea96dc7e5564a6ea4479a778205/bc51f/toan-tu-logic-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/32294ea96dc7e5564a6ea4479a778205/322ad/toan-tu-logic-trong-javascript.webp 165w,\n/static/32294ea96dc7e5564a6ea4479a778205/de3b3/toan-tu-logic-trong-javascript.webp 330w,\n/static/32294ea96dc7e5564a6ea4479a778205/2b2b5/toan-tu-logic-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-05T20:00:00Z","update":"2021-11-09T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/cau-truc-re-nhanh-trong-javascript/","date":"2017-05-06T20:00:00.000Z"},"excerpt":"Khi lập trình, bạn sẽ thường xuyên gặp tình huống là chỉ thực hiện một hành động nếu một hoặc nhiều điều kiện thỏa mãn. Để giải quyết vấn đề…","timeToRead":9,"frontmatter":{"title":"Cấu trúc rẽ nhánh trong JavaScript","shortTitle":"Cấu trúc rẽ nhánh trong JS","tags":["Toán tử","Cấu trúc rẽ nhánh"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/891280dd9e0f2f7b120bb8953b465bfd/bc51f/cau-truc-re-nhanh-trong-javascript.png","srcSet":"/static/891280dd9e0f2f7b120bb8953b465bfd/41200/cau-truc-re-nhanh-trong-javascript.png 165w,\n/static/891280dd9e0f2f7b120bb8953b465bfd/f979a/cau-truc-re-nhanh-trong-javascript.png 330w,\n/static/891280dd9e0f2f7b120bb8953b465bfd/bc51f/cau-truc-re-nhanh-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/891280dd9e0f2f7b120bb8953b465bfd/322ad/cau-truc-re-nhanh-trong-javascript.webp 165w,\n/static/891280dd9e0f2f7b120bb8953b465bfd/de3b3/cau-truc-re-nhanh-trong-javascript.webp 330w,\n/static/891280dd9e0f2f7b120bb8953b465bfd/2b2b5/cau-truc-re-nhanh-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-06T20:00:00Z","update":"2021-11-17T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/toan-tu-nullish-coalescing-trong-javascript/","date":"2017-05-06T21:00:00.000Z"},"excerpt":"Toán tử Nullish Coalescing ký hiệu ?? (toán tử hai dấu chấm hỏi) là toán tử mới trong JavaScript. Sau đây, mình sẽ cùng tìm hiểu xem toán tử…","timeToRead":6,"frontmatter":{"title":"Toán tử Nullish Coalescing (??) trong JavaScript","shortTitle":"Toán tử Nullish Coalescing (??) trong JS","tags":["Toán tử"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/1b7c5db7d4014eec10745a08677508e2/bc51f/toan-tu-nullish-coalescing-trong-javascript.png","srcSet":"/static/1b7c5db7d4014eec10745a08677508e2/41200/toan-tu-nullish-coalescing-trong-javascript.png 165w,\n/static/1b7c5db7d4014eec10745a08677508e2/f979a/toan-tu-nullish-coalescing-trong-javascript.png 330w,\n/static/1b7c5db7d4014eec10745a08677508e2/bc51f/toan-tu-nullish-coalescing-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/1b7c5db7d4014eec10745a08677508e2/322ad/toan-tu-nullish-coalescing-trong-javascript.webp 165w,\n/static/1b7c5db7d4014eec10745a08677508e2/de3b3/toan-tu-nullish-coalescing-trong-javascript.webp 330w,\n/static/1b7c5db7d4014eec10745a08677508e2/2b2b5/toan-tu-nullish-coalescing-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-06T21:00:00Z","update":"2021-11-18T21:30:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/cau-lenh-switch-case-trong-javascript/","date":"2017-05-07T04:00:00.000Z"},"excerpt":"Trong bài viết về cấu trúc rẽ nhánh trong JavaScript, mình đã tìm hiểu về câu lệnh if và toán tử ?. Ngoài ra, mình cũng có thể sử dụng lệnh…","timeToRead":6,"frontmatter":{"title":"Câu lệnh Switch Case trong JavaScript","shortTitle":"Switch - Case trong JavaScript","tags":["Cấu trúc rẽ nhánh"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/44bdcd8fe059f9e1f46aefb24bed9989/bc51f/cau-lenh-switch-case-trong-javascript.png","srcSet":"/static/44bdcd8fe059f9e1f46aefb24bed9989/41200/cau-lenh-switch-case-trong-javascript.png 165w,\n/static/44bdcd8fe059f9e1f46aefb24bed9989/f979a/cau-lenh-switch-case-trong-javascript.png 330w,\n/static/44bdcd8fe059f9e1f46aefb24bed9989/bc51f/cau-lenh-switch-case-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/44bdcd8fe059f9e1f46aefb24bed9989/322ad/cau-lenh-switch-case-trong-javascript.webp 165w,\n/static/44bdcd8fe059f9e1f46aefb24bed9989/de3b3/cau-lenh-switch-case-trong-javascript.webp 330w,\n/static/44bdcd8fe059f9e1f46aefb24bed9989/2b2b5/cau-lenh-switch-case-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-07T04:00:00Z","update":"2021-11-19T20:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/vong-lap-trong-javascript/","date":"2017-05-07T04:50:00.000Z"},"excerpt":"Đôi khi bạn cần phải lặp lại một hành động với số lần cho trước. Thay vì phải viết lại code giống nhau cho mỗi lượt lặp, JavaScript cung cấp…","timeToRead":12,"frontmatter":{"title":"Vòng lặp trong JavaScript","shortTitle":null,"tags":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/db81fbbb35ef261177272db556003b0f/bc51f/vong-lap-trong-javascript.png","srcSet":"/static/db81fbbb35ef261177272db556003b0f/41200/vong-lap-trong-javascript.png 165w,\n/static/db81fbbb35ef261177272db556003b0f/f979a/vong-lap-trong-javascript.png 330w,\n/static/db81fbbb35ef261177272db556003b0f/bc51f/vong-lap-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/db81fbbb35ef261177272db556003b0f/322ad/vong-lap-trong-javascript.webp 165w,\n/static/db81fbbb35ef261177272db556003b0f/de3b3/vong-lap-trong-javascript.webp 330w,\n/static/db81fbbb35ef261177272db556003b0f/2b2b5/vong-lap-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-07T04:50:00Z","update":"2021-11-20T21:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/ham-la-gi-ham-trong-javascript/","date":"2017-05-08T09:00:00.000Z"},"excerpt":"Function JavaScript (hàm trong JavaScript) là một thành phần không thể thiếu trong cấu trúc chương trình. Hàm giúp chương trình trở nên rõ…","timeToRead":14,"frontmatter":{"title":"Hàm là gì? Hàm trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/39d3b13ee1252062227b803c4117a101/bc51f/ham-la-gi-ham-trong-javascript.png","srcSet":"/static/39d3b13ee1252062227b803c4117a101/41200/ham-la-gi-ham-trong-javascript.png 165w,\n/static/39d3b13ee1252062227b803c4117a101/f979a/ham-la-gi-ham-trong-javascript.png 330w,\n/static/39d3b13ee1252062227b803c4117a101/bc51f/ham-la-gi-ham-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/39d3b13ee1252062227b803c4117a101/322ad/ham-la-gi-ham-trong-javascript.webp 165w,\n/static/39d3b13ee1252062227b803c4117a101/de3b3/ham-la-gi-ham-trong-javascript.webp 330w,\n/static/39d3b13ee1252062227b803c4117a101/2b2b5/ham-la-gi-ham-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-08T09:00:00Z","update":"2021-11-21T09:00:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/function-expression-trong-javascript/","date":"2017-05-09T09:00:00.000Z"},"excerpt":"Trong bài viết trước, mình đã tìm hiểu về hàm trong JavaScript. Cách khai báo hàm đó gọi là \"function declaration\". Bài viết này mình sẽ tìm…","timeToRead":7,"frontmatter":{"title":"Function expression trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/209d5fccc58f470c449f375a358e2714/bc51f/function-expression-trong-javascript.png","srcSet":"/static/209d5fccc58f470c449f375a358e2714/41200/function-expression-trong-javascript.png 165w,\n/static/209d5fccc58f470c449f375a358e2714/f979a/function-expression-trong-javascript.png 330w,\n/static/209d5fccc58f470c449f375a358e2714/bc51f/function-expression-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/209d5fccc58f470c449f375a358e2714/322ad/function-expression-trong-javascript.webp 165w,\n/static/209d5fccc58f470c449f375a358e2714/de3b3/function-expression-trong-javascript.webp 330w,\n/static/209d5fccc58f470c449f375a358e2714/2b2b5/function-expression-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-09T09:00:00Z","update":"2021-11-21T14:30:00Z","series":"JavaScript: JavaScript cơ bản"}}},{"node":{"fields":{"slug":"/arrow-function-la-gi-arrow-function-trong-js/","date":"2017-05-10T09:00:00.000Z"},"excerpt":"Ngoài function declaration và function expression, JavaScript còn có arrow function. Trong bài viết này, mình sẽ trình bày về arrow function…","timeToRead":4,"frontmatter":{"title":"Arrow function là gì? Arrow function trong JavaScript","shortTitle":"Arrow function là gì?","tags":["Hàm","ES6"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/cf01248b774dedd8763acfe7e6d63f77/bc51f/arrow-function-la-gi-arrow-function-trong-js.png","srcSet":"/static/cf01248b774dedd8763acfe7e6d63f77/41200/arrow-function-la-gi-arrow-function-trong-js.png 165w,\n/static/cf01248b774dedd8763acfe7e6d63f77/f979a/arrow-function-la-gi-arrow-function-trong-js.png 330w,\n/static/cf01248b774dedd8763acfe7e6d63f77/bc51f/arrow-function-la-gi-arrow-function-trong-js.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/cf01248b774dedd8763acfe7e6d63f77/322ad/arrow-function-la-gi-arrow-function-trong-js.webp 165w,\n/static/cf01248b774dedd8763acfe7e6d63f77/de3b3/arrow-function-la-gi-arrow-function-trong-js.webp 330w,\n/static/cf01248b774dedd8763acfe7e6d63f77/2b2b5/arrow-function-la-gi-arrow-function-trong-js.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-05-10T09:00:00Z","update":"2021-11-21T16:30:00Z","series":"JavaScript: JavaScript cơ bản"}}}]}},"pageContext":{"slug":"/function-expression-trong-javascript/","series":"JavaScript: JavaScript cơ bản","nextTitle":"Hàm là gì? Hàm trong JavaScript","nextSlug":"/ham-la-gi-ham-trong-javascript/","prevTitle":"Arrow function là gì? Arrow function trong JavaScript","prevSlug":"/arrow-function-la-gi-arrow-function-trong-js/","latestEdges":[{"node":{"fields":{"slug":"/cach-chon-cms-cho-trang-web/"},"frontmatter":{"directory":"Bài viết được tài trợ","template":"post","title":"Làm thế nào để chọn CMS phù hợp cho trang web của bạn?","shortTitle":"Cách chọn CMS cho trang web","tags":["Wordpress","CMS"],"date":"2022-06-27T20:30:00Z","update":"2022-06-27T20:30:00Z"}}},{"node":{"fields":{"slug":"/async-await-la-gi-async-await-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Async/await là gì? Async/await trong JavaScript","shortTitle":"Async/await là gì? Async/await trong JS","tags":["Async - Await","Promise"],"date":"2017-07-16T06:00:00Z","update":"2022-05-11T21:45:00Z"}}},{"node":{"fields":{"slug":"/microtasks-la-gi-microtasks-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Microtasks là gì? Microtasks trong JavaScript","shortTitle":"Microtasks là gì? Microtasks trong JS","tags":["Callback","Promise"],"date":"2017-07-15T06:00:00Z","update":"2022-05-11T21:00:00Z"}}},{"node":{"fields":{"slug":"/chuyen-callback-thanh-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Chuyển callback thành promise trong JavaScript","shortTitle":"Chuyển callback thành promise trong JS","tags":["Callback","Promise"],"date":"2017-07-14T06:00:00Z","update":"2022-05-11T20:00:00Z"}}},{"node":{"fields":{"slug":"/promise-api-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Các promise API trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-13T06:00:00Z","update":"2022-05-08T21:00:00Z"}}},{"node":{"fields":{"slug":"/xu-ly-loi-voi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Xử lý lỗi với promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-12T06:00:26Z","update":"2022-05-08T20:00:00Z"}}},{"node":{"fields":{"slug":"/chuoi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Chuỗi promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-10T16:24:00Z","update":"2022-05-08T16:24:00Z"}}},{"node":{"fields":{"slug":"/promise-la-gi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Promise là gì? Promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-09T13:45:00Z","update":"2022-05-08T13:45:48Z"}}},{"node":{"fields":{"slug":"/callback-la-gi-callback-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Callback là gì? Callback trong JavaScript","shortTitle":null,"tags":["Callback","Hàm"],"date":"2017-07-08T10:40:00Z","update":"2022-05-08T10:40:48Z"}}},{"node":{"fields":{"slug":"/tuy-bien-mo-rong-doi-tuong-error/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Tùy biến và mở rộng đối tượng Error trong JavaScript","shortTitle":"Tùy biến và mở rộng đối tượng Error trong JS","tags":["Error"],"date":"2017-07-06T08:00:00Z","update":"2022-05-08T08:24:00Z"}}}],"latestEdgesTitle":"Bài viết mới cập nhật"}}, "staticQueryHashes": []}