Skip to content

Latest commit

 

History

History
1439 lines (1015 loc) · 35.5 KB

RULES-id.md

File metadata and controls

1439 lines (1015 loc) · 35.5 KB
Raw

JavaScript Standard Style

English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin)

js-standard-style

Ini adalah ringkasan dari peraturan penggunaan Javascript standard.

Cara terbaik untuk belajar tentang standard adalah dengan memasangnya pada projek Anda dan cobalah didalam kode anda.

Peraturan

  • Gunakan 2 spasi untuk indentasi.

    eslint: indent

    function hello (name) {
  console.log('hi', name)
}

  • Gunakan tanda kutip tunggal untuk string kecuali untuk menghindari escaping.

    eslint: quotes

    console.log('hello there')    // ✓ ok
console.log("hello there")    // ✗ hindari
console.log(`hello there`)    // ✗ hindari

$("<div class='box'>")        // ✓ ok
console.log(`hello ${name}`)  // ✓ ok

  • Tidak ada variabel yang tidak digunakan.

    eslint: no-unused-vars

    function myFunction () {
  var result = something()   // ✗ hindari
}

  • Tambahkan spasi setelah keyword.

    eslint: keyword-spacing

    if (condition) { ... }   // ✓ ok
if(condition) { ... }    // ✗ hindari

  • Tambahkan spasi sebelum kurung dari deklarasi fungsi.

    eslint: space-before-function-paren

    function name (arg) { ... }   // ✓ ok
function name(arg) { ... }    // ✗ hindari

run(function () { ... })      // ✓ ok
run(function() { ... })       // ✗ hindari

  • Selalu gunakan === daripada ==.
    Pengecualian: obj == null diperbolehkan untuk memeriksa null || undefined.

    eslint: eqeqeq

    if (name === 'John')   // ✓ ok
if (name == 'John')    // ✗ hindari
    if (name !== 'John')   // ✓ ok
if (name != 'John')    // ✗ hindari

  • Infix operators must be spaced.

  • Operator Infix harus diberi spasi.

    eslint: space-infix-ops

    // ✓ ok
var x = 2
var message = 'hello, ' + name + '!'
    // ✗ hindari
var x=2
var message = 'hello, '+name+'!'

  • Tanda koma harus memiliki spasi setelahnya.

    eslint: comma-spacing

    // ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { ... }
    // ✗ hindari
var list = [1,2,3,4]
function greet (name,options) { ... }

  • Simpan statemen else pada baris yang sama dengan kurung kurawalnya.

    eslint: brace-style

    // ✓ ok
if (condition) {
  // ...
} else {
  // ...
}
    // ✗ hindari
if (condition) {
  // ...
}
else {
  // ...
}

  • Untuk statemen if yang menggunakan beberapa baris, gunakan kurung kurawal.

    eslint: curly

    // ✓ ok
if (options.quiet !== true) console.log('done')
    // ✓ ok
if (options.quiet !== true) {
  console.log('done')
}
    // ✗ hindari
if (options.quiet !== true)
  console.log('done')

  • Selalu tangani parameter fungsi err.

    eslint: handle-callback-err

    // ✓ ok
run(function (err) {
  if (err) throw err
  window.alert('done')
})
    // ✗ hindari
run(function (err) {
  window.alert('done')
})

  • Mendeklarasikan browser global dengan sebuah komen /* global */.
    Pengecualian: window, document, and navigator.
    Hindari penggunaan dari penamaan variabel seperti open, length, event, and name.

    /* global alert, prompt */

alert('hi')
prompt('ok?')

    Referensikan secara jelas fungsi atau properti didalam window juga ok, walaupun kode tidak akan berjalan didalam Worker yang mana menggunakan self daripada window.

    eslint: no-undef

    window.alert('hi')   // ✓ ok

  • Baris kosong ganda tidak diperbolehkan.

    eslint: no-multiple-empty-lines

    // ✓ ok
var value = 'hello world'
console.log(value)
    // ✗ hindari
var value = 'hello world'


console.log(value)

  • Untuk operator ternary didalam setingan multi-line, tambahkan ? dan : pada barisnya masing-masing.

    eslint: operator-linebreak

    // ✓ ok
var location = env.development ? 'localhost' : 'www.api.com'

