Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 64e7aca

Browse files
committedJan 12, 2020
the old "var"
1 parent a0b3fe7 commit 64e7aca

File tree

12 files changed

+71
-80
lines changed

12 files changed

+71
-80
lines changed
 
Lines changed: 71 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,104 @@
11

2-
# The old "var"
2+
# Si Tua "var"
33

4-
```smart header="This article is for understanding old scripts"
5-
The information in this article is useful for understanding old scripts.
6-
7-
That's not how we write a new code.
4+
```smart header="Artikel ini untuk memahami script lama"
5+
Informasi yang terdapat di artikel ini berguna untuk memahami script lama.
6+
Hal itu bukanlah cara kita menulis kode baru.
87
```
98

10-
In the very first chapter about [variables](info:variables), we mentioned three ways of variable declaration:
11-
9+
Di bab paling awal tentang [variabel](info:variables), kami menyebutkan tiga cara untuk deklarasi variabel:
1210
1. `let`
1311
2. `const`
1412
3. `var`
1513

16-
`let` and `const` behave exactly the same way in terms of Lexical Environments.
14+
`let` dan `const` berperilaku dengan cara yang sama persis dalam hal lingkup leksikal.
1715

18-
But `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones.
16+
Tetapi `var` adalah mahluk buas yang sanggat berbeda, berasal dari masa lalu. Umumnya tidak digunakan dalam scripts modern, tetapi masih mengintai.
1917

20-
If you don't plan on meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later.
18+
Jika anda tidak berencana untuk bertemu dengan scripts seperti itu, anda mungkin harus melewatkan atau menunda bab ini, tetapi ada kemungkinan ia mengigit anda suatu saat nanti.
2119

22-
From the first sight, `var` behaves similar to `let`. That is, declares a variable:
20+
Dari sekilas pandang , `var` berperilaku mirip dengan `let`, Deklarasi sebuah variabel:
2321

2422
```js run
2523
function sayHi() {
26-
var phrase = "Hello"; // local variable, "var" instead of "let"
24+
var phrase = "Hello"; // variabel lokal, "var" dari pada "let"
2725

2826
alert(phrase); // Hello
2927
}
3028

3129
sayHi();
3230

33-
alert(phrase); // Error, phrase is not defined
31+
alert(phrase); // Error, frasa tidak didefinisikan
3432
```
3533

36-
...But here are the differences.
34+
... Tetapi inilah perbedaanya.
35+
36+
## "var" tidak memiliki ruang lingkup blok
3737

38-
## "var" has no block scope
38+
Variabel, dideklarasikan dengan `var`, baik function-wide ataupun global. Mereka terlihat melalui blok.
3939

40-
Variables, declared with `var`, are either function-wide or global. They are visible through blocks.
40+
Contohnya:
4141

42-
For instance:
4342

4443
```js run
4544
if (true) {
46-
var test = true; // use "var" instead of "let"
45+
var test = true; // gunakan "var" daripada "let"
4746
}
4847

4948
*!*
50-
alert(test); // true, the variable lives after if
49+
alert(test); // benar, variabel ada setelah if
5150
*/!*
5251
```
5352

54-
As `var` ignores code blocks, we've got a global variable `test`.
53+
Karena `var` mengabaikan blok kode , kita mendapatkan global variabel `test`.
5554

56-
If we used `let test` instead of `var test`, then the variable would only be visible inside `if`:
55+
Jika kita menggunakan `let test` daripada `var test`, maka variabel hanya akan terlihat di dalam `if`:
5756

5857
```js run
5958
if (true) {
60-
let test = true; // use "let"
59+
let test = true; // gunakan "let"
6160
}
6261

6362
*!*
64-
alert(test); // Error: test is not defined
63+
alert(test); // Error: test tidak didefinisikan
6564
*/!*
6665
```
6766

68-
The same thing for loops: `var` cannot be block- or loop-local:
67+
Hal yang sama juga untuk loop: `var` tidak dapat berupa blok atau loop-lokal:
6968

7069
```js
7170
for (var i = 0; i < 10; i++) {
7271
// ...
7372
}
7473

7574
*!*
76-
alert(i); // 10, "i" is visible after loop, it's a global variable
75+
alert(i); // 10, "i" terlihat setelah loop, itu adalah global variabel
7776
*/!*
7877
```
7978

80-
If a code block is inside a function, then `var` becomes a function-level variable:
79+
Jika blok kode ada di dalam fungsi, maka `var` menjadi variabel tingkat fungsi:
8180

8281
```js run
8382
function sayHi() {
8483
if (true) {
8584
var phrase = "Hello";
8685
}
8786

88-
alert(phrase); // works
87+
alert(phrase); // bekerja
8988
}
9089

9190
sayHi();
92-
alert(phrase); // Error: phrase is not defined (Check the Developer Console)
91+
alert(phrase); // Error: frasa tidak terdefinisi (periksa Developer Console)
9392
```
9493

