[ Javascript ] Function trong Javascript

Chào các bạn, hôm nay Wolfactive sẽ giới thiệu cho các bạn về Function trong Javascript để các bạn có thể nắm rõ kiến thức về hàm trong javascript nhé.

1/ Function là gì?

Chắc các bạn cũng không xa lạ gì với khái niệm của hàm (function) nhỉ? Ở tất cả các loại ngôn ngữ, hàm là một chương trình con nhằm để xử lí một nhiệm vụ hay một chức năng nào đó trong chương trình, và có thể tái sử dụng nhiều lần

Ở trong Javascript mình sẽ giới thiệu cho các bạn về hai loại hàm trong javascript đó là: hàm có tên và hàm ẩn danh.

2/ Function ẩn danh(Anonymous function) và Function có tên là gì?

2.1/Function ẩn danh.

Function ẩn danh là hàm được tạo ra ngay tại một thời điểm khi chạy đoạn chương trình đó. Nói như vậy thì chắc các bạn hơi khó hình dung nên mình sẽ ví dụ cụ thể ở mục kế tiếp nhé.

2.2/ Function có tên.

Function có tên là hàm được tạo ra với tên cụ thể, đây là loại hàm mà các bạn thường hay sử dụng nhất trong các ngôn ngữ. Ví dụ như function abc(). Tuy nhiên trong javascript có 2 cách để tạo hàm. Một là Arrow Function, hai là Regular Function. Mình sẽ nói rõ hơn ở mục 3 và 4 nhé.

3/ Cách tạo function trong javascript

3.1/ Anonymous function

Cách tạo hàm Anonymous như sau:

windown.onclick = function()
{
  alert('...');
};

Như các bạn thấy, để tạo một hàm Anonymous thì bạn cần phải khai báo tên biến và gán dữ liệu cho nó bằng một hàm. Khi các bạn khai báo biến này ở bất kì nơi đâu trong javascript thì hàm này sẽ được khởi tạo.

3.2/ Cách tạo hàm có tên:

Arrow:

const wolfactive = () =>{
   alert('...');
}

Cách tạo hàm arrow cũng khá đơn giản các bạn chỉ việc khai báo const + tên hàm = () => { } là xong.

Regular:

function wolfactive() { 
   alert('...');
}

Về hàm bình thường thì mình nghĩ quá quen thuộc với các bạn rồi nhỉ? các bạn chỉ cần khai báo từ khóa function + tên là xong.

4/ Sự khác nhau giữa các loại hàm

4.1/ Anonymous:

Thông thường ở các hàm khác như Arrow và Regular. Các hàm sẽ được tạo ra và lưu vào một nhớ tạm. Tuy nhiên so với hàm Anonymous thì không được lưu vào bộ nhớ tạm vì nó chỉ thực hiện khi bạn thực hiện chức năng của đoạn code đó. Ví dụ mình tạo một hàm dùng để lưu một giá trị vào array khi click vào button. Thì khi và chỉ khi mình nhấn vào button đó, thì hàm mới được tạo ra.

Tuy nhiên giả sử mình sử dụng trong một vòng lặp 100 lần, và bên trong có khai báo hàm. Giả sử một hàm có 5kb thì hàm sẽ bị tạo 100 lần như vậy sẽ tốn đến 500kb bên cạnh đó dễ dẫn đến việc tràn bộ nhớ (leak memory) và drop browser. VD:

for(let i = 0; i < 100; i++){
  window.onclick = function(){}
}

Như vậy ta có thể biết được rằng hàm Anonymous ta nên tránh sử dụng trong các vòng lặp. Nhưng bạn có thể dùng trong các trường hợp như xử lí những việc khác mà ta cần phải xem xét như các sự kiện đơn như đóng mở Popup,…:

4.2/ Arrow và Regular:

4.2.1/ This value

Trong hàm Regular bạn không thể gọi biến this nếu như không có giá trị truyền vào và không thể gọi bằng cách trực tiếp, chỉ có thể gọi gián tiếp. Ví dụ:

Gọi trực tiếp:

function WA() {
console.log(this);
}
WA(); // giá trị trả về undefined

Khi bạn gọi trực tiếp như trên giá trị nó sẽ trả về là undefined. Tuy nhiên nếu có giá trị truyền vào thì nó có thể trả về giá trị

let a=1;
function WA(a) {
   console.log(this.a);
}
WA(); // giá trị trả về = 1

Gọi gián tiếp:

<span class="token keyword">let a = 1
function</span> <code>WA() { console.log(this); } WA.call(a); //giá trị hiển thị = 1 WA.apply(a); //giá trị hiển thị = 1

Tuy nhiên đối với Arrow Function sẽ trả về Window object chứ không phải là 1.

4.2.2/ Implicit return

Trong hàm regular để trả về một giá trị ta cần phải khai báo return + giá trị. Thì hàm mới trả về giá trị. Tuy nhiên đối với hàm Arrow thì không cần thiết, bạn có thể trả giá trị về trực tiếp. Ví dụ như sau:

Hàm regular:

function WA() {
   return 1;
}
WA(); // => 1

Hàm Arrow:

<span class="token keyword">const</span> wa <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token operator">=></span> num <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;
wa(1) // => 2</span>

5/ Tổng kết

Như vậy mình đã nói tổng quan về hàm trong javascript. Như sự khác biệt, đặc điểm, cách tạo, khi nào thì sử dụng. Tuy nhiên so với arrow function và regular function. Tuy cả hai đều có thể sử dụng như nhau nhưng theo mình thấy các bạn nên tránh lạm dụng hàm arrow nhiều lần để xử lí 1 việc nào đó. Các bạn nên cân nhắc giữa regular và arrow sao cho cân đối và hợp lí là được. Cảm ơn các bạn đã ủng hộ Wolfactive tụi mình nhé. Các bạn ủng hộ tụi mình bằng cách like fanplage nhé <3 https://www.facebook.com/Wolfactiveweb.design.SEO