জাভাস্ক্রিপ্টে ডিফল্ট এক্সপোর্ট vs নেমড এক্সপোর্ট

ডিফল্ট এবং নেমড এক্সপোর্টের পার্থক্য

প্রতি ফাইলে শুধু একটি ডিফল্ট এক্সপোর্ট থাকতে পারে এবং ইমপোর্ট করার সময় যেকোনো নাম দিতে পারেন। কিন্তু নেমড এক্সপোর্ট একাধিক হতে পারে এবং সেগুলো এক্সপোর্ট করার সময় ব্যবহৃত নাম দিয়ে ইমপোর্ট করতে হয়।

উদাহরণ

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
    </style>
</head>
<body>
    <h1>Default export vs Named Export</h1>
    <div class="result"></div>
    <button class="Btn">এখানে ক্লিক করুন</button>
    <h3>উপরোক্ত বাটনে ক্লিক করুন ফাংশন নেমড এবং ডিফল্ট এক্সপোর্ট হিসেবে এক্সপোর্ট করতে</h3>
    <script src="script.js" type="module"></script>
</body>
</html>

sample.js

export default function testImport() {
    return 'Module testImport has been imported';
}
export function tellTime() {
    return new Date();
}

script.js

import defaultExport from "./sample.js";
import { tellTime } from "./sample.js";
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click', () => {
    resultEle.innerHTML += defaultExport();
    resultEle.innerHTML += tellTime();
})

আউটপুট

বাটনে ক্লিক করলে ডিফল্ট এক্সপোর্ট এবং নেমড এক্সপোর্ট দুটোই কাজ করবে।