95-
As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that.
94+
Seperti yang bisa kita lihat `var` menembus `if`, `for` atau blok kode lainnya. Itu karena sejak dahulu di blok Javascript tidak memiliki Lingkungan Leksikal. dan `var` adalah sisanya.
9695

97-
## "var" declarations are processed at the function start
96+
## Deklarasi "var" diproses saat menjalankan fungsi
9897

99-
`var` declarations are processed when the function starts (or script starts for globals).
98+
Deklarasi `var` diproses ketika fungsi dimulai (atau skrip dijalankan untuk global).
10099

101-
In other words, `var` variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function).
102-
103-
So this code:
100+
Dengan kata lain, variabel `var` didefinisikan dari awal fungsi, tidak peduli di manapun definisi tersebut ( dengan asumsi definisi tidak didalam fungsi bersarang).
101+
Jadi kode ini:
104102

105103
```js run
106104
function sayHi() {
@@ -115,7 +113,7 @@ function sayHi() {
115113
sayHi();
116114
```
117115

118-
...Is technically the same as this (moved `var phrase` above):
116+
...Secara teknis sama dengan ini (memindahkan `var pharse` di atas):
119117

120118
```js run
121119
function sayHi() {
@@ -130,7 +128,7 @@ function sayHi() {
130128
sayHi();
131129
```
132130

133-
...Or even as this (remember, code blocks are ignored):
131+
...Atau bahkan seperti ini (Ingat, blok kode diabaikan):
134132

135133
```js run
136134
function sayHi() {
@@ -147,13 +145,12 @@ function sayHi() {
147145
sayHi();
148146
```
149147

150-
People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function.
151-
152-
So in the example above, `if (false)` branch never executes, but that doesn't matter. The `var` inside it is processed in the beginning of the function, so at the moment of `(*)` the variable exists.
148+
Orang-orang juga menyebut perilaku seperti ini "hoisting", karena semua `var` "hoisted" (diangkat) ke bagian atas fungsi.
153149

154-
**Declarations are hoisted, but assignments are not.**
150+
Sehingga dalam contoh di atas, cabang `if (false)` tidak pernah dijalankan, tetapi itu tidak masalah. `var` di dalamnya diproses di awal fungsi, jadi pada saat `(*)` variabel ada.
151+
**Pendeklarasian hoisted, sedangkan penugasan (assigment) tidak.**
155152

156-
That's better to demonstrate with an example, like this:
153+
Lebih baik mendemonstrasikan dengan contoh, seperti ini:
157154

158155
```js run
159156
function sayHi() {
@@ -167,40 +164,36 @@ function sayHi() {
167164
sayHi();
168165
```
169166

170-
The line `var phrase = "Hello"` has two actions in it:
171-
172-
1. Variable declaration `var`
173-
2. Variable assignment `=`.
174-
175-
The declaration is processed at the start of function execution ("hoisted"), but the assignment always works at the place where it appears. So the code works essentially like this:
167+
Pada baris `var pharse = "Hello"` memiliki dua aksi didalamnya:
168+
1. Deklarasi variabel `var`
169+
2. Penugasan variabel `=`.
176170

171+
Deklarasi diproses pada awal pelaksanaan fungsi ("hoisted"), tetapi penugasan selalu bekerja di tempat mucul. sehingga pada dasarnya kode bekerja seperti ini:
177172
```js run
178173
function sayHi() {
179174
*!*
180-
var phrase; // declaration works at the start...
175+
var phrase; // deklarasi bekerja di awal...
181176
*/!*
182177

183-
alert(phrase); // undefined
178+
alert(phrase); // tidak terdefinisi
184179

185180
*!*
186-
phrase = "Hello"; // ...assignment - when the execution reaches it.
181+
phrase = "Hello"; // ...penugasan - saat penugasan mencapainya.
187182
*/!*
188183
}
189184

190185
sayHi();
191186
```
192187

193-
Because all `var` declarations are processed at the function start, we can reference them at any place. But variables are undefined until the assignments.
188+
Karena semua deklarasi `var` diproses pada awal fungsi, kita dapat mendeferensikanya dimana saja. tetapi variabel tidak terdefinisi sampai penugasan.
194189

195-
In both examples above `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`.
190+
Dalam kedua contoh diatas `alert` bekerja tanpa error, karena ada variabel `pharse`. Tetapi karena nilainya belum ditetapkan, sehingga menampilkan `undefined`.
196191

197192
### IIFE
198193

199-
As in the past there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE).
200-
201-
That's not something we should use nowadays, but you can find them in old scripts.
202-
203-
An IIFE looks like this:
194+
Karena di masa lalu hanya ada `var`, dan ia tidak memiliki visibilitas tingkat blok, programmer menemukan cara untuk menirunya. cara mereka melakukanya dinamakan “immediately-invoked function expressions” (disingkat IIFE).
195+
Itu bukanlah sesuatu yang harus kita gunakan saat ini, tetapi anda dapat menemukannya di skip lama
196+
Sebuah IIFE terlihat seperti ini:
204197

