Symbols
Explain to a non-tech friend all the uses of the following in the JavaScript language:
-
Parentheses ()
In researching possible answers for this section, I did not realise that the uses of parentheses were so numerous. I would hazard a guess that these symbols must be among the most widely used ones in JavaScript. I cannot promise that the following list is exhaustive.
-
Parentheses are also called ‘the grouping operator’ which controls the precedence of evaluation in expressions. The normal order of precedence in mathematical operations is sometimes abbreviated BEDMAS, an acronym for Brackets (really parentheses), Exponents, Division, Multiplication, Addition, Subtractions. For example:
1 + 2 × 3 = 7
Multiplication has a higher precedence than addition, so 2 is multiplied by 3 then 1 is added.
(1 + 2) × 3 = 9
The parentheses change the order of operations, so now addition happens before multiplication.
-
Parentheses are used to surround the Boolean test in conditional statements:
if ( a < b ) {
console.log('a is smaller')
}
-
In a switch statement, the expression being evaluated is contained in parentheses:
switch (vegetable) { // Expression
case 'potato':
uses = 'chips'
break
case 'lettuce':
uses = 'salads'
break
default:
uses = 'eat it raw'
}
-
JavaScript has three different for loops: for, for…in, for…of. In each case, the keyword for is followed immediately by the loop setup in parentheses.
-
Aside from for loops, JavaScript also has the while and do…while looping constructs. The difference is where the looping condition is evaluated. In a whilef loop, the condition is evaluated before the loop begins and if it is false the looping code is not executed. In a do…while loop the condition is evaluated at the end of the looping code so that code is always executed at least once. In both of these looping constructs, the Boolean condition for looping is contained in parentheses.
-
Parentheses are used in function definitions, and also when the function is called. Parentheses contain the function parameters in the definition and the arguments when the function is invoked:
function cube(num) { // Parentheses for parameter num
return num * num * num
}
console.log( cube(4) ) // 64: Parentheses for argument
-
Methods have parentheses at the end of their name. Methods are actions that primitive data types or objects can perform. For example, consider the toUpperCase method:
let fName = 'Peter'
console.log( fName.toUpperCase() ) // PETER
-
Returning values over multiple lines from functions: In this case some sources have suggested that the return values should be enclosed in parentheses as in the following example.
function sectionCode() {
return ('<section class="content">\n' +
'\t<div class="left">\n' +
'\t</div>\n' +
'\t<div class="right">\n' +
'\t</div>\n' +
'</section>\n')
}
let sectionHTML = sectionCode()
console.log(sectionHTML)
However, I found that this example worked fine with or without the parentheses.
-
IIFE stands for Immediately Invoked Function Expression and is sometimes pronounced, “iffy.” It is a JavaScript function that is executed as soon as it is defined. IIFEs are contained in parentheses, because if they were not, they would be treated as regular function definitions. Wikipedia has more information about IFFEs.
-
The ! symbol is the logical Not operator. It flips true statements to false and false to true. When applying Not to a complex Boolean statement, it is necessary to wrap the statement in parentheses.
-
Brackets []
Brackets are sometimes called square brackets. Their primary use in JavaScript is to create and refer to arrays or lists of values:
let cars = ['Honda', 'Toyota', 'Subaru', 'Mazda']
console.log(cars[2]) // Subaru
In JavaScript, arrays are objects. Brackets are also used to access the properties of an object.
-
Braces {}
Braces are also referred to as curly braces or even curly brackets.
-
Braces are most commonly used in JavaScript to enclose blocks of code, for example function definitions, conditional blocks and loops. In chapter 3 of Eloquent JavaScript, author Marijn Haverbeke points out that braces can also be used to create freestanding blocks of code that are not part of any particular structure.
-
Braces are used to define objects. Objects have properties written as name:value pairs:
let dog = {petName: 'Fido', breed: 'Labrador', colour: 'black', vaccinated: true}
console.log(dog.petName) // Fido
-
Single quotes ''
Double quotes ""
Single and double quotes are used to delineate strings (collections of characters).
let dogName = "Bruiser"
let dogName = 'Bruiser'
Single or double quotes may be used, as long as the same type pairs up.
A convention is to use double quotes for HTML attributes, and single quotes in JavaScript code.
Where it’s necessary to include quotes inside a string, they can be escaped:
let description = '"Bruiser\'s a fine dog"'
