Arrow function có gì tốt hơn expression function

[cute (Đạt)]

Xin chào, arrow function trong js hoàn toàn không có context đúng không? arrow function không dùng được từ khóa this bởi vì nó không có context? arrow function là một pure function (pure function tốt vì nó không phụ thuộc context như OOP?)? tất cả các framework js đều dùng arrow function? arrow function js có liên quan gì lambda expression trong C# và java không?

cách viết không có {} sau mũi tên ngầm hiểu là return
const myFunction = () => console.log("abcd");

Còn cách viết này:

const myFunction = () => {
console.log("abcd");
}

Và cách viết này:

const myFunction = () => {
return console.log("abcd");
}

Có gì khác nhau?

ahihi

[noname00 (HK boy)]

Arrow function là một tính năng mới xuất hiện kể từ phiên bản ES6 nên chưa chắc mọi framework js đã sử dụng arrow function.

Trước hết bạn hãy tìm hiểu về arrow function là gì đã:

Arrow function expressions - JavaScript | MDN

Differences & Limitations:

• Does not have its own bindings to this or super , and should not be used as methods .

@cute

arrow function là một pure function (pure function tốt vì nó không phụ thuộc context như OOP?)?

Định nghĩa pure function

A pure function does not have side-effects and its result does not depend on anything other than its inputs. (src)

không hề có 1 chữ nào nhắc đến OOP hết. 1 ví dụ với Java:

public class Pure {
  private static int value;

  public static int addOne(int input) { return input + 1; }

  public static void main(String[] args) {
    for(int i = 0; i < 3; i++) {
      System.out.println(addOne(value));
    }
  }
}

Rõ ràng ở đây addOne là pure function mặc dù nó nằm trong class.

Còn để đánh giá 1 function có pure hay không thì mình nghĩ hoàn toàn do người lập trình, không phải cứ anonymous function thì pure. Ví dụ:

function f(y) {
  let g = x => x+y;
  return g(1);
}

g ở đây không hề pure một chút nào hết.

@cute

arrow function js có liên quan gì lambda expression trong C# và java không?

Arrow function là anonymous function và lambda expression cũng thế. Đọc thêm:

When should I use arrow functions in ECMAScript 6?

@cute

Còn cách viết này:

const myFunction = () => {
console.log("abcd");
}

Và cách viết này:

const myFunction = () => {
return console.log("abcd");
}

Về bản chất 2 code này khác nhau.

• Trong code đầu tiên, bạn thực hiện hàm console.log, bạn không ghi giá trị trả về cho hàm thì mặc định hàm trả về undefined.

• Trong code thứ 2, bạn muốn hàm trả về giá trị của hàm console.log. Hàm console.log sẽ được thực thi, kết quả trả về chính là kết quả của console.log. Vì ở đây console.log trả về undefined nên myFunction cũng trả về undefined.

[kisuluoibieng (Tên Gì Cũng Được)]

nhìn 2 đoạn code trên, một cái là gọi hàm/lệnh console và không trả về, còn một cái là có trả về (một lời gọi hàm)
bạn thấy có vấn đề gì để phải đặt câu hỏi như thế này?

@cute

arrow function là một pure function (pure function tốt vì nó không phụ thuộc context như OOP?)?

• arrow function và pure function, 2 khái niệm này chẳng có gì liên quan với nhau cả
• pure function tốt vì nó không phụ thuộc context như OOP? nói như thế này chẳng khác nào nói là máy tính tốt hơn tủ lạnh cả

bạn có thể cho mình biết, những kiến thức này là từ đâu mà ra không?

[cute (Đạt)]

Trong trường em học java, đang tự học js cảm thấy khác 180°. Vì em chưa thấy ai dùng arrow function với từ khoá this cả, constructor trong js thì không thể viết bằng arrow function. Em có cảm giác như arrow function nó là cái gì đó hoạt động độc lập và không liên quan với bất cứ thứ gì khác như là một hàm utility chỉ phụ thuộc vào tham số truyền vào. Trong java thì đa số các hàm viết kiểu:

