Mengapa hasil bervariasi berdasarkan penempatan kurung kurawal?

Mengapa cuplikan kode di bawah, yang diambil dari artikel ini , memberikan hasil yang berbeda karena hanya satu perubahan dalam penempatan kurung kurawal?

Ketika kurung kurawal buka {pada baris baru, test()kembali undefined, dan "tidak - putus: tidak ditentukan" ditampilkan dalam peringatan.

function test()
{
  return
  { /* <--- curly brace on new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

Ketika kurung kurawal berada di baris yang sama dengan return, test()mengembalikan objek, dan "fantastis" diperingatkan.

function test()
{
  return { /* <---- curly brace on same line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

Itulah salah satu perangkap JavaScript: penyisipan titik koma otomatis. Garis yang tidak diakhiri dengan titik koma, tetapi bisa menjadi akhir dari pernyataan, secara otomatis dihentikan, jadi contoh pertama Anda terlihat seperti ini:

function test()
{
  return; // <- notice the inserted semicolon
  { 
    javascript: "fantastic"
  };
}

Lihat juga panduan gaya JS Douglas Crockford , yang menyebutkan penyisipan titik koma.

Dalam contoh kedua Anda, Anda mengembalikan sebuah objek (dibangun oleh tanda kurung kurawal) dengan properti javascriptdan nilainya "fantastic", efektif sama seperti ini:

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}

Javascript tidak memerlukan titik koma di akhir pernyataan, tetapi kekurangannya adalah ia harus menebak di mana letak titik koma. Sering kali hal ini bukan masalah, tetapi terkadang hal ini menciptakan titik koma yang tidak Anda inginkan.

Contoh dari posting blog saya tentang ini ( Javascript - hampir tidak berbasis garis ):

Jika Anda memformat kode seperti ini:

function getAnswer() {
   var answer = 42;
   return
      answer;
}

Maka diartikan seperti ini:

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

Pernyataan return mengambil bentuk tanpa parameternya, dan argumennya menjadi pernyataannya sendiri.

Hal yang sama terjadi pada kode Anda. Fungsi tersebut diartikan sebagai:

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}

Saya pribadi lebih suka Gaya Allman untuk keterbacaan (vs gaya K&R).

Dari pada…

function test() {
  return {
    javascript : "fantastic"
  };
}

Saya suka…

function test() 
{
  var obj =
  {
    javascript : "fantastic"
  };

  return obj;
}

Tapi ini solusi. Aku bisa menerimanya.

Itu karena javascript paling sering menempatkan ";" di akhir setiap baris, jadi pada dasarnya ketika Anda memiliki kembali {di baris yang sama, mesin javascript melihat bahwa akan ada sesuatu yang lebih, dan ketika di baris baru ia berpikir Anda lupa untuk meletakkan ";", dan menaruhnya untuk Anda.

Tanda kurung kurawal di sini menunjukkan konstruksi objek baru. Jadi kode Anda sama dengan:

function test() {
  var a = { javascript : "fantastic" };
  return a;
}

yang berfungsi sedangkan jika Anda menulis:

function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted 
      a;
}

itu tidak lagi berfungsi.

Masalahnya memang injeksi titik koma seperti dijelaskan di atas. Saya baru saja membaca posting blog yang bagus tentang hal ini. Ini menjelaskan masalah ini dan lebih banyak lagi tentang javascript. Ini juga berisi beberapa referensi yang bagus. Anda bisa membacanya di sini