Arrow function expressions

const materials = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

// Hàm ẩn danh truyền thống
(function (a) {
  return a + 100;
});

// 1. Xóa từ khóa "function" và đặt mũi tên giữa tham số và dấu ngoặc nhọn mở thân hàm
(a) => {
  return a + 100;
};

// 2. Xóa dấu ngoặc nhọn thân hàm và từ khóa "return" — giá trị trả về là ẩn
(a) => a + 100;

// 3. Xóa dấu ngoặc đơn quanh tham số
a => a + 100;

// Hàm ẩn danh truyền thống
(function (a, b) {
  return a + b + 100;
});

// Hàm mũi tên
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Hàm ẩn danh truyền thống (không có tham số)
(function () {
  return a + b + 100;
});

// Hàm mũi tên (không có tham số)
() => a + b + 100;

// Hàm ẩn danh truyền thống
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// Hàm mũi tên
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

// Hàm thông thường
function bob(a) {
  return a + 100;
}

// Hàm mũi tên
const bob2 = (a) => a + 100;

// Thân biểu thức
const add = (a, b) => a + b; // Trả về ẩn a + b

// Thân khối
const add2 = (a, b) => {
  console.log(a, b);
  return a + b; // Phải trả về tường minh
};

// Không có giá trị trả về
const add3 = (b) => {
  a += b;
  // Không có câu lệnh return, nên trả về undefined
};

const func = () => { foo: 1 };
// Gọi func() trả về undefined!

const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name

const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'

const func = () => ({ foo: 1 });

"use strict";

const obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
};

obj.b(); // logs undefined, Window { /* … */ } (hoặc đối tượng toàn cục)
obj.c(); // logs 10, Object { /* … */ }

"use strict";

const obj = {
  a: 10,
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (hoặc đối tượng toàn cục)
    return this.a + 10; // đại diện cho đối tượng toàn cục 'Window', do đó 'this.a' trả về 'undefined'
  },
});

class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  };
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// Nếu là phương thức thông thường, kết quả sẽ là undefined trong trường hợp này

class C {
  a = 1;
  constructor() {
    this.method = this.method.bind(this);
  }
  method() {
    console.log(this.a);
  }
}

function foo(n) {
  const f = () => arguments[0] + n; // ràng buộc arguments ẩn của foo. arguments[0] là n
  return f();
}

foo(3); // 3 + 3 = 6

function foo(n) {
  const f = (...args) => args[0] + n;
  return f(10);
}

foo(1); // 11

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

const func = (a, b, c)
  => 1;
// SyntaxError: Unexpected token '=>'

const func = (a, b, c) =>
  1;

const func2 = (a, b, c) => (
  1
);

const func3 = (a, b, c) => {
  return 1;
};

const func4 = (
  a,
  b,
  c,
) => 1;

let callback;

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});

// Hàm mũi tên rỗng trả về undefined
const empty = () => {};

(() => "foobar")();
// Trả về "foobar"
// (đây là Biểu thức Hàm Được Gọi Ngay lập tức - IIFE)

const simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

const max = (a, b) => (a > b ? a : b);

// Lọc, ánh xạ mảng dễ dàng, v.v.
const arr = [5, 6, 13, 0, 1, 18, 23];

const sum = arr.reduce((a, b) => a + b);
// 66

const even = arr.filter((v) => v % 2 === 0);
// [6, 0, 18]

const double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// Chuỗi promise gọn gàng hơn
promise
  .then((a) => {
    // …
  })
  .then((b) => {
    // …
  });

// Hàm mũi tên không có tham số
setTimeout(() => {
  console.log("I happen sooner");
  setTimeout(() => {
    // deeper code
    console.log("I happen later");
  }, 1);
}, 1);

const obj = {
  num: 100,
};

// Đặt "num" trên globalThis để thấy nó KHÔNG được dùng.
globalThis.num = 42;

// Hàm truyền thống để thao tác trên "this"
function add(a, b, c) {
  return this.num + a + b + c;
}

console.log(add.call(obj, 1, 2, 3)); // 106
console.log(add.apply(obj, [1, 2, 3])); // 106
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 106

const obj = {
  num: 100,
};

// Đặt "num" trên globalThis để thấy nó được lấy ra.
globalThis.num = 42;

// Hàm mũi tên
const add = (a, b, c) => this.num + a + b + c;

console.log(add.call(obj, 1, 2, 3)); // 48
console.log(add.apply(obj, [1, 2, 3])); // 48
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 48

const obj = {
  count: 10,
  doSomethingLater() {
    setTimeout(function () {
      // hàm thực thi trong phạm vi window
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // logs "NaN", vì thuộc tính "count" không có trong phạm vi window.

const obj = {
  count: 10,
  doSomethingLater() {
    // Cú pháp phương thức ràng buộc "this" với ngữ cảnh "obj".
    setTimeout(() => {
      // Vì hàm mũi tên không có ràng buộc riêng và
      // setTimeout (khi gọi như một hàm) cũng không tạo ràng buộc,
      // ngữ cảnh "obj" của phương thức bên ngoài được sử dụng.
      this.count++;
      console.log(this.count);
    }, 300);
  },
};

obj.doSomethingLater(); // logs 11