Question 263120 in Javascript Question posted in
A very good W3school tutorial can be found here.

How is this javascript expression interpreted?

How do the following expressions get parsed and interpreted?

The chrome console does this:

> {'foo'}{'bar'}
'bar'

and similarly

> {a: 'foo'}{b: 'bar'}
'bar'

(Obviously whatever is going on here shouldn’t be used in real code.)

Tags:

2

Answers


  1. 0

    The 1st expression could be rewritten as

    {
  'foo';
}
{
  'bar';
}

    That is, two separate one-line statements, each containing a constant string literal, within otherwise empty code blocks. The result is the last expression evaluated, which is 'bar'.

    The second expression can be rewritten as

    {
  a: 'foo';
}
{
  b: 'bar';
}

    Where a and b are labels. Again, the last expression evaluates to 'bar'. While this second line looks somewhat similar to an object literal, this is not the case. Note that > {b: 'bar', a: 'foo'} results in a syntax error.

    Login or Signup to reply.
  2. 0

    You can use AST Explorer to view AST details.

    Code 1:

    {'foo'}{'bar'}

    AST:

    [
  {
    "type": "BlockStatement",
    "start": 0,
    "end": 7,
    "body": [
      {
        "type": "ExpressionStatement",
        "start": 1,
        "end": 6,
        "expression": {
          "type": "Literal",
          "start": 1,
          "end": 6,
          "value": "foo",
          "raw": "'foo'"
        }
      }
    ]
  },
  {
    "type": "BlockStatement",
    "start": 7,
    "end": 14,
    "body": [
      {
        "type": "ExpressionStatement",
        "start": 8,
        "end": 13,
        "expression": {
          "type": "Literal",
          "start": 8,
          "end": 13,
          "value": "bar",
          "raw": "'bar'"
        }
      }
    ]
  }
]

    So it means two blocks.

    Code 2:

    {a: 'foo'}{b: 'bar'}

    AST:

    [
  {
    "type": "BlockStatement",
    "start": 0,
    "end": 10,
    "body": [
      {
        "type": "LabeledStatement",
        "start": 1,
        "end": 9,
        "body": {
          "type": "ExpressionStatement",
          "start": 4,
          "end": 9,
          "expression": {
            "type": "Literal",
            "start": 4,
            "end": 9,
            "value": "foo",
            "raw": "'foo'"
          }
        },
        "label": {
          "type": "Identifier",
          "start": 1,
          "end": 2,
          "name": "a"
        }
      }
    ]
  },
  {
    "type": "BlockStatement",
    "start": 10,
    "end": 20,
    "body": [
      {
        "type": "LabeledStatement",
        "start": 11,
        "end": 19,
        "body": {
          "type": "ExpressionStatement",
          "start": 14,
          "end": 19,
          "expression": {
            "type": "Literal",
            "start": 14,
            "end": 19,
            "value": "bar",
            "raw": "'bar'"
          }
        },
        "label": {
          "type": "Identifier",
          "start": 11,
          "end": 12,
          "name": "b"
        }
      }
    ]
  }
]

    So it means two blocks with two labels.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search