{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/function-declaration-vs-function-expression-in-js","result":{"data":{"markdownRemark":{"id":"19973511-1813-5c25-9893-c6711758cf60","html":"

Post này chỉ là 1 note nhỏ của mình cho những dev hay quên về 2 khái niệm function declaration và function expression để mỗi lần nhắc đến chỉ việc vào đây xem lại chứ không cần phải google nữa 😅😅

\n

\"Take

\n

Chắc hẳn anh em ngày ngày làm việc với javascript sẽ viết rất nhiều function với các cú pháp như:

\n
function doSomething() {} // function declaration\n\n// hoặc\nconst doSomething = function() {} // function expression\n\n// hoặc\nconst doSomething = () => {} // function expression
\n

Cách viết đầu tiên chính là function declaration, và 2 cách sau là function expression, vậy chúng khác gì nhau và sử dụng như thế nào?

\n

Definition

\n

Khác biết đầu tiên chính là cách định nghĩa function

\n\n
function doSomething() {}
\n\n
const doSomething = function() {}\n\n// Anonymous function in ES6 syntax\nconst doSomething = () => {}
\n

Hoisting

\n

Hoisting là 1 cơ chế của Javascript thể hiện việc đưa function và variable lên trên cùng của scope trước khi code được thực thi.

\n
\n

Hoisting chỉ áp dụng function declarations, không áp dụng cho function expressions

\n
\n

Có thế hiểu đơn giản qua ví dụ sau:

\n
sayHello() // => \"Hello\"\n\nfunction sayHello() {\n  console.log(\"Hello\")\n}
\n

Bạn có thể call function declaration ở bất cứ đâu trong scope nó khởi tạo

\n

Tuy nhiên function expression chỉ có thể gọi sau khi định nghĩa

\n
sayHello() // => Uncaught ReferenceError: Cannot access 'sayHello' before initialization\n\nconst sayHello = function() {\n  console.log(\"Hello\")\n}
\n

Tùy theo thói quen của dev và rule của project hoặc team leader đặt ra mà có thể sử dụng 1 trong 2 cách define function này.

\n

Tuy nhiên có 1 số trường hợp đặc biệt để sử dụng function expression

\n

IIFE

\n

Immediately Invoked Function Expressions hay 1 anonymous function được chạy ngay sau khi khởi tạo

\n
(function() {\n    console.log('Code runs!')\n})();\n\n// ES6\n(() => {\n    console.log('Code runs!')\n})();
\n

Callback

\n

1 trường hợp sử dụng function expression nữa đó là dùng làm callback

\n
buttonElement.addEventListener('click', function(e) {\n    console.log('button is clicked!')\n})
\n

hoặc

\n
array.map(item => {\n  // do stuff to an item\n})
\n

Đây là trường hợp phổ biến sử dụng function expression vì chúng ta không cần biết đến function này trong toàn bộ scope

\n

Tóm lại, có thể sử dụng linh hoạt 2 cách define function trên, nếu muốn 1 function có thể sử dụng linh hoạt nhiều nơi trong scope thì sử dụng function declaration còn nếu chỉ cần giới hạn trong 1 thời điểm sử dụng thì dùng function expression

\n

Tham khảo

\n","fields":{"slug":"/posts/function-declaration-vs-function-expression-in-js","tagSlugs":["/tag/javascript/","/tag/function/","/tag/function-declaration/","/tag/function-expression/","/tag/anonymous-function/","/tag/arrow-function/","/tag/es-5/","/tag/es-6/"]},"frontmatter":{"date":"2020-09-16T22:12:03.284Z","description":"Phân biệt 2 khái niệm cơ bản trong Javascript - Function Declaration vs Function Expression và các trường hợp sử dụng","tags":["javascript","function","function-declaration","function-expression","anonymous-function","arrow-function","es5","es6"],"title":"Javascript - function declaration vs function expression","socialImage":"/media/singapore.jpg","headerImage":"/media/singapore.jpg"},"timeToRead":3}},"pageContext":{"slug":"/posts/function-declaration-vs-function-expression-in-js"}}}