Syntax, Variables & Operators

// Same task, 3 paradigms

// Procedural
function doubleProcedural(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) result.push(arr[i] * 2);
  return result;
}

// Object-oriented
class Doubler {
  double(arr) { return arr.map(n => n * 2); }
}

// Functional
const doubleFunctional = arr => arr.map(n => n * 2);

console.log('1');
setTimeout(() => console.log('2'), 0); // async — runs after the current code finishes
console.log('3');

// Output:
// 1
// 3
// 2

<script>
  document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

<script src="myScript.js"></script>

let userName = 'A';   // valid
let _count = 1;       // valid
let $price = 10;      // valid
// let 1st = 'x';     // SyntaxError — cannot start with a digit
// let let = 5;       // SyntaxError — reserved word

let age = 20;
let Age = 30;
console.log(age, Age); // 20 30 — different variables

var a = 1;
let b = 2;
const c = 3;

a = 10;  // OK
b = 20;  // OK
// c = 30; // TypeError: Assignment to constant variable.

var a = 100;   // OK — var can be redeclared
// let b = 200; // SyntaxError: Identifier 'b' has already been declared

// const d;    // SyntaxError: Missing initializer in const declaration

if (true) {
  var x = 'var';
  let y = 'let';
  const z = 'const';
}
console.log(x); // "var" — var ignores the block
// console.log(y); // ReferenceError: y is not defined
// console.log(z); // ReferenceError: z is not defined

const user = { name: 'A' };
user.name = 'B';          // allowed — changing a property
console.log(user.name);   // "B"
// user = {};             // TypeError — reassigning the variable

function test() {
  leak = 42;           // no var/let/const
}
test();
console.log(leak);     // 42 — accidentally became global

'use strict';          // must be the first statement of the file or function
undeclaredVar = 1;     // ReferenceError: undeclaredVar is not defined

let i = 5;
console.log(i++); // 5 — returns the old value, then increments
console.log(i);   // 6

let j = 5;
console.log(++j); // 6 — increments first, then returns the new value

let score = 10;
score += 5;   // 15
score *= 2;   // 30

let title = '';
title ||= 'Untitled';  // '' is falsy → "Untitled"

let count = 0;
count ??= 100;         // 0 is not null/undefined → stays 0
console.log(score, title, count); // 30 "Untitled" 0

const txt1 = "John";
const txt2 = "Doe";
const txt3 = txt1 + " " + txt2;
console.log(txt3); // "John Doe"

// Template literals are usually cleaner
console.log(`${txt1} ${txt2}`); // "John Doe"

const x = 5 + 5;        // 10
const y = "5" + 5;      // "55"
const z = "Hello" + 5;  // "Hello5"

// Evaluated left to right
console.log(1 + 2 + "3"); // "33" — 1 + 2 = 3, then 3 + "3"
console.log("1" + 2 + 3); // "123" — "1" + 2 = "12", then "12" + 3

// Other arithmetic operators convert strings to numbers
console.log("10" - 2);    // 8
console.log("10" * "2");  // 20
console.log("abc" - 1);   // NaN

console.log(5 == "5");          // true  — "5" converted to 5
console.log(5 === "5");         // false — number vs string
console.log(0 == false);        // true
console.log(0 === false);       // false
console.log(null == undefined); // true
console.log(null === undefined);// false
console.log(NaN == NaN);        // false — NaN is not equal to anything

console.log("10" > 9);          // true  — "10" converted to number
console.log("10" > "9");        // false — both strings, compared character by character ("1" < "9")

const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
console.log(status); // "adult"

console.log(true && 'hello');  // "hello" — all truthy → returns the last value
console.log(0 && 'hello');     // 0 — stops at the first falsy value

console.log('' || 'default');  // "default" — returns the first truthy value
console.log('A' || 'default'); // "A"

console.log(!true);            // false
console.log(!!'text');         // true — double NOT converts to boolean

// || vs ?? — ?? only falls back on null/undefined
console.log(0 || 10);          // 10
console.log(0 ?? 10);          // 0
console.log(null ?? 10);       // 10

const user = { profile: null };
// console.log(user.profile.name); // TypeError: Cannot read properties of null
console.log(user.profile?.name);   // undefined
console.log(user.getName?.());     // undefined — method does not exist
console.log(user.profile?.name ?? 'Guest'); // "Guest"

console.log(typeof 42);          // "number"
console.log(typeof 'hi');        // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" — historical bug
console.log(typeof {});          // "object"
console.log(typeof []);          // "object" — use Array.isArray()
console.log(typeof function(){});// "function"

console.log([] instanceof Array);   // true
console.log([] instanceof Object);  // true — Array inherits from Object
console.log('hi' instanceof String);// false — primitives are not instances

 5 = 00000000000000000000000000000101
~5 = 11111111111111111111111111111010  → -6 (the leftmost 1 means negative)

console.log(~5);        // -6
console.log(~-1);       // 0
console.log(-5 >> 1);   // -3 — keeps the sign
console.log(-5 >>> 1);  // 2147483645 — fills with 0, so the result is positive
console.log(6 & 1);     // 0 — even number check: n & 1 is 0 for even, 1 for odd

console.log(2 + 3 * 4);    // 14 — * runs before +
console.log((2 + 3) * 4);  // 20
console.log(2 ** 3 ** 2);  // 512 — ** is right-to-left: 2 ** 9
console.log(true || false && false); // true — && runs before ||
// console.log(null || undefined ?? 'x'); // SyntaxError — ?? cannot be mixed with || without parentheses