How do I know when to use {}

Question

I am new to learning JavaScript. I am starting to get the hang of it but I am reviewing lines of code that I got from a book I am learning from ("Head First") and I am having a bit of a hard time understanding when to use {}

Could you please help me understand?

function touchrock() {
    if (userName) {
        alert("I am glad that you have returned " + userName + "! Let's continue searching for your dream car");
    } else {
        userName = prompt("What is your name?");
        if (userName) {
            alert("It is good to meet you, " + userName + ".").onblur = setCookie;
            if (navigator.cookieEnabled);
            else alert("Sorry. Cookies aren't supported");
        }
    }
    document.getElementById("lambo").src = "lamboandgirl.jpg";
    document.getElementByID("lambo").onblur = setCookie;
}

Recommended reading: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/block and https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Statements — Matt Ball, Apr 02 '13 at 02:26
Put brackets everywhere unless there's only one statement and it can fit in a _single_ line. — elclanrs, Apr 02 '13 at 02:33

Daniel Imms · Answer 1 · 2013-04-02T02:35:18.430

2

For a function, you always need to use it:

function () {
    // ...
}

For an if statement or an else statement it's optional, however if used without braces then it can only execute a single line

if (cond)
    // single line...
else
    // single line...

if (cond) {
    // multi ...
    // line ...
} else {
    // multi ...
    // line ...
}

You can even mix and match with if/else

if (cond)
{
    // multi ...
    // line ...
}
else
    // single line...

Also try to use the standard of opening braces { start at the end of the line and ending braces } at the start of the next line. This is the usual standard way of writing JavaScript.

function test(cond) {
    if (cond) {
        alert('hello world');
    } else {
        alert('awww');
    }
}

edited Apr 02 '13 at 02:35

answered Apr 02 '13 at 02:29

Daniel Imms

47,944
19
150
166

1

Sort of optional... Without braces, only the first line will be inside the conditionals. – bfavaretto Apr 02 '13 at 02:30
While curly-braces are optional for if/else statements, I find that it's smart to use them for a few reasons. It makes your code more consistent, it's easier to read, and it avoids logic errors. – Surreal Dreams Apr 02 '13 at 02:34
1

@SurrealDreams That's one of those holy wars of programming, to enforce curly brace blocks or not to. – Daniel Imms Apr 02 '13 at 02:38

Blender · Answer 2 · 2013-04-02T02:39:42.260

Using if statements like that is confusing and should be avoided. It also looks like there's a global variable floating around in there.

You can omit the brackets only for single-line blocks:

while (condition)
    console.log(2);

// Is the same as

while (condition) {
    console.log(2);
}

But not for multi-line blocks:

while (condition)
    console.log(2);
    console.log(3);

// Is the same as

while (condition) {
    console.log(2);
}

console.log(3);

Just stick to using brackets everywhere. I only omit them (sometimes) on if statements where the body is only one line long and there's no else block:

if (condition) break;

// Is the same as

if (condition) {
    break;
}

score 0 · Answer 3 · edited Apr 02 '13 at 02:37

The purpose of using {} is separate blocks of code.

function touchrock() { // Create a block of code
    if (userName) { // Create another one
        alert("I am glad that you have returned " + userName + "! Let's continue searching for your dream car");
    } else {
        userName = prompt("What is your name?");
        if (userName) {
            alert("It is good to meet you, " + userName + ".").onblur = setCookie;
            if (navigator.cookieEnabled);
            else alert("Sorry. Cookies aren't supported");
        }
    }
    document.getElementById("lambo").src = "lamboandgirl.jpg";
    document.getElementByID("lambo").onblur = setCookie;
} // End of the first block

How do I know when to use {}

3 Answers3