arrow function là gì - Thien An Blog

Sự khác biệt giữa Arrow Function và Function thông thường

Ân Vũ — Sun, 03 Sep 2017 13:42:26 +0000

Sơ lược về bài viết

Ở bài viết trước, chúng ta đã xem qua Tìm hiểu về một số cú pháp ES6 trong JavaScript . Trong bài viết này, chúng ta sẽ tìm hiểu về sự khác biệt giữa Arrow Function và Function thông thường khi sử dụng trên thực tế. Tuy Arrow Function và Function phần giống nhau về cách định nghĩa 1 hàm nhưng tham chiếu đến bối cảnh (context) hay môi trường xung quanh nó sẽ khác. Vậy tham chiếu đến bối cảnh hay môi trường xung quanh là như thế nào? Chúng ta sẽ cùng bắt đầu tìm hiểu.

Các chủ đề mà chúng ta sẽ tìm hiểu như sau:

Ví dụ cơ bản về bối cảnh (context)
Ví dụ bối cảnh khi dùng trong setTimeout kết hợp với jQuery
Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery
Arrow Function thường được dùng trên Class (ES6)

Ví dụ cơ bản về bối cảnh (context)

Vậy bối cảnh ở đây là gì? Thật khó để định nghĩa cho các bạn chính xác được nghĩa của nó ở ngữ cảnh tiếng Việt. Vì thế các bạn chỉ cần hiểu đơn giản là từ khóa this được sử dụng trong Function thông thường và Arrow Function sẽ tham chiếu đến những môi trường hay bối cảnh khác nhau. Để tránh khó hiểu thêm, các bạn hãy xem qua ví dụ bên dưới:

See the Pen Sự khác nhau giữa Function thông thường và Arrow Function by An Vu (@thienanblog) on CodePen.

Ở ví dụ này các bạn cũng đã thấy từ khóa this của chúng ta có giá trị khác biệt, this ở function thường sẽ tham chiếu đến chính Object chứa nó, còn Arrow Function sẽ tham chiếu đến cha gần nhất của nó nên vì thế nó hiểu từ khóa this của function cha bao hàm nó.

Và khi các bạn có dùng thêm use strict để ràng buộc chặt chẽ hơn về phạm vi hoạt động của biến thì this trong Arrow Function có giá trị sẽ là undefined thay vì trả về cho các bạn đối tượng window. Nên các bạn hãy chú ý điều này.

Ví dụ bối cảnh khi dùng trong setTimeout kết hợp với jQuery

See the Pen Bối cảnh khi dùng trong setTimeout kết hợp với jQuery của Arrow Function by An Vu (@thienanblog) on CodePen.

Như các bạn cũng thấy rằng ở Anonymous Function, chúng ta phải lưu tạm this của phương thức click vào biến btn để có thể truyền vào bên trong setTimeout. Trong đó, từ khóa this ở đối số của setTimeout được tham chiếu đến chính Anonymous Function của nó. Vì vậy, nó sẽ không hiểu this ở đây có ý nghĩa là btn chứ không phải là Anonymous Function đang được dùng.

Và khi các bạn dùng Arrow Function, chúng ta đã đơn giản hóa đi 1 bước khi dùng, giúp cho code của chúng ta dễ hiểu hơn là this này được tham chiếu đến chính Anonymous Function của phương thức click của jQuery chứ không phải chính nó nữa.

Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery

See the Pen Một ví dụ khác khi kết hợp Arrow Function với Animation của jQuery by An Vu (@thienanblog) on CodePen.

Tương tự với ví dụ ở trên, trong ví dụ này tôi chủ yếu muốn cho các bạn thêm một số kinh nghiệm khi sử dụng trên thực tế như thế nào.

Arrow Function thường được dùng trên Class

Chuẩn ES6 cho phép chúng ta có thể viết class giống như những ngôn ngữ khác mà các bạn có thể đã từng biết qua, nếu chưa biết thì bây giờ các bạn biết, không sao cả. Tuy nhiên, class trong Javascript có những quy ước và cách khởi tạo thuộc tính khác biệt so với các ngôn ngữ từng được biết. Thông qua ví dụ này, phần nào các bạn cũng sẽ thích thú viết class hơn là viết function thông thường.