// ✓ ok
var location = env.development
  ? 'localhost'
  : 'www.api.com'

// ✗ hindari
var location = env.development ?
  'localhost' :
  'www.api.com'

  • Untuk mendeklarasikan var, tulis setiap deklarasinya didalam statemennya masing-masing.

    eslint: one-var

    // ✓ ok
var silent = true
var verbose = true

// ✗ hindari
var silent = true, verbose = true

// ✗ hindari
var silent = true,
    verbose = true

  • Bungkus conditional assignments dengan kurung tambahan. Hal ini memperjelas bahwa ekspresinya adalah assignment (=) daripada sebuah typo untuk persamaan (===).

    eslint: no-cond-assign

    // ✓ ok
while ((m = text.match(expr))) {
  // ...
}

// ✗ hindari
while (m = text.match(expr)) {
  // ...
}

  • Tambahkan spasi didalam blok baris tunggal.

    eslint: block-spacing

      function foo () {return true}    // ✗ hindari
  function foo () { return true }  // ✓ ok

  • Gunakan camelcase ketika memberi nama variabel dan fungsi.

    eslint: camelcase

      function my_function () { }    // ✗ hindari
  function myFunction () { }     // ✓ ok

  var my_var = 'hello'           // ✗ hindari
  var myVar = 'hello'            // ✓ ok

  • Trailing commas not allowed.

  • Akhiran koma tidak diperbolehkan.

    eslint: comma-dangle

      var obj = {
    message: 'hello',   // ✗ hindari
  }

  • Koma harus ditempatkan pada akhir dari baris.

    eslint: comma-style

      var obj = {
    foo: 'foo'
    ,bar: 'bar'   // ✗ hindari
  }

  var obj = {
    foo: 'foo',
    bar: 'bar'   // ✓ ok
  }

  • Titik harus berada pada baris yang sama dengan propertinya.

    eslint: dot-location

      console.
    log('hello')  // ✗ hindari

  console
    .log('hello') // ✓ ok

  • Berkas harus berakhir dengan baris baru.

    eslint: eol-last

  • Tidak ada spasi diantara identifier fungsi dan pemanggilannya.

    eslint: func-call-spacing

    console.log ('hello') // ✗ hindari
console.log('hello')  // ✓ ok

  • Tambahkan spasi diantara kolon dan nilai didalam pasangan key value.

    eslint: key-spacing

    var obj = { 'key' : 'value' }    // ✗ hindari
var obj = { 'key' :'value' }     // ✗ hindari
var obj = { 'key':'value' }      // ✗ hindari
var obj = { 'key': 'value' }     // ✓ ok

  • Nama konstruktor harus dimulai dengan huruf kapital.

    eslint: new-cap

    function animal () {}
var dog = new animal()    // ✗ hindari

function Animal () {}
var dog = new Animal()    // ✓ ok

  • Konstruktor tanpa argumen harus dipanggil dengan kurung.

    eslint: new-parens

    function Animal () {}
var dog = new Animal    // ✗ hindari
var dog = new Animal()  // ✓ ok

  • Objek harus mengandung sebuah getter ketika setter-nya digunakan.

    eslint: accessor-pairs

    var person = {
  set name (value) {    // ✗ hindari
    this._name = value
  }
}

var person = {
  set name (value) {
    this._name = value
  },
  get name () {         // ✓ ok
    return this._name
  }
}

  • Konstruktor dari kelas yang diturunkan harus memanggil super.

    eslint: constructor-super

    class Dog {
  constructor () {
    super()             // ✗ hindari
    this.legs = 4
  }
}

class Dog extends Animal {
  constructor () {      // ✗ hindari
    this.legs = 4
  }
}

class Dog extends Animal {
  constructor () {
    super()             // ✓ ok
    this.legs = 4
  }
}

  • Gunakan array literals daripada menggunakan array constructors.

    eslint: no-array-constructor

    var nums = new Array(1, 2, 3)   // ✗ hindari
var nums = [1, 2, 3]            // ✓ ok

  • Hindari menggunakan arguments.callee dan arguments.caller.

    eslint: no-caller

    function foo (n) {
  if (n <= 0) return

  arguments.callee(n - 1)   // ✗ hindari
}

function foo (n) {
  if (n <= 0) return

  foo(n - 1)                // ✓ ok
}

  • Hindari memodifikasi variabel dari pendeklarasian class.

    eslint: no-class-assign

    class Dog {}
