Variabel dan tipe data dalam JavaScript. Bagian 3 Kursus JavaScript dari Pemula hingga Mahir dalam 10 posting blog

Ini adalah bagian 3 dari seri posting blog JavaScript yang akan membantu Anda menjelajahi topik variabel dan tipe data dalam JavaScript. Pada akhir seri ini, Anda akan mengetahui semua dasar yang perlu Anda ketahui untuk memulai pengkodean dalam JavaScript. Tanpa basa-basi lagi, mari kita mulai dengan tutorial ketiga.

Variabel dan tipe data dalam JavaScript – daftar isi:

1. Variabel
2. Tipe data dasar dalam JavaScript

Dalam posting blog ini kita akan melanjutkan di mana kita tinggalkan dari posting blog kedua. Pada tahap ini Anda harus membuka browser Google Chrome dan lebih khusus lagi membuka konsol JavaScript Anda. Jika Anda karena alasan tertentu menutupnya, ini saat yang tepat untuk membukanya kembali.

Jika Anda menggunakan Mac, pintasan keyboard untuk membuka konsol adalah dengan menekan "Option + Command + J", setelah Anda membuka Chrome. Jika Anda menggunakan perangkat Windows, Anda dapat menggunakan pintasan keyboard "Control + Shift + J", untuk membuka Konsol JavaScript, setelah Anda membuka Chrome. Atau bisa juga masuk ke menu di atas dan masuk ke View -> Developer -> JavaScript Console.

Variabel

Variabel dalam JavaScript atau bahasa pemrograman lainnya sangat umum. Dan itu untuk alasan yang bagus. Variabel memiliki peran yang sangat penting dalam pemrograman. Singkatnya, variabel memungkinkan Anda untuk menyimpan beberapa data untuk memindahkan data, memodifikasinya, memperbarui atau menghapusnya di program Anda. Ini adalah konsep yang sangat penting karena ada 3 cara Anda dapat membuat variabel. Istilah pemrograman untuk membuat variabel disebut "mendeklarasikan variabel", yang pada dasarnya berarti bahwa kita mendeklarasikan variabel dalam memori komputer.

Untuk membuat variabel kita akan menggunakan salah satu dari 3 kata kunci dan mereka adalah: “var”, “let” dan “const”. Salah satu hal pertama yang harus Anda ketahui tentang 3 kata kunci ini adalah bahwa hingga tahun 2015, hanya kata kunci “var” yang digunakan dan kata kunci “let” dan “const” diperkenalkan dengan standar JavaScript yang disebut ES6 atau ES2015.

Jika Anda tidak tahu apa itu ES6 atau ES2015, inilah yang harus Anda ketahui. Ketika JavaScript pertama kali keluar, perusahaan yang berbeda menerapkan versi JavaScript yang berbeda, dan harus ada standar, agar kode Anda dapat berjalan dengan mudah dan andal di semua browser utama. Jadi sebuah organisasi bernama ECMA, (European Computer Manufacturing Association) datang dengan seperangkat standar JavaScript yang harus diterapkan oleh browser. Sehingga selama Anda mengikuti standar tersebut saat Anda menulis JavaScript, kode Anda harus berjalan dengan mudah sesuai dengan standar tersebut. Standar ini disebut EcmaScript dan mereka telah merilis standar yang diperbarui sejak 1997. Dan sejak 2015, mereka telah merilis standar ini setiap tahun, dan karenanya standar terbaru yang dirilis disebut ES2021 pada saat menulis posting blog ini.

Tetapi tidak semua rilis sama, beberapa perbedaan versi tidak terlalu besar, sementara beberapa memperkenalkan perubahan yang cukup besar pada bahasa. Perubahan besar terakhir terjadi dengan ES2015 yang juga disebut ES6 karena merupakan rilis versi enam dari standarisasi ECMAScript. Salah satu perubahan signifikan datang ke deklarasi variabel.

