1.1 Variables and Constants#

• Variable declaration methods:
  • var (not recommended): function scope.
  • let (recommended): block scope, allows reassignment.
  • const (recommended): block scope, does not allow reassignment.

Examples:

1
let age = 25;
2
const name = "Alice";
3
console.log(`${name} is ${age} years old.`);

• Variable scope
  • Global scope: declared outside of functions, accessible by the entire program.
  • Function scope: variables declared with var are only accessible inside the function.
  • Block scope: variables declared with let or const are only accessible within the code block {}.
• Variable hoisting
  • var is hoisted, but the value is undefined until assigned.
  • let and const are not hoisted.

1.2 Data Types#

• Primitive types: String, Number, Boolean, undefined, null, Symbol, BigInt
• Complex types: Object (including arrays, functions, etc.)

Examples:

1
let age = 25; // integer
2
let price = 19.99; // float
3
let result = "abc" / 2; // NaN
4
let infinite = 1 / 0; // Infinity
5

6
let name = "John";
7
let greeting = `Hello, ${name}!`; // template string
8
console.log(greeting); // Hello, John!
9

10
let isOnline = true;
11
let hasPermission = false;
12

13
let x;
14
console.log(x); // undefined
15

16
let y = null;
17
console.log(y); // null
18

19
let bigNum = 123456789012345678901234567890n;
20
console.log(bigNum); // 123456789012345678901234567890n
21

22
let person = {
23
    name: "Alice",
24
    age: 30,
25
};
26
console.log(person.name); // Alice
27

28
let numbers = [1, 2, 3, 4];
29
console.log(numbers[0]); // 1
30

31
console.log(typeof 123); // "number"
32
console.log(typeof "hello"); // "string"
33
console.log(typeof true); // "boolean"
34
console.log(typeof undefined); // "undefined"
35
console.log(typeof null); // "object" (this is a historical quirk)
36
console.log(typeof {}); // "object"
37
console.log(typeof []); // "object"
38

39
console.log(Array.isArray([])); // true
40
console.log(Array.isArray({})); // false
41

42
// Type conversion
43
let str = String(123); // to string
44
let num = Number("123"); // to number
45
let bool = Boolean(1); // to boolean
46

47
console.log("5" + 2); // "52" (string concatenation)
48
console.log("5" - 2); // 3 (string to number then calculation)
49
console.log(true + 1); // 2 (boolean to number)

1.3 Conditional Statements#

• if-else, switch, and the ternary operator.

Examples:

1
const age = 18;
2
const message = age >= 18 ? "Adult" : "Minor";
3
console.log(message);

Logical Operators

if conditions often use logical operators to combine multiple conditions.

• Logical AND (&&): true when all conditions are true.
• Logical OR (||): true if any condition is true.
• Logical NOT (!): negates the condition.

Truthy and Falsy Values

In JavaScript, some values evaluate to true or false in boolean contexts.

• Falsy values: false, 0, "" (empty string), null, undefined, NaN.
• Truthy values: all other values.

1.4 Loops#

• for, while, do-while, for...in, for...of

Examples:

1
for (initialization; condition; increment) {
2
    // loop body
3
}
4

5
while (condition) {
6
    // loop body
7
}
8

9
do {
10
    // loop body
11
} while (condition);
12

13
for (const element of iterable) {
14
    // loop body
15
}
16

17
for (const key in object) {
18
    // loop body
19
}

Controlling loops: break and continue

• break: exit the entire loop.
• continue: skip the current iteration and proceed to the next one.

2.1 Function Basics#

• Regular functions, function expressions, and arrow functions.
• Default parameters and rest parameters.

Examples:

1
const greet = (name = "Guest") => `Hello, ${name}!`;
2
console.log(greet("Alice"));
3

4
function greet(name = "Guest") {
5
    return `Hello, ${name}!`;
6
}
7
console.log(greet()); // Output: Hello, Guest!
8

9
function sum(...numbers) {
10
    return numbers.reduce((acc, curr) => acc + curr, 0);
11
}
12
console.log(sum(1, 2, 3, 4)); // Output: 10

2.2 Scope and Closures#

• Global scope, function scope, block scope.
  • Global scope: variables declared outside of functions can be accessed by the entire program.
  • Function scope: variables declared inside a function are accessible only within that function.
  • Block scope: variables declared with let or const are only accessible inside the block {}.
• Closures: functions capture the scope variables at the time of their definition, typically used to create private variables or functions.

Examples:

1
function outerFunction() {
2
    let counter = 0;
3
    return function () {
4
        return ++counter;
5
    };
6
}
7
const increment = outerFunction();
8
console.log(increment()); // 1
9
console.log(increment()); // 2
10

11

12
function createMultiplier(multiplier) {
13
    return function (value) {
14
        return value * multiplier;
15
    };
16
}
17