Dog = 'Fido'    // ✗ hindari

  • Hindari memodifikasi variabel yang dideklarasikan dengan const.

    eslint: no-const-assign

    const score = 100
score = 125       // ✗ hindari

  • Hindari menggunakan ekspresi konstan didalam conditional (kecuali perulangan).

    eslint: no-constant-condition

    if (false) {    // ✗ hindari
  // ...
}

if (x === 0) {  // ✓ ok
  // ...
}

while (true) {  // ✓ ok
  // ...
}

  • Tidak ada control characters didalam regular expressions.

    eslint: no-control-regex

    var pattern = /\x1f/    // ✗ hindari
var pattern = /\x20/    // ✓ ok

  • Tidak ada statemen debugger.

    eslint: no-debugger

    function sum (a, b) {
  debugger      // ✗ hindari
  return a + b
}

  • Tidak ada operator delete didalam variabel.

    eslint: no-delete-var

    var name
delete name     // ✗ hindari

  • Tidak ada duplikasi argumen didalam definisi fungsi.

    eslint: no-dupe-args

    function sum (a, b, a) {  // ✗ hindari
  // ...
}

function sum (a, b, c) {  // ✓ ok
  // ...
}

  • Tidak ada duplikasi nama didalam class member.

    eslint: no-dupe-class-members

    class Dog {
  bark () {}
  bark () {}    // ✗ hindari
}

  • Tidak ada duplikasi keys didalam objek literal.

    eslint: no-dupe-keys

    var user = {
  name: 'Jane Doe',
  name: 'John Doe'    // ✗ hindari
}

  • Tidak ada duplikasi label case didalam statemen switch.

    eslint: no-duplicate-case

    switch (id) {
  case 1:
    // ...
  case 1:     // ✗ hindari
}

  • Gunakan statemen import tunggal per modul.

    eslint: no-duplicate-imports

    import { myFunc1 } from 'module'
import { myFunc2 } from 'module'          // ✗ hindari

import { myFunc1, myFunc2 } from 'module' // ✓ ok

  • Tidak ada karakter kelas kosong didalam regular expressions.

    eslint: no-empty-character-class

    const myRegex = /^abc[]/      // ✗ hindari
const myRegex = /^abc[a-z]/   // ✓ ok

  • Tidak ada pola destrukturing yang kosong.

    eslint: no-empty-pattern

    const { a: {} } = foo         // ✗ hindari
const { a: { b } } = foo      // ✓ ok

  • Tidak menggunakan eval().

    eslint: no-eval

    eval( "var result = user." + propName ) // ✗ avoid
var result = user[propName]             // ✓ ok

  • Tidak memasukan ulang exceptions didalam klausa catch.

    eslint: no-ex-assign

    try {
  // ...
} catch (e) {
  e = 'new value'             // ✗ hindari
}

try {
  // ...
} catch (e) {
  const newVal = 'new value'  // ✓ ok
}

  • Tidak meng-extend objek native.

    eslint: no-extend-native

    Object.prototype.age = 21     // ✗ hindari

  • Hindari binding fungsi yang tidak dibutuhkan.

    eslint: no-extra-bind

    const name = function () {
  getName()
}.bind(user)    // ✗ hindari

const name = function () {
  this.getName()
}.bind(user)    // ✓ ok

  • Hindai menggunakan boolean yang tidak dibutuhkan.

    eslint: no-extra-boolean-cast

    const result = true
if (!!result) {   // ✗ hindari
  // ...
}

const result = true
if (result) {     // ✓ ok
  // ...
}

  • Tidak ada kurung yang tidak dibutuhkan disekitar ekspresi fungsi.

    eslint: no-extra-parens

    const myFunc = (function () { })   // ✗ hindari
const myFunc = function () { }     // ✓ ok

  • Gunakan break untuk menghentikan alur didalam switch.

    eslint: no-fallthrough

    switch (filter) {
  case 1:
    doSomething()    // ✗ hindati
  case 2:
    doSomethingElse()
}

switch (filter) {
  case 1:
    doSomething()
    break           // ✓ ok
  case 2:
    doSomethingElse()
}

