Cari Apa?

Perbedaan Require dan Import pada JavaScript

Perbedaan Require dan Import pada JavaScript

Apa sih yang membedakan require dan import

Setiap programmer tentu saja ingin aplikasi maupun program yang dia buat itu selesai dengan lebih cepat. Nah, oleh karena itu, hadir yang namanya packages siap jadi yang bisa digunakan. Kalau di dunia JavaScript, ada yang namanya NPM (Node Packages Manager) yang berisi berbagai macam packages siap pakai.

Contoh dari package yang berguna adalah is-even yang bertugas untuk mengecek apakah suatu bilangan itu genap atau tidak. Contoh dari program menggunakan is-even adalah seperti berikut ini:

const is_even = require('is-even')

console.log(is_even(15))

Maka, ketika kita menjalankan kode di atas, hasilnya adalah false.

Oh iya, mungkin aku terlalu cepat menjelaskannya sehingga cuma dengan empat paragraf aja, tulisan ini berakhir. Oke, aku akan mulai menjabarkannya.

Jadi, yang pertama kita tau dulu apa itu JavaScript. Jadi, JavaScript adalah sebuah bahasa pemrograman yang bisa digunakan untuk membuat aplikasi website, aplikasi Android, desktop, kecerdasan buatan, data science, hingga internet of things. Lengkap banget kan? Jadi, dia itu sama dengan bahasa pemrograman lainnya.

Yah walaupun memang dari segi konsep dan strukturnya, ada banyak perbedaan. Tapi kita nggak bahas itu dulu.

Nah, untuk kode di atas, yang aku lakukan adalah mempersiapkan sebuah folder, misalnya aja latihan. Kemudian, di folder itu, aku install is-even dengan perintah:

npm i is-even

Oh iya, apa itu npm pada potongan kode di atas? Jadi, npm itu adalah aplikasi command line untuk menginstall packages JavaScript. Untuk bisa menjalankan perintah npm, tentu saja kamu harus menginstall Node JS terlebih dahulu. Node JS ini adalah aplikasi untuk menjalankan JavaScript di luar lingkungan browser. Makanya, kita bisa menjalankan JavaScript di Terminal/Command Prompt, padahal dulu nggak bisa.

Kemudian, setelah terinstall is-even, maka struktur foldernya akan seperti ini:

.
├── node_modules
│   └── is-even -> .pnpm/is-even@1.0.0/node_modules/is-even
├── package.json
└── pnpm-lock.yaml

Di situ, karena aku menggunakan pnpm, bukan npm, maka ada sedikit perbedaan. Tapi, sebagian besarnya sama aja sih sama npm, yaitu pada folder node_modules dan file package.json. Folder node_modules berisi dengan semua packages berbentuk JavaScript yang sudah kita install, sedangkan package.json adalah file yang mengatur perilaku Node JS. Contoh isi dari package.json adalah:

{
    "dependencies": {
        "is-even": "^1.0.0"
    }
}

Itu aja sih. Soalnya kan, kita tadi cuma install is-even, nggak ada yang lain.

Kemudian, kita buat file app.js yang berisi dengan program yang sudah kutuliskan di awal artikel ini, yaitu:

const is_even = require('is-even')

console.log(is_even(15))

Lalu, dijalankan di Terminal/Command Prompt dengan perintah node app.js. Hasilnya adalah false.

Kan, pada contoh di atas, kita menggunakan require. Terus, bagaimana jika ingin menggunakan import? Perintahnya seperti ini:

import is_even from 'is-even'

console.log(is_even(15))

Tapi, kali ini nama filenya bukan app.js, melainkan app.mjs. Lah, kok bisa beda? Tentu saja karena kita akan menjalankan import yang merupakan bagian dari MJS (module JavaScript). Jadi, untuk format mjs atau ESM (ECMAScript Module) ini, harus menggunakan ekstensi .mjs. Bagaimana jika tidak ingin menggunakan ekstensi file .mjs? Ya tentu saja dengan menambahkan "type": "module", pada file package.json:

{
    "dependencies": {
        "is-even": "^1.0.0"
    },
    "type": "module"
}

Jadi, file-file yang hanya berekstensi .js, akan diinterpreter dengan interpreter JavaScript terbaru, yaitu bentuk ESM (import). Lalu, apa bedanya require dan import? Berikut ini perbedaannya:

Kalau untuk mengimport function default dari sebuah file JavaScript, sintaksnya mirip, cuma berbeda nama aja. Kalau untuk require, bentuknya adalah const halo = require('halo'). Kalau untuk kawannya, yaitu bentuk import, dia itu seperti ini: import halo from 'halo'. Kurang lebih aja kan ya?

Kemudian, untuk import named function, bentuknya juga masih mirip. Kalau pakai require, jadinya seperti ini: const {nama} = require('kucing'). Sedangkan, untuk import, bentuknya seperti ini: import {nama} from 'kucing'. Mirip aja kan ya?

Perbedaan mulai terlihat ketika kita ingin mengubah key dari named function. Kalau pakai require: const {nama: namanya} = require('kucing'). Lalu, untuk import: import {nama as namanya} from 'kucing'.

{{ x.judul }}