See the Pen Arrow Function trên Class by An Vu (@thienanblog) on CodePen.

Khi chạy ví dụ này, các bạn cũng sẽ thấy rằng việc chúng ta sử dụng Function thông thường trên Class sẽ khiến từ khóa this của chúng ta có giá trị undefined ngay. Nên Arrow Function cũng thường rất được dùng trên Class thay vì Function thông thường. Chỉ là thường dùng thôi nhé, vì một số trường hợp chúng ta vẫn phải sử dụng Function thông thường để tham chiếu đến this của chính nó. Thường là các callback được gọi từ các sự kiện của thư viện bên ngoài mà chúng ta sử dụng.

Nếu bạn vẫn còn hứng thú thì hãy xem qua sự kiện onSet trong thư viện Pickadate để hiểu rõ hơn tôi nói cái gì. Nếu như chúng ta dùng Arrow Function trong trường hợp đó thì chắc chắn sẽ nhận sai giá trị ngay. Vì vậy, hãy đón xem ở 1 bài viết khác về thư viện Pickadate này mà tôi sẽ viết sắp tới các bạn nhé.

Qua bài viết này, chúng ta cũng đã tìm hiểu xong sự khác biệt giữa Arrow Function và Function thông thường như thế nào rồi. Cám ơn các bạn đọc giả đã ủng hộ Website.

The post Sự khác biệt giữa Arrow Function và Function thông thường appeared first on Thien An Blog.

Tìm hiểu về một số cú pháp ES6 trong JavaScript

Ân Vũ — Thu, 31 Aug 2017 19:10:27 +0000

Giới thiệu

Cú pháp ES6 hay còn được gọi là ES2015 đều là những chuẩn chung để nói về cú pháp mới trong JavaScript, kể cả sau này chúng ta cũng có thể gặp ES7 (đã ra mắt 2016) và ES8 nữa không chừng. Ngoài những cú pháp mới hỗ trợ cho các lập trình viên tận răng sức mạnh từ JavaScript, các cú pháp cũ của chúng ta cũng sẽ được thay đổi và nâng cấp theo chuẩn mới. Giúp cho mã nguồn chúng ta dễ đọc và dễ quản lý hơn.

Sơ lược về bài viết

Trong bài viết này chúng ta sẽ tìm hiểu qua các chủ đề sau:

Cú pháp khởi tạo biến (Variable) hoặc hằng số (Constant)
Tìm hiểu nội suy chuỗi (String Interpolation)
Tìm hiểu về các giá trị mặc định (Default Values) của các tham số (Parameters) trong hàm (Function)
Tìm hiểu về Arrow Function và cách viết tắt của Arrow Function

Cú pháp khởi tạo biến hoặc hằng số

Trong cú pháp ES6, các bạn có thể dùng từ khóa letvà const để định nghĩa 1 biến hay hằng số. Những vấn đề này có lẽ các bạn đã từng khá quen thuộc nếu như đã từng học qua lập trình ở các ngôn ngữ khác rồi.

// Cú pháp khởi tạo biến và hằng số
let numVar = 1;
let stringVar = 'Hello World!!!';
// numVar += 1; ==> numVar === 2

const numConst = 1;
const stringConst = 'Hello World!!!';
// numConst += 1; ==> error

Ở đoạn code trên cho các bạn thấy rằng, cách thức sử dụng let hoàn toàn không khác gì so với cách chúng ta sử dụng var cả. Vì thế các bạn nên sử dụng let thay vì var trong mã nguồn để tránh gặp lại các lỗi xưa kia mà Javascript từng bị mắc phải và đã được thay thế ở cú pháp mới.

Nội suy chuỗi

