function trong javascript

Chào các bạn

Trong bài viết này chúng ta cùng nhau tìm hiểu về function.

function là gì ?

function là một chức năng. Dùng để thực hiện một hoặc nhiều hành động gì đó. Mà chúng ta có thể gọi tới gọi lui nhiều lần.

Khai báo hàm

1. Cú pháp.

1function logName () {
2    console.log("Tên"); 
3}

2. Gọi hàm.

Để gọi một hàm chúng ta bắt đầu gọi tên của chức năng, sau đó là dấu ngoặc đơn ().

1function logName () {
2    console.log("Tên"); // Tên
3}
4
5logName() // Gọi hàm

logName() ở đây chính là lệnh gọi hàm.

3. Tham số trong hàm.

Chức năng có thể không có tham số.

1function logName (/*Tham số*/) {
2    console.log("Tên"); // Tên
3}

Hoặc có thể là một

1function logName (name) {
2    console.log("Tên: ", name); // Tên: Hồ Quang Trí
3}
4
5logName("Hồ Quang Trí");

Hoặc có thể có nhiều tham số, mỗi tham số được cách nhau bằng dấu phẩy ,

1function logName (name, age) {
2    console.log("Tên: ", name); // Tên: Hồ Quang Trí
3    console.log("Tuổi: ", age); // Tuổi: 100
4}
5
6logName("Hồ Quang Trí", 100);

Nếu chức năng có tham số mà chúng ta khi gọi không truyền vào giá trị thì mặc định giá trị tham số đó là undefined

1function logName (name) {
2    console.log("Tên: ", name); // Tên: undefined
3}
4
5logName() // Gọi hàm

4. Chức năng có thể trả về giá trị

Cũng giống như bất kỳ ngôn ngữ lập trình nào khác. Trong javascript chức năng có thể không trả về giá trị. Chức năng đó gọi là hàm void trong các ngôn ngữ khác. Khi đó giá trị mặc định trả về của chức năng đó là undefined

1function logName (name) {
2    console.log("Tên: ", name); // Tên: Hồ Quang Trí
3}
4
5let giaTriTraVe = logName("Hồ Quang Trí") // Gọi hàm
6console.log(giaTriTraVe); // undefined

giaTriTraVe = undefined các bạn nên ghi nhớ nó vào tâm trí.

Hoặc có thể trả về một giá trị. Để trả về giá trị chúng ta dùng từ khóa return.

1function logName (name, a, b) {
2    console.log("Tên: ", name); // Tên: Hồ Quang Trí
3    return a * b; // trả về giá trị
4}
5
6let giaTriTraVe = logName("Hồ Quang Trí", 3, 2) // Gọi hàm
7console.log(giaTriTraVe); // 6

Giá trị trả về ở đây có thể có rất nhiều kiểu

• Trả về kiểu boolean

  1      function isCheck(a, b) {
  2      return a > b // trả về giá trị kiểu boolean
  3  }
  4
  5  let check = isCheck(1, 2); 
  6  console.log(check); // false

• Trả về kiểu object

  1  function getUser() {
  2      return {
  3          name: "Hồ Quang Trí",
  4          age: 100
  5      }
  6  }
  7
  8  let user = getUser();
  9  console.log(user); // {name: 'Hồ Quang Trí', age: 100}

• Trả về kiểu symbol

  1  function getSymbolId () {
  2      return Symbol("132");
  3  }
  4
  5  let id = getSymbolId();
  6  console.log(id); // Symbol(132)
  7  console.log(typeof id); // symbol

... Và còn rất nhiều kiểu trả về nữa. Mình lười nên không liệt kê hết được.

Biểu thức hàm

1. Cú pháp

1let logName = function () {
2    console.log("Hồ Quang Trí");
3}

Ý nghĩa thì cũng giống như mình định nghĩa ở trên.

Chức năng mũi tên

1. Cú pháp

1let logName = () => {
2    console.log("Hồ Quang Trí");
3}

Chức năng mũi tên này nó không có this, arguments, super và cũng không thể gọi nó bằng từ khóa new. Đơn giản vì nó không có this

1let User = (name, age) => {
2    this.name = name;
3    this.age = age;
4    return this;
5}
6
7let user = new User("Hồ Quang Trí", 100); // Uncaught TypeError: User is not a constructor
8console.log(user);

Cùng ví dụ đó nhưng với function thì được

1let User = function (name, age) {
2    this.name = name;
3    this.age = age;
4    return this;
5}
6
7let user = new User("Hồ Quang Trí", 100); 
8console.log(user); // {name: 'Hồ Quang Trí', age: 100}

Tổng kết

Trong bài viết này mình đã đi sơ qua về function trong javascript.

Các bạn muốn tìm hiểu sâu hơn về nó các bạn có thể tham khảo tại đây function

Nếu các bạn chịu khó đọc và nhớ vững lý thuyết thì sau này rất tốt cho phát hiện lỗi sau này nhé. Đơn nhiên nó sẽ nuốt bạn cả đống thời gian.

Ok 😀😀😀😀😀😀