Intermediate JavaScript Introduction

• StackOverflow.com is the top question/answer resource for software developers in any programming language. Googling questions will frequently point you to a Stack Overflow question and answer. You can also search for previous answers on a topic directly in their search bar. Or you can create an account and ask your own question, although all the basic questions have been asked and answered years ago. 

Run code with Node.js

• To execute a JavaScript file in Node type in "node" then the path to the file. The .js extension is implied.
• node general

• That will execute the file and and print the console log to the Terminal.

• Breakpoints: 
• Your code will pause at breakpoints. The breakpoint gives you a snapshot of your code before executing the line you pause at. There are two ways to create breakpoints.
1. Debugger keyword: Putting the keyword debugger; in your code creates a breakpoint.
2. In the Editor window, Enter Breakpoints in your code by clicking left of the line number. 
• Breakpoints are indicated with red dots.
• The break happens at the start of the line, not the end.
• Click the red dot again to remove it.

• Variables: 
• In your code, assign variables to expression values you want to view.

• To test it out put the below code in your general.js file then run it with the debugger. At each breakpoint (debugger keyword), in the Debug sidebar you will see the variables grouped by scope, with the values as of that breakpoint. The scopes will be: global, local, local function, or block. We will talk more about scope in the Variables tutorial.

glob = 'I am in the global scope';
let loc = 'I am in the local scope';
debugger;
if (true) {
  const blk = 'I am in a block scope';
  debugger;
}
function func() {
  const func = 'I am in a local function scope';
  loc = 'My value was changed but I am still in the local scope"
  debugger;
}
func();

The JavaScript Programming Language

• Whitespace: 
• Whitespace includes spaces, tabs, and new line characters. 
• JavaScript recognizes tabs, new line characters, and single spaces, but it ignores multiple spaces, except with used for indentation. 
• Indent your code by two spaces. Do not use tabs. Although, you can set your text editor to insert two space when you press the tab key.
• Semicolons: 
• Semicolons go at the end of each JavaScript statement, like periods at the end of a sentence. 
• Do not put semicolons at the end of code blocks.
• Code blocks: 
• Code blocks are a grouping of statements placed inside curly braces. They include if statements, functions, loops, try/catch blocks and more. 
• Put semicolons at the end of statements within a code block, but do not put semicolons after code blocks.
• Function declaration example:  function add1(x) { return x + 1; }
• Functions formatted as function expressions, including arrow functions, do end in a semicolon. 
• const add1 = (x) => x + 1; 
• Double vs single quotes: 
• Stings can be enclosed in either double or single quotes. The style guides recommend using single quotes.
• Comments: 
• Single line comments come after two forward slashes: // this is a comment
• For multiple lines you can use this syntax: /* This is a comment */
• You can use comments before statements to explain or document the statements that follow.
• You can also use comments to temporarily disable a chunk of code while you are developing your app.

JavaScript Data Types

• Sting
• Number
• BigInt (introduced in ES 2020)
• Boolean
• Null
• Undefined
• Symbol (introduced in ES 2015)

general.js

console.log(7, typeof 7); // number
console.log('Hello', typeof 'Hello'); // string
console.log('true', typeof true); // boolean
let x;
console.log('undefined', typeof x); // undefined
x = null; // The value null represents the intentional absence of any value.
console.log('null', typeof x); // object. The typeof operator returns object for null.
console.log('{}', typeof {}); // object
console.log('[]', typeof []); // object. Array is a type of object.
console.log('function() {})', typeof function() {}); // function. Although, function is a type of object.

let datatype = typeof 7;
debugger;
datatype = typeof 'Hello';
datatype = typeof true;
let x;
datatype = typeof x;
x = null; // The value null represents the intentional absence of any value.
datatype = typeof x; // typeof null returns 'object' even though null is a data type.
datatype = typeof {};
datatype = typeof [];
datatype = typeof function() {};
debugger;

• x = null; 
• typeof x returns 'object'
• Here the value of x is null. 
• Null represents the intentional absence of a value. 
• So undefined and null both mean the variable has no value, but null is intentionally assigned, while undefined isn't an intentional assignment. 
• typeof null returns "object". This is an odd situation because it should return "null" since null is a data type and null is not an object. This is actually a known error coming from the early days of JavaScript. They've decided not to correct it, so just be aware of this anomaly.

• typeof {} returns 'object'
• The curly braces create an object. An object is collection of properties that is assigned a separate location in memory. Properties are name-value pairs like name: 'Joey' and age: 22.
• This object has no properties assigned to it but it is still an object.
• Below is an object assigned to the variable user with properties for name and age:
• const user = { name: 'Joey', age: 22 };
• typeof user returns 'object'
• While the object has its own data type collectively, its property values individually have their own data types:
• typeof user.name returns 'string'
• typeof user.age returns 'number'
• JavaScript objects are mutable. You can add, remove, or change the properties in an object, but it is still the same object location in memory, just with different properties.

• typeof [] returns 'object'
• The square brackets create an array. An array is a list of data items. This is an empty array but it's still an array.
• The datatype is "object" because arrays are a type of object.
• Below is an array assigned to the variable things. 
• const items = ['house', -4.2, false, user];
• typeof items returns 'object'
• The array itself has a data type of 'object', but the data items inside the array all have their own data types:
• typeof items[0] is for the 'house' item and returns 'string'.
• typeof items[1] is for the -4.2 item and returns 'number'.
• typeof items[2] is for the false item and returns 'boolean'.
• typeof items[3] is for the user item and returns 'object'.
• Arrays are mutable objects. You can add, remove, or change the data items in your array, and it is still the same object location in memory, just with different elements.

• typeof function() {} returns 'function'
• This is a function that does nothing but it's still a function.
• The typeof operator returns 'function'. Function is not actually a separate data type. Rather, a function is a special type of object that has the characteristic of being callable. 
• Below is an example with an actual function:
• typeof function add1(x) { return x + 1; } returns 'function'

• JavaScript is referred to as a loosely typed or dynamically typed language. This means variables are not directly associated with a data type. Variable x can be assigned to a string value then reassigned to a number value.
• In strongly typed languages like Java or C++, you must declare a data type for each variable when they are created. The values must be from that data type.