switch (filter) {
  case 1:
    doSomething()
    // fallthrough  // ✓ ok
  case 2:
    doSomethingElse()
}

  • Tidak ada floating decimals.

    eslint: no-floating-decimal

    const discount = .5      // ✗ hindari
const discount = 0.5     // ✓ ok

  • Hindari memasukan ulang deklarasi fungsi.

    eslint: no-func-assign

    function myFunc () { }
myFunc = myOtherFunc    // ✗ hindari

  • Tidak memasukan ulang variabel global yang bersifat read-only.

    eslint: no-global-assign

    window = {}     // ✗ hindari

  • Tidak ada eval() yang disisipkan.

    eslint: no-implied-eval

    setTimeout("alert('Hello world')")                   // ✗ hindari
setTimeout(function () { alert('Hello world') })     // ✓ ok

  • Tidak ada deklarasi fungsi didalam blok bersarang.

    eslint: no-inner-declarations

    if (authenticated) {
  function setAuthUser () {}    // ✗ hindari
}

  • Tidak ada string regular expression yang invalid didalam konstruktor RegExp.

    eslint: no-invalid-regexp

    RegExp('[a-z')    // ✗ hindari
RegExp('[a-z]')   // ✓ ok

  • Tidak ada whitespace yang tidak teratur.

    eslint: no-irregular-whitespace

    function myFunc () /*<NBSP>*/{}   // ✗ hindari

  • Tidak ada penggunaan __iterator__.

    eslint: no-iterator

    Foo.prototype.__iterator__ = function () {}   // ✗ hindari

  • Tidak ada label dengan nama yang sama didalam scope variabel.

    eslint: no-label-var

    var score = 100
function game () {
  score: while (true) {      // ✗ hindari
    score -= 10
    if (score > 0) continue score
    break
  }
}

  • Tidak ada statemen label.

    eslint: no-labels

    label:
  while (true) {
    break label     // ✗ hindari
  }

  • Tidak ada blok bersarang yang tidak dibutuhkan.

    eslint: no-lone-blocks

    function myFunc () {
  {                   // ✗ hindari
    myOtherFunc()
  }
}

function myFunc () {
  myOtherFunc()       // ✓ ok
}

  • Hindari mencampurkan spasi dan tabs untuk indentasi.

    eslint: no-mixed-spaces-and-tabs

  • Tidak diperbolehkan menggunakan spasi ganda kecuali untuk indentasi.

    eslint: no-multi-spaces

    const id =    1234    // ✗ hindari
const id = 1234       // ✓ ok

  • Tidak ada string yang multiline.

    eslint: no-multi-str

    const message = 'Hello \
                 world'     // ✗ hindari

  • Tidak ada new tanpa memasukan objek kedalam sebuah variabel.

    eslint: no-new

    new Character()                     // ✗ hindari
const character = new Character()   // ✓ ok

  • Tidak menggunakan konstruktor Function.

    eslint: no-new-func

    var sum = new Function('a', 'b', 'return a + b')    // ✗ hindari

  • Tidak menggunakan konstruktor Object.

    eslint: no-new-object

    let config = new Object()   // ✗ hindari

  • tidak ada penggunaan new require.

    eslint: no-new-require

    const myModule = new require('my-module')    // ✗ hindari

  • Tidak ada penggunaan konstruktor Symbol.

    eslint: no-new-symbol

    const foo = new Symbol('foo')   // ✗ hindari

  • Tidak ada penggunaan pembungkus primitiv.

    eslint: no-new-wrappers

    const message = new String('hello')   // ✗ hindari

  • Tidak memanggil properti objek global sebagai sebuah fungsi.

    eslint: no-obj-calls

    const math = Math()   // ✗ hindari

  • Tidak ada literal octal.

    eslint: no-octal

    const octal = 042         // ✗ hindari
const decimal = 34        // ✓ ok
const octalString = '042' // ✓ ok

  • Tidak ada tanda escape untuk octal didalam literal string.

    eslint: no-octal-escape

    const copyright = 'Copyright \251'  // ✗ hindari

  • Hindari penggabungan string ketika menggunakan __dirname dan __filename.

    eslint: no-path-concat

    const pathToFile = __dirname + '/app.js'            // ✗ hindari
const pathToFile = path.join(__dirname, 'app.js')   // ✓ ok

  • Hindari menggunakan __proto__. Lebih baik gunakan getPrototypeOf.

    eslint: no-proto

    const foo = obj.__proto__               // ✗ hindari
