ES6 - Chức năng

Functionslà các khối xây dựng của mã có thể đọc được, có thể bảo trì và có thể tái sử dụng. Các hàm được định nghĩa bằng cách sử dụng từ khóa hàm. Sau đây là cú pháp để xác định một hàm tiêu chuẩn.

function function_name() { 
   // function body 
}

Để buộc thực hiện hàm, nó phải được gọi. Điều này được gọi là lệnh gọi hàm. Sau đây là cú pháp để gọi một hàm.

function_name()

Ví dụ: Định nghĩa hàm đơn giản

//define a  function 
function test() { 
   console.log("function called") 
} 
//call the function 
test()

Ví dụ định nghĩa một hàm test (). Một cặp dấu phân cách ({}) xác định thân hàm. Nó còn được gọi làfunction scope. Một hàm phải được gọi để buộc thực thi nó.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

function called

Phân loại các chức năng

Các chức năng có thể được phân loại là Returning và Parameterized chức năng.

Trả lại các chức năng

Các hàm cũng có thể trả về giá trị cùng với điều khiển, trở lại người gọi. Các hàm như vậy được gọi là hàm trả về.

Sau đây là cú pháp cho hàm trả về.

function function_name() { 
   //statements 
   return value; 
}

  • Một hàm trả về phải kết thúc bằng một câu lệnh trả về.

  • Một hàm có thể trả về nhiều nhất một giá trị. Nói cách khác, chỉ có thể có một câu lệnh trả về cho mỗi hàm.

  • Câu lệnh trả về phải là câu lệnh cuối cùng trong hàm.

Đoạn mã sau là một ví dụ về hàm trả về:

function retStr() { 
   return "hello world!!!" 
}  
var val = retStr() 
console.log(val)

Ví dụ trên định nghĩa một hàm trả về chuỗi “hello world !!!” cho người gọi. Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

hello world!!!

Các chức năng được tham số hóa

Tham số là một cơ chế để truyền giá trị cho các hàm. Các tham số tạo thành một phần của chữ ký của hàm. Các giá trị tham số được chuyển cho hàm trong quá trình gọi của nó. Trừ khi được chỉ định rõ ràng, số lượng giá trị được truyền vào một hàm phải khớp với số lượng tham số được xác định.

Sau đây là cú pháp xác định một hàm được tham số hóa.

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

Example − Parameterized Function

Ví dụ xác định một hàm bổ sung chấp nhận hai tham số n1 và n2và in ra tổng của chúng. Các giá trị tham số được chuyển cho hàm khi nó được gọi.

function add( n1,n2) { 
   var sum = n1 + n2 
   console.log("The sum of the values entered "+sum) 
} 
add(12,13)

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

The sum of the values entered 25

Tham số chức năng mặc định

Trong ES6, một hàm cho phép các tham số được khởi tạo với các giá trị mặc định, nếu không có giá trị nào được chuyển cho nó hoặc nó không được xác định. Điều tương tự được minh họa trong đoạn mã sau.

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4))

Hàm trên, đặt giá trị của b thành 1 theo mặc định. Hàm sẽ luôn coi tham số b mang giá trị 1 trừ khi một giá trị đã được truyền rõ ràng. Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

5

Giá trị mặc định của tham số sẽ bị ghi đè nếu hàm chuyển một giá trị rõ ràng.

function add(a, b = 1) { 
   return a + b; 
} 
console.log(add(4,2))

Đoạn mã trên đặt giá trị của tham số b một cách rõ ràng là 2, do đó ghi đè giá trị mặc định của nó. Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

6

Để hiểu rõ hơn, chúng ta hãy xem xét ví dụ dưới đây.

ví dụ 1

Ví dụ sau đây cho thấy một hàm nhận hai tham số và trả về tổng của chúng. Tham số thứ hai có giá trị mặc định là 10. Điều này có nghĩa là, nếu không có giá trị nào được truyền cho tham số thứ hai, giá trị của nó sẽ là 10.