Sebelum ES6, hanya kata kunci "var" yang digunakan dan itu adalah satu-satunya cara untuk mendeklarasikan variabel, maka nama "var". Kata kunci var datang dengan fleksibilitas yang dapat menyebabkan masalah yang tidak diinginkan. Karena sangat fleksibel dalam penggunaan, lebih mudah untuk membuat kesalahan dengan variabel jika Anda kurang berhati-hati dari yang seharusnya. Misalnya jika Anda mendeklarasikan variabel bernama “user1”, Anda tidak dapat mendeklarasikan ulang variabel bernama user1 dengan kyword “let” dan “const” yang baru, tetapi Anda dapat melakukannya dengan kata kunci “var”. Dan jika Anda lupa bahwa Anda sudah memiliki pengguna1 dalam program Anda, saat kedua Anda mendeklarasikan pengguna1 dengan informasi pengguna lain, Anda akan mengesampingkan informasi pengguna pertama yang sebenarnya, yang secara efektif akan menghapus informasi pengguna pertama.

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

Tetapi bukan berarti Anda tidak akan melihat kata kunci “var” digunakan di mana pun, Anda pasti akan melihatnya terutama di beberapa kursus JavaScript tingkat pemula. Terutama jika mereka berusia beberapa tahun, ada banyak tutorial yang masih akan menunjukkan cara lama menulis JavaScript. Tetapi kenyataannya adalah, itu bukan praktik terbaik untuk menggunakannya lagi. Sebaliknya, praktik terbaik adalah menggunakan kata kunci “let” atau “const” saat mendeklarasikan variabel, tergantung pada kebutuhan Anda. Tapi kebutuhan apa yang sedang kita bicarakan? Singkatnya, jika Anda berencana untuk mengubah nilai di dalam variabel, Anda akan ingin menggunakan kata kunci "biarkan", jika Anda tahu bahwa Anda tidak akan mengubah nilai dalam variabel, Anda akan ingin menggunakan "const" alih-alih. Mari kita lihat beberapa contoh deklarasi variabel menggunakan let dan const.

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

Jika Anda juga memperhatikan dari kode di atas, dengan praktik terbaik terbaru, kami hanya menulis kata kunci yang mendeklarasikan satu kali, dan kami melakukannya saat pertama kali mendeklarasikan variabel. Saat kita ingin mengubah nilai di dalam variabel nanti, kita tidak menggunakan kata kunci apapun sebelum nama variabel.

Saat kita ingin mengakses data yang dimiliki variabel atau konstanta ini, kita cukup menggunakan namanya. Misalnya, Jika kami ingin menunjukkan kepada pengguna level permainan mereka dan id pengguna mereka, kami melakukannya dengan kode berikut:

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

Menjalankan dua blok kode terakhir akan memberikan output berikut:

Bagaimana cara memberi nama variabel Anda?

Saat memberi nama variabel Anda, ada aturan dan konvensi tertentu yang harus Anda pertimbangkan. Pertimbangan pertama adalah karakter apa yang dapat digunakan untuk memberi nama variabel Anda? Bisakah mereka mulai atau diakhiri dengan angka? Apakah ada kebenaran umum yang tak terucapkan untuk menamai variabel Anda? Mari kita menjawab semua itu dan banyak lagi.

Bahasa pemrograman yang berbeda memiliki konvensi yang berbeda untuk penamaan variabel. Dalam JavaScript, konvensinya adalah menamai mereka dengan apa yang disebut "casing unta", dan berjalan seperti ini. Jika nama variabel hanya memiliki satu kata, maka Anda hanya menulis kata itu dalam huruf kecil semua. Jika ada beberapa kata dalam nama variabel, maka Anda menulis kata pertama dengan huruf besar semua dan Anda menggunakan huruf besar untuk semua kata berikutnya dan Anda menulisnya tanpa spasi atau tanda lainnya. Misalnya, jika kita membuat game, kita bisa menamai variabelnya seperti ini:

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

