중괄호 배치에 따라 결과가 다른 이유는 무엇입니까?

이 기사 에서 가져온 아래 코드 스 니펫 은 중괄호의 위치를 ​​한 번만 변경하여 다른 결과를 생성 하는 이유는 무엇 입니까?

여는 중괄호 {가 새 줄에 있으면을 test()반환 undefined하고 "no-it broke : undefined"가 경고에 표시됩니다.

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);
}

중괄호가 같은 같은 라인에있는 경우 return, test()객체를 반환하고, "환상적인"경고한다.

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);
}

이것이 자바 스크립트의 함정 중 하나 인 자동 세미콜론 삽입입니다. 세미콜론으로 끝나지 않지만 명령문의 끝일 수있는 줄은 자동으로 종료되므로 첫 번째 예제는 다음과 같이 효과적으로 보입니다.

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

세미콜론 삽입을 언급하는 Douglas Crockford의 JS 스타일 가이드를 참조하세요 .

두 번째 예제에서는 속성 javascript과 그 값을 가진 객체 (중괄호로 작성)를 반환합니다 "fantastic". 사실상 다음과 같습니다.

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

자바 스크립트는 문장 끝에 세미콜론이 필요하지 않지만, 단점은 세미콜론이 어디에 있는지 추측해야한다는 것입니다. 대부분의 경우 이것은 문제가되지 않지만 때로는 의도하지 않은 세미콜론을 발명합니다.

이에 대한 내 블로그 게시물의 예 ( Javascript – 거의 줄 기반이 아님) :

다음과 같이 코드를 포맷하면 :

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

그러면 다음과 같이 해석됩니다.

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

return 문은 매개 변수가없는 형식을 취하고 인수는 자체 문이됩니다.

코드도 마찬가지입니다. 이 함수는 다음과 같이 해석됩니다.

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

개인적으로 가독성을 위해 Allman 스타일을 선호합니다 (K & R 스타일 대비).

대신에…

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

나는 ...

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

  return obj;
}

그러나 이것은 해결 방법입니다. 나는 그것과 함께 살 수있다.

자바 스크립트가 ";"를 가장 자주 사용하기 때문입니다. 각 줄의 끝에서, 기본적으로 같은 줄에 return {을 입력하면 자바 스크립트 엔진은 더 많은 것을 볼 수 있고 새 줄에 ";"을 넣는 것을 잊었다 고 생각하고이를 대신 입력합니다.

여기에서 중괄호는 새 개체의 구성을 나타냅니다. 따라서 코드는 다음과 같습니다.

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

다음과 같이 작성하면 작동합니다.

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

더 이상 작동하지 않습니다.

문제는 실제로 위에서 설명한 세미콜론 주입입니다. 이 주제에 대한 좋은 블로그 게시물을 읽었습니다. 이 문제와 자바 스크립트에 대해 더 많이 설명합니다. 또한 좋은 참고 자료도 포함되어 있습니다. 여기에서 읽을 수 있습니다.