JavaScript - Operator Precedence

Halo sana, para pemrogram yang sedang belajar! Hari ini, kita akan mendalamkan sebuah topik yang mungkin terdengar menakutkan pada awalnya, tapi saya berjanji, itu tidak sekeras yang Anda pikirkan. Kita akan membahas Operator Precedence di JavaScript. Pergunakanlah hal ini seperti "aturan menonton" untuk matematika dalam pemrograman. mari kitaongkikan bersama!

Apa Itu Operator Precedence?

Sebelum kita melompat ke dalam, mari kita mulai dari dasar. Operator precedence mirip dengan urutan operasi yang Anda pelajari di kelas matematika. Ingat PEMDAS ( Parentheses, Exponents, Multiplication, Division, Addition, Subtraction)? Baiklah, JavaScript memiliki versi sendiri dari hal ini!

Operator precedence menentukan bagaimana operator diparses satu sama lain. Operator dengan precedence yang lebih tinggi menjadi operand dari operator dengan precedence yang lebih rendah.

mari kita lihat contoh sederhana:

let result = 5 + 3 * 2;
console.log(result); // Output: 11

Anda mungkin berpikir jawabannya seharusnya 16 (5 + 3 = 8, kemudian 8 2 = 16), tapi sebenarnya adalah 11. Mengapa? Karena perkalian memiliki precedence yang lebih tinggi daripada penambahan. Jadi, 3 2 dihitung terlebih dahulu (memberikan 6), dan kemudian 5 ditambahkan kepadanya.

Asosiatif

Sekarang, mari kita bicarakan kata yang indah: asosiatif. Jangan khawatir, itu lebih mudah daripada yang Anda pikirkan!

Asosiatif menentukan urutan dalam pengolahan operator yang memiliki precedence yang sama. Itu bisa berupa kiri-ke-kanan atau kanan-ke-kiri.

Asosiatif Kiri-ke-Kanan

Sebagian besar operator mengikuti asosiatif kiri-ke-kanan. Ini berarti mereka dievaluasi dari kiri ke kanan. mari kita lihat contoh:

let a = 10 - 5 - 2;
console.log(a); // Output: 3

Ini adalah bagaimana JavaScript memproses ini:

1. 10 - 5 = 5
2. 5 - 2 = 3

Asosiatif Kanan-ke-Kiri

Beberapa operator, seperti operator penugasan (=), memiliki asosiatif kanan-ke-kiri. mari kita lihat bagaimana ini bekerja:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Output: 5 5 5

JavaScript memproses ini dari kanan ke kiri:

1. c = 5
2. b = c (yang adalah 5)
3. a = b (yang adalah 5)

Tabel Operator Precedence

Sekarang, mari kita lihat "menu" precedence operator di JavaScript. Jangan khawatir jika Anda belum mengerti semuanya - kita akan melalui beberapa contoh!

Precedence	Tipe Operator	Asosiatif	Operators
19	Grouping	n/a	( ... )
18	Akses Member	kiri-ke-kanan	. []
17	Panggilan Fungsi	kiri-ke-kanan	... ( )
16	New (dengan daftar argumen)	n/a	new ... ( )
15	Increment/Decrement Sufiksi	n/a	... ++ ... --
14	Logical NOT, Bitwise NOT, Unary Plus/Minus, Increment/Decrement Prefiksi, typeof, void, delete, await	kanan-ke-kiri	! ~ + - ++ -- typeof void delete await
13	Eksponen	kanan-ke-kiri	**
12	Perkalian, Pembagian, Sisa	kiri-ke-kanan	* / %
11	Penambahan, Pengurangan	kiri-ke-kanan	+ -
10	Perpindahan Bitwise	kiri-ke-kanan	<< >> >>>
9	Relasional	kiri-ke-kanan	< <= > >= in instanceof
8	Kesetaraan	kiri-ke-kanan	== != === !==
7	AND Bitwise	kiri-ke-kanan	&
6	XOR Bitwise	kiri-ke-kanan	^
5	OR Bitwise	kiri-ke-kanan	|
4	AND Logis	kiri-ke-kanan	&&
3	OR Logis	kiri-ke-kanan	||
2	Conditional	kanan-ke-kiri	?:
1	Penugasan	kanan-ke-kiri	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Koma	kiri-ke-kanan	,

Contoh

Sekarang, mari kita praktikkan pengetahuan ini dengan beberapa contoh!

Contoh 1: Operasi Aritmetik

let result = 2 + 3 * 4 - 1;
console.log(result); // Output: 13

Ini adalah bagaimana JavaScript mengevaluasi ini:

1. 3 * 4 = 12 (perkalian memiliki precedence yang lebih tinggi)
2. 2 + 12 = 14
3. 14 - 1 = 13

Contoh 2: Operasi Logis

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // Output: true

mari kita rincikan ini:

1. x < y adalah true
2. y < z adalah true
3. true && true adalah true
4. x > z adalah false
5. true || false adalah true

Ingat, && (AND) memiliki precedence yang lebih tinggi daripada || (OR).

Contoh 3: Operasi Campuran

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Output: false

Ini terlihat sulit, tapi mari kitaambil langkah demi langkah:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 adalah false
5. a < b adalah true
6. false && true adalah false

Contoh 4: Penugasan dan Perbandingan

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // Output: 5 5 5

let result = x == y === z;
console.log(result); // Output: true

Ingat, penugasan (=) memiliki asosiatif kanan-ke-kiri, sedangkan perbandingan (==, ===) memiliki asosiatif kiri-ke-kanan.

1. z = 5
2. y = z (yang adalah 5)
3. x = y (yang adalah 5)
4. x == y adalah true
5. true === z adalah true (karena z adalah 5, yang adalah truthy)

Kesimpulan

Selamat! Anda telah mengambil langkah pertama dalam memahami operator precedence di JavaScript. Ingat, latihan membuat sempurna. Jangan khawatir untuk mencoba kombinasi operator yang berbeda - itu adalah cara Anda benar-benar menginternalisasi konsep ini.

Dan sini adalah tip profesional: jika Anda khawatir, gunakan tanda kurung! Mereka memiliki precedence tertinggi dan dapat membuat kode Anda lebih mudah dibaca. Misalnya:

let result = (2 + 3) * 4 - 1;
console.log(result); // Output: 19

Dengan cara ini, Anda secara eksplisit memberitahu JavaScript bagaimana Anda ingin ekspresi dievaluasi.

Terus coding, terus belajar, dan yang paling penting, bersenang-senang! JavaScript adalah bahasa yang kuat, dan memahami dasar-dasar ini akan memberikan Anda kesuksesan dalam perjalanan pemrograman Anda.

Credits: Image by storyset