18
const double = createMultiplier(2);
19
const triple = createMultiplier(3);
20
console.log(double(5)); // Output: 10
21
console.log(triple(5)); // Output: 15

3.1 Object Operations#

• Create objects, access properties, modify properties, delete properties.
  • Creation: {}, new Object(), class
  • Access: ${class}.prop,${class}[prop]
  • Modify/Delete
• Iterate over objects: for...in, Object.keys(), Object.entries().

Examples:

1
const person = { name: "Alice", age: 25 };
2
console.log(person.name); // Alice
3

4
for (const key in person) {
5
    console.log(`${key}: ${person[key]}`);
6
}
7

8

9
Object.keys(person).forEach((key) => {
10
    console.log(`${key}: ${person[key]}`);
11
});
12

13

14
Object.entries(person).forEach(([key, value]) => {
15
    console.log(`${key}: ${value}`);
16
});

tips: If you use () in a class:

Using this, you may not be able to access the class’s internal properties, because the this behavior of the arrow function () => {} differs from that of a normal function. An arrow function will not create its own this, but inherits it from the outer context in which it is defined.

• Arrow function’s this inherits from the scope where the function is defined.
• The function is defined in the context of the class object, but the arrow function’s this points to the global scope (in a browser, this is window; in Node.js it’s global), and not the person.

Therefore, this.prop is undefined, because there is no prop property in the global scope.

3.2 Array Operations#

• Common methods: push, pop, map, filter, reduce.
  • push(): adds to the end of the array.
  • pop(): removes from the end of the array.
  • unshift(): adds to the beginning of the array.
  • shift(): removes from the beginning.
  • indexOf(): finds the index of the first matching element.
  • includes(): checks whether an element is contained.
  • forEach(): performs an operation on each element.
  • map(): returns a new array containing the result of processing each element.
  • filter(): filters elements that meet a condition.
  • reduce(): reduces the array to a single value through accumulation.
• Destructuring and spread/rest operators.

Examples:

1
const numbers = [1, 2, 3];
2
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
3
console.log(sum); // 6
4

5

6
const [a, b, c] = [1, 2, 3];
7
console.log(a, b, c); // Output: 1 2 3

4.1 Destructuring and Spread/Rest Operators#

• Destructuring: quickly extract values from arrays or objects.
• Spread/rest operators: quickly copy or merge objects/arrays.

Examples:

1
const [x, , ...z] = [1, 2, 3, 4, 5];
2
console.log(x, z); // Output: 1 [3,4,5]
3

4
const { name, age } = { name: "Alice", age: 25 };
5
console.log(name, age); // Alice 25

4.2 Template Strings#

• Use backticks (“) to dynamically generate strings.

Examples:

1
const name = "Alice";
2
console.log(`Hello, ${name}!`);

4.3 Modules#

• Exporting modules: export and export default.
• Importing modules: import, import * as.

Examples:

1
export function greet(name) {
2
    return `Hello, ${name}!`;
3
}
4
// main.js
5
import { greet } from './module.js';
6
console.log(greet("Alice"));

tips:

export default exports a single default export per module; when importing, you don’t need {}.

When using export * as test from “test.js”, you can directly use test.default

5.1 Callback Functions#

• The callback is invoked when the asynchronous task completes.

Examples:

1
setTimeout(() => console.log("Task complete"), 1000);

• Callback Hell

When multiple asynchronous tasks need to be executed in sequence, nested callbacks can make code hard to maintain; this phenomenon is called “callback hell”.

1
setTimeout(() => {
2
    console.log("Task 1 complete");
3
    setTimeout(() => {
4
        console.log("Task 2 complete");
5
        setTimeout(() => {
6
            console.log("Task 3 complete");
7
        }, 1000);
8
    }, 1000);
9
}, 1000);

To solve callback hell, you can use a Promise.

5.2 Promise#

• Use Promises to chain asynchronous tasks.

  Promise is an object that represents the eventual completion or failure of an asynchronous operation. It has three states:

  1. Pending: initial state, not fulfilled or rejected.
  2. Fulfilled: operation succeeded, returns a result.
  3. Rejected: operation failed, returns an error.

Examples:

1
const promise = new Promise((resolve, reject) => {
2
    // asynchronous operation
3
    if (success) {
4
        resolve(value); // call resolve on success
5
    } else {
6
        reject(error); // call reject on failure
7
    }
8
});
9

10
fetch("<https://api.myip.com>")
11
    .then((response) => response.json())
12
    .then((data) => console.log(data))
13
    .catch((error) => console.error(error));

5.3 async/await#

1. async is used to declare a function that returns a Promise.
2. await pauses code execution, waiting for the Promise to resolve before continuing.

Examples:

1
async function fetchData() {
2
    const response = await fetch("<https://api.myip.com>");
3
    const data = await response.json();
4
    console.log(data);
5
}
6
fetchData();