<script>
   function addTwoNumbers(first,second = 10){
      console.log('first parameter is :',first)
      console.log('second parameter is :',second)
      return first+second;
   }

   console.log("case 1 sum:",addTwoNumbers(20)) // no value
   console.log("case 2 sum:",addTwoNumbers(2,3))
   console.log("case 3 sum:",addTwoNumbers())
   console.log("case 4 sum",addTwoNumbers(1,null))//null passed
   console.log("case 5 sum",addTwoNumbers(3,undefined))
</script>

Đầu ra của đoạn mã trên sẽ như được đề cập bên dưới:

first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13

Ví dụ 2

<script>
   let DEFAULT_VAL = 30
      function addTwoNumbers(first,second = DEFAULT_VAL){
         console.log('first parameter is :',first)
         console.log('second parameter is :',second)
         return first+second;
      }
      console.log("case 1 sum",addTwoNumbers(1))
      console.log("case 2 sum",addTwoNumbers(3,undefined))
</script>

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33

Tham số còn lại

Tham số phần còn lại tương tự như đối số biến trong Java. Tham số phần còn lại không hạn chế số lượng giá trị mà bạn có thể chuyển cho một hàm. Tuy nhiên, tất cả các giá trị được truyền phải cùng loại. Nói cách khác, tham số phần còn lại hoạt động như trình giữ chỗ cho nhiều đối số cùng loại.

Để khai báo một tham số nghỉ, tên tham số được bắt đầu bằng ba dấu chấm, được gọi là toán tử lây lan. Ví dụ sau minh họa tương tự.

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7);

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

0 
1 
3

Note - Tham số phần còn lại phải là tham số cuối cùng trong danh sách tham số của hàm.

Chức năng ẩn danh

Các hàm không bị ràng buộc với một định danh (tên hàm) được gọi là hàm ẩn danh. Các hàm này được khai báo động trong thời gian chạy. Các hàm ẩn danh có thể chấp nhận đầu vào và trả về đầu ra, giống như các hàm tiêu chuẩn. Một chức năng ẩn danh thường không thể truy cập được sau khi tạo lần đầu.

Các biến có thể được gán một chức năng ẩn danh. Biểu thức như vậy được gọi làfunction expression.

Sau đây là cú pháp cho hàm ẩn danh.

var res = function( [arguments] ) { ... }

Example − Anonymous Function

var f = function(){ return "hello"} 
console.log(f())

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

hello

Example − Anonymous Parameterized Function

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) 
} 
product()

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

The product : 200

Hàm tạo hàm

Câu lệnh hàm không phải là cách duy nhất để xác định một hàm mới; bạn có thể xác định động hàm của mình bằng cách sử dụng hàm tạo Hàm () cùng với toán tử mới.

Sau đây là cú pháp để tạo một hàm bằng cách sử dụng hàm tạo Hàm () cùng với toán tử mới.

var variablename = new Function(Arg1, Arg2..., "Function Body");

Hàm tạo Hàm () mong đợi bất kỳ số lượng đối số chuỗi nào. Đối số cuối cùng là nội dung của hàm - nó có thể chứa các câu lệnh JavaScript tùy ý, được phân tách với nhau bằng dấu chấm phẩy.

Hàm khởi tạo Function () không được truyền bất kỳ đối số nào chỉ định tên cho hàm mà nó tạo ra.

Example − Function Constructor

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)
} 
product()

Trong ví dụ trên, hàm tạo Hàm () được sử dụng để định nghĩa một hàm ẩn danh. Hàm chấp nhận hai tham số và trả về sản phẩm của chúng.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

The product : 200

Hàm đệ quy và JavaScript

Đệ quy là một kỹ thuật để lặp lại một hoạt động bằng cách tự gọi hàm lặp đi lặp lại cho đến khi nó đi đến kết quả. Đệ quy được áp dụng tốt nhất khi bạn cần gọi lặp lại cùng một hàm với các tham số khác nhau từ trong một vòng lặp.