Selain menggunakan karakter alfabet, kita juga dapat menggunakan angka, tanda dolar, dan tanda garis bawah pada nama variabel. Penting untuk dicatat bahwa Anda tidak dapat memulai nama variabel dengan angka, tetapi Anda dapat mengakhirinya dengan angka.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Perhatikan bahwa hanya karena mungkin, kita tidak ingin menamai variabel kita dengan nama yang tidak jelas atau dengan simbol. Dan itu adalah topik lain dengan sendirinya. Saat memberi nama variabel, konvensinya adalah memiliki nama yang jelas dan deskriptif. Misalnya, jika kita akan memberi nama variabel untuk menunjukkan berapa banyak panah yang tersisa di tas pemanah, kita harus menggunakan nama deskriptif seperti yang kita gunakan pada contoh di atas. Jika kita hanya menggunakan:

let x = 145;

Nama ini tidak akan memberi tahu kita apa pun tentang nilainya. Dan bahkan beberapa hari setelah menulis kode ini, kita harus membaca kode di sekitarnya untuk memahami apa arti variabel itu. Itu sebabnya, baik untuk kejelasan Anda sendiri saat menulis kode, dan untuk diri Anda di masa depan yang mungkin meninjau kode, sangat penting bagi Anda untuk membiasakan penamaan variabel Anda dengan cara yang jelas dan deskriptif. Ini juga akan menjadi lebih penting ketika Anda mulai bekerja dengan orang lain dan menunjukkan kode Anda kepada mereka.

Pada titik ini Anda mungkin berpikir bahwa: Sangat bagus bahwa kami dapat memindahkan data dan bahkan dapat mengubahnya menggunakan variabel. Tapi data apa yang kita bicarakan di sini? Mengapa kami menempatkan bagian dalam kutipan dan beberapa bagian tidak dalam kutipan? Untuk menjawab semua itu dan lebih banyak lagi, mari kita lihat tipe data dasar dalam JavaScript.

Tipe data dasar dalam JavaScript

Tipe data yang berbeda pandai melakukan hal yang berbeda. Dalam tipe data dasar dalam tutorial JavaScript ini kita akan melihat 3 tipe data paling dasar yang umum digunakan dalam JavaScript. Nanti di seri ini kita akan belajar tentang tipe data lain dalam JavaScript. Setelah Anda mempelajari 3 tipe data dasar pertama ini, akan lebih mudah untuk mempelajari tipe data lainnya. 3 tipe data yang akan kita lihat dalam tutorial ini adalah: Strings, Numbers dan Booleans. Tanpa basa-basi lagi, mari kita mulai dengan yang pertama.

Senar

Jika Anda telah mengikuti tutorial dari awal, Anda sudah bekerja dengan tipe data string! Saat kami menulis peringatan yang mengatakan "Halo, Dunia!" yang menggunakan tipe data string untuk menyimpan teks yang kita tulis. Dalam JavaScript ada 3 cara untuk merepresentasikan string. Yang pertama adalah mengelilingi teks Anda dengan tanda kutip ganda. Yang kedua adalah mengelilingi teks Anda dengan tanda kutip tunggal. Dan yang ketiga adalah mengelilingi teks Anda dengan tanda centang kembali. Ketiganya terlihat seperti ini:

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

Seperti yang Anda lihat, kutipan dengan "kutu belakang" terlihat sangat mirip dengan kutipan tunggal, tetapi sedikit santai. Penggunaan tanda centang kembali untuk membuat string adalah fitur yang diperkenalkan dengan ES6, untuk memudahkan bekerja dengan data tekstual. Ini memberikan banyak keuntungan dibandingkan dua lainnya sebelumnya. Dengan konvensi, Anda mungkin melihat tanda kutip ganda atau tanda centang kembali lebih sering digunakan. Anda dapat menemukan tanda centang kembali di tombol kiri nomor 1, di keyboard Anda.

Penggunaan tanda kutip ganda terlihat lebih akrab dan lebih mudah dipahami pada tampilan pertama, tetapi tanda kutip kembali memiliki lebih banyak keuntungan secara keseluruhan. Dalam contoh ini ketiganya berfungsi dengan cara yang sama seperti contoh sederhana. Untuk menampilkan ketiganya secara bersamaan, atau bahkan dalam baris yang sama, satu hal yang bisa kita lakukan adalah menuliskan nama mereka dan menggunakan tanda plus di antara mereka, dengan cara menambahkan string satu sama lain.

