With JavaScript, variable assignment needs to be declared using a keyword, which helps to determine the behavior of a variable. The most common way to do this is with the var statement. When defining a variable, one must use the var statement to tell JavaScript you are about to declare one or more variables.

The JavaScript interpreter will see the var keyword, followed by a set of variable names, with optionally assigned values. It knows this is a VariableDeclaration statement, and it will declare those variables, then assign them. You can now continue to use the variable names and do not have to use their values. This is very similar to how algebra works; for example, you may say a = 5, b = a/2. You’re assigning a to 5 and assigning b to half of a, which is half of 5, so b becomes 2.5. You would do this almost identically in JavaScript, but simply add the var keyword and end with a semicolon : var a = 5, b = a/2;

You attempted to declare a variable, but during runtime your code throws an Error, not letting you assign that variable name. You are presented with one of the following errors :

Variable names have a strict set of rules. You must not pick a variable name that is a keyword (these are words already used in the language) or a reserved word (these are words which are reserved for future use), or literal values (the value of a literal, such as true or null). The full list of reserved words is shown in Table 1-1.

In addition to having a set of reserved words, JavaScript has some other rules around variable naming. They can include numbers, but cannot start with a number (this would confuse them with number literals, discussed later in this chapter in longer detail in Chapter 4), they also cannot contain any spaces. Generally speaking though, the names of JavaScript variables are quite flexible—perhaps too flexible, for example you could use “ ” as a variable name (but please don’t). As a good rule of thumb, it is recommended you name your variables using the English Alphabet (A-Z), avoid the use of numbers, and use camelCasing for multiple word variables.

camelCasing is where each word is given a capital letter, except for the first word. The rest of the letters are lowercase. For example if you had a variable called Number of Days, in camelCase that would be numberOfDays. As another example, a variable called Cache Control would be cacheControl. Examples of camelCasing in the real world are brands like iPhone or eBay.

While you should use camelCasing for variable names, there are a few exceptions to this best practice rule. One is with constructors (functions that create new objects with the new keyword), which should use TitleCase (camelCase but with a capital first letter). Another is constants, which should be UPPERCASE_WITH_UNDERSCORES. Of course, all of these are best practices, and so can be disobeyed, but it is strongly recommended to use them.

It is very important to note that JavaScript variable names are case sensitive, that is byteLength is a different variable than ByteLength, which is a different variable than BYTE_LENGTH and so on. This is why it is vitally important to stick to a good naming convention for your variables. It can be very easy to get caught by inconsistent naming schemes, and spend hours debugging code only to find your variable was missing an uppercase character.

Listing 1-2. Rules for Variable Names

JavaScript needs to impose limits on variable names, otherwise you could accidentally override language features and functions . Some other languages, such as PHP, get around this by forcing you to prefix every variable name with a $ sign; however, this becomes very limiting, so most languages including JavaScript simply disallow a small subset of variable names. Some reserved words are not used in the language today, such as enum, but are intended to be included in the future and so become reserved as placeholders, to prevent use.

You have attempted to declare a variable inside a function’s scope, but during runtime your code throws a ReferenceError , not letting you use that variable, or if you’re not using strict mode, your variables are undefined. Alternatively you’ve tried to assign a variable without using the var keyword. You have been presented with one of the following errors :

JavaScript features something called “variable scopes .” Every time a variable is declared, it is given a “scope.” Variables declared with the var keyword can only be used in the function containing them—that is to say, they are given the scope of that function. There is an additional global scope, which contains all variables that aren’t contained in functions. Variables cannot be used outside of their scope. The solution is to move them to a higher scope, i.e., out of the function. Look closely at the following examples.

Each function is given a “scope” or “sandbox,” so that it can manage its own variables without overriding or leaking its own variables into the global scope. Variables inside of a function’s scope cannot be used outside of the function, or in other functions; this is very useful because it avoids conflicting variable names. If my function has a variable named length and so does yours, we don’t want to override each others variables with different values, so they are scoped for protection.

Function scoped variables also have an important use—they only live as long as the function runs, meaning they are cleaned from memory as soon as the function finishes. This is a very useful trick but can trip a lot of beginners up, so be careful and think hard about where you use your variables. The basic principle of scoping is similar to a “tree.” It begins with the root scope, and with each new function, a new “function scope” branch is created , functions inside functions are branches of branches, and the whole thing goes on indefinitely. Consider the code in Listing 1-4.

This code can be expressed as a tree of scopes (see Figure 1-1).

