Arrow function [JAVASCRIPT]


Arrow Function là gì ? Arrow Function cũng là function nhưng cú pháp viết ngắn gọn hơn. Arrow function là một trong những tính năng mới của ES6. Ta xem cách viết function củ và function theo dạng arrow nhé.
const sayHello = function(){
  console.log('Hello Javascript');
}
sayHello(); // Hello Javascript

// Arrow function
const sayHello = () => {
  console.log('Hello Javascript');
}

sayHello(); // Hello Javascript

Ta thấy Arrow function cú pháp gọn hơn phải không nào. Ví dụ trên ta thấy chỉ có 1 dòng code console.log, Ta có thể bỏ luôn dấu { }.

// Arrow function
const sayHello = () => console.log('Hello Javascript');
sayHello(); // Hello Javascript

Còn nếu muốn return giá trị trong function thì sao.

const sayHello = function(){
  return "Hello";
}
console.log(sayHello()); // Hello

// Arrow function
const sayHello = () => {
  return "Hello";
}

console.log(sayHello()); // Hello

Cả 2 cách dùng return đều giống nhau. Những Arrow function có thể viết gọn hơn.

const sayHello = () => "Hello";
console.log(sayHello()); // Hello 

Còn nếu có tham số truyền vào thì ta viết như sau:

const sayHello = function(name) {
  console.log(`Hello ${name}`);
}
sayHello('Mr D'); // Hello Mr D

// Arrow function
const sayHello = (name) =>  console.log(`Hello ${name}`);
sayHello('Mr D'); // Hello Mr D

Do chỉ có 1 tham số truyền vào ta không cần dấu ().

// Arrow function
const sayHello = name =>  console.log(`Hello ${name}`);
sayHello('Mr D'); // Hello Mr D

Chỉ khi có nhiều tham số truyền vào ta mới cần ().

const sayHello = (firstName, lastName) => {
  console.log(`First: ${firstName}, Last: ${lastName}`);
}
sayHello('Duy','Tran'); // First: Duy, Last: Tran

Còn nếu muốn return một object.

const sayHello = () => {
  return {msg:'Hello'};
}
console.log(sayHello()); // {msg:'Hello'}

Nếu ta viết gọn lại, ta viết như sau.

const sayHello = () => ({msg:'Hello'});
console.log(sayHello()); // {msg:'Hello'}

Như vậy ta đã tìm hiểu căn bản về arrow function trong javascript rồi nhé. ^_^