Hàm declaration và hàm expression trong Javascript

Như mình đã nói ở trên thì trong Javascript  có hai kiểu hàm declaration và hàm expression. Thì hai kiểu hàm này có gì giống và khác nhau?. Và mỗi kiểu hàm riêng đó chúng có những ưu và nhược điểm gì.

Đầu tiên chúng ta sẽ nhìn vào hai cách viết hàm declaration và hàm expression như sau.

<script type="text/javascript">
	// Hàm declaration
	function _icheck(val){
		document.writeln(val);
	}
	
	// Hàm expression
	var _icheck = function(val){
		document.writeln(val);
	}
</script>

 Nhìn chung thì hai hàm này có cách xử lý giống nhau phải không???

Câu hỏi đặt ra là: Chúng khác nhau chỗ nào?

Sự khác nhau đó là: Hàm declaration có thể được gọi bất cứ khi nào, bất cứ chỗ nào bởi bộ phân tích (interpreter) của trình duyệt(Khi chạy chương trình thì bộ phân tích của trình duyệt thấy nó và lưu ngay nó vào bộ nhớ RAM). Javascript luôn luôn biết sự có mặt của nó và parse nó trước khi chương trình Javascript của chúng ta thực thi. Nói một cách khác là Javascript đưa các hàm loại này lên trên top của scope hiện tại.

<script type="text/javascript">
	// Call funcion
	_icheck('Học Javascript');
	
	// Khai báo hàm
	function _icheck(val){
		document.writeln(val);
	}
</script>

Xem kết quả

Ở ví dụ trên chúng ta thấy hàm _icheck() được gọi trước khi nó được khai báo. Tuy nhiên, chúng ta cũng có thể viết dạng như sau cũng được:

<script type="text/javascript">
	// Khai báo hàm
	function _icheck(val){
		document.writeln(val);
	}
	// Call funcion
	_icheck('Học Javascript');
</script>

Còn hàm expression thì sao? Nó sẽ không được Javascript xem sét cho đến khi nó được gán vào biến.

<script type="text/javascript">
	// Gọi hàm: Báo lỗi
	_icheck('Học Javascript');
	
	// Khai báo hàm
	var _icheck = function(val){
		document.writeln(val);
	}
</script>

Xem kết quả

Nếu các bạn chạy đoạn mã trên thì sẽ báo lỗi vì expression được gọi trước khi nó được khai báo. Để chạy được, chúng ta phải viết lại như sau:

<script type="text/javascript">
	// Khai báo hàm
	var _icheck = function(val){
		document.writeln(val);
	}
	
	// Gọi hàm: Báo lỗi
	_icheck('Học Javascript');
</script>

Xem kết quả

Tổng kết:

- Hàm declaration thì có thể gọi trước khi khai báo hoặc sau khi khai báo đều được, còn hàm expression thì phải có trình tự.

- Hàm declaration, khi trình duyệt nhận được file JS chứa nó, các hàm này được lưu ngay xuống RAM và nó thực thi ngay hành động của hàm đó sẽ gây tốn bộ nhớ ram, ảnh hưởng tới thiết bị duyệt web rất nhiều.

- Đối với hàm expression, hàm không lưu vào bộ nhớ RAM, nó chỉ hoạt động khi được gọi.