From the Figure 1-1, you can see the global scope holds the two functions: foo() and bing() . foo() has its own scope, which holds the a variable and the bar() function. bar() has its own scope, containing b and baz(). bing() has its own scope, containing a and boo().

It is important to note that the scope has an upwards chain, meaning baz() can access its sibling, b, as well as its parents bar(), a, and foo(). Similarly, boo() can access its sibling a and its parent bing(). However, this chain does not flow in the opposite direction, so foo() cannot access bar()’s scope of b and baz() (it can, of course, access its own scope of a and bar()). This is a pretty contrived example, but real-world codebases can have much larger and more complex scope chains than this.

Not only does JavaScript have a “functional scope,” it also has another level of scope, called “block scope .” Block scoped variables offer the same semantics as function scoped variables, in that they are locked to a block, they cannot be accessed outside of a block , and they are removed from memory as soon as the block finishes executing. A block is delimited by braces ({...}), and each new set of braces is a new block scope.

The JavaScript interpreter will see the let keyword, followed by a set of variable names, with optionally assigned values. It then creates each of these keywords as a variable, for the life of the “block scope .” It follows the same semantics as var, with the exception that it is tied to the block scope, not the function scope. Let variables also have another trick up their sleeve. When used in an if statement, or a for or while loop, the let variable is bound to the attached block, even though it is not inside the block itself. Take, for example, the code in Listing 1-6.

This is useful because it provides another scoping layer for variables. Variables using the var keyword are accessible to the whole function’s scope. For temporary variables, such as the i in a loop (which get thrown away as soon as the loop is done) the variable would normally hang around until the end of the function’s life, which can be a nuisance. With a let variable this is very effectively solved, as the let variable only exists for the life of the loop, and is then nicely cleaned up. You can also apply this by using blocks to encapsulate temporary variables, such as the second example in Listing 1-6.

You want to use a variable, but you want to ensure that it is not overridden by a new value later on in the code.

The var and let statements certainly have their uses, but both are vulnerable to being unexpectedly overridden in the life of running code. Luckily, the const statement provides you with a way of declaring a variable that is immutable; that is, it will always be assigned to its initial value, and cannot be changed, cannot be “mutated”. It is a constant. One of the things to keep in mind is that objects can be updated. Constants only work with primitive values .

The JavaScript interpreter will see the const keyword, followed by a set of constant names, with assigned values , and set those values to the constants as read-only (immutable) . It follows the same semantics as let, including using block scoping just like let, with the exceptions that it can never be reassigned to a new value (it is immutable), and that it must be initially assigned to a value.

It is important to note that constants can never be declared without a value; this will cause a SyntaxError . Constants must always have a value assigned to them upon declaration.

The spec is somewhat unclear about what precisely to do when a const is declared but not assigned, as a result, some browsers will not raise the SyntaxError, and the constant is permanently set to undefined, which is obviously pretty useless.

You want to create literal values of different types in JavaScript ; for example, you want to create a piece of text (string), or perhaps a number, or even a list of items (an array).

Literals are types of data that can be defined without explicitly creating some kind of object or instance . A literal can be a string (i.e., a piece of text), a decimal (base-10, 0-9), binary (base-2, 0-1), hexadecimal (base-16, 0-F), or octal (base-8, 0-7) number, a Boolean (true or false), an array (a list of other literals), an object (a named list of other literals), a regular expression (a complex text matching function), a function (a piece of code that can be repeatedly called), a template string (similar to a string, but replaces variable names with their values), as well as some standalone “primitive” values such as null and undefined. Each literal has a unique piece of syntax to denote its type, with perhaps the exception of decimal numbers.

The JavaScript interpreter will see each piece of unique syntax at the start of a literal; for example, a single/double quote for a string. It understands the specific rules around these and essentially creates that value as a literal instance of that type. The literals also borrow all properties from their “prototypes ,” for example everything you can do with new String('hello') you can also do with hello . Each of these literals can be assigned to a variable, or put inside an array or object. Each one has its own properties and attributes—you need to deal with each one in a different way. Chapters 3-15 guide you through how to utilize each of these types properly.

You want to be able to create literals more programmatically.

JavaScript contains constructor functions, which relate to each literal. Some of these allow you to invoke them manually, which can be useful for creating these objects programmatically , especially arrays and regular expressions. You should be aware that there are subtle differences between creating instances from the constructor functions and their literal counterparts, and you should always use the literal notation over constructors, unless you have a very specific reason for using the constructors. Constructors with the new keyword will actually create objects of that particular datatype, which is different than how literals work. This means, for example, typeof new String("hi") is equal to object, while typeof "hi" is equal to "string". While the Boolean(0) or Boolean("") will equal false, Boolean(new Number(0)) or Boolean(new String("")) will equal true. More details about the differences between these are featured in the later chapters for each datatype.

