DOCSEARCHbyAlgolia
Submit Docs

Kate Chou's Technical Blog

website·Indexed 30 days ago

https://katechou37.github.io

A technical blog by a front-end engineer and designer specializing in React and TypeScript. The site features tutorials and notes on JavaScript, including variable declaration, string length (.length), NaN, and synchronous vs asynchronous execution, as well as guides on Hexo installation.

Tokens
6.5K
Snippets
54
Records
62
Agent score
71%

What's inside Kate Chou's Technical Blog

  3. Understand JavaScript Synchronous and Asynchronous Execution

    JavaScript is a single-threaded language, meaning it can only execute one task at a time.

    • Synchronous (Sync): Tasks are executed sequentially. The next line of code cannot run until the current line finishes. If a task is blocked, the entire execution stops.
    • Asynchronous (Async): Tasks are initiated, and the program continues to execute other code without waiting for the task to complete. Once the async task finishes, the result is handled. This is commonly used for network requests (API, AJAX) and timers (setTimeout).

  4. Understand JavaScript Single-Threaded Execution and Synchronous vs Asynchronous Behavior

    JavaScript is a single-threaded language, meaning it can only execute one task at a time. Tasks are processed sequentially; the next line of code will not run until the current line has finished.

    Synchronous Execution (Blocking): Tasks are performed in a strict sequence (like a queue). If a task takes a long time or gets stuck, it blocks all subsequent code from executing.

    Asynchronous Execution (Non-blocking): JavaScript initiates a task and moves on to the next one without waiting for the first to complete. Once the asynchronous task finishes, the program is notified or executes a callback. This is essential for operations that take an unpredictable amount of time, such as:

    • Fetching data from a network (API calls, AJAX).
    • Setting timers (e.g., setTimeout).

  6. Understand JavaScript Synchronous and Asynchronous Execution

    JavaScript is a single-threaded language, meaning it can only execute one task at a time.

    • Synchronous Execution: Tasks are performed sequentially. The next line of code will not execute until the current line is finished. If a task is blocked (e.g., a long-running loop or an alert), the entire program stops until that task completes.
    • Asynchronous Execution: Allows JavaScript to initiate a task and move on to the next one without waiting for the first to finish. This is essential for time-consuming operations to prevent the UI from freezing.

    Common asynchronous scenarios include:

    • Fetching data from a network (API, AJAX).
    • Setting timers (e.g., setTimeout).

  7. Declare variables in JavaScript using let and const

    JavaScript provides two primary ways to declare variables:

    • let: Used for variables that need to be reassigned later.
    • const: Used for constants that should not be reassigned.

    Naming Rules:

    • Must not start with a number.
    • Case-sensitive (name and Name are different variables).
    • Cannot use reserved keywords (e.g., let, if, for).
    let apple = 4; // Can be reassigned
const pi = 3.14; // Cannot be reassigned

// Correct naming
let apple1 = 3;

  8. Use async and await for readable asynchronous code

    The async and await keywords provide a way to write asynchronous code that looks and behaves like synchronous code.

    • async: Marks a function as asynchronous, ensuring it returns a Promise.
    • await: Pauses the execution of the async function until the Promise is resolved. Crucially, it does not block the entire browser; it only pauses that specific function while the engine handles other tasks.
    async function fetchData() {
  const response = await fetch('/api/users');
  const data = await response.json();
  console.log(data);
}

  9. Concatenate strings and use template literals

    Strings can be concatenated using the + operator. If any operand is a string, JavaScript automatically converts the other operand to a string. For better readability, use template literals with backticks (`) and ${} placeholders.
    let friendName = "Tom";
let clause = "How are you?";

// Using + operator
let total = friendName + " " + clause;

// Using template literal (Recommended)
let totalLiteral = `${friendName} ${clause}`;

  10. Declare variables and constants in JavaScript

    Use let for variables that need to be reassigned and const for constants that should not change.

    Naming Rules:

    • Cannot start with a number.
    • Case-sensitive (e.g., name and Name are different variables).
    • Cannot use reserved keywords (e.g., let, if, for).
    let apple = 4; // Can be reassigned
const pi = 3.14; // Cannot be reassigned

// Correct naming
let apple1 = 3;

  11. Check for NaN values in JavaScript

    NaN has a unique property: it is not equal to anything, including itself. Therefore, standard equality checks (== or ===) will always return false. To correctly identify if a value is NaN, use Number.isNaN().
    // Equality check fails
console.log(NaN === NaN); // false

// Recommended check
Number.isNaN(NaN); // true