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 mulai coding di 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 dari tempat kita tinggalkan di posting blog kedua. Pada tahap ini, Anda harus membuka browser Google Chrome Anda dan lebih spesifik lagi, membuka konsol JavaScript Anda. Jika karena suatu alasan Anda menutupnya, ini adalah waktu yang baik 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 Anda juga dapat pergi ke menu di bagian atas dan pergi ke View -> Developer -> JavaScript Console.

Variabel

Variabel dalam JavaScript atau bahasa pemrograman lainnya sangat umum. Dan itu dengan alasan yang baik. Variabel memiliki peran yang sangat penting dalam pemrograman. Singkatnya, variabel memungkinkan Anda untuk menyimpan beberapa data untuk memindahkan data tersebut, memodifikasinya, memperbarui atau menghapusnya dalam program Anda. Ini adalah konsep yang sangat penting sehingga ada 3 cara untuk 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 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, berikut adalah yang perlu Anda ketahui tentangnya. Ketika JavaScript pertama kali muncul, berbagai perusahaan menerapkan versi JavaScript yang berbeda, dan harus ada standar, agar kode Anda dapat berjalan secara prediktif dan dapat diandalkan di semua browser utama. Jadi, sebuah organisasi bernama ECMA (European Computer Manufacturing Association) mengusulkan seperangkat standar JavaScript yang harus diterapkan oleh browser. Sehingga selama Anda mengikuti standar tersebut saat menulis JavaScript, kode Anda harus berjalan secara prediktif 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 oleh karena itu standar terbaru yang dirilis disebut ES2021 pada saat penulisan posting blog ini.

Tetapi tidak semua rilis sama, beberapa perbedaan versi tidak sebesar itu, sementara beberapa memperkenalkan perubahan yang cukup besar pada bahasa. Perubahan besar terakhir terjadi dengan ES2015 yang juga disebut ES6 karena itu adalah rilis versi enam dari standardisasi ECMAScript. Salah satu perubahan signifikan terjadi pada deklarasi variabel.

Sebelum ES6, hanya kata kunci “var” yang digunakan dan itu adalah satu-satunya cara untuk mendeklarasikan variabel, sehingga nama “var”. Kata kunci var datang dengan fleksibilitas yang dapat menyebabkan masalah yang tidak diinginkan. Karena sangat fleksibel dalam penggunaannya, 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 kata kunci “let” dan “const” yang baru, tetapi Anda bisa melakukannya dengan kata kunci “var”. Dan jika Anda lupa bahwa Anda sudah memiliki user1 dalam program Anda, pada saat kedua Anda mendeklarasikan user1 dengan informasi pengguna lain, Anda akan menimpa informasi pengguna pertama yang sebenarnya, yang secara efektif akan menghapus informasi pengguna pertama.

// ini dapat menyebabkan kebingungan
var user1 = "John";
var user1 = "Jack";
// jika Anda mencoba melakukan hal yang sama 
// dengan let atau const Anda akan mendapatkan kesalahan
let user1 = "John";
let user1 = "Jack";
// demikian juga Anda juga akan mendapatkan kesalahan
// jika Anda mencoba melakukan hal yang sama dengan kata kunci const
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 sudah beberapa tahun yang lalu, ada banyak tutorial yang masih menunjukkan cara lama menulis JavaScript. Tetapi kenyataannya adalah, itu bukan praktik terbaik untuk digunakan lagi. Sebagai gantinya, praktik terbaik adalah menggunakan kata kunci “let” atau “const” saat mendeklarasikan variabel, tergantung pada kebutuhan Anda. Tetapi kebutuhan apa yang kita bicarakan? Singkatnya, jika Anda berencana untuk mengubah nilai di dalam variabel, Anda akan ingin menggunakan kata kunci “let”, jika Anda tahu bahwa Anda tidak akan mengubah nilai dalam variabel, Anda akan ingin menggunakan “const” sebagai gantinya. Mari kita lihat beberapa contoh untuk deklarasi variabel menggunakan let dan const.

// kita dapat menggunakan "let" ketika kita ingin melacak level permainan pengguna
// karena kita tahu bahwa itu akan berubah
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// kita dapat menggunakan kata kunci "const" saat mendeklarasikan ID pengguna
// karena kita tahu bahwa kita tidak akan mengubahnya
const userId = 1010101999;