205198
```js run
206199
(function() {
@@ -212,13 +205,12 @@ An IIFE looks like this:
212205
})();
213206
```
214207

215-
Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
216-
217-
The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error:
208+
Disini ekspresi fungsi dibuat dan segera dipangil. Sehingga kode dieksekusi segera dan memiliki variabel pribadi sendiri.
218209

210+
Fungsi ekspresi dibungkus dengan tanda kurung `(function {...})`, karena ketika Javascript bertemu `"function"` dalam aliran kode utama, ia memahaminya sebagai awal dari Deklarasi Fungsi. tetapi sebuah Deklarasi Fungsi harus memiliki nama, sehingga kode seperti ini akan menghasilkan error:
219211
```js run
220-
// Try to declare and immediately call a function
221-
function() { // <-- Error: Unexpected token (
212+
// Coba untuk mendeklarasikan dan segera memanggil fungsi
213+
function() { // <-- Error: Token tidak diharapkan (
222214

223215
let message = "Hello";
224216

@@ -227,48 +219,47 @@ function() { // <-- Error: Unexpected token (
227219
}();
228220
```
229221

230-
Even if we say: "okay, let's add a name", that won't work, as JavaScript does not allow Function Declarations to be called immediately:
231-
222+
Bahkan jika kita mengatakan: "Ok, mari tambahkan nama", hal itu tidak dapat bekerja, karena Javascript tidak mengizinkan Deklarasi Fungsi dipanggil segera:
232223
```js run
233-
// syntax error because of parentheses below
224+
// syntax error karena frasa dibawah
234225
function go() {
235226

236-
}(); // <-- can't call Function Declaration immediately
227+
}(); // <-- tidak dapat segera memanggil deklarasi fungsi
237228
```
238229

239-
So, the parentheses around the function is a trick to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression: it needs no name and can be called immediately.
230+
Jadi, tanda kurung di sekitar fungsi adalah trik untuk menunjukan Javascript bahwa fungsi dibuat dalam konteks ekxpresi lain, dan karenanya merupakan ekspresi fungsi: tidak memerlukan nama dan segera dipanggil.
240231

241-
There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression:
232+
Ada beberapa cara lain selain tanda kurung untuk memberi tahu Javascript bahwa yang dimaksud adalah Ekspresi fungsi:
242233

243234
```js run
244-
// Ways to create IIFE
235+
// Cara membuat IIFE
245236

246237
(function() {
247-
alert("Parentheses around the function");
238+
alert("kurung disekitar fungsi");
248239
}*!*)*/!*();
249240

250241
(function() {
251-
alert("Parentheses around the whole thing");
242+
alert("kurung disekitar semuanya");
252243
}()*!*)*/!*;
253244

254245
*!*!*/!*function() {
255-
alert("Bitwise NOT operator starts the expression");
246+
alert("Operator Bitwise NOT memulai ekspresi");
256247
}();
257248

258249
*!*+*/!*function() {
259-
alert("Unary plus starts the expression");
250+
alert("Unary plus memulai ekspresi");
260251
}();
261252
```
262253

263-
In all the above cases we declare a Function Expression and run it immediately. Let's note again: nowadays there's no reason to write such code.
254+
Dalam semua kasus diatas kami mendeklarasikan sebuah Ekspresi fungsi dan menjalankanya segera. Mari catat kembali: Saat ini tidak ada alasan untuk menulis kode seperti itu.
264255

265-
## Summary
256+
## Kesimpulan
266257

267-
There are two main differences of `var` compared to `let/const`:
258+
Ada dua perbedaan utama dari `var` dibandingkan dengan `let/const`;
268259

269-
1. `var` variables have no block scope, they are visible minimum at the function level.
270-
2. `var` declarations are processed at function start (script start for globals).
260+
1. `var` variabel tidak memiliki ruang lingkup blok, mereka terlihat minimum pada tingkat fungsi.
261+
2. Deklarasi `var` diproses saat fungsi dimulai (skrip dimulai untuk global).
271262

272-
There's one more very minor difference related to the global object, that we'll cover in the next chapter.
263+
Ada satu perbedaan kecil terkait objek global, yang akan kita bahas pada bab selanjutnya.
273264

274-
These differences make `var` worse than `let` most of the time. Block-level variables is such a great thing. That's why `let` was introduced in the standard long ago, and is now a major way (along with `const`) to declare a variable.
265+
Perbedaan-perbedaan ini membuat `var` lebih buruk daripada` let` hampir di setiap waktu. Variabel block-level adalah hal yang bagus. Itu sebabnya `let` diperkenalkan dalam standar sejak dahulu, dan sekarang merupakan cara utama (bersama dengan` const`) untuk mendeklarasikan variabel.

‎7-animation/1-bezier-curve/pause.png

-1 Bytes
Loading

‎7-animation/1-bezier-curve/play.png

-1 Bytes
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

‎changes.sketch

-16 Bytes
Binary file not shown.

‎figures.sketch

-148 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)
Please sign in to comment.