JS/TS¶

/**
 * This TypeScript code demonstrates:
 * - the use of various console methods,
 * - variable and constant declarations,
 * - primitive data types,
 * - and control flow structures.
 */

// 1. Console Methods:
console.log("\n0. Demonstrating Various Console Methods:\n");
console.info("1. This is an info message.");
console.warn("2. This is a warning message.");
console.error("3. This is an error message.");
console.debug("4. Debugging information here.");

// 2. Variables and Constants:
// 2.1 Using const to define constants (values that cannot be changed).
const userName: string = "Tony Stark";
const maxScore: number = 100;

// 2.2 Using let to define variables (values that can be changed).
let currentScore: number = 85;
let isPassing: boolean = false;
// Union type: message can be either a string or null
let message: string | null = null; 

/**
 * 3. Primitive Data Types:
 *    - number,
 *    - string, 
 *    - boolean, 
 *    - undefined, 
 *    - null
 */
console.log(`\nWelcome, ${userName}!`);
console.log('Welcome,', userName + '.');
console.log(`Your starting score is: ${currentScore} (Max score: ${maxScore})`);

const bonusPoints: number = 5;
currentScore = currentScore + bonusPoints;

console.log(`Congratulations on earning ${bonusPoints} bonus points! Your current score is now: ${currentScore}`);

// 4. Control Flow: if/else structure
if (currentScore === maxScore) {
    isPassing = true;
    message = "Excellent! You achieved a perfect score.";
} else if (currentScore >= 90 && currentScore < maxScore) {
    isPassing = true;
    message = "Well done! You passed, but there's room for improvement.";
} else {
    isPassing = false;
    message = "Unfortunately, the score did not meet the standard. Please try harder.";
}

console.log(`Is passing?: ${isPassing}`);
console.log(`Message: ${message}`);

// 5. Demonstrate undefined and null
let extraInfo: string | undefined;
console.log(`\nType of extraInfo: ${typeof(extraInfo)}`);
/**
 * Demonstrating the use of undefined in TypeScript.
 * Suppose under certain conditions extraInfo is not assigned,
 * it defaults to undefined
 */
console.log(`\nAdditional undefined information (default undefined): ${extraInfo}`); 

// 6. Control Flow: for loop
console.log("\nSimulating Eight Attempts to Improve Score:");

for (let attempt = 1; attempt <= 8; attempt++) {
    currentScore++;
    console.log(`Attempt ${attempt} ended, current score: ${currentScore}`);

    // Suppose when the score reaches 98, set extraInfo 
    if (currentScore === 98) {
        extraInfo = "Status is good, close to perfect!";
    }
}

console.log(`\nValue of extraInfo after the loop ends: ${extraInfo}`); 

// At the end, set message to null to indicate clearing
message = null; 
console.log(`\nType of message: ${typeof(message)}`);
console.log(`Program ended, message variable reset to: ${message}`);

PS D:\ts_learning\ts_basic> ls

    目录: D:\ts_learning\ts_basic

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        2025-11-17     18:19            316 index.html
-a----        2025-11-17     21:29           2875 ts_basic.ts


PS D:\ts_learning\ts_basic> tsc .\ts_basic.ts     
PS D:\ts_learning\ts_basic> ls

    目录: D:\ts_learning\ts_basic

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        2025-11-17     18:19            316 index.html
-a----        2025-11-17     23:39           2875 ts_basic.js
-a----        2025-11-17     21:29           2875 ts_basic.ts

PS D:\ts_learning\ts_basic> 

PS D:\ts_learning\ts_basic> tsc .\ts_basic.ts

PS D:\ts_learning\ts_basic> node.exe .\ts_basic.js

0. Demonstrating Various Console Methods:

1. This is an info message.
2. This is a warning message.
3. This is an error message.
4. Debugging information here.