Jika Anda juga memperhatikan dari kode di atas, dengan praktik terbaik terbaru, kita hanya menulis kata kunci deklarasi sekali, dan kita melakukannya saat kita pertama kali mendeklarasikan variabel. Ketika kita ingin mengubah nilai di dalam variabel nanti, kita tidak menggunakan kata kunci apa pun sebelum nama variabel.

Ketika kita ingin mengakses data yang dipegang oleh variabel atau konstanta ini, kita dapat dengan mudah menggunakan nama mereka. Misalnya, jika kita ingin menunjukkan kepada pengguna level permainan mereka dan ID pengguna mereka, kita dapat melakukannya dengan kode berikut:

// kita dapat menambahkan userID di akhir kalimat dengan tanda plus
// kita akan menjelaskan ini nanti dalam tutorial
alert("ID pengguna Anda adalah: " + userId);
// kita juga dapat menunjukkan kepada pengguna level permainan mereka seperti berikut
alert("Level permainan Anda saat ini adalah: " + gameLevel);
// sebagai alternatif kita dapat langsung menampilkan 
// isi variabel dengan menampilkannya di dalam alert
alert(userId);
alert(gameLevel);

Menjalankan dua blok kode terakhir akan memberikan output berikut:

Bagaimana cara memberi nama variabel Anda?

Ketika memberi nama variabel Anda, ada aturan dan konvensi tertentu yang harus Anda pertimbangkan. Pertimbangan pertama adalah karakter apa yang dapat Anda gunakan untuk memberi nama variabel Anda? Dapatkah mereka dimulai atau diakhiri dengan angka? Apakah ada kebenaran umum yang tidak terucapkan dalam memberi nama variabel Anda? Mari kita jawab semua itu dan lebih banyak lagi.

Berbagai bahasa pemrograman memiliki konvensi yang berbeda untuk memberi nama variabel. Dalam JavaScript, konvensinya adalah memberi nama dengan apa yang disebut “camel casing”, 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 kecil semua dan Anda mengkapitalisasi semua kata berikutnya dan menulisnya tanpa spasi atau tanda lainnya. Misalnya, jika kita membuat permainan, kita bisa memberi nama variabel seperti ini:

// variabel satu kata
let strength = 50;
// nama deskriptif yang mencakup beberapa kata
let numberOfArrowsLeft = 145;

Selain menggunakan karakter alfabet, kita juga dapat menggunakan angka, tanda dolar, dan tanda garis bawah dalam 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 itu mungkin, kita tidak ingin memberi nama variabel kita dengan nama yang tidak jelas atau dengan simbol. Dan itu adalah topik lain sendiri. Ketika memberi nama variabel, konvensinya adalah memiliki nama yang jelas dan deskriptif. Misalnya, jika kita akan memberi nama variabel untuk menunjukkan berapa banyak anak panah yang tersisa di tas seorang pemanah, kita harus menggunakan nama deskriptif seperti yang kita gunakan dalam contoh di atas. Jika kita hanya menggunakan:

let x = 145;

Nama ini tidak akan memberi tahu kita apa nilai yang dipegangnya. Dan bahkan beberapa hari setelah menulis kode ini, kita harus membaca kode di sekitarnya untuk memahami apa arti variabel itu. Itulah sebabnya, baik untuk kejelasan Anda sendiri saat menulis kode, dan untuk diri Anda di masa depan yang mungkin meninjau kode tersebut, sangat penting untuk terbiasa memberi nama 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 kita dapat memindahkan data dan bahkan mengubahnya menggunakan variabel. Tetapi data apa yang kita bicarakan di sini? Mengapa kita menempatkan beberapa bagian dalam tanda kutip dan beberapa bagian tidak? 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 baik dalam melakukan hal-hal yang berbeda. Dalam tutorial tipe data dasar dalam JavaScript ini, kita akan melihat 3 tipe data paling dasar yang umum digunakan dalam JavaScript. Nanti dalam seri ini kita akan belajar tentang tipe data lainnya dalam JavaScript. Setelah Anda mempelajari 3 tipe data dasar ini, akan jauh lebih mudah untuk mempelajari tipe data lainnya. 3 tipe data yang akan kita lihat dalam tutorial ini adalah: String, Angka, dan Boolean. Tanpa basa-basi lagi, mari kita mulai dengan yang pertama.

String