Example − Recursion

function factorial(num) { 
   if(num <= 0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6))

Trong ví dụ trên, hàm gọi chính nó. Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

720

Example − Anonymous Recursive Function

(function() { 
   var msg = "Hello World" 
   console.log(msg)
})()

Hàm gọi chính nó bằng cách sử dụng một cặp dấu ngoặc đơn (). Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

Hello World

Các hàm Lambda

Lambda đề cập đến các hàm ẩn danh trong lập trình. Các hàm Lambda là một cơ chế ngắn gọn để biểu diễn các hàm ẩn danh. Các chức năng này còn được gọi làArrow functions.

Chức năng Lambda - Giải phẫu

Có 3 phần đối với một hàm Lambda -

  • Parameters - Một chức năng có thể có các tham số tùy chọn.

  • Các fat arrow notation/lambda notation (=>): Nó còn được gọi là toán tử đi tới.

  • Statements - Biểu diễn tập lệnh của chức năng.

Tip - Theo quy ước, việc sử dụng một tham số ký tự đơn được khuyến khích để khai báo hàm chính xác và gọn nhẹ.

Lambda Expression

Nó là một biểu thức hàm ẩn danh trỏ đến một dòng mã. Sau đây là cú pháp cho tương tự.

([param1, parma2,…param n] )=>statement;

Example − Lambda Expression

var foo = (x)=>10+x 
console.log(foo(10))

Ví dụ khai báo một hàm biểu thức lambda. Hàm trả về tổng của 10 và đối số được truyền vào.

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

20

Tuyên bố Lambda

Nó là một khai báo hàm ẩn danh trỏ đến một khối mã. Cú pháp này được sử dụng khi nội dung hàm kéo dài nhiều dòng. Sau đây là cú pháp của tương tự.

( [param1, parma2,…param n] )=> {       
   //code block 
}

Example − Lambda Statement

var msg = ()=> { 
   console.log("function invoked") 
} 
msg()

Tham chiếu của hàm được trả về và lưu trữ trong biến msg. Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

function  invoked

Các biến thể cú pháp

Dấu ngoặc đơn tùy chọn cho một tham số.

var msg = x=> { 
   console.log(x) 
} 
msg(10)

Dấu ngoặc nhọn tùy chọn cho một câu lệnh. Dấu ngoặc trống không có tham số.

var disp = ()=>console.log("Hello World") 
disp();

Biểu thức hàm và Khai báo hàm

Biểu thức hàm và khai báo hàm không đồng nghĩa. Không giống như một biểu thức hàm, một khai báo hàm được ràng buộc bởi tên hàm.

Sự khác biệt cơ bản giữa cả hai là, các khai báo hàm được phân tích cú pháp trước khi thực thi chúng. Mặt khác, các biểu thức hàm chỉ được phân tích cú pháp khi công cụ tập lệnh gặp nó trong quá trình thực thi.

Khi trình phân tích cú pháp JavaScript nhìn thấy một hàm trong dòng mã chính, nó sẽ giả sử khai báo hàm. Khi một hàm xuất hiện như một phần của câu lệnh, nó là một biểu thức hàm.

Chức năng nâng

Giống như các biến, các hàm cũng có thể được nâng lên. Không giống như các biến, khai báo hàm khi được kéo lên, sẽ kéo định nghĩa hàm hơn là chỉ kéo tên hàm.

Đoạn mã sau đây, minh họa hàm lưu trữ trong JavaScript.

hoist_function();  
function hoist_function() { 
   console.log("foo"); 
}

Kết quả sau được hiển thị khi thực hiện thành công đoạn mã trên.

foo

Tuy nhiên, không thể lưu các biểu thức hàm. Đoạn mã sau minh họa tương tự.

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

Biểu thức hàm được gọi ngay lập tức