Welcome, Tony Stark!
Welcome, Tony Stark.
Your starting score is: 85 (Max score: 100)
Congratulations on earning 5 bonus points! Your current score is now: 90
Is passing?: true
Message: Well done! You passed, but there's room for improvement.

Type of extraInfo: undefined

Additional undefined information (default undefined): undefined

Simulating Eight Attempts to Improve Score:
Attempt 1 ended, current score: 91
Attempt 2 ended, current score: 92
Attempt 3 ended, current score: 93
Attempt 4 ended, current score: 94
Attempt 5 ended, current score: 95
Attempt 6 ended, current score: 96
Attempt 7 ended, current score: 97
Attempt 8 ended, current score: 98

Value of extraInfo after the loop ends: Status is good, close to perfect!

Type of message: object
Program ended, message variable reset to: null

console.log("\n0. Demonstrating Various Console Methods:\n");
console.info("1. This is an info message.");
console.warn("2. This is a warning message.");
console.error("3. This is an error message.");
console.debug("4. Debugging information here.");

/**
 * Immutable vs Mutable State Updates and Spread Operator Order
 *
 * This code demonstrates the difference between mutable and immutable state updates.
 * It highlights how mutable updates can lead to issues in frameworks like React,
 * where reference equality is used to determine if a component should re-render.
 * 
 * It also illustrates the importance of the order of properties when using
 * the spread operator (...) in object updates.
 */

console.log("\n--- Immutable vs Mutable State Updates and Spread Operator Order ---\n");

// 1. Define a simple State Interface
interface UserState {
    id: number;
    name: string;
    score: number;
}

// 2. Initializing State
const initialState: UserState = {
    id: 101,
    name: 'Alice',
    score: 80
};

/** 
 * 3. Example 1: Mutable Update
 * 
 * Mutable Update Explanation:
 * Directly modifies the existing state object.
 * Such mutations can lead to issues in frameworks like React,
 * where components rely on reference equality to detect changes.
 */ 
function mutableUpdate(state: UserState, newScore: number): UserState {
    state.score = newScore;
    return state;
}

/**
 * Objects are reference types (Address Types): * 
 * - Assignments, passing, and comparisons of reference types are all based on
 *   addresses (i.e., references), not the values of member variables;
 * - In `let currentStateMutable = initialState;`, what is assigned to
 *   currentStateMutable is the address (i.e., reference), not the values of member variables
 * - In `let currentStateMutable = initialState;`, currentStateMutable is a variable and
 *   can be reassigned (can be changed)
 * - In `const originalReferenceMutable = currentStateMutable;`, originalReferenceMutable
 *   is a constant, cannot be reassigned (reference address does not change),
 *   but the values of member variables can be changed
 */
console.log("\nlet currentStateMutable = initialState");
let currentStateMutable = initialState;             // Variable <-- Constant

/**
 * Backup the state before update for comparison
 * ... operator called the spread operator, 
 * which is used to creates a shallow copy of the object
 */
console.log("const preUpdateStateMutable = { ...currentStateMutable }");
const preUpdateStateMutable = { ...currentStateMutable };

console.log("\nExample 1: Mutable Update\n");

console.log("initialState(Constant):\t\t\t", initialState);
console.log("currentStateMutable(Variable):\t\t", currentStateMutable);
console.log("preUpdateStateMutable(Constant):\t", preUpdateStateMutable);

console.log("\ninitialState(Constant) == currentStateMutable(Variable) ?",
    initialState === currentStateMutable ? "Yes":"No", 
    "(both point to the same reference address)"
);
console.log("initialState(Constant) == preUpdateStateMutable(Constant) ?",
    initialState === preUpdateStateMutable ? "Yes":"No",
    "(preUpdateStateMutable is a new object created by spread operator(...))"
);

// Execute Mutable Update
const newStateMutable = mutableUpdate(currentStateMutable, 95);

console.log("\n----------After mutableUpdate:----------\n");

