JavaScript Overview

Printing

document.getElementById("demo").innerHTML = 5 + 6;
document.write(5 + 6);
Both with Button
window.alert(5 + 6);
alert(5 + 6);
console.log(5 + 6);
window.print();

Statements

A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments.
Semicolons separate JavaScript statements.
JavaScript White Space: JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.
The following lines are equivalent:
```
let person = "Hege";
let person="Hege";
```
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Syntax

JavaScript syntax is the set of rules for how JavaScript programs are constructed.
The JavaScript syntax defines two types of values:
- Fixed values: Called Literals.
- Variable values: Called Variables (e.g., keywords, expressions for numbers and strings).
JavaScript is case-sensitive.
Hyphens are not allowed in JavaScript; they are reserved for subtraction.
Naming conventions:
- Underscore: first_name, last_name, master_card, inter_city
- Upper Camel Case (Pascal Case): FirstName, LastName, MasterCard, InterCity
- Lower Camel Case: firstName, lastName, masterCard, interCity

Comments

Single Line - //
Multiline - /* ... */

Variables

JavaScript Variables can be declared in 4 ways: Automatically, using var, let, or const.
The var keyword was used in all JavaScript code from 1995 to 2015. Use let and const for modern code.
Best practices:
1. Always declare variables.
2. Use const if the value/type should not change.
3. Use let only if const cannot be used.
4. Use var only for older browser support.
Identifiers must be unique and can contain letters, digits, underscores, and dollar signs; they must begin with a letter.
Reserved words cannot be used as names.
The assignment operator (=) assigns values, e.g., x = x + 5.
Arithmetic operations can be performed, e.g., let x = 5 + 2 + 3;
JavaScript treats $ and _ as valid characters for variable names.

JavaScript Let

The let keyword was introduced in ES6 (2015).
Variables declared with let have Block Scope.
Variables declared with let must be declared before use.
Variables declared with let cannot be redeclared in the same scope.

Block Scope

Before ES6, JavaScript had Global and Function Scope.
ES6 introduced let and const for Block Scope:
Example:

{
  let x = 2;
}
// x cannot be used here

Global Scope

Variables declared with var have Global Scope.
Example:

{
  var x = 2;
}
// x can be used here

Cannot be Redeclared

Variables defined with let cannot be redeclared:

let x = "John Doe";
let x = 0; // Error

Variables defined with var can be redeclared:

var x = "John Doe";
var x = 0; // No Error

Redeclaring Variables

Redeclaring with var can cause issues:

var x = 10; // x is 10
{
  var x = 2; // x is 2
}
// x is 2

Redeclaring with let solves this problem:

let x = 10; // x is 10
{
  let x = 2; // x is 2
}
// x is 10

Difference Between var, let, and const

Scope	Redeclare	Reassign	Hoisted	Binds this
var	Yes	Yes	Yes	Yes
let	No	No	Yes	No
const	No	No	No	No

What is Good?

let and const have Block Scope.
They cannot be redeclared.
They must be declared before use.
They do not bind to this.
They are not hoisted.

What is Not Good?

var does not have to be declared.
var is hoisted.
var binds to this.

JavaScript Const

const was introduced in ES6 (2015).
Variables defined with const cannot be:

Redeclared
Reassigned

const has block scope.

Cannot be Reassigned

const PI = 3.14159;
// PI = 3.14;  // Error
// PI = PI + 10;  // Error

Must be Assigned

Must be assigned a value when declared:

const PI = 3.14159; // Correct
// const PI; // Incorrect
// PI = 3.14; // Error

When to Use

Use const for:

Arrays
Objects
Functions
Regular Expressions

Constant Arrays & Objects

Can change elements or properties:

const cars = ["Saab", "Volvo"];
cars[0] = "Toyota"; // Allowed
cars.push("Audi");  // Allowed
// cars = ["Ford"]; // Error

Cannot reassign:

const car = {type: "Fiat"};
car.color = "red"; // Allowed
// car = {type: "Volvo"}; // Error

Summary

Block scope, cannot be redeclared or reassigned.
Must be initialized when declared.

Primitive Data Types

In JavaScript, primitive data types are the most basic types of data. They are immutable and are not objects. These include:

Number: Represents numeric values (e.g., 345).
String: Represents text (e.g., "harry").
Boolean: Represents true or false values.
Null: Represents the intentional absence of any value (null).
Undefined: Represents a variable that has been declared but not assigned a value.
Symbol: Represents a unique and immutable value.
BigInt: Represents numbers larger than those that can be represented by the Number type.

Example Code:


let a = null;                // Null type
let b = 345;                 // Number type
let c = true;                // Boolean type
let d = BigInt("456") + BigInt(3); // BigInt type
let e = "harry";             // String type
let f = Symbol("I am good"); // Symbol type
let g = undefined;           // Undefined type
let h;                       // Will be undefined by default

console.log(a, b, c, d, e, f, g, h); // Outputs: null 345 true 459n 'harry' Symbol(I am good) undefined undefined
console.log(typeof d); // Outputs: 'bigint'

Non-Primitive Data Types

Objects in JavaScript are non-primitive data types used to store collections of data and more complex entities. Objects are key-value pairs and can be compared to dictionaries in Python.

Example of an Object:


const item = {
  "array": true,
  "rohn": 56
};

console.log(item["Harray"]); // This will return `undefined` because the key "Harray" does not exist in the `item` object.

Analysis:

Primitive Data Types: Directly contain values. Examples in the provided code include b, c, d, etc.
Objects: Serve as containers for named values. The item object has keys "array" and "rohn" with their respective values.

Key Points:

The typeof operator helps identify the type of data stored in a variable.
If you try to access a non-existent key in an object, it will return undefined.

Expressions and Operators

An expression is a fragment of code that produces a value. For example, 7; is an expression, as well as 7 + 5, which evaluates to 12. In this example, 7 and 5 are operands, and + is the operator. An operator works with one or more operands.

Every value that returns literally is an expression.

Types of Operators in JavaScript:

1. Arithmetic Operators

+: Addition
-: Subtraction
/: Division
*: Multiplication
**: Exponentiation
%: Modulus (remainder)
++: Increment
--: Decrement
++a: Pre-increment (increment, then print)
--a: Pre-decrement (decrement, then print)
a++: Post-increment (print, then increment)
a--: Post-decrement (print, then decrement)

2. Assignment Operators

=: Assignment
+=: Add and assign
-=: Subtract and assign
*=: Multiply and assign
/=: Divide and assign
%=: Modulus and assign
**=: Exponentiate and assign

3. Comparison Operators

==: Equal to (checks value only)
!=: Not equal to (checks value only)
===: Strict equal to (checks value and type)
!==: Strict not equal to (checks value and type)
>: Greater than
<: Less than
>=: Greater than or equal to
<=: Less than or equal to

4. Ternary Operator

condition ? expression1 : expression2

Used as a shorthand for if-else statements.

5. Logical Operators

Logical operators are used to compare two or more conditions:

&&: Logical AND (returns true if both operands are true)
||: Logical OR (returns true if at least one operand is true)
!: Logical NOT (inverts the boolean value)