Jika Anda telah mengikuti tutorial dari awal, Anda sudah bekerja dengan tipe data string! Ketika kita menulis alert yang mengatakan “Hello, World!” itu menggunakan tipe data string untuk menyimpan teks yang kita tulis. Dalam JavaScript, ada 3 cara untuk merepresentasikan string. Yang pertama adalah dengan mengelilingi teks Anda dengan tanda kutip ganda. Yang kedua adalah dengan mengelilingi teks Anda dengan tanda kutip tunggal. Dan yang ketiga adalah dengan mengelilingi teks Anda dengan back ticks. Ketiga cara tersebut terlihat seperti ini:

const string1 = "Beberapa teks di sini.";
const string2 = 'Beberapa teks di sini.';
const string3 = `Beberapa teks di sini.`;

Seperti yang Anda lihat, yang menggunakan “back ticks” terlihat cukup mirip dengan tanda kutip tunggal, tetapi sedikit lebih santai. Penggunaan back ticks untuk membuat string adalah fitur yang diperkenalkan dengan ES6, untuk memudahkan bekerja dengan data tekstual. Ini memberikan beberapa keuntungan dibandingkan dua cara sebelumnya. Secara konvensi, Anda mungkin melihat baik tanda kutip ganda atau back ticks digunakan lebih sering. Anda dapat menemukan back ticks di kunci kiri angka 1, di keyboard Anda.

Penggunaan tanda kutip ganda terlihat lebih familiar dan lebih mudah dipahami pada pandangan pertama, tetapi back ticks memiliki lebih banyak keuntungan secara keseluruhan. Dalam contoh ini, ketiga cara tersebut berfungsi dengan cara yang sama karena ini adalah contoh sederhana. Untuk menampilkan ketiga cara tersebut sekaligus, atau bahkan dalam satu baris, salah satu hal yang dapat kita lakukan adalah menulis nama mereka dan menggunakan tanda plus di antara mereka, dengan cara menambahkan string satu sama lain.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Seperti yang Anda lihat, ketiga string tersebut ditampilkan tepat setelah salah satu dari mereka berakhir. Ini karena kita baru saja memberi tahu interpreter untuk menambahkan string satu sama lain. Jika kita ingin menambahkan spasi di antara mereka, kita selalu dapat menambahkan spasi itu dengan string lain.<p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Kita juga dapat memeriksa tipe data dari sebuah variabel dengan menulis “typeof” di depannya. Misalnya:

alert(typeof string1);

Angka

Ketika kita bekerja dengan angka dalam JavaScript, kita umumnya menggunakan tipe data “Number”. Ini adalah yang paling sederhana untuk memulai dan hampir tidak memiliki kurva pembelajaran.

Ketika kita mengetikkan sebuah angka, itu direpresentasikan dalam tipe angka. Dan jika kita menetapkan angka itu ke sebuah variabel atau konstanta, mereka juga akan memiliki tipe data angka.

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

Selain angka biasa, JavaScript juga menyediakan fitur lain yang dapat membantu kita menulis kode yang lebih aman dan lebih dapat diprediksi. Misalnya, dalam JavaScript kita dapat memiliki sesuatu yang disebut “Infinity”, dan itu persis seperti yang terdengar. Selain itu, bisa jadi positif infinity dan negatif infinity. Mari kita lihat seperti apa contohnya.

// kita dapat membagi dengan nol dan itu tidak menimbulkan kesalahan
// sebaliknya, itu mengembalikan Inifinity
alert(13 / 0);

// dengan cara yang sama kita juga bisa mendapatkan negatif infinity
alert(-25 / 0);

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

Boolean

Boolean sangat umum dalam pemrograman. Sebagian besar waktu kita tidak akan secara eksplisit menggunakan nama mereka, tetapi kita akan menggunakan sifat sederhana mereka di balik layar. Sebuah boolean dapat memiliki dua nilai: “true” dan “false” dan mereka persis seperti yang terdengar. Seringkali Anda akan menemukan diri Anda menulis kode untuk membuat perbandingan dan kesimpulan berdasarkan hasil perbandingan tersebut.

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

Seringkali Anda tidak hanya ingin memiliki nilai angka atau nilai string untuk hal-hal, tetapi Anda sebenarnya ingin jawaban ya atau tidak. Singkatnya, pada saat-saat tersebut, kita akan menggunakan tipe data boolean.

// apakah angka pertama lebih besar dari yang kedua
alert(13 > 12);

// periksa tipe variabel
let isRainyOutside = true;
alert(typeof isRainyOutside);

Menjalankan kode ini akan memberikan 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 kami!