console.log("initialState(Constant):\t\t\t", initialState);
console.log("currentStateMutable(Variable):\t\t", currentStateMutable);
console.log("preUpdateStateMutable(Constant):\t", preUpdateStateMutable);
console.log("newStateMutable(Constant):\t\t", newStateMutable);

console.log("\ninitialState(Constant) == currentStateMutable(Variable) ?",
    /**
     * initialState === currentStateMutable
     * Comparing the memory addresses (i.e., references) that these two variables point to,
     * not their member variable values
     */
    initialState === currentStateMutable ? "Yes":"No",
    "(both point to the same reference address)"
);
console.log("preUpdateStateMutable(Constant) == currentStateMutable(Variable) ?",
    preUpdateStateMutable === currentStateMutable ? "Yes":"No", 
    "(preUpdateStateMutable is a new object created by spread operator(...))"
);
console.log("newStateMutable(Constant) == currentStateMutable(Variable) ?",
    newStateMutable === currentStateMutable ? "Yes":"No", 
    "(mutableUpdate returns the same object reference as currentStateMutable)"
);

console.log("\nHas the actual data content changed?",
    preUpdateStateMutable.score === newStateMutable.score ? "No":"Yes",
    "(preUpdateStateMutable holds the state before update)"
);

console.log("\nConclusion: \n \
    Although the data content has changed, \n \
    the object reference address remains the same (initialState == currentStateMutable == newStateMutable).\n"
);

console.log("\n--- Example 2: Immutable Update ---\n");

// 4. Example 2: Immutable Update
function immutableUpdate(state: UserState, newScore: number): UserState {
    /**
     * Immutable Update Explanation:
     * Uses the spread operator (...) to create a brand new object (new reference address),
     * and overrides the properties that need to be modified.
     */
    const newState: UserState = {
        ...state,
        /**
         * Override the score property with the newScore value
         * use : instead of = here, because we are defining a property
         * in an object to override the existing one
         */
        score: newScore
    };
    return newState;
}



// Backup a reference address D for comparison
let currentStateImmutable = initialState;         // Variable <-- Constant

console.log("initialState(Constant):\t\t\t", initialState);
console.log("currentStateImmutable(Variable):\t", currentStateImmutable);

// Execute immutable update
const newStateImmutable = immutableUpdate(currentStateImmutable, 98);

console.log("\n----------After immutableUpdate:----------\n");

console.log("initialState(Constant):\t\t\t", initialState);
console.log("currentStateImmutable(Variable):\t", currentStateImmutable);
console.log("newStateImmutable(Constant):\t\t", newStateImmutable);

console.log("currentStateImmutable === newStateImmutable?",
    currentStateImmutable === newStateImmutable ? "Yes":"No",
    "(immutableUpdate returns a new object with a new reference address)"
);
console.log("currentStateImmutable.score === newStateImmutable.score?",
    currentStateImmutable.score === newStateImmutable.score ? "Yes":"No",
    "(currentStateImmutable holds the state before update)"
);

console.log("\nConclusion: \n \
    Both the data content and the reference address have changed.\n"
);

console.log("\n--- Example 3: Spread Operator Order ---\n");

function immutableUpdateWrong(state: UserState, newScore: number): UserState {
    const newState: UserState = {        
        score: newScore,
        ...state,
    };
    return newState;
}

const newStateImmutableWrong = immutableUpdateWrong(currentStateImmutable, 99);

console.log("\n----------After immutableUpdateWrong:----------\n");
console.log("initialState(Constant):\t\t\t", initialState);
console.log("currentStateImmutable(Variable):\t", currentStateImmutable);
console.log("newStateImmutable(Constant):\t\t", newStateImmutableWrong);

--- Immutable vs Mutable State Updates and Spread Operator Order ---


let currentStateMutable = initialState
const preUpdateStateMutable = { ...currentStateMutable }

Example 1: Mutable Update

