{x: 1}은 무엇으로 간주됩니까? — JavaScript 콘솔의 차이점

{}로 둘러싸인 코드 해석은 콘솔에 따라 다릅니다.

최근 JavaScript 객체 이니셜라이저(리터럴) 는 고기능이 되었습니다.
기법을 확인하기 위해 Node.js나 각종 브라우저 등의 콘솔(repl)에 코드를 입력해 보는 것도 많지 않을까요?
그러나 객체 이니셜라이저를 사용하여 {x: 1} 등을 입력해도 객체가 생성되지 않는 콘솔이 있습니다.

예를 들어 Firefox이지만,

Firefox 콘솔에서

// 入力行
{x: 1}

// 表示行
1

됩니다.
Node.js와 Chrome의 콘솔이라면 객체가 생성되고,

Node.js의 콘솔에서

// 入力行
{x: 1}

// 表示行
{ x: 1 }

와 같이 표시되는데 왜 Firefox에서는 1가 표시됩니까?

{x: 1} 구문 트리

우선, 아무것도 없는 곳에 {x: 1} 라고만 쓴 경우, JavaScript에서는 본래 어떻게 구문 분석되는지를 확인합니다.
esprima.org에 구문 분석하고 구문 트리를 보여주는 페이지가 있었으므로 입력해 보았습니다.

AST 발췌

"type": "BlockStatement",
"body": [
    {
        "type": "LabeledStatement",
        "label": {
            "type": "Identifier",
            "name": "x"
        },
        "body": {
            "type": "ExpressionStatement",
            "expression": {
                "type": "Literal",
                "value": 1,
                "raw": "1"
            }
        }
    }
]

BlockStatement ( 블록문 ) 안에 x 라는 라벨이 붙은 LabeledStatement ( 레이블이 있는 문장 ) 가 있으며 그 내용이 1

Firefox 콘솔은 솔직한 동작을하고 있습니다.

즉, 아무것도 없는 장소에서 코드가 { } 로 둘러싸여 있으면, 그것은 블록문으로 간주되는 것이 보통이며, Firefox의 콘솔은 그대로의 솔직한 동작을 하고 있는 것 같다.
콘솔이 표시하는 것은 마지막으로 평가된 값이므로, 블록문과 라벨 첨부 문의 내용의 식, 1 가 평가되어 그대로 표시됩니다.
{ } 로 둘러싸인 코드가 객체 이니셜라이저로 간주되는 것은, 값이 기대되는 장소에 놓여져 있는 경우입니다.
예를 들어, 대입식의 우변( foo = {x: 1} ), 괄호 안( ({x: 1}) )등, 많이 생각할 수 있습니다.
Firefox에서도 이러한 코드를 콘솔에 입력하면 {x: 1}라는 객체가 생성되어 표시됩니다.

Node.js의 콘솔에는 편의를위한 장치가 있습니다.

위를 밟으면 Node.js와 Chrome 콘솔의 작동이 더 이상합니다.{x: 1} 를 입력하면 객체 이니셜 라이저로 간주되는 이유는 무엇입니까?
이것은 실은 간단한 장치로, 편리성을 위해 인치키를 하고 있는 것입니다.

Node.js의 내용( repl.js )을 살펴보면 입력 코드가 { }로 둘러싸여 있는 경우에 ( )로 래핑하는 처리가 있습니다.

repl.js (175 행 근처)

if (/^\s*\{/.test(code) && /\}\s*$/.test(code)) {
      // It's confusing for `{ a : 1 }` to be interpreted as a block
      // statement rather than an object literal.  So, we first try
      // to wrap it in parentheses, so that it will be interpreted as
      // an expression.
      code = `(${code.trim()})\n`;
      wrappedCmd = true;
}

이 랩 된 코드를 퍼스 해 보면 안된다면, 오브젝트 이니셜라이저가 아닐까,라고 하는 것으로, 또 한번, 이번은 랩 없이 그대로 시험하는 것 같습니다.

repl.js (201 행 근처)

} catch (e) {
  debug('parse error %j', code, e);
  if (wrappedCmd) {
    wrappedCmd = false;
    // unwrap and try again
    code = input;
    wrappedErr = e;
    continue;
  }

블록 문, 객체 이니셜라이저 또는 해석을 제어하려면

{ } 로 둘러싸인 코드의 해석이 콘솔에 의해 다른 구조가 대체로 알았습니다.
마지막으로 이 해석을 콘솔에 관계없이 명시적으로 선택하는 방법을 생각해 보았습니다.

객체 이니셜라이저로 해석하는 방법 :

// かっこで囲む
({x: 1})

// カンマ演算子の右に置く
1,{x: 1}

블록문으로 해석하는 방법:

// セミコロンを先頭か末尾に付ける
{x: 1};

이 기사의 라이센스

이 문서는 CC BY 4.0(크리에이티브 커먼즈 표시 4.0 국제 라이센스)에 게시됩니다.