const foo = Object.getPrototypeOf(obj)  // ✓ ok

  • Tidak ada pendeklarasian ulang variabel.

    eslint: no-redeclare

    let name = 'John'
let name = 'Jane'     // ✗ hindari

let name = 'John'
name = 'Jane'         // ✓ ok

  • Hindari penggunaan spasi ganda didalam literal regular expressions.

    eslint: no-regex-spaces

    const regexp = /test   value/   // ✗ hindari

const regexp = /test {3}value/  // ✓ ok
const regexp = /test value/     // ✓ ok

  • Assignments didalam statemen return harus dibungkus dengan kurung.

    eslint: no-return-assign

    function sum (a, b) {
  return result = a + b     // ✗ hindari
}

function sum (a, b) {
  return (result = a + b)   // ✓ ok
}

  • Hindari memasukan variabel kedalam dirinya-sendiri

    eslint: no-self-assign

    name = name   // ✗ hindari

  • Hindari persamaan variabel dengan dirinya-sendiri.

    eslint: no-self-compare

    if (score === score) {}   // ✗ hindari

  • Hindari penggunaan operator koma.

    eslint: no-sequences

    if (doSomething(), !!test) {}   // ✗ hindari

  • Penamaan yang bersifat restricted tidak diperbolehkan.

    eslint: no-shadow-restricted-names

    let undefined = 'value'     // ✗ hindari

  • Nilai kosong didalam array tidak diperbolehkan.

    eslint: no-sparse-arrays

    let fruits = ['apple',, 'orange']       // ✗ hindari

  • Tabs seharusnya tidak boleh digunakan

    eslint: no-tabs

  • String regular tidak boleh mengandung template literal.

    eslint: no-template-curly-in-string

    const message = 'Hello ${name}'   // ✗ hindari
const message = `Hello ${name}`   // ✓ ok

  • super() harus dipanggil sebelum menggunakan this.

    eslint: no-this-before-super

    class Dog extends Animal {
  constructor () {
    this.legs = 4     // ✗ hindari
    super()
  }
}

  • Hanya throw sebuah objek Error.

    eslint: no-throw-literal

    throw 'error'               // ✗ hindari
throw new Error('error')    // ✓ ok

  • Whitespace tidak diperbolehkan pada akhiran baris.

    eslint: no-trailing-spaces

  • Menginisialisasi undefined tidak diperbolehkan.

    eslint: no-undef-init

    let name = undefined    // ✗ hindari

let name
name = 'value'          // ✓ ok

  • Tidak ada kondisi pada perulangan yang tidak berubah.

    eslint: no-unmodified-loop-condition

    for (let i = 0; i < items.length; j++) {...}    // ✗ hindari
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

  • Tidak ada operator ternary ketika alternative yang lebih simple ada.

    eslint: no-unneeded-ternary

    let score = val ? val : 0     // ✗ hindari
let score = val || 0          // ✓ ok

  • Tidak ada kode yang tidak bisa dijangkau setelah statemen return, throw, continue, and break statements.

    eslint: no-unreachable

    function doSomething () {
  return true
  console.log('never called')     // ✗ hindari
}

  • Tidak ada statemen flow control didalam blok finally.

    eslint: no-unsafe-finally

    try {
  // ...
} catch (e) {
  // ...
} finally {
  return 42     // ✗ hindari
}

  • Operan sisi kiri dari operator relasional harus bukanlah negatif.

    eslint: no-unsafe-negation

    if (!key in obj) {}       // ✗ hindari
if (!(key in obj)) {}     // ✓ ok

  • Avoid unnecessary use of .call() and .apply().

  • Hindari penggunaan dari .call() dan .apply().

    eslint: no-useless-call

    sum.call(null, 1, 2, 3)   // ✗ hindari

  • Hindari penggunaan dari komputasi properti keys didalam objek yang tidak dibutuhkan.

    eslint: no-useless-computed-key

    const user = { ['name']: 'John Doe' }   // ✗ hindari