initialState(Constant):                  { id: 101, name: 'Alice', score: 80 }
currentStateMutable(Variable):           { id: 101, name: 'Alice', score: 80 }
preUpdateStateMutable(Constant):         { id: 101, name: 'Alice', score: 80 }

initialState(Constant) == currentStateMutable(Variable) ? Yes (both point to the same reference address)
initialState(Constant) == preUpdateStateMutable(Constant) ? No (preUpdateStateMutable is a new object created by spread operator(...))

----------After mutableUpdate:----------

initialState(Constant):                  { id: 101, name: 'Alice', score: 95 }
currentStateMutable(Variable):           { id: 101, name: 'Alice', score: 95 }
preUpdateStateMutable(Constant):         { id: 101, name: 'Alice', score: 80 }
newStateMutable(Constant):               { id: 101, name: 'Alice', score: 95 }

initialState(Constant) == currentStateMutable(Variable) ? Yes (both point to the same reference address)
preUpdateStateMutable(Constant) == currentStateMutable(Variable) ? No (preUpdateStateMutable is a new object created by spread operator(...))
newStateMutable(Constant) == currentStateMutable(Variable) ? Yes (mutableUpdate returns the same object reference as currentStateMutable)

Has the actual data content changed? Yes (preUpdateStateMutable holds the state before update)

Conclusion:
     Although the data content has changed,
     the object reference address remains the same (initialState == currentStateMutable == newStateMutable).


--- Example 2: Immutable Update ---

initialState(Constant):                  { id: 101, name: 'Alice', score: 95 }
currentStateImmutable(Variable):         { id: 101, name: 'Alice', score: 95 }

----------After immutableUpdate:----------

initialState(Constant):                  { id: 101, name: 'Alice', score: 95 }
currentStateImmutable(Variable):         { id: 101, name: 'Alice', score: 95 }
newStateImmutable(Constant):             { id: 101, name: 'Alice', score: 98 }
currentStateImmutable === newStateImmutable? No (immutableUpdate returns a new object with a new reference address) 
currentStateImmutable.score === newStateImmutable.score? No (currentStateImmutable holds the state before update)   

Conclusion:
     Both the data content and the reference address have changed.


--- Example 3: Spread Operator Order ---


----------After immutableUpdateWrong:----------

initialState(Constant):                  { id: 101, name: 'Alice', score: 95 }
currentStateImmutable(Variable):         { id: 101, name: 'Alice', score: 95 }
newStateImmutable(Constant):             { score: 95, id: 101, name: 'Alice' }

/**
 * @file arrayReducer.js
 */
const array1 = [1, 2, 3];
const initialValue = 0;

var t = 0;

const sumWithInitial = array1.reduce(
    (accumulator, currentValue, currentIndex, array) => {
        let i = 0;
        console.log("The time(s)(i) of callback is called:", i);
        i++;

        console.log("the time(s)(t) of callback is called:", t);
        t++;

        console.log("\nThe current index:", currentIndex)

        console.log("The arrary:", array);

        console.log("\naccumulator:", accumulator);
        console.log("currentValue:", currentValue);
        console.log("\n----------------------------------------\n")

        return accumulator + currentValue
    },
    initialValue,
);

console.log("Sum of the Array: ", sumWithInitial);

PS > node .\arrayReducer.js
The time(s)(i) of callback is called: 0
the time(s)(t) of callback is called: 0

The current index: 0
The arrary: [ 1, 2, 3 ]

accumulator: 0
currentValue: 1

----------------------------------------

The time(s)(i) of callback is called: 0
the time(s)(t) of callback is called: 1

The current index: 1
The arrary: [ 1, 2, 3 ]

accumulator: 1
currentValue: 2

----------------------------------------

The time(s)(i) of callback is called: 0
the time(s)(t) of callback is called: 2

The current index: 2
The arrary: [ 1, 2, 3 ]

accumulator: 3
currentValue: 3

----------------------------------------

Sum of the Array:  6
PS >