Trước đây để có thể nối các chuỗi ở các biến lại với nhau, ta thường dùng phép cộng (+ ) để cộng các vế lại sẽ ra được 1 chuỗi hoàn chỉnh. Thì với cú pháp ES6 này, việc sử dụng biến hoặc hằng số trực tiếp trong chuỗi giúp đơn giản hóa việc chúng ta gõ và code nhìn cũng sạch sẽ hơn rất nhiều.

// Nội suy chuỗi (String Interpolation)
let stringVar = 'Hello World!!!';
console.log(`Nội suy chuỗi: ${stringVar}`); // ==> "Nội suy chuỗi: Hello World!!!"

function stringInterpolation() {
  return 'stringInterpolation đã được gọi!!!';
}
console.log(`Nội suy chuỗi: ${stringInterpolation()}`);

Các bạn thấy đấy để có thể nội suy một biến nào đó bên trong rất là dễ dàng đúng không? Javascript sẽ tự hiểu và thay thế hoặc gọi lại hàm mà bạn muốn bên trong dấu hiệu ${}này.

Tìm hiểu về các giá trị mặc định của các tham số trong hàm

Trước đây, để các bạn có thể định nghĩa được các tham số mặc định khi truyền vào thì cách truyền thống sẽ như thế này:

function originalDefaultValues(a, b) {
     a = a || 1; // Nếu có giá trị và không rỗng hoặc sai(false) thì set là a, nếu không sẽ là 1
     b = b || 2; // Tương tự như trên
}

Và với cú pháp mới, Javascript đã cho phép chúng ta viết dễ dàng hơn hẳn:

// Các giá trị mặc định của các tham số trong Function
function defaultParams(a = 1, b = 2) {
  console.log(`Giá trị mặc định: ${a} - ${b}`);
}
defaultParams();

Tìm hiểu về Arrow Function và cách viết tắt của Arrow Function

Arrow Function hay còn gọi là hàm mũi tên, nhưng mà tốt nhất thì các bạn đừng dịch ra vì nghe nó rất “củ chuối”. Nó thừa hưởng cách viết ngắn gọn bằng cú pháp ES6 nhưng bên trong nó sẽ có nhiều điểm khác biệt so với hàm thông thường mà chúng ta được biết.

// Function thông thường
function regularFunc() {
  this.hello = 'Hello Regular Function';
  console.log('regularFunc: ' + this.hello);
}
regularFunc();

// Anonymous Function
let anonymousFunc = function() {
  this.hello = 'Hello Anonymous Function';
  console.log('anonymousFunc: ' + this.hello);
}
anonymousFunc();

// Arrow Function
let arrowFunc = () => {
  // this ở đây sẽ không hiểu nếu bạn dùng 'use strict' ở Javascript hoặc khi dùng Babel
  this.hello = 'Hello Arrow Function';
  console.log('arrowFunc: ' + this.hello);
}
arrowFunc();

// Một số cách viết tắt trong Arrow Function
let full = (a = 1 , b = 2) => {
  return a + b;
}
full(); // full === 3
let one = a => a; one(5); // one === 5
let two = (a, b) => a + b; two(1, 2) // two === 3

Qua đoạn code trên thì các bạn cũng sẽ được thấy 2 cách thông dụng nhất từ trước đến nay là Function thông thường và cách sử dụng Anonymous Function (Hàm vô danh – một cách khởi tạo hàm khác của hàm thông thường) để khởi tạo hàm thì nay chúng ta sẽ tạo hàm bằng cú pháp gần như tương đương với 2 cách trên.

Ngoài ra, các bạn còn được hỗ trợ thêm cho việc “lười biếng” với các cách viết tắt không kém phần khó hiểu khi sử dụng ban đầu. Vậy đâu là sự khác biệt giữa Function thông thường và Arrow Function ??? Mời đọc giả hãy đón xem ở các bài viết sau.

Source tham khảo

See the Pen Tìm hiểu cú pháp ES6 by Ân Vũ (@thienanblog) on CodePen

The post Tìm hiểu về một số cú pháp ES6 trong JavaScript appeared first on Thien An Blog.