const user = { name: 'John Doe' }       // ✓ ok

  • Tidak ada konstruktor yang tidak dibutuhkan.

    eslint: no-useless-constructor

    class Car {
  constructor () {      // ✗ hindari
  }
}

  • Hindari penggunaan dari karakter escape yang tidak dibutuhkan.

    eslint: no-useless-escape

    let message = 'Hell\o'  // ✗ hindari

  • Menamai ulang import, export, and destructured assignments dengan nama yang sama tidak diperbolehkan.

    eslint: no-useless-rename

    import { config as config } from './config'     // ✗ hindari
import { config } from './config'               // ✓ ok

  • Tidak ada whitespace sebelum properti.

    eslint: no-whitespace-before-property

    user .name      // ✗ hindari
user.name       // ✓ ok

  • Tidak menggunakan statemen with.

    eslint: no-with

    with (val) {...}    // ✗ hindari

  • Pertahankan konsistensi dari baris baru diantara properti objek.

    eslint: object-property-newline

    const user = {
  name: 'Jane Doe', age: 30,
  username: 'jdoe86'            // ✗ hindari
}

const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ ok

const user = {
  name: 'Jane Doe',
  age: 30,
  username: 'jdoe86'
}                                                                 // ✓ ok

  • Tidak ada padding diantara blok.

    eslint: padded-blocks

    if (user) {
                            // ✗ hindari
  const name = getName()

}

if (user) {
  const name = getName()    // ✓ ok
}

  • Tidak ada whitespace diantara operator spread dan ekspresinya.

    eslint: rest-spread-spacing

    fn(... args)    // ✗ hindari
fn(...args)     // ✓ ok

  • Semicolons harus memiliki spasi setelah dan tidak ada spasi sebelumnya.

    eslint: semi-spacing

    for (let i = 0 ;i < items.length ;i++) {...}    // ✗ hindari
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

  • Harus ada spasi sebelum blok.

    eslint: space-before-blocks

    if (admin){...}     // ✗ hindari
if (admin) {...}    // ✓ ok

  • Tidak ada spasi didalam kurung.

    eslint: space-in-parens

    getName( name )     // ✗ hindari
getName(name)       // ✓ ok

  • Operator unary harus memiliki spasi setelahnya.

    eslint: space-unary-ops

    typeof!admin        // ✗ hindari
typeof !admin        // ✓ ok

  • Gunakan spasi didalam komentar.

    eslint: spaced-comment

    //comment           // ✗ hindari
// comment          // ✓ ok

/*comment*/         // ✗ hindari
/* comment */       // ✓ ok

  • Tidak ada spasi didalam template string.

    eslint: template-curly-spacing

    const message = `Hello, ${ name }`    // ✗ hindari
const message = `Hello, ${name}`      // ✓ ok

  • Gunakan isNaN() ketika memeriksa NaN.

    eslint: use-isnan

    if (price === NaN) { }      // ✗ hindari
if (isNaN(price)) { }       // ✓ ok

  • typeof harus dibandingkan dengan string yang valid.

    eslint: valid-typeof

    typeof name === 'undefimed'     // ✗ hindari
typeof name === 'undefined'     // ✓ ok

  • Immediately Invoked Function Expressions (IIFEs) harus dibungkus.

    eslint: wrap-iife

    const getName = function () { }()     // ✗ hindari

const getName = (function () { }())   // ✓ ok
const getName = (function () { })()   // ✓ ok

  • Tanda * didalam ekspresi yield*harus memiliki spasi sebelum dan sesudahnya.

    eslint: yield-star-spacing

    yield* increment()    // ✗ hindari
yield * increment()   // ✓ ok

  • Hindari kondisi Yoda.

    eslint: yoda

    if (42 === age) { }    // ✗ hindari
if (age === 42) { }    // ✓ ok

Semicolons

  • Tidak ada semicolons. (see: 1, 2, 3)

    eslint: semi

    window.alert('hi')   // ✓ ok