modified datatype functionName(){
return nếu không void
}

Còn js thì có 4,5 kiểu viết hàm nên không phân biệt được use case sử dụng giữa các cách viết (đặc biệt là kiểu viết tắt)

[noname00 (HK boy)]

@cute

Còn js thì có 4,5 kiểu viết hàm

Bạn liệt kê 4, 5 kiểu viết hàm mà bạn thấy xem nào.

[cute (Đạt)]

Kiểu 1: dùng từ khóa function (bây giờ chắc ít dùng)

function foo(a){
return a * 100;
}

Kiểu 2: WTF?? gán function cho biến? java đâu có kiểu này? nghe bảo là js xem function như là 1 object.

const foo = function(a) {
  return a * 100;
};

Arrow function thì có 3 kiểu rồi (chưa thử bất kỳ framework js nào cả nhưng thấy kiểu này đang thịnh, cũng không hiểu tại sao là const mà không phải let, var luôn)

const foo = (a) => {
return a * 100;
}

nếu có 1 tham số thì bỏ ngoặc thành

  const foo = a => {
    return a * 100;
    }

hoặc bỏ luôn return

const foo = a => a * 100;

Còn cách viết rút gọn trong callBack nữa, mà nó giống anonymous function trong java nên mình cũng không mắc.

Rồi còn kiểu gọi hàm lúc có ngoặc (), lúc không nữa. VD :

onClick={abc} (abc là hàm)

Em mới học thôi, không có than thở gì đâu. Đấy là do anh hỏi em mới nói thôi.

[kisuluoibieng (Tên Gì Cũng Được)]

@cute

Vì em chưa thấy ai dùng arrow function với từ khoá this cả

bạn đã thấy được bao nhiều người code js trong thực tế để đưa ra kết luận này

@cute

constructor trong js thì không thể viết bằng arrow function

có lý do gì để bạn muốn viết constructor bằng arrow function không?

@cute

Em có cảm giác như arrow function nó là cái gì đó hoạt động độc lập và không liên quan với bất cứ thứ gì khác như là một hàm utility chỉ phụ thuộc vào tham số truyền vào

trở lại với câu chuyện pure function, đây chắc là nguyên nhân cho sự nhầm lẫn của bạn về pure function và arrow function
bạn có cảm giác đó vì bạn chưa có nhu cầu code khác như vậy
trở lại với điều cơ bản nhất, mục đích của function ra đời là để làm gì? bạn tự trả lời thôi

@cute

rong java thì đa số các hàm viết kiểu:

code ngôn ngữ nào là do nhu cầu, bạn thích java thì cứ code java, sao bạn lại code js rồi lại muốn js code giống java

@cute

Còn js thì có 4,5 kiểu viết hàm nên không phân biệt được use case sử dụng giữa các cách viết (đặc biệt là kiểu viết tắt)

nếu kiểu nào cũng đáp ứng được nhu cầu, thì cứ chọn kiểu bạn thích
miễn sao bạn và partner/team của bạn đọc hiểu bạn viết gì là được rồi

troll vậy thôi chứ hỏi câu này khá chính đáng, đẻ ra lắm thứ cú pháp để làm gì?
cái này là do syntax parser nó define như vậy

x = a*b*c*d
x = (a*b)*(c*d)
x = (a*b*c)*d
x = (a*b*c*d)
x = a*(b*c)*d

bạn thấy ở đoạn code trên có gì? khác gì nhau?

a*b gọi là expression
(a*b) cũng là expression
a*b*c cũng là expresssion
.....

const x = (a) => (2*a)
const x = (a) => 2*a
const x = a => (2*a)
const x = a => 2*a

4 dòng khai báo x bên trên đều có ý nghĩa giống nhau
ví dụ bên trên liên quan gì câu hỏi của bạn?

nếu bạn học tốt về nguyên lý của ngôn ngữ lập trình nói chung, bạn sẽ nhìn thấy vấn đề
khi người ta định nghĩa, người ta không đặc tả cụ thể, đại loại là arrow function nó sẽ như này

khai_bao => noi_dung_hien_thuc

