Function Expressions & Function Declarations
This post hasn't been updated for 3 years
I. Function:
Function là một trong những khái niệm cơ bản nhưng được sử dụng nhiều trong Javasript. Hôm nay mình xin được phép chia sẻ với các bạn một số thông tin bên lề của Function
trong Javascript nhé.
A JavaScript function is a block of code designed to perform a particular task.
Một phương thức là 1 tập hợp câu lệnh để thực hiện 1 nhiệm vụ cụ thể.
Với định nghĩa trên, chúng ta có cú pháp cơ bản của function
:
function name(parameter1, parameter2, parameter3,...) {
// code to be executed
}
A JavaScript function is executed when "something" invokes it (calls it).
Và theo như hướng dẫn ở trên, một Function
cơ bản được khai báo và sử dụng như sau:
function helloWorld() {
alert('Hello world!');
}
helloWorld();
Vậy, chúng ta vừa đi qua cơ bản về 1 function
.
Bạn có biết rằng, với sự phát triển của Javascript
, hay cụ thể là với các bản cập nhật từ ES6, ES7, ...
, chúng ta đã có nhiều sự thay đổi hơn. Và chúng ta cũng có thêm 1 dạng mới của function
, gọi là Function Expressions
, và cú pháp cũ của function
được gọi là Function Declarations
để phân biệt.
II. Function Expressions:
1. Định nghĩa:
Định nghĩa cơ bản của Function Expressions
:
A function expression can be stored in a variable.
Một ví dụ cơ bản của Function Expressions
:
const sumOf = funnction (a, b) {
return a + b;
}
// cách viết sử dụng arrow function của ES6
const sumOf = (a,b) => {
return a + b;
}
sumOf(5,6) // -> 11
2. So sánh:
Sự khác biệt cơ bản nhất của Function Declarations
và Function Expressions
chính là Hoisting
:
Đối với Function Declarations
:
sumOf(5,9); // -> 14
function sumOf(a,b) {
return a + b;
}
Với Function Expressions
:
sumOf(5, 9) // Uncaught SyntaxError: Identifier 'sumOf' has already been declared
const sumOf = (a,b) => {
return a + b;
}
Hiểu đơn giản, Function Declarations
sẽ được khởi tạo trước khi thực thi các dòng code, còn Function Expressions
sẽ chỉ được định nghĩa khi trình phiên dịch đọc đến dòng code khai báo nó.
3. Ứng dụng:
Thông thường trong dự án mà mình đang làm việc, Function Expressions
có khá nhiều lợi ích.
- Closures
- Arguments
- IIFE
a) Closures:
// GOOD:
function tabsHandler(index) {
return function tabClickEvent(evt) {
// Doing ...
// hàm tabsHandler sẽ lưu trữ index và sử dụng khi các thẻ được click.
};
}
var tabs = document.querySelectorAll('.tab'),
i;
for (i = 0; i < tabs.length; i += 1) {
tabs[i].onclick = tabsHandler(i);
}
// BAD:
var i;
for (i = 0; i < list.length; i += 1) {
document.querySelector('#item' + i).onclick = function doSomething(evt) {
// Doing ...
// khi click vào thẻ, biến i luôn trả về list.length
}
}
b) Arguments:
Chúng ta có thể sử dụng các Function Expressions
như những argument
để làm ngắn code của chúng ta:
First:
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "You agreed." );
}
function showCancel() {
alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);
Become:
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);
c) IIFE:
Chúng ta có thể tạo ra những module
nhỏ nhờ Function Expressrions
:
var myModule = (function () {
var privateMethod = function () {
console.log('A private method');
},
someMethod = function () {
console.log('A public method');
},
anotherMethod = function () {
console.log('Another public method');
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
}());
Tham khảo:
All Rights Reserved