Scope

The scope of an object (or variable, function) is the region in the program, where it is "visible"and this can be accessed. The top level is the "global scope", where your program and its functions live in. Code within curly braces gets its own new scope. While objects outside the local scope can be accessed from the inside, code outside of the scope cannot access local objects.

var myGlobalVariable = 1;

function func( myArgument ) {
	var myLocalVariable = myArgument;
	myGlobalVariable = myLocalVariable;
}

console.log(myGlobalVariable);   // Output: "1"
func(2);
console.log(myGlobalVariable);   // Output: "2"
console.log(myLocalVariable);    // Uncaught ReferenceError: myLocalVariable is not defined
console.log(myArgument);         // Uncaught ReferenceError: myArgument is not defined

It is possible to re-use a name, that already exists outside of the current scope. This makes access to the outside object impossible. It is also quesionable, if this is a good idea:

function x() {
	const y = 1;
	console.log(y);

	function z() {
		const y = 2;
		console.log(y);
	}

	z();
}

x();   // Output: "1", "2"

See also:

• Curly braces
• Scope

Hoisting

Variables declared with var are put into memory during the compile phase, before the program is started. Therfore, those variables are available, before they seemingly have been declared, as if they were automagically moved to the top of the scope. This can be prevented by never using the outdated var instruction, but instead using let (which was added to JavaScript at a later time), thus preventing nasty surprises:

function func() {
	console.log(my_var);
	console.log(my_let);

	var my_var = "This will be logged to the console.";
	let my_let = "Will trigger a Reference Error.";
}

See also:

• Hoisting

Code Security

JavaScript is a very powerful language. Unfortunately, it has some really strange quirks, that can easily trip unexpirienced programmers, sometimes even experts are scratching their heads. It also allows you to do things, that are not always smart to do. Simpler code is safer in general, and easier to understand, when you come back to it a long time later.

Therefore, I recommend, you stick to certain coding styles and refrain from writing clever constructs. Here are a few hints, that will make your code easier to debug and will prevent certain mistakes from happenening in the first place:

• Keep your code clean and well formatted, even if you are just writing a small test program. This will make writing clean code a habit.
• Stick to one style of formatting.
• Insert paragraphs, where they make sense. Block things, that belong together.
  I use one empty line between steps of a larger operation and two empty lines, when I have to write a long function (spaghetti code) and need to separate independent tasks. This way, you will have it easier to find a section, you are looking for later.
• Be strict about your formatting, really!
• Always use curly braces for if statements. Never do this:

  if (something == true)
  	do_another_thing();
  

  To prevent forgetting to add the braces, when you add code to the true branch later, format it either like so:

  if (something == true) do_another_thing();

  Preferrably be strict and use curly braces:

  if (something == true) {
  	do_another_thing();
  }
  

• Never use var (see Hoisting)
• Make variable and function names expressive.
• Take your time to find good names for your identifiers (variable/function names).
• Don't be lazy and use (too) short names, only to have to type less. Avoid abbreviations.
• Be consistent with your naming scheme. You will not remember, when you used an abbreviation or not, if there are 100 variables and functions in your code.
• Make your identifiers easy to guess. You will soon have so many variables, that looking them up constantly will become tedious.
• Write good comments.
• Don't comment obvious things, that are easy to understand by looking at the code itself.
• Don't comment too much. This will make your code look like a jungle and you won't find, what you are looking for as easily.
• Don't comment, what a command does, but rather explain, what it achieves.
  Instead of:

  i = i + 1;   // Increase i by one

  it should be something like:

  i = i + 1;   // Select next entry

See also:

• Wikipedia: Anti-Pattern
• Summary of 'Clean code' by Robert C. Martin
• Clean Code Smells and Heuristics (advanced)
• YouTube: Brian Leroux - WTFJS (funny)

Comments

are inactive parts of a source code, helping the reader to understand, what's going on.

/* This is a
multi-line comment */

const y = 1;   // The rest of this line is a comment.

/* This type of comment, can wrap around
   // this type of comment
*/

See also:

• Code security and good comments
• Comments

Arrays

are lists of values, which can be accessed by their index.

const myArray = [ 1, 2, "three", {"four": 4} ];

for( let i=0 ; i<myArray.length ; ++i ) {
	console.log( myArray[i] );
}

// Output:
// 1
// 2
// three
// {four: 4}

See also:

• Objects
• Array
• Hoisting

Curly Braces

can either group a set commands (scope) or be a list of key/value pairs (objects).

The if statement will always execute the next command, if the condition evaluates to true:

if (condition == true) doSomething();

In order to have it execute several commands, one can combine them into a "block", that behaves like it was one single command:

if (condition == true) {
	doSomething();
	doAnotherThing();
}

Objects

const myObject = {
	"key1": "value1",
	"key2": "value2",
};

console.log( myObject.key1    );   // Output: value1
console.log( myObject["key2"] );   // Output: value2

myObject["key3"] = "value3";
console.log(myObject.key3);        // Output: value3

const key_name = "key4";
myObject[key_name] = "value4";
console.log(myObject.key4);        // Output: value4

The variable myObject contains a reference to the data within the object and will usually not change throughout the lifetime of the variable. Therefore it should be declared const. The contents (properties) of an object are always variable.

See also:

• if
• else
• switch
• for
• while
• function
• Arrays
• Scope
• Hoisting

Parentheses

Used for functions and their arguments or in mathematical expressions.

function myFunc( someArgument ) {
	console.log(someArgument);
}

myFunc("Text");   // Output: Text

const someValue = (1 + 2) / 3;

See also:

• function
• Operators

Comparisons

Comparison operators return Boolean values (true/false).

if (var1 == var2) { do_something(); }
const true_or_not = (1 < 2);   // Result: true

true also represents the value (+1), while false equals to zero:

const add_offset = true;
const offset     = 3;
const value      = 10 + (add_offset * offset);   // Result: 13

See also:

• Other Operators
• Comparison Operators
• Arithmetic Operators
• Logical Operators (Boolean)
• Assignment Operators
• Conditional Operators (Ternary)
• Boolean (Object)
• Operator Precedence

Operators

Operators combine one, two or three values. Most of the time you will see arithmetical operators (const x = a + b;) or assignments (const x = 1;).

Like in mathematics, operators have different priorities, called "operator precedence". See the MDN link below for a list of all operators and their order of precedence.

const x = 1 + 2 * 3;         // Result: 7
const x = (1 + 2) * 3;       // Result: 9
const remainder = 7 % 3;     // Modulo, remainder of division. Result: 1
const is_equal = (a == b);   // Boolean operator (equality). Result: true/false

See also:

• Comparison Operators
• Comparison Operators
• Arithmetic Operators
• Logical Operators (Boolean)
• Assignment Operators
• Conditional Operators (Ternary)
• Boolean (Object)
• Operator Precedence