Function vs Import vs Export

Trong JavaScript Function khá phức tạp với nhiều loại nhiều dạng. Trong bài này sẽ trình bày tất cả các loại function sẽ có trong Javascript.

1. Các loại function

Function là một hành động, một mục đích mà người lập trình muốn làm.

Function trong JS là một object.

Tham khảo : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions?retiredLocale=vi

• Function mặc định

function Add(da,b){
    return a + b;
}
Add(3,5);//8
Add(3,2);//5

• Function expression

Add = function(a,b){
     return a + b;
}

var myFunction = function namedFunction(){
   return a + b;
}
Add(2,3)

//Involving function immediately
(function() {
    console.log("Involving Function")
})();

• Function * statement

function* name([param[, param[, ... param]]]) {
   statements
}

• Arrow function

add = (a,b)=>{
    return a + b;
}

//Đối với function có 1 tham số 
sum = a => return a ;

• Closures : là một tính năng cho phép truy cập vào scope của function cha, cho dù scope cha đã đóng. Đây là một tính năng tuyệt với trong JavaScript, cho phép lồng các function với nhau. Function con có quyền truy cập vào các biến hoặc function của function cha.

function a1() {
    function a2() {
        console.log(a);
    }
    var a = 5;
    a++;
    a2();
}
a1();// Console log: 6

• Callback function : có thể hiểu là tham số truyền vào hàm thay vì biến sẽ làm một function

function hello(str, callback) {
    console.log(str);
    callback();
}
 
function world() {
    console.log('World');
}
hello('Hello ', world); // Gọi hàm hello và truyền hàm world như một đối số

2. Import and Export

Trước khi tìm hiểu về Import, Export chúng ta cùng tìm hiểu về các phiên bản JavaScript.

Từ ES6 sẽ sử dụng: require, module.export

Còn trở về trước sẽ dùng : import, export

2.1 Export

Tham khảo : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export?retiredLocale=vi

Có hai loại export:

• Named Export (có 0, nhiều exports trên module) ( export ra 1 class)

• Default Export (1 exports trên module) (export ra 1 phần tử )

// Exporting individual features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}

// Export list
export { name1, name2, …, nameN };

// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };

// Exporting destructured assignments with renaming
export const { name1, name2: bar } = o;

// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default, … } from …;

2.2 Import

Trái với export thì chúng ta có import tài nguyên, tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Các loại import

import defaultExport from "module-name"; //Dành cho default export
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

3. Require and Export

Tương tự Import và Export trong ES5 require and Export cũng hoạt động tương tự

3.1 Exports

Module.Exports và Exports

module.exports = 'Hello world'; // var msg = require('./Messages.js');
exports.SimpleMessage = 'Hello world'; //var {msg} = require('./Messages.js');

//Bộ phận
module.exports.log = function (msg) { 
    console.log(msg);
};
và 
module.exports = function log (msg) { 
    console.log(msg);
};
là như nhau

//toàn bộ 
module.exports = function (msg) { 
    console.log(msg);
};

3.2 Require

Là yêu cầu từ một thư mục nhớ phân biết export toàn bộ vs export bộ phận

const express = require('express')
const {e} = require('e')

4. Vấn đề

Sai lầm khi export default and named export.

Có thể hiểu như sau: