Brackets, Quotes, and Comments
As with all things, you have to pay attention when you're coding. Sometimes code looks a bit scary with all the braces and brackets. All they do is pack things together into smaller groups, like having different drawers in your dresser. Nothing to be freaked out about.
The main rule to all kinds of brackets is:
Every bracket that is opened must be closed.
It sounds intuitive, but it's easy to forget. And if you have several things nested (things inside of other things inside of other things), it can be easy to lose track of which bracket is closing which part. This takes some patience to debug sometimes.
Round Brackets ()
Also known as parentheses. These have two main uses. They relate to calling and defining functions, and they're used to control mathematical operations.
For the most part, when you see parentheses, think of functions.
Calling Functions
To call a function, you need to use the name of the function and a set of parentheses. If the function takes parameters, you put them inside the parentheses.
Examples:
- alert("Well, hello there!"); //shows a popup that greets you
- calculateArea(3, 17); //calls a function using arguments
- update(); //calls a function without arguments
Without the parentheses, a function doesn't even run. This allows you to set a function to a variable that you can pass around. Kind of weird but doable. Incidentally, it's possible to run a function immediately by wrapping it in a set of parentheses.
Controlling Math Operations
The computer will use its rules for "order of operations". You learned a set too, PEMDAS… Parentheses first, then exponents, multiplication and division, then addition and subtraction. The computer does the same and sometimes it's not what you want or expect. You can use parentheses to control this.
- //Notice: these are all the same numbers in the same order; only parentheses are different
- 2 * 3 + 4 * 6 = 30 //both multiplications are done before the addition
- 2 * (3 + 4) * 6 = 84 //(addition is done first) then the multiplications
- ((2 * 3) + 4) * 6 = 60 //((2 times 3 is first) then plus 4) then multiply 6
Parentheses can make all the difference. A lot of experienced programmers leave out the parentheses because they know how the computer is going to handle them. I tend to leave them in anyway just to make sure anyone reading my code can understand what I intend.
Square Brackets []
Square brackets are the main concern of arrays, but they can also be used with objects. You use square brackets to define an array and to put things into it.
When you see square brackets, think of arrays.
Arrays
Arrays are lists that hold a set of values or variables.
Examples:
- let emptyArray = [];//declares (creates) an empty array so we can add items to it later
- let myTestScores = [84, 92, 78, 83, 94]; //declares an array with some numbers inside of it
- let foodArray = ["pizza", "ice cream", "M&Ms"]; //declares an array with a few strings (words) inside of it
- let favoriteSnack = foodArray[2]; //this tells us one of the items in the array
Objects
We can use square brackets to select specific properties of objects. This is called using array notation.
Examples:
- myCar["make"]; //this would return the car's make, if it exists, like using myCar.make
- myCar[propertyNeeded]; //this uses a variable to access a property
- myCar["primary driver"]; //this accesses a special multi-word property feature of objects
Braces or Squiggly Brackets {}
These are super important for functions, loops, and conditionals, designating code blocks, and for declaring objects. They are also used in CSS to group style properties together. You'll see a lot of these braces in code.
When you see braces, think of code blocks and objects.
Code block example
- while (testScore < 65)
-
{ //start of the code block
- studyBetter();
- goToExtraHelp();
- } //end of the code block
Object example
- let myCar =
-
{ //start of the object
- make: "Subaru",
- year: 2015
- }; //end of the object
Quotation Marks '' or ""
Quotation marks wrap around strings, a type of variable. In JavaScript, you can use 'single quotes' or "double quotes". The interpreter understands either one, but just as with brackets, they must have an open and a close.
Different programmers have different reasons for preferring one over the other. I prefer double quotes. This is because I like to include text that gets shown to a user and by using double quotes around the string, I can use single quotes inside as apostrophes without having to use an escape character. I'll discuss the escape character when we talk about strings.
Whichever quote marks you use, just be consistent about it.
Be careful not to use smart quotes. These are quotes that curl inward toward your words. You have to use straight quotes. In an IDE, this will happen automatically. But if you're coding somewhere else, you may have to turn of your autocorrect feature that uses smart quotes. On a Google Chromebook, for example, if you use the INTL keyboard, you get the wrong set of quotes! Be careful.
Quotation mark examples
- let myName = "Dr. Wolf"; //using double quotation marks
- let myFavoriteVideoGame = 'Final Fantasy VI'; //using single quotation marks
Code Comments
Sidenote:
Don't hold back! Put lots of comments in your code while you're learning. Put reminders for yourself about what your
functions are meant to do. If there are any code blocks or concepts you struggled with, put more comments in to
remind yourself to look into it further.
When you are coding, you may be doing something that's not entirely clear in the code. Or you may have to step away from the computer to go to school or work or to eat or to see friends or whatever. You want to leave notes for yourself in your code. These are called comments.
Comments are useful for documenting your code for yourself and for others. It's also helpful for debugging. You can stop certain lines from running just by adding a comment indicator in front of the line. And when you want to run it again, just remove the comment part.
Typically, try to avoid comments for "obvious" code unless you didn't understand it when you were using it. It happens a lot while you're learning, by the way, and that's a good time for them. You type something in and you see it work but you don't necessarily know why it does.
Later on, you won't want or need comments like this because the code is clear enough.
- //this sets a number variable to 5
- let number = 5;
Line Comments //
Put these two slashes at the start of a line to stop the whole line from doing anything, or you can add it to a
line to stick a small comment there. Everything to the right of the // gets ignored on that one line.
Unlike the other brackets discussed on this page, these line comments don't get closed.
- //This line won't run.
- //And it won't cause an error either.
- //console.log("This isn't working at all.");
- alert("I can see this!"); //alert("But not this.");
Through this site, I will often include //comments at the ends of code lines to explain what the line does or to show an expected result. Or if I need more space than that, I'll put it above the line.
- alert("Hi"); //This pops-up a box that says "Hi"
- //You can show math answers like this:
- console.log(2 * 3 + (5 – 7) / 4 + (9 % 4)); //6.5
Block Comments /* … */
You can block off a whole section of code using /* and */ . You must make sure you have
the open symbol /* and the close symbol */ If you ever decide to remove them, you have
to remove both.
- /*
- You can put whatever you want here. The computer will ignore it.
- alert("Hey, nothing's happening!!");
- */
Comments in CSS and HTML
We're focused on JavaScript right now, but it's worth mentioning how to make comments in CSS and HTML because we usually use these languages together and there are similarities to what we're talking about here.
CSS Comments /* … */
These are exactly the same as JavaScript block comments! Whew. One less thing to remember. CSS can't use the line
comments // that JavaScript can, but if you put the opening and closing symbols on the same line, you
can get the same effect.
There are several reasons to use comments in CSS in particular. One is to temporarily disable some styling so you
can test it out. Another use is when you use color codes that aren't predefined names like red or
cornsilk . A third reason to use them is when you a bunch of styles that work together for a single
section of your page. Keep them together and use a set of block comments to make a heading for them so they're
easier to find.
- body {
- background-color: #c1b7ff; /* light purple */
- }
All CSS styles have to be wrapped with braces like the sample above. You start with a selector, then open a brace, put the styles you want, then close the brace.
HTML Comments <!-- … -->
It's a different style. These are also considered block comments, so you can wrap them around whatever you need to block out. Like the others, you can use this to disable code or to leave notes for yourself.
- <!--
- You can put whatever you want here. The computer will ignore it.
- <h1>This heading won't show up on the page right now!</h1>
- -->
Nearly all HTML tags also need to be opened and closed, like the <h1>...</h1> example
above. There are a few excepts where some tags close themselves, but it's generally the rule that every open gets a
close.