You want to determine if the variable you have created is defined.

A variable is undefined when it has been declared but has not been assigned a value, or the assigned value is the undefined literal. Just imagine that when you are declaring variables that you’re making an entry in a dictionary. Every word (variable) that you use in JavaScript is undefined until you assign it a definition or value. The same holds true for function return values: if a function has no return statement, or if the return statement is used without specifying a value (i.e., return;), then the return value has not been defined and will therefore be the undefined literal.

The output is:

Variable a has been declared but has not been assigned a value (a definition). A variable that has not been assigned a value is automatically assigned the undefined literal. Variable b has been declared and is defined as the numeric value 5. The first if statement compares variable a to the undefined primitive value. Because variable a has not been defined, the comparison is true and the message Variable 'a' is undefined is displayed. On the other hand, variable b was defined so the same comparison to the undefined primitive value fails and the message Variable 'b' is defined is displayed.

You test a variable to see if it is undefined using an equality operator and your script throws an exception because the variable has never been declared.

The output is:

Using the typeof operator is useful if a variable’s declaration status is not known, or for checking its value if it has been declared. By asserting if a variable is undefined using typeof variable === 'undefined', you can safely see if a variable has a value, without causing a ReferenceError.

You are using a function to perform a task and need to determine if the return value has been defined, once the operation is complete.

The output is:

Five functions are defined; the first two return undefined . Function 1 explicitly returns undefined by using an empty return statement. Function 2 returns undefined implicitly by not using the return statement at all. Just as we can test the value of a variable, we can test the return value of a function using an equality operator. In many cases, functions’ return values can be treated like variables. A function’s return value can be printed to the console or used otherwise . Note that because a function is already declared, its return value is implicitly declared too—so checking the return value of a function will never raise ReferenceError, unlike variables, which may if they’re undeclared.

You can use the equality operators to test for null values just like you test for undefined variables. null is an object and has only one value in JavaScript, null. A variable that is assigned null contains no valid data of the types Array, Boolean, String, Number, Date, Template String, or Object. When you want to declare a variable and initialize it, but do not want to give it value, just assign it the value null. This is useful if you need to declare a variable now but must wait for an operation to complete before assigning a value to the variable. Such cases may include number crunching or waiting for a response from a server. If the operation fails, the variable will remain null and this failure can be detected with code.

The output is:

Because null is falsey (it is equivalent to false when coerced to a Boolean), we can determine if a variable is null by using the bang operator (!) to perform a logical NOT operation. In other words , we’re asking if the variable myvar is “not false,” meaning true. This is the simplest (shortest code) technique for determining if a variable is null.

You need to perform different operations based on the value of a variable. You may need to test that a variable is strictly equal, simply equivalent, or strictly not equal to a value.

The output is:

Flow control of a script is very important to all programmers. Most scripts except the simplest of examples will have flow control of some kind. This example uses if statements to compare a variable to a fixed numeric value. If the comparison is true, the first code block below the comparison is executed. If the comparison is false, that block is not executed , and the next block is compared. else blocks are executed if no other blocks in the whole if statement were true. We will take an in-depth look at expressions in Chapter 2.

When working with an unfamiliar variable, you are uncertain if the variable is null or undefined and don’t know how to test the variable before working with it.

A variable is undefined only when the variable is declared but not assigned a value, or the variable has been explicitly assigned the undefined value. A variable is null only when it has been assigned the null value. This being the case, we can easily detect undefined and null variables as shown in the example. This makes null useful for explicitly representing a no-value variable, rather than a not-yet-defined variable, for example, in a function’s return statement.

The output is:

The typeof operator is used again as a more error-proof method of determining the type of a variable. The typeof operator returns a string label for the variable type. The operator will return the string undefined for any variable that is truly undefined.

There are many cases where you will need to coerce an existing value into a Boolean true or false value for use in an if statement or other condition statements .

Strings, numeric types, arrays, and objects can have an unlimited number of values, but the Boolean datatype can only have two: either true or false . A Boolean value indicates whether a condition, like those in an if statement, is true or not. The Boolean constructor can be used to convert any values passed into it to their Boolean equivalent.

