Hari ini, di bagian ketiga dari terjemahan manual JavaScript, kita akan berbicara tentang berbagai cara mendeklarasikan variabel, tentang tipe data, tentang ekspresi dan tentang fitur bekerja dengan objek.
→
Bagian 1: program pertama, fitur bahasa, standar→
Bagian 2: gaya kode dan struktur program→
Bagian 3: variabel, tipe data, ekspresi, objek→
Bagian 4: fitur→
Bagian 5: array dan loop→
Bagian 6: pengecualian, titik koma, literal wildcard→
Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis→
Bagian 8: Tinjauan Umum Fitur ES6→
Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9
Variabel
Variabel adalah pengidentifikasi yang diberi nilai. Variabel dapat diakses dalam program, bekerja dengan cara ini dengan nilai yang diberikan padanya.
Variabel dalam JavaScript itu sendiri tidak mengandung informasi tentang jenis nilai yang akan disimpan di dalamnya. Ini berarti bahwa dengan menulis ke variabel, misalnya, sebuah string, Anda kemudian dapat menulis angka ke dalamnya. Operasi semacam itu tidak akan menyebabkan kesalahan dalam program. Itulah sebabnya JavaScript kadang-kadang disebut bahasa "tidak diketik".
Sebelum menggunakan variabel, harus dinyatakan menggunakan
var atau
let kata kunci. Ketika datang ke konstan, kata kunci
const digunakan. Mendeklarasikan variabel dan memberinya nilai tertentu dimungkinkan tanpa menggunakan kata kunci ini, tetapi tidak disarankan.
▍ Kata kunci var
Sebelum standar ES2015, menggunakan kata kunci
var adalah satu-satunya cara untuk mendeklarasikan variabel.
var a = 0
Jika
var dihilangkan dalam konstruk ini, nilai akan ditugaskan ke variabel yang tidak dideklarasikan. Hasil operasi ini tergantung pada mode di mana program sedang berjalan.
Jadi, jika yang disebut mode ketat diaktifkan, ini akan menyebabkan kesalahan. Jika mode ketat tidak diaktifkan, deklarasi variabel implisit akan terjadi dan akan ditetapkan ke objek global. Secara khusus, ini berarti bahwa variabel yang secara implisit dideklarasikan dengan cara ini dalam suatu fungsi tertentu akan tersedia bahkan setelah fungsi tersebut menyelesaikan pekerjaannya. Biasanya, diharapkan bahwa variabel yang dideklarasikan dalam fungsi tidak "melampaui" batas mereka. Ini terlihat seperti ini:
function notVar() { bNotVar = 1 // } notVar() console.log(bNotVar)
1 akan sampai ke konsol, biasanya tidak ada yang mengharapkan perilaku ini dari program, ekspresi
bNotVar = 1 tidak terlihat seperti upaya untuk mendeklarasikan dan menginisialisasi variabel, tetapi sebagai upaya untuk mengakses variabel yang terletak di lingkup fungsi eksternal (ini cukup normal). Akibatnya, deklarasi implisit variabel membingungkan orang yang membaca kode dan dapat menyebabkan perilaku program yang tidak terduga. Nanti kita akan berbicara tentang fungsi dan cakupan, untuk saat ini, selalu mencoba untuk menggunakan kata kunci khusus ketika arti dari sebuah ekspresi adalah mendeklarasikan variabel. Jika dalam contoh ini badan fungsi ditulis ulang sebagai
var bNotVar = 1 , maka upaya untuk memulai fragmen kode di atas akan menghasilkan pesan kesalahan (dapat dilihat di konsol browser).
Ini mungkin terlihat, misalnya, seperti ini:
Uncaught ReferenceError: bNotVar is not defined . Artinya adalah fakta bahwa program tidak dapat bekerja dengan variabel yang tidak ada. Adalah jauh lebih baik, ketika Anda pertama kali memulai program, untuk melihat pesan kesalahan seperti itu daripada menulis kode yang tidak dapat dimengerti yang dapat berperilaku tak terduga.
Jika, ketika mendeklarasikan variabel, itu tidak diinisialisasi, itu tidak diberi nilai apa pun, itu secara otomatis akan diberi nilai yang
undefined .
var a //typeof a === 'undefined'
Variabel yang dideklarasikan menggunakan kata kunci
var dapat berulang kali dideklarasikan lagi dengan memberikan nilai baru kepada mereka (tetapi ini dapat membingungkan seseorang yang membaca kode).
var a = 1 var a = 2
Anda dapat mendeklarasikan beberapa variabel dalam satu ekspresi:
var a = 1, b = 2
Ruang lingkup variabel disebut ruang lingkup program di mana variabel ini dapat diakses (terlihat).
Variabel yang diinisialisasi dengan kata kunci
var luar fungsi ditugaskan ke objek global. Ini memiliki cakupan global dan dapat diakses dari mana saja dalam program ini. Jika suatu variabel dideklarasikan menggunakan kata kunci
var di dalam suatu fungsi, maka itu hanya terlihat di dalam fungsi ini, menjadi variabel lokal untuknya.
Jika suatu variabel dideklarasikan dalam suatu fungsi menggunakan
var yang namanya cocok dengan nama variabel tertentu dari lingkup global, itu akan "menimpa" variabel global. Artinya, ketika mengakses variabel seperti itu di dalam fungsi, ia akan menggunakan versi lokalnya.
Penting untuk dipahami bahwa blok (area kode yang dilampirkan dalam kurung) tidak membuat area visibilitas baru. Lingkup baru dibuat saat fungsi dipanggil. Kata kunci
var memiliki apa yang disebut lingkup fungsional, bukan satu blok.
Jika variabel dideklarasikan dalam kode fungsi, itu terlihat oleh seluruh kode fungsi. Bahkan jika suatu variabel dideklarasikan dengan
var di akhir kode fungsi, Anda dapat merujuknya di awal kode, karena mekanisme meningkatkan variabel (mengangkat) berfungsi di JavaScript. Mekanisme ini “meningkatkan” deklarasi variabel, tetapi bukan operasi inisialisasi mereka. Ini bisa menjadi sumber kebingungan, jadi buat aturan untuk mendeklarasikan variabel di awal fungsi.
▍ biarkan kata kunci
Kata kunci let muncul di ES2015, yang, secara sederhana, dapat disebut versi "block"
var . Cakupan variabel yang dideklarasikan menggunakan kata kunci
let terbatas pada blok, operator, atau ekspresi yang dideklarasikan, serta blok bersarang.
Jika kata "biarkan" itu sendiri tampaknya tidak terlalu jelas, orang dapat membayangkan bahwa kata "biarkan" digunakan sebagai gantinya. Maka ungkapan
let color = 'red' dapat diterjemahkan ke dalam bahasa Inggris seperti ini: "biarkan warna menjadi merah", dan ke dalam bahasa Rusia seperti ini: "biarkan warna menjadi merah".
Dengan menggunakan kata kunci
let , Anda dapat menghilangkan ambiguitas yang terkait dengan kata kunci
var (misalnya, Anda tidak akan dapat mendeklarasikan variabel yang sama dua kali dengan
let ). Menggunakan
let luar fungsi, katakan ketika menginisialisasi loop, tidak membuat variabel global.
Misalnya, kode seperti itu akan menyebabkan kesalahan:
for (let i = 0; i < 5; i++) { console.log(i) } console.log(i)
Jika, ketika loop diinisialisasi, penghitung
i akan dinyatakan menggunakan kata kunci
var , maka
i akan tersedia di luar loop setelah selesai.
Saat ini, ketika mengembangkan program JS berdasarkan standar modern, Anda dapat sepenuhnya meninggalkan
var dan hanya menggunakan kata kunci
let dan
const .
▍Kata kunci kata sandi
Variabel dideklarasikan menggunakan
var atau
let kata kunci dapat ditimpa. Jika
const digunakan sebagai pengganti kata kunci ini, maka Anda tidak dapat menetapkan nilai baru ke konstanta yang dideklarasikan dan diinisialisasi dengan bantuannya.
const a = 'test'
Dalam contoh ini, konstanta
a tidak dapat diberi nilai baru. Tetapi harus dicatat bahwa jika
a bukan nilai primitif, seperti angka, tetapi objek, menggunakan kata kunci
const tidak melindungi objek ini dari perubahan.
Ketika mereka mengatakan bahwa suatu objek ditulis ke dalam variabel, mereka sebenarnya berarti bahwa variabel mengacu pada objek. Tautan ini tidak dapat diubah, dan objek yang dituju oleh tautan dapat diubah.
Kata kunci
const tidak membuat objek berubah. Ini hanya melindungi terhadap perubahan pada referensi yang ditulis dalam konstanta yang sesuai. Begini tampilannya:
const obj = {} console.log(obj.a) obj.a = 1 // console.log(obj.a) //obj = 5 //
Dalam konstanta
obj , saat inisialisasi, objek kosong baru ditulis. Mencoba mengakses propertinya
a , yang tidak ada, tidak menyebabkan kesalahan. Konsol
undefined . Setelah itu, kami menambahkan properti baru ke objek dan sekali lagi mencoba mengaksesnya. Kali ini nilai properti ini -
1 - sampai ke konsol. Jika Anda menghapus komentar pada baris terakhir dari contoh, upaya untuk mengeksekusi kode ini akan menyebabkan kesalahan.
Kata kunci
const sangat mirip dengan
let , khususnya, ia memiliki ruang lingkup blok.
Dalam kondisi modern, sangat diterima untuk menggunakan kata kunci
const , menggunakan hanya dalam kasus-kasus khusus, untuk menyatakan semua entitas yang nilainya tidak direncanakan akan diubah. Mengapa Masalahnya adalah bahwa yang terbaik adalah berusaha untuk menggunakan konstruksi sesederhana mungkin yang tersedia agar tidak menyulitkan program dan menghindari kesalahan.
Tipe data
JavaScript kadang-kadang disebut sebagai bahasa "tidak diketik", tetapi ini tidak benar. Memang benar bahwa Anda dapat menulis nilai dari tipe yang berbeda ke dalam variabel, tetapi ada tipe data dalam JavaScript. Secara khusus, kita berbicara tentang tipe data primitif dan objek.
Untuk menentukan tipe data dari nilai tertentu, Anda dapat menggunakan
typeof operator. Ini mengembalikan string yang menunjukkan jenis operan.
▍ tipe data primitif
Berikut adalah daftar tipe data JavaScript primitif:
numberstring (string)boolean (boolean)null (nilai null khusus)undefined (nilai spesial undefined )symbol (simbol, digunakan dalam kasus khusus, muncul di ES6)
Di sini nama tipe data diberikan dalam bentuk di mana
typeof operator mengembalikannya.
Mari kita bicara tentang tipe data yang paling umum digunakan dari daftar ini.
Ketikkan nomor
Nilai
number tipe dalam JavaScript direpresentasikan sebagai angka floating-point presisi ganda 64-bit.
Dalam kode, literal numerik direpresentasikan sebagai bilangan bulat dan pecahan dalam sistem desimal. Anda dapat menggunakan metode lain untuk mencatat angka. Misalnya, jika pada awal literal numerik ada awalan
0x - itu dianggap sebagai angka yang ditulis dalam notasi heksadesimal. Bilangan juga dapat ditulis dalam notasi eksponensial (dalam angka-angka tersebut Anda dapat menemukan huruf
e ).
Berikut adalah contoh entri bilangan bulat:
10 5354576767321 0xCC //
Berikut adalah angka pecahan.
3.14 .1234 5.2e4 //5.2 * 10^4
Numerik literal (perilaku ini juga merupakan karakteristik dari beberapa tipe primitif lainnya), ketika Anda mencoba mengaksesnya sebagai objek, secara otomatis, selama durasi operasi, dikonversi ke objek yang sesuai, yang disebut "pembungkus objek". Dalam hal ini, kita berbicara tentang
Number objek wrapper.
Di sini, misalnya, tampak seperti upaya untuk mengakses variabel
a , di mana literal numerik ditulis, sebagai objek, di konsol Google Chrome.
Tooltip Bungkus Objek AngkaJika, misalnya, Anda menggunakan metode
toString() dari objek bertipe
Number , itu akan mengembalikan representasi string dari angka tersebut. Itu terlihat seperti perintah yang sesuai yang dapat dieksekusi di konsol browser (dan dalam kode reguler) seperti ini:
a.toString()
Perhatikan tanda kurung ganda setelah nama metode. Jika Anda tidak meletakkannya, sistem tidak akan memberikan kesalahan, tetapi, bukannya output yang diharapkan, konsol akan menampilkan sesuatu yang sama sekali tidak terlihat seperti representasi string dari angka 5.
Objek
Number global dapat digunakan dalam bentuk konstruktor, membuat angka baru dengan bantuannya (walaupun dalam bentuk ini hampir tidak pernah digunakan), ia juga dapat digunakan sebagai entitas independen tanpa membuat instance dari itu (yaitu, beberapa angka diwakili dari itu) bantuan). Misalnya, properti
Number.MAX_VALUE -nya berisi nilai numerik maksimum yang dapat direpresentasikan dalam JavaScript.
Ketikkan string
Nilai-nilai tipe
string adalah urutan karakter. Nilai-nilai tersebut ditentukan sebagai string literal yang diapit dengan tanda kutip tunggal atau ganda.
'A string' "Another string"
Nilai string dapat dibagi menjadi beberapa bagian menggunakan karakter backslash.
"A \ string"
Sebuah string dapat berisi apa yang disebut sekuens escape yang ditafsirkan ketika string tersebut dicetak ke konsol. Misalnya, urutan
\n berarti karakter baris baru. Karakter backslash juga dapat digunakan untuk menambahkan tanda kutip ke string yang terlampir dalam tanda kutip yang sama. Melarikan karakter kutipan dengan
\ menyebabkan sistem tidak menganggapnya sebagai karakter khusus.
'I\'ma developer'
String dapat digabungkan menggunakan operator
+ .
"A " + "string"
Templat Literal
ES2015 memperkenalkan apa yang disebut pola literal, atau string pola. Mereka adalah string yang dilampirkan dalam backticks (
` ) dan memiliki beberapa properti menarik.
`a string`
Misalnya, dalam literal templat, Anda bisa mengganti nilai-nilai tertentu yang merupakan hasil dari mengevaluasi ekspresi JavaScript.
`a string with ${something}` `a string with ${something+somethingElse}` `a string with ${obj.something()}`
Menggunakan kutipan balik memudahkan untuk menulis literal string multiline:
`a string with ${something}`
Ketik boolean
JavaScript memiliki beberapa kata cadangan yang digunakan saat bekerja dengan nilai boolean - ini
true (benar), dan
false (salah). Operasi perbandingan, seperti
== ,
=== ,
< ,
> , mengembalikan
true atau
false .
Ekspresi logis digunakan dalam konstruksi seperti
if dan
while , membantu mengendalikan kemajuan suatu program.
Perlu dicatat bahwa di mana
true atau
false diharapkan, Anda dapat menggunakan nilai-nilai lain yang secara otomatis dianggap oleh bahasa sebagai true (truthy) atau false (falsy).
Secara khusus, berikut ini adalah nilai-nilai salah:
0 -0 NaN undefined null '' //
Nilai yang tersisa benar.
Ketik nol
JavaScript memiliki nilai
null khusus yang menunjukkan tidak adanya nilai. Makna serupa digunakan dalam bahasa lain.
Ketik tidak terdefinisi
Nilai yang
undefined ditulis ke variabel tertentu menunjukkan bahwa variabel ini tidak diinisialisasi dan tidak ada nilai untuk itu.
Nilai ini secara otomatis dikembalikan dari fungsi yang hasilnya tidak dikembalikan secara eksplisit menggunakan kata kunci
return . Jika fungsi menerima parameter yang, ketika dipanggil, tidak ditentukan, itu juga diatur ke
undefined .
Untuk memeriksa nilai
undefined , Anda dapat menggunakan konstruksi berikut.
typeof variable === 'undefined'
▍ Objek
Semua nilai yang tidak primitif memiliki tipe objek. Kita berbicara tentang fungsi, array, tentang apa yang kita sebut "objek", dan tentang banyak entitas lainnya. Semua tipe data ini didasarkan pada tipe
object , dan meskipun mereka berbeda dalam banyak hal satu sama lain, mereka memiliki banyak kesamaan.
Ekspresi
Ekspresi adalah potongan-potongan kode yang dapat diproses dan diperoleh berdasarkan perhitungan yang dilakukan nilai tertentu. JavaScript memiliki beberapa kategori ekspresi.
Ekspresi aritmatika
Ekspresi yang hasil perhitungannya termasuk dalam kategori ini.
1 / 2 i++ i -= 2 i * 2
Ekspresi string
Hasil mengevaluasi ekspresi seperti itu adalah string.
'A ' + 'string' 'A ' += 'string'
Ekspresi primer
Literal, konstanta, dan referensi untuk pengidentifikasi termasuk dalam kategori ini.
2 0.02 'something' true false this // , undefined i // i
Ini juga mencakup beberapa kata kunci dan konstruksi JavaScript.
function class function* // yield // / yield* // async function* // await // /pattern/i // () //
Ekspresi Inisialisasi Array dan Objek
[] // {} // [1,2,3] {a: 1, b: 2} {a: {b: 1}}
Ekspresi logis
Dalam ekspresi logis, operator logis digunakan, hasil perhitungannya adalah nilai logis.
a && b a || b !a
Ekspresi Akses Properti
Ekspresi ini memungkinkan Anda untuk mengakses properti dan metode objek.
object.property // ( ) object[property] object['property']
Ekspresi Penciptaan Objek
new object() new a(1) new MyRectangle('name', 2, {a: 4})
Ekspresi pernyataan fungsi
function() {} function(a, b) { return a * b } (a, b) => a * b a => a * 2 () => { return 2 }
Panggil ekspresi
Ekspresi semacam itu digunakan untuk memanggil fungsi atau metode objek.
ax(2) window.resize()
Bekerja dengan benda
Kami telah menemukan objek di atas, berbicara tentang objek literal, tentang memanggil metode mereka, tentang mengakses properti mereka. Di sini kita berbicara tentang objek secara lebih rinci, khususnya, mempertimbangkan mekanisme pewarisan prototipe dan penggunaan kata kunci
class .
▍ pewarisan prototipe
JavaScript menonjol di antara bahasa pemrograman modern karena mendukung warisan prototipe. Sebagian besar bahasa berorientasi objek menggunakan model pewarisan berbasis kelas.
Setiap objek JavaScript memiliki properti khusus (
__proto__ ) yang menunjuk ke objek lain yang merupakan prototipe-nya. Objek mewarisi properti dan metode prototipe.
Misalkan kita memiliki objek yang dibuat menggunakan objek literal.
const car = {}
Atau kami membuat objek menggunakan konstruktor
Object .
const car = new Object()
Dalam setiap kasus ini, prototipe objek
car akan menjadi
Object.prototype .
Jika Anda membuat larik yang juga merupakan objek, prototipenya adalah objek
Array.prototype .
const list = [] // const list = new Array()
Anda dapat memverifikasi ini sebagai berikut.
car.__proto__ == Object.prototype //true car.__proto__ == new Object().__proto__ //true list.__proto__ == Object.prototype //false list.__proto__ == Array.prototype //true list.__proto__ == new Array().__proto__ //true
Di sini kami menggunakan properti
__proto__ , itu tidak harus tersedia untuk pengembang, tetapi Anda biasanya dapat mengaksesnya. Perlu dicatat bahwa cara yang lebih dapat diandalkan untuk mendapatkan prototipe objek adalah dengan menggunakan metode
getPrototypeOf() dari
Object global.
Object.getPrototypeOf(new Object())
Semua properti dan metode prototipe dapat diakses oleh objek yang memiliki prototipe ini. Di sini, misalnya, terlihat seperti daftar array.
Petunjuk arrayPrototipe dasar untuk semua objek adalah
Object.prototype .
Array.prototype.__proto__ == Object.prototype
Object.prototype tidak memiliki prototipe.
Apa yang kami lihat di atas adalah contoh rantai prototipe.
Ketika mencoba mengakses properti atau metode dari suatu objek, jika objek itu sendiri tidak memiliki properti atau metode tersebut, mereka dicari dalam prototipe, kemudian dalam prototipe prototipe, dan seterusnya, sampai yang diinginkan ditemukan, atau sampai rantai prototipe tidak akan berakhir.
Selain membuat objek menggunakan operator
new dan menggunakan literal objek atau literal array, Anda bisa membuat instance objek menggunakan metode
Object.create() . Argumen pertama yang diteruskan ke metode ini adalah objek yang akan menjadi prototipe dari objek yang dibuat menggunakannya.
const car = Object.create(Object.prototype)
Anda dapat memeriksa apakah suatu objek merupakan bagian dari rantai prototipe objek lain menggunakan metode
isPrototypeOf() .
const list = [] Array.prototype.isPrototypeOf(list)
Fungsi konstruktor
Di atas, kami membuat objek baru menggunakan fungsi konstruktor yang sudah tersedia dalam bahasa (ketika mereka dipanggil, kata kunci
new digunakan). . .
function Person(name) { this.name = name } Person.prototype.hello = function() { console.log(this.name) } let person = new Person('Flavio') person.hello() console.log(Person.prototype.isPrototypeOf(person))
-. ,
this .
name , . . - ,
name , .
,
name , . , , ,
hello() . ,
Person hello() ( ).
▍
ES6 JavaScript «».
JavaScript . , JS . , , , « » . , , , , , .
.
class Person { constructor(name) { this.name = name } hello() { return 'Hello, I am ' + this.name + '.' } }
,
new ClassIdentifier() .
constructor , .
.
hello() — , , .
Person .
const flavio = new Person('Flavio') flavio.hello()
,
. , , , , .
, ( ) , , -, .
class Programmer extends Person { hello() { return super.hello() + ' I am a programmer.' } } const flavio = new Programmer('Flavio') flavio.hello()
hello() Hello, I am Flavio. I am a programmer .
(), .
super .
, , , , , . (
static ) , .
JavaScript , (, ) . , , .
,
get set . — , , . -, — .
class Person { constructor(name) { this.userName = name } set name(value) { this.userName = value } get name() { return this.userName } }
Ringkasan
, , JavaScript. .
Pembaca yang budiman! JS, , class.
