Notes from the MDN JavaScript Guide (Intro, Grammar and Types)

0 Shares

Today, as an ongoing project until complete, I decided that I'd refresh my JavaScript education outside of courses.

Courses are great, but sometimes I learn better by taking things very slowly as I read through documentation.

This helps me dissect information when and as I need it.

Thus, I decided to use the next few days (or weeks) to read the entire MDN JavaScript Guide.

One thing I realized about programming, as you may have read from my project summaries, is that programming is two-fold.

Not only do you have to understand the syntax of the language that you're learning, you also have to know how to put the syntax together such that it makes sense in order to make the computer do what you want.

Reading the MDN JavaScript Guide is just part of this process, because it gives an authoritative overview of each important concept of the JavaScript language.

My notes begin here:

What is JavaScript

JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive.

There are also more advanced server side versions of JavaScript such as Node.Js which allow you to add more functionality to a website than simply downloading files.

Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM).

Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server.

JavaScript documentation vs the ECMAScript specification

The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to implement standards-compliant language features in your ECMAScript implementation or engine (such as SpiderMonkey in Firefox, or V8 in Chrome).

The ECMAScript document is not intended to help script programmers; use the JavaScript (reference guide) documentation for information on writing scripts.

The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.

JavaScript Grammar and Types

Evaluating variables

A variable declared using the var or let statement with no assigned value specified has the value of undefined.

An attempt to access an undeclared variable results in a ReferenceError exception being thrown.

You can use undefined to determine whether a variable has a value.

The undefined value behaves as false when used in a boolean context.

The undefined value converts to NaN when used in numeric context.

When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts.

Variable Scope

When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document.

When you declare a variable within a function, it is called a local variable, because it is available only within that function.

After ECMAScript 2015, JavaScript introduced block statement scope with the let declaration.

Before, when using the var keyword to declare variables, the variables would have been local to the function (or global scope) that the block resided in.

Variable Hoisting

In JavaScript, you can refer to a variable declared later, without getting an exception.

This concept is known as hoisting.

Variables in JavaScript are in a sense “hoisted” or lifted to the top of the function or statement, and return a value of undefined.

Because of hoisting, all var statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

In ECMAScript 2015, let and constare hoisted but not initialized.

Function Hoisting

For functions, only the function declaration gets hoisted to the top and not the function expression.

I always wanted to know how much this mattered. I've seen lots of tutorials/code where every new function would be typed above other functions but below the code's declared variables. But with hoisting, it seems it doesn't matter if a function is being declared and not a function expression. For example:

//Function declaration example
myDeclaration(); 

//Function declaration 
function myDeclaration { 
   console.log('This would work since the function myDeclaration will be    hoisted.')
}

//Function expression example
other();

//Function expression
var other = function(){
    console.log('This won't work because function expressions aren't hoisted.')
}

But, it probably is still good practice to declare functions before calling them.

Global Variables

Global variables are properties of the global object.

Constants

A constant cannot change value through assignment or be re-declared while the script is running.

It must be initialized to a value.

The scope rules for constants are the same as those for let block-scope variables.

If the const keyword is omitted, the identifier is assumed to represent a variable.

You cannot declare a constant with the same name as a function or variable in the same scope.

Data structures and types

Data Types

There are eight data types in JavaScript.

Seven data types that are primitives:
- Boolean. true and false.
- null. A special keyword denoting a null value.
- undefined. A top-level property whose value is not defined.
- Number. An integer or floating point number. For example: 42 or 3.14159.
- BigInt. An integer with arbitrary precision. For example: 9007199254740992n.
- String. A sequence of characters that represent a text value. For example: “Howdy”
- Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.
and Object

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.

String primitive and the String Object is different. JavaScript methods can be called on strings and the String Object because the language automatically converts string primitives to String objects.

Data type conversion

JavaScript is a dynamically typed language. That means you don't have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution.

In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings.

In statements involving other operators, JavaScript does not convert numeric values to strings.

Converting strings to numbers

In the case that a value representing a number is in memory as a string, there are methods for conversion.

parseInt only returns whole numbers, so its use is diminished for decimals. Additionally, a best practice for parseInt is to always include the parseInt radix parameter. The radix parameter is used to specify which numerical system is to be used.

Literals

Literals are fixed values, not variables, that you literally provide in your script.

Array literals

An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]).

Boolean literals

The Boolean type has two literal values: true and false.

Numeric literals

Number and BigInt types can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2).

A decimal numeric literal consists of a sequence of digits without a leading 0 (zero).
A leading 0 (zero) on a numeric literal, or a leading 0o (or 0O) indicates it is in octal. Octal numerics can include only the digits 0-7.
A leading 0x (or 0X) indicates a hexadecimal numeric type. Hexadecimal numerics can include digits (0-9) and the letters a-f and A-F. (The case of a character does not change its value, e.g. 0xa = 0xA = 10 and 0xf = 0xF = 15.)
A leading 0b (or 0B) indicates a binary numeric literal. Binary numerics can only include the digits 0 and 1.

Floating-point literals

A floating-point literal can have the following parts:

A decimal integer which can be signed (preceded by “+” or “-“),
A decimal point (“.”),
A fraction (another decimal number),
An exponent.

The exponent part is an “e” or “E” followed by an integer, which can be signed (preceded by “+” or “-“). A floating-point literal must have at least one digit and either a decimal point or “e” (or “E”).

Object literals

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

Object property names can be any string, including the empty string.

If the property name would not be a valid JavaScript identifier or number, it must be enclosed in quotes.

It would be interesting to see if code is actually used or in what context one would use an invalid JavaScript identifier as an object's property name.

RegExp literals

A regex literal is a pattern enclosed between slashes. The following is an example of a regex literal. Ex: var re = /ab+c/;

String literals

A string literal is zero or more characters enclosed in double (") or single (') quotation marks.

A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks.

You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object.

In ES2015, template literals are also available.

Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes.

I had no idea that the back-tick was called a grave accent, and also had never thought about it's use and why it's on the keyboard until reading this guide.

Using special characters in strings

Character	Meaning
`\0`	Null Byte
`\b`	Backspace
`\f`	Form feed
`\n`	New line
`\r`	Carriage return
`\t`	Tab
`\v`	Vertical tab
`\'`	Apostrophe or single quote
`\"`	Double quote
`\\`	Backslash character
`\XXX`	The character with the Latin-1 encoding specified by up to three octal digits XXX between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.
`\xXX`	The character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.
`\uXXXX`	The Unicode character specified by the four hexadecimal digits XXXX. For example, \u00A9 is the Unicode sequence for the copyright symbol. See Unicode escape sequences.
`\u{XXXXX}`	Unicode code point escapes. For example, \u{2F804} is the same as the simple Unicode escapes \uD87E\uDC04.

Escaping characters

You can insert a quotation mark inside a string by preceding it with a backslash. This is known as escaping the quotation mark.