window.alert('hi');  // ✗ hindari

  • Jangan pernah memulai baris dengan (, [, `, atau segelintir kode yang mirip lainnya.

    Ini adalah hal yang terjadi dengan menghilangkan semicolons, dan standard melindungi kamu dari potensi masalah ini.

    (Daftar penuhnya adalah : [, (, `, +, *, /, -, ,, ., tapi kebanyakan dari ini tidak pernah muncul pada awal baris didalam kode yang sesungguhnya.)

    eslint: no-unexpected-multiline

    // ✓ ok
;(function () {
  window.alert('ok')
}())

// ✗ hindari
(function () {
  window.alert('ok')
}())
    // ✓ ok
;[1, 2, 3].forEach(bar)

// ✗ hindari
[1, 2, 3].forEach(bar)
    // ✓ ok
;`hello`.indexOf('o')

// ✗ hindari
`hello`.indexOf('o')

    Catatan: Jika kamu sering menulis kode seperti ini, kamu mungkin mencoba terlalu jauh.

    Percobaan yang asal-asalan tidak direkomendasikan, dengan alasan dari kebersihan dan keterbacaan kode, kapanpun itu.

    Daripada seperti ini:

    ;[1, 2, 3].forEach(bar)

    Contoh dibawah lebih direkomendasikan:

    var nums = [1, 2, 3]
nums.forEach(bar)

Bacaan lanjutan

Video tambahan:

Seluruh minifier kode yang terkenal dan digunakan sekarang menggunakan AST-based minification, jadi mereka dapat menangani Javascript tanpa semicolon dengan lancar (sejak semicolon tidak wajib didalam Javascript).

Kutipan dari "An Open Letter to JavaScript Leaders Regarding Semicolons":

[Bergantung kepada pemasukan semicolon otomatis] cukup aman, dan bagus untuk JS yang valid yang mana setiap browser mengerti. Closure compiler, yuicompressor, packer, and jsmin semuadapat secara mudah me-minify. Tidak ada masalah dalam performansi.

Maaf, daripada mengedukasi kamu, orang yang memimpin komunitas bahasa ini telah memberikan kamu kebohongan dan ketakutan. Itu adalah hal yang mememalukan. Saya merekomendasikan belajar bagaimana statemen didalam Javascript diakhiri (dan dimana saat mereka tidak diakhiri), jadi kamu bisa menulis kode yang menurutmu indah.

Secara umum, \n mengakhiri statemen kecuali:

  1. Statemennya memiliki parent yang belum ditutup, literal array, atau objek literal atau berakhir di suatu tempat, other way that is not a valid way to end a statement. (For instance, ending with . cara lainnya bukanlah cara yang valid untuk mengakhiri statemen. (Contoh, berakhir dengan . atau ,.)
  2. Barisnya adalah -- atau ++ (yang mana akan melakukan incement/decrement token selanjutnya.)
  3. Ini adalah for(), while(), do, if(), atau else, dan tidak ada {
  4. Baris selanjutnya dimulai dengan [, (, +, *, /, -, ,, ., atau operator biner yang bisa hanya ditemukan diantara dua token didalam ekspresi tunggal.

Hal yang pertama cukup jelas. Bahkan JSLint ok dengan hal karakter \n didalam JSON dan konstruksi tanda kurung, dan dengan statemen var yang menjangkau beberapa baris dan berakhir dengan ,.

Yang kedua super aneh. Saya tidak pernah melihat sebuah kasus (diluar dari pembahasan ini). ketika kamu ingin menulis i\n++\nj, tapi, faktanya, potongan kode itu diurai menjadi i; ++j, bukan i++; j.

Yang ketiga mudah dipahami, jika secara umum tidak disukai. if (x)\ny() sama dengan if (x) { y() }. Konstruksinya tidak berakhir sampai itu mencapai blok lainnya, atau sebuah statemen.

; adalah statemen Javascript yang valid, jadi if(x); adalah sama dengan if(x){} atau, “Jika x, tidak melakukan apapun.” Hal ini lebih banyak digunakan didalam perulangan dimana perulangannya juga memeriksa apakah fungsinya update. Tidak biasa, tapi bukannya belum pernah dengar.

Yang keempat secara umum sama seperti kasus “oh tidak, kamu butuh semicolon!”. Tapi, seperti yang terjadi, cukup mudah untuk membetulkan barisnya dengan semicolon jika kamu tidak mengartikan barisnya adalah lanjutan dari baris sebelumnya. Contoh, daripada:

foo();
[1,2,3].forEach(bar);

Kamu bisa melakukan hal ini:

foo()
;[1,2,3].forEach(bar)

Keuntungannya adalah _prefix_nya mudah untuk diperhatikan, sekalinya kamu telah terbiasa melihat baris yang dimulai tanpa ( atau [ tanpa semicolon.