The example in Listing 1-17 demonstrates coercion from various types into Boolean. Notice that we are not invoking a new Boolean—new Boolean()—we are instead using the Boolean constructor as a function— Boolean() —to coerce the given value into a Boolean primitive.

The Boolean constructor can take a single parameter and will convert it to a Boolean value internally based on the ToBoolean internal function , as part of the ECMAScript spec (specifically, section 7.1.2 of the ES6 spec, or 9.2 of the ES5 spec). If the value is 0, -0, null, false, NaN, undefined, or an empty string (''), the ToBoolean internal function will convert these to a value of false. The Boolean constructor , when used without new will simply reuse the underlying ToBoolean internal logic, as does the bang operator (!) and other logical operators, such as AND (&&) and OR (||).

You need to test a variable to determine if it is a Boolean or other datatype and determine if the Boolean variable has been initialized.

Using the typeof operator, we can determine the datatype of a variable. If the variable is a Boolean value, typeof will return the string 'boolean'.

The output is:

The typeof operator returns the string value Boolean for Boolean objects. To determine if a variable is a Boolean , all we need to do is strictly compare the return value of the typeof operator to the string 'boolean'. Other datatypes, such as strings and numbers, return different strings that represent them.

You need to make a Boolean decision based on the value of a variable that is neither true nor false.

There are only two Boolean values: true and false. However, many different types such as numbers, strings, null, and undefined can be coerced to Boolean. if statements, switch statements, for statements, and while statements all coerce their given values to Booleans.

The output is:

Every statement that expects a condition (if, switch, for, and while) will automatically coerce the given value into a Boolean (using the internal ToBoolean method described in Listing 1-14). If the Boolean value returned is false, the condition fails and the statement (if, switch, for, and while) is skipped. If the value is true then the block inside the statement is executed.

You want to create a string representation of another value.

The string constructor takes a single parameter and will automatically convert that value into a string literal.

Similarly to the Boolean constructor, the string constructor can also coerce values into its literal type. The ECMAScript spec contains an internal ToString function (ES6 section 7.1.12, ES5 section 9.8), which is used by the string constructor. It converts undefined to "undefined", null to "null", true to "true", false to "false" and number values to the string version of that number.

For other values, it checks to see if there is a toString method attached to the value. If there is one, it will use the resulting value, coerced as a string, meaning the string constructor will always return a string. Arrays have a toString function on their prototype which simply calls Array.prototype.join(',')—this is explained in Chapter 6. Using the toString method is a powerful feature of JavaScript, as it allows you to create your own objects, which can coerce to a string in a customized way.

You need to test a variable to determine if it is a string or other datatype.

Using the typeof operator, we can determine the datatype of a variable. If the variable is a string value, typeof will return the string "string".

The output is:

The typeof operator returns the value "string" for string objects and literals. To determine if a variable is a string, all you need to do is compare the return value of the typeof operator to " string ". Other datatypes such as objects and numbers return different strings that represent them.

Sometimes you have numbers being represented as strings in your application. How can you convert these strings into actual number literals so you can use them effectively?

The number constructor takes a single parameter and will automatically convert a string parameter into a number.

The output is:

The number constructor will attempt to convert its only parameter into a numeric value. If that is not possible , the number object will be initialized to NaN (Not a Number).

Not all numeric values in your application will come from your user or external data. In many cases you will need to use literal or hard-coded mathematical expressions in your script.

Floating-point numbers contain a decimal portion and may be expressed in scientific notation. Also known as "E notation ," this represents "times ten raised to the power of". For example, 1.02e3 means "1.02 times 10 raised to the power of 3,” or 1020.

Numbers can be written in decimal , hexadecimal, binary, and octal. Hexadecimal and octal numbers can have negative values. Binary, hexadecimal, and octal numbers can only represent integer values; they cannot be written in E notation. When the JavaScript runtime finds one of these number literals, it will automatically convert it to the decimal, or base-10 representation (with no decimal places, of course).

Hexadecimal integers (referred to as base-16 numbers) are notated by prefixing them with a 0x. They can contain digits 0 through 9, and letters A through F only. The letters A through F represent 10 through 15 in decimal (Base-10). Using letters other than A through F will raise a SyntaxError.

Octal integers (referred to as Base-8 numbers) are notated by prefixing them with a 0o. They can contain digits 0 through 7 only. Using numbers outside of 0 through 7 will raise a SyntaxError.

Binary integers (referred to as Base-2 numbers) are notated by prefixing them with 0b. They can only contain digits 0 and 1. Using numbers outside of 0 and 1 with a binary integer will raise a SyntaxError.