Biểu thức hàm được gọi ngay lập tức (IIFE) có thể được sử dụng để tránh việc treo biến từ bên trong các khối. Nó cho phép công chúng truy cập vào các phương thức trong khi vẫn giữ được quyền riêng tư cho các biến được xác định trong hàm. Mẫu này được gọi là một hàm ẩn danh tự thực thi. Hai ví dụ sau đây giải thích rõ hơn khái niệm này.

Ví dụ 1: IIFE

var main = function() { 
   var loop = function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Ví dụ 2: IIFE

var main = function() { 
   (function() { 
      for(var x = 0;x<5;x++) { 
         console.log(x); 
      } 
   })(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Cả hai Ví dụ sẽ hiển thị kết quả sau.

0 
1 
2 
3 
4 
Uncaught ReferenceError: x is not define

Chức năng của máy phát điện

Khi một hàm bình thường được gọi, điều khiển sẽ nằm trong hàm được gọi cho đến khi nó trả về. Với các trình tạo trong ES6, hàm người gọi giờ đây có thể kiểm soát việc thực thi một hàm được gọi. Một bộ tạo giống như một hàm thông thường ngoại trừ điều đó -

  • Chức năng này có thể mang lại quyền kiểm soát cho người gọi bất kỳ lúc nào.

  • Khi bạn gọi một máy phát điện, nó không chạy ngay lập tức. Thay vào đó, bạn lấy lại một trình lặp. Hàm chạy khi bạn gọi phương thức tiếp theo của trình vòng lặp.

Trình tạo được biểu thị bằng cách thêm vào từ khóa hàm với dấu hoa thị; nếu không, cú pháp của chúng giống hệt với các hàm thông thường.

Ví dụ sau minh họa tương tự.

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
}

Bộ tạo cho phép giao tiếp hai chiều giữa người gọi và chức năng được gọi. Điều này được thực hiện bằng cách sử dụngyield từ khóa.

Hãy xem xét ví dụ sau:

function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

Trình tự của hàm tạo như sau:

  • Máy phát điện bắt đầu ở trạng thái tạm dừng đã nêu; trình lặp được trả về.

  • It.next () cho ra "Tên của bạn là gì". Máy phát điện bị tạm dừng. Điều này được thực hiện bởi từ khóa lợi nhuận.

  • Lệnh call it.next (“Ethan”) gán giá trị Ethan cho tên biến và cho ra “Môn thể thao yêu thích của bạn là gì?” Một lần nữa máy phát điện bị tạm dừng.

  • Lệnh gọi it.next (“Cricket”) gán giá trị Cricket cho môn thể thao biến và thực hiện câu lệnh trả về tiếp theo.

Do đó, đầu ra của đoạn mã trên sẽ là:

{ 
   value: 'What is your name?', done: false 
} 
{ 
   value: 'What is your favorite sport?', done: false 
} 
{ 
   value: 'Ethan\'s favorite sport is Cricket', done: true 
}

Note - Không thể biểu diễn các chức năng của bộ tạo bằng các hàm mũi tên.

Hàm mũi tên

Các hàm mũi tên được giới thiệu trong ES giúp viết các hàm trong JavaScript một cách ngắn gọn. Bây giờ chúng ta hãy tìm hiểu về điều tương tự một cách chi tiết.

ES5 và các chức năng ẩn danh

JavaScript sử dụng nhiều anonymous functions. Chức năng ẩn danh là một chức năng không có tên gắn liền với nó. Các chức năng ẩn danh được sử dụng trongfunction callback. Ví dụ sau minh họa việc sử dụng một hàm ẩn danh trong ES5:

<script>
   setTimeout(function(){
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

Ví dụ trên chuyển một hàm ẩn danh dưới dạng tham số cho hàm được xác định trước setTimeout() function. Hàm setTimeout () sẽ gọi lại hàm ẩn danh sau 1 giây.

Kết quả sau được hiển thị sau 1 giây:

Learning at TutorialsPoint is fun!!

Cú pháp hàm mũi tên

ES6 giới thiệu khái niệm về arrow function để đơn giản hóa việc sử dụng anonymous function. Có 3 phần đối với một hàm mũi tên như sau:

  • Parameters - Một hàm mũi tên có thể có các tham số tùy chọn

  • The fat arrow notation (=>) - Nó còn được gọi là toán tử đi tới

  • Statements - Đại diện cho tập lệnh của chức năng

Tip - Theo quy ước, khuyến khích sử dụng một tham số chữ cái để khai báo hàm mũi tên gọn và chính xác.

Cú pháp

//Arrow function that points to a single line of code
()=>some_expression

HOẶC LÀ

//Arrow function that points to a block of code
()=> { //some statements }`

HOẶC LÀ

//Arrow function with parameters
(param1,param2)=>{//some statement}

Ví dụ: Hàm mũi tên trong ES6

Ví dụ sau định nghĩa hai biểu thức hàm add và isEven sử dụng chức năng mũi tên

<script>
   const add = (n1,n2) => n1+n2
   console.log(add(10,20))

   const isEven = (n1) => {
      if(n1%2 == 0)
         return true;
      else
         return false;
   }
   console.log(isEven(10))
</script>

Đầu ra của đoạn mã trên sẽ như được đề cập bên dưới:

30
true

Array.prototype.map () và hàm mũi tên

Trong ví dụ sau, một hàm mũi tên được truyền dưới dạng tham số cho Array.prototype.map() function.Hàm map () thực thi hàm mũi tên cho từng phần tử trong mảng. Trong trường hợp này, hàm mũi tên hiển thị từng phần tử trong mảng và chỉ mục của nó.

<script>
   const names = ['TutorialsPoint','Mohtashim','Bhargavi','Raja']
   names.map((element,index)=> {
      console.log('inside arrow function')
      console.log('index is '+index+' element value is :'+element)
   })
</script>

Đầu ra của đoạn mã trên sẽ như dưới đây:

inside arrow function
index is 0 element value is :TutorialsPoint
inside arrow function
index is 1 element value is :Mohtashim
inside arrow function
index is 2 element value is :Bhargavi
inside arrow function
index is 3 element value is :Raja

Ví dụ: window.setTimeout () và hàm mũi tên

Ví dụ sau chuyển một hàm mũi tên dưới dạng tham số đến định nghĩa trước setTimeout() function. CácsetTimeout() hàm sẽ gọi lại hàm mũi tên sau 1 giây.

<script>
   setTimeout(()=>{
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

Kết quả sau được hiển thị sau 1 giây:

Learning at TutorialsPoint is fun!!

Hàm mũi tên và “cái này”

Bên trong một hàm mũi tên nếu chúng ta sử dụng this pointer, nó sẽ trỏ đến phạm vi từ vựng đi kèm. Điều này có nghĩa là các hàm mũi tên không tạo ra mộtthis pointertrường hợp bất cứ khi nào nó được gọi. Các hàm mũi tên sử dụng phạm vi bao quanh của nó. Để hiểu điều này, chúng ta hãy xem một ví dụ.

<script>
   //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
            //creates a new instance of this ,hides outer scope of this
            console.log(this.firstName+ " "+this.lastName)
         },2000)
      }
      this.fullNameUsingArrow = function(){
         setTimeout(()=>{
            //uses this instance of outer scope
            console.log(this.firstName+ " "+this.lastName)
         },3000)
      }
   }
   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>

Khi một hàm ẩn danh được sử dụng với setTimeout(), hàm được gọi sau 2000 mili giây. Một phiên bản mới của“this”được tạo và nó làm bóng phiên bản của hàm Student. Vì vậy, giá trị củathis.firstName và this.lastName sẽ là undefined. Hàm không sử dụng phạm vi từ vựng hoặc ngữ cảnh của quá trình thực thi hiện tại. Vấn đề này có thể được giải quyết bằng cách sử dụngarrow function.

Đầu ra của đoạn mã trên sẽ như sau:

undefined undefined
Mohammad Mohtashim
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved