A Beginner's Guide to JavaScript Basics

Import Method

Recap: Importing Moudules in JavaScript

1. The import Statement (ES6 Modules)
   A static, compile-time method for importing modules. It’s clean, supports named and default imports, and is widely used in modern JavaScript project.

Example:

import { greet } from './utils.js';
greet('World'); // "Hello, World!"

2. import() (Dynamic Import)
   A runtime, dynamic way to load modules as needed, returning a Promise. Perfect for lazy loading.

Example:

import('./utils.js').then()

3. require() (CommonJS)
   The traditional, synchronous import method from Node.js’s CommonJS system.
   It’s still common in older Node.js projects.

Example:

const utils = require('./utils.js');
utils.greet('World');

Inheritance

Method 1.

function Parent() {
    this.name = "Parent";
}

Parent.prototype.sayHello = function () {
    console.log('Hello, ' + this.name)
}

function Child() {
    this.name = "Child";
}

Child.prototype = new Parent(); // Inherit from Parent

const child = new Child();
child.sayHello();

Method 7. ES6 Class Inheritance

class Parent {
    constructor(name) {
        this.name = name;
        this.color = ['red', 'green'];
    }
    sayHello() {
        console.log('Hello, ' + this.name);
    }
}

class Child extends Parent {
    constructor(name) {
        super(name);
    }
}

const child = new Child('Child');
child.sayHello();
console.log(child.color);

Deep copy and shallow copy

1. Memory model and copy principle

1.1 Data structure

JavaScript memory is divded into stack and heap
Stack Memory: Stores primitive types and object references.
Heap Memory: Stores complex objects.

1.2 Pitfalls of Reference Types

let original = { data: [1, 2, 3]}
let copy = original;
copy.data.push(4);
console.log(original.data); // [1, 2, 3, 4]

2. Shallow Copy

const user = {
    name: 'John',
    permissions: ['read', 'write'],
}

const shallowCopy = { ...user };
shallowCopy.permissions.push('delete');

console.log(user.permissions); // ['read', 'write', 'delete']

3. Deep Copy

3.1 JSON Method

const clone = JSON.parse(JSON.stringify(original));

Limitations:

• Lost special values such as functions and undefined
• Cannot handle circular references
• Convert Date objects to strings

3.2 Recursive Implementation

function deepClone(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (hash.has(obj)) return hash.get(obj); // Circular reference check

    let clone = Array.isArray(obj) ? [] : {};
    hash.set(obj, clone);

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key], hash); // Recursive call
        }
    }

    return clone;
}

3.3 Modern API - structuredClone

const clone = structuredClone(original);

Supports copying of more than 20 data types including circular references, Date objects, etc.

3.4 Lodash Lib

const clone = _.cloneDeep(original);

Advantages: good compatibility, support for old browser environments