gồm 3 phần

khai_bao có thể có nhiều cách, người ta lại có nhiều định nghĩa về khai_bao
=> là keyword (hay là token hay là …)
noi_dung_hien_thuc cũng có nhiều cách để mô tả

nên arrow function bạn thấy nhiều kiểu, thực tế thì design nó chỉ có vậy

[rogp10]

Arrow function không bind được this (nên không có this riêng) hay super chứ nó vẫn có context, nói chung là gần như hàm bt.

[thanhnguyen00 (Thanh Nguyên)]

@cute

Kiểu 1 :

function foo(a){
return a * 100;
}

Kiểu 2 :

const foo = function(a) {
  return a * 100;
};

Khai báo kiểu 1 giống java đấy. Giống chỗ có thể gọi hàm bên trên code định nghĩa hàm. Nó liên quan đến hoisting gì đấy, kiểu 2 thì gọi hàm trước khi khai báo sẽ lỗi undefined vì khai báo hàm bằng let, var, const liên quan đến hosting, nó sẽ luôn luôn mang lên dòng đầu tiên trong scope.

[noname00 (HK boy)]

Thực chất là bạn không hiểu rõ nên mới hiểu sai là có 5 cách khai báo hàm khác nhau.

@cute

Kiểu 1 : dùng từ khóa function (bây giờ chắc ít dùng)

Đây là function declaration truyền thống với từ khoá function ở đầu. Như đã nói, đây là cách truyền thống nên vẫn nhiều nơi vẫn dùng vì nó đáp ứng được mọi trình duyệt. Bạn dựa vào căn cứ nào để nói rằng nó ít được dùng?

@cute

Kiểu 2 : WTF?? gán function cho biến? java đâu có kiểu này? nghe bảo là js xem function như là 1 object.

Phải tìm hiểu kỹ, đối với ngành kỹ thuật phải chính xác, không có chuyện “nghe bảo”.

Đây là function expression, thực chất vẫn là tạo ra 1 object có kiểu function.

Khi không có tham số name, function này là anonymous, giống hệt với cách khai báo arrow function (mới sinh ra từ ES6):

@cute

const foo = (a) => {
return a * 100;
}

@cute

nếu có 1 tham số thì bỏ ngoặc thành

  const foo = a => {
    return a * 100;
    }

hoặc bỏ luôn return

const foo = a => a * 100;

Chỗ này hoàn toàn chỉ là cú pháp của arrow function, không có gì gọi là “kiểu” khai báo khác nhau cả.

---

@thanhnguyen00

Giống chỗ có thể gọi hàm bên trên code định nghĩa hàm. Nó liên quan đến hoisting gì đấy, kiểu 2 thì gọi hàm trước khi khai báo sẽ lỗi undefined vì khai báo hàm bằng let, var, const liên quan đến hosting, nó sẽ luôn luôn mang lên dòng đầu tiên trong scope.

Bạn nên tìm hiểu kỹ một chút để tránh tình trạng “gì đấy”. Trích link Function expression ở trên:

Function expression hoisting

Function expressions in JavaScript are not hoisted, unlike function declarations. You can’t use function expressions before you create them.

Còn ở bên Function declaration:

Function declaration hoisting

Function declarations in JavaScript are hoisted to the top of the enclosing function or global scope. You can use the function before you declared it

Bạn thớt có thể đọc thêm về hoisting in modern JavaScript:

https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda

[Long_Nguyen_Xuan (Long Nguyễn Xuân)]

@cute

Trong trường em học java, đang tự học js cảm thấy khác 180°.

đúng rồi.

@cute

Vì em chưa thấy ai dùng arrow function với từ khoá this cả, constructor trong js thì không thể viết bằng arrow function. Em có cảm giác như arrow function nó là cái gì đó hoạt động độc lập và không liên quan với bất cứ thứ gì khác như là một hàm utility chỉ phụ thuộc vào tham số truyền vào.

cái nhận định này thì sai, đọc lại “what is arrow function” đã được share ở trên.

trong Java cũng có “arrow function” đó, nó tên là Lambda Functions