alert(string1 + string2 + string3);

Seperti yang Anda lihat, ketiganya ditampilkan tepat setelah salah satunya berakhir. Ini karena hanya menyuruh juru bahasa untuk menambahkan string satu sama lain. Jika kita ingin menambahkan spasi di antaranya, kita selalu dapat menambahkan spasi itu dengan string lain.

alert(string1 + " " + string2 + " " + string3);

Kita juga bisa mengecek data suatu variabel dengan menulis “typeof” di depannya. Sebagai contoh:

alert(typeof string1);

Nomor

Saat kami bekerja dengan angka dalam JavaScript, kami biasanya menggunakan tipe data "Nomor". Ini adalah yang paling sederhana untuk memulai dan hampir tidak ada kurva belajar.

Saat mengetik nomor, itu diwakili dalam jenis nomor. Dan jika kita menetapkan angka itu ke variabel atau konstanta, mereka juga akan memiliki tipe data angka.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Selain nomor biasa yang kami miliki, JavaScript juga menyediakan fitur lain yang dapat membantu kami menulis kode yang lebih aman dan lebih dapat diprediksi. Misalnya, dalam JavaScript kita dapat memiliki sesuatu yang disebut "Infinity", dan persis seperti apa kedengarannya. Selain itu bisa menjadi tak terhingga positif dan tak terhingga negatif. Mari kita lihat seperti apa bentuknya dengan sebuah contoh.

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

Seperti yang telah Anda lihat dengan beberapa contoh, kita juga dapat melakukan operasi aritmatika dengan angka. Dari penambahan dasar, pengurangan, perkalian, pembagian bahkan lebih pemrograman operasi aritmatika tertentu. Kita akan belajar lebih banyak tentang mereka di tutorial berikutnya.

Boolean

Boolean sangat umum dalam pemrograman. Sebagian besar waktu kami tidak akan secara eksplisit menggunakan nama mereka, tetapi kami akan menggunakan properti sederhana mereka di bawah tenda. Boolean dapat memiliki dua nilai: "benar" dan "salah" dan keduanya persis seperti apa suaranya. Banyak waktu Anda akan menemukan diri Anda menulis kode untuk membuat perbandingan dan kesimpulan berdasarkan hasil perbandingan itu.

Seringkali perbandingan ini berakar dari skenario kehidupan nyata, dan mereka mengikuti logika sederhana. Apakah lampu menyala atau mati? Apakah ada hujan di luar? Apakah kamu lapar? Apakah angka ini lebih besar dari angka lainnya? Apakah paragraf ini lebih panjang dari yang berikutnya? Apakah pengguna di layar besar?

Ada banyak waktu di mana Anda tidak hanya ingin memiliki nilai angka atau nilai string untuk sesuatu, tetapi Anda sebenarnya menginginkan jawaban ya atau tidak. Singkatnya, pada saat itu, kita akan menggunakan tipe data boolean.

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

Menjalankan kode ini akan memberi kita output berikut:

Sekarang Anda tahu tentang variabel dan tipe data dalam JavaScript. Dalam posting blog berikutnya kita akan menggunakan tipe data ini untuk mulai membuat keputusan dalam kode kita dan banyak lagi!

Jika Anda menyukai konten kami, jangan lupa untuk bergabung dengan komunitas Facebook!

Pengarang: Robert Whitney

Pakar JavaScript dan instruktur yang melatih departemen TI. Tujuan utamanya adalah meningkatkan produktivitas tim dengan mengajari orang lain cara bekerja sama secara efektif saat coding.

Lihat semua posting

Kursus JavaScript Dari Pemula hingga Mahir dalam 10 posting blog:

1. Bagaimana cara memulai pengkodean dalam JavaScript?
2. Dasar-dasar JavaScript
3. Variabel dan tipe data yang berbeda dalam JavaScript
4. Cuplikan dan struktur kontrol
5. Perulangan while dan perulangan for
6. Array Jawa
7. Fungsi JavaScript
8. objek JavaScript
9. Metode JavaScript dan banyak lagi
10. Ringkasan kursus JavaScript