Hexadecimal, binary, and octal are the most commonly used numeral systems, next to decimals, in computing. This is why they come built into the language. Examples of other popular numeral systems that you may encounter in computing, but aren’t built into JavaScript, are Base-32 (Duotrigesimal) and Base-64 (Tetrasexagesimal). Refer to Table 1-2 for a handy guide on how each of the built-in JavaScript numerals convert.

This simple overview is an introduction to the basics of numeric representation and manipulation . To get the most out of number literals and the number object, make sure you read Chapter 4 to get an in-depth look at what JavaScript mathematics can really do. You will learn how to perform trigonometric, algebraic, calculus operations, and more.

You need to test a variable to determine if it is a numeric value or another datatype.

Using the typeof operator, you can determine the datatype of a variable. If the variable is a Number value, typeof will return the string "number".

The output is:

The typeof operator returns the string value " number" for number objects. To determine if a variable is a number, all you need to do is compare the return value of the typeof operator to the string "number". Other datatypes such as strings and objects return different strings that represent them.

Sometimes you may encounter the literals `NaN` (Not a Number) and ±Infinity (`Infinity` or `-Infinity`). All of these values are the typeof number, and need extra checks to ensure the number you want is a finite number.

The number constructor has two static methods (functions attached directly to the number constructor), Number.isNaN and Number.isFinite. Both return Booleans determining if the passed parameter is NaN or ±Infinity, respectively.

The output is:

NaN and ±Infinity are Number objects , which makes dealing with them difficult to detect; however, the two methods Number.isNaN() and Number.isFinite() are specifically built to detect these two edge cases. They are also available on the global object, meaning one can write, for example window.isNaN() or more simply isNaN(). It is especially important when taking user input as numbers, to check if the number is NaN.

You need to generate a date or timestamp for your application. You may need to pass this value back to the server or simply use it client-side.

The output is:

The JavaScript Date object offers many powerful functions such as measuring a timespan, converting times from one time zone to another, adding and subtracting moments in time, and more . Be sure to read Chapter 6 about dates and time, where the topic is covered in much more detail.

The Date object constructor can accept a string that’s RFC 2822 (for example "Fri, 24 Jan 2014 21:18:23 +0000"), or RFC 3339 compliant (for example, "2014-01-24T21:18:23+00:00"). We’ll pass the date string into the date constructor to create a Date object instance.

The output is:

The JavaScript Date object will attempt to parse many types of date strings, most notably RFC 3339 and RFC 2822 formatted date strings. This can be very useful as a tool for receiving dates from the server side. RFC 3339 strings are the recommended format for receiving and sending dates from the server side.

We can’t use the typeof operator to return the variable’s type because typeof will return the string "object" for a Date instance (as it is not a literal). Instead we’ll use the instanceof operator to determine if a variable is an instance of the Date object .

The output is:

The instanceof operator determines if a variable is an instance of an object. In this example, various variables are tested to see if they are instances of the Date object. If a variable is an instance of the Date object, the instanceof operator returns true, otherwise false.

You are required to create an object and give it some properties to use object-oriented practices in your code base.

Objects are collections of methods and properties. A method is a function in an object. A property is one or more values or objects in an object. JavaScript supports its own internal objects, objects that you create, and host objects.

To create your own objects, you first create an object literal, and then populate it with properties and methods using the well-known dot notation.

The output is:

The object created is a very simple representation of a house, its owner, and architecture. The house object contains five properties: address, area, constructionDate, architecture, and owner. The architecture property is another custom object with various properties about the house. The owner property is a third custom object containing data about the owner.

This house object is very simple and has no methods. However, it does show the basics of object creation and JavaScript object-oriented programming (OOP) . Objects and object-oriented programming are discussed in much more detail in Chapter 9.

You need to test a variable to determine if it is an object or another datatype.

Using the typeof operator, we can determine the datatype of a variable. If the variable is an object, typeof will return the string "object".

The output is:

The typeof operator returns the string " object" for all objects derived from the built-in "object" object. Other datatypes such as strings and numbers return a string that represents them.

You need to determine if an object, such as a Date object, is an instance of a constructor, or an instance of the Object constructor; however, typeof returns the "object" value for all of these.

If you have an object, such as a Date object, and using typeof returns "object", but you still want to assert that the object is an instance of a constructor you can use the instanceof keyword.

The output is:

The instanceof operator is a useful tool for detecting instances of constructors, especially when you want to determine the finer points of an objects inheritance. It is vitally important to remember that instanceof will not work on any literals, such as number literals or string literals. As a rule of thumb, instanceof only works on values that have a typeof of ”object”, so you could be ultra cautious by checking the typeof a value, followed by checking instanceof the object, only if the typeof is ”object”.

Some objects are created from the result of a constructor (such as Date), but they also inherit from their parent constructor objects. For example, a Date object will return true for instanceof Date, but will also return true for instanceof Object. This becomes a problem when trying to find the direct descendant of an object.

Every object that has a constructor and can be created by using the new keyword will have a constructor property. This is set to the constructor function, so for example new Date()`s constructor property is Date.

The output is:

The constructor property is very useful for determining the direct descendant of an object. It is also useful for getting the constructor itself, which can be useful for cloning an instance or making new instances of the same type. It also illustrates the main difference between instanceof and constructor.

You want to be able to assert that an object is not a descendant of a resulting constructor function, and instead asserting that an object is a plain object—one that was created using new Object() or an object literal ({}). instanceof will assert that the object is an instance of the object constructor. instanceof also asserts on any descendants of the object’s constructor such as the Date instances.

Just like in Listing 1-30, determining the direct descendant of an object should use the .constructor property. Determining if an object is a “plain” object (e.g., is not an instance of another constructor, such as date) requires the same process, even for object literals ({}).

The output is:

This is another important example of how the constructor property can sometimes be more useful than instanceof. The instanceof property will “walk the prototype chain”; that is, it will check not only the direct descendant, but the descendant of that, and that, and that, and so on. This means objects like Date are instances of Object (in fact, nearly everything is), however “plain” objects are the only objects where the .constructor property should be Object.

You need to create a list of values and store them in an ordered manner.

Using arrays is the best way to create an ordered list of values. Each value has a unique, numerical identifier and so, unlike objects, there is an explicit order to arrays.

The output is:

Arrays are ordered lists of values . You can get to any individual value inside an array by using the staple-notation ([ and ]) with a numeric index of the key. The numerical index starts from 0 and counts up by 1 for each new value in the array. Arrays also include a .length property, which is set to the total number of items in the array. Arrays can be created with an initial length, by using the array constructor with the new keyword, and a length parameter. For example, new Array(3) will create an array with three undefined values in it.

You are unsure when to use an object over an array, or are unsure of the merits of using either one.

Both arrays and objects store values against keys—they are “key-value stores”. The benefits of an array over an object are that the keys are predictable sequential numbers for each new item in the array, and that they explicitly maintain their sort order. Objects, on the other hand, do not have an explicit sort order and have unpredictable keys, they also cannot determine their length easily. An array’s key sequence is strictly sequential, so this has a side effect that if you create new values with large key numbers, the previous empty keys are backfilled to be undefined values.

The benefit of objects is that keys can be given a name decided by you, which can be very useful for object-oriented programming. Typically you would use objects for storing some kind of record, e.g., attributes about a person or place. You would likely use arrays for lists, perhaps a list of people or rankings. Refer to Table 1-3 for an object-array comparison.:

You need to be able to match a string against a particular pattern and need a concise way to do it.

Using regular expressions is the most powerful way to match patterns or test for patterns against a string value. It is a powerful tool that exists in many programming languages, including Ruby, C++11, Java, and Perl, and is even built into command-line tools such as Awk and Sed.

The output is:

Regular expressions are almost a miniature language alongside JavaScript (as well as many other languages), which allow for very powerful string finding and matching. The syntax is very complex, but with it comes a lot of power. Not only can you match parts of a string, as in the first two examples, but you can also match complex patterns such as words, number patterns, word boundaries, character ranges, and a lot more. You can also extract parts of a string based on these patterns or replace parts of a string. Regular expressions are covered in extensive detail in Chapter 20.

You want to do variable substitution inside of a string.

JavaScript ES6 features template literals, which fix a wide range of issues with existing JavaScript strings, the biggest of which is injecting variables into strings. Template literals use backticks (` and `), whereas normal strings use quotes ("" or '').

The output is:

Template string literals are specially tuned to let the JavaScript interpreter know that variable substitution needs to take place. Every time a template substitution (${}) is encountered, it will inject the known variable in its place, as you’d expect. The same scoping rules for variables apply here, as they do everywhere else. Template string literals are much more powerful than simple variable substitution—they behave very differently from strings with regard to escaping characters, and can be passed into custom functions to build complex formatting and template engines. Template string literals are covered in Chapter 14 of this book.