DEV Community: Đặng Đình Sáng

[JavaScript] Understand closures in 111 seconds

Đặng Đình Sáng — Mon, 26 Aug 2024 09:23:34 +0000

Although closures are a fundamental idea in JavaScript, newcomers may find them vague and challenging to grasp. Specifically, the ECMA standard's definition can be challenging to comprehend without any real-world experience. As a result, rather than going into great length to explain the notion of closures in this post, we will make it easy for you to comprehend by using actual code.

1. Closure

function A(name){
    function B(){
       console.log(name);
    }
    return B;
}
var C = A("Closure");
C();//Closure

This is the simplest closure.

Now that we know the fundamentals, let us briefly examine how this differs from a typical function. The following is how the aforementioned code appears when translated into natural language:

Define a normal function A, with argument name
Define a regular function B in A, and in B, refer to the external variable name
Return B in A
Execute A and assign the result to variable C
Run C

One statement can encapsulate these five operations:

Function B inside function A and variable name are referenced by variable C outside function A.

With a little modification, this statement defines a closure as follows:

A closure is created every time a function is created—at the time when the function is created. Every function has an associated closure. Nesting functions are not required.

Therefore, performing the above five operations defines a closure.

Uses of Closures

Before we understand the uses of closures, let's understand JavaScript's GC (Garbage Collection) mechanism.

In JavaScript, when an object is no longer referenced, it will be reclaimed by the GC, otherwise, it will continue to be kept in memory.

In the above example, B depends on A because B is defined within A, and A is indirectly referenced by C because the external variable C references B.

That is, A will not be collected by the GC and will continue to be kept in memory. To prove this reasoning, let's slightly improve the above example.

function A(){
    var count = 0;
    function B(){
       count ++;
       console.log(count);
    }
    return B;
}
var C = A();
C();// 1
C();// 2
C();// 3

If we call var C = A();, A is executed, creating a count variable and an internal function B. Since A returns B, the C variable actually has a reference to B. The function B can then access the count variable in A.
Function B can access the count variable in A because B is a closure. This is because B is a closure, and closures preserve the context in which they are created (e.g., local variables).
When C() is called, it actually calls function B. Each time C() is called, B increments the value of count and displays that value on the console.
A's execution context ends when B is created, but A's local variables are not reclaimed as long as B references its local variables (such as count).
Only when B is no longer referenced will the count variable and other local variables in A be recovered. In this example, since C still refers to B, the value of count is not recovered, nor is the execution context of A.

Why is count not reset?

Closure mechanism:

The closure keeps the state of count and keeps it accessible to the internal function B. Even if the execution context of A terminates, the state of count remains in memory because B continues to refer to this state.
On each call to B: Each call to C() is actually a call to B(), which uses the count stored in the closure and does not reinitialize it.

Thus, if you define some variables in a module and want to keep these variables in memory but not “pollute” the global variables, you can define this module using closures.

Javascript Set operations can now be performed natively

Đặng Đình Sáng — Thu, 04 Jul 2024 07:53:27 +0000

Introduction

JavaScript now has support for Set methods in multiple environments:
Safari 17 on 2023/09/18, Chrome122 on 2024/02/21 and Firefox127 on 2024/06/11 implemented it, making set operations available in all major browsers. It has successfully reached Stage 4, or up, as ES2025.

What is it?

intersection

new Set([1, 2, 3, 4]).intersection( new Set([1, 3, 5])); // Set{1, 3}
new Set([1, 2, 3, 4]).intersection( new Set([5, 6, 7])); // Set{}

It is the so-called AND.

union

new Set([1, 2, 3]).union( new Set([1, 3, 5])); // Set{1, 2, 3, 5}
new Set([1, 2, 3]).union( new Set([4, 5, 6])); // Set{1, 2, 3, 4, 5, 6}

It is the so-called OR.

difference

new Set([1, 2, 3]).difference( new Set([1, 3, 5])); // Set{2}
new Set([1, 2, 3]).difference( new Set([4, 5, 6])); // Set{1, 2, 3}

symmetricDifference

new Set([1, 2, 3]).symmetricDifference( new Set([1, 3, 5])); // Set{2, 5}
new Set([1, 2, 3]).symmetricDifference( new Set([4, 5, 6])); // Set{1, 2, 3, 4, 5, 6}

It is the so-called XOR.

isSubsetOf

Returns true if all elements are included in the argument.

new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 3, 4])); // true
new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 4, 5])); // false

new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 3])); // true
new Set().isSubsetOf( new Set([1, 2, 3])); // true

It is also true if the element is an empty set or A==B.

isSupersetOf

Returns true if the argument is contained in an element.

new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 3, 4])); // false
new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 4, 5])); // false

new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 3])); // true
new Set([1, 2, 3]).isSupersetOf( new Set()); // true

isDisjointFrom

Returns true if the elements and arguments have nothing in common.

new Set([1, 2, 3]).isDisjointFrom(new Set([4, 5, 6])); // true
new Set([1, 2, 3]).isDisjointFrom(new Set([2, 5, 6])); // false

new Set([]).isDisjointFrom(new Set([])); // true

Conclusion

These functions have been available to the public through polyfill for a long time.
Each of these functions is less than 10 lines long, and the self-implementation of the set operation itself is not difficult at all.

Ref

Temporary saving of work using git stash

Đặng Đình Sáng — Wed, 03 Jul 2024 13:34:12 +0000

Introduction

git stash to temporarily save changes you are working on.

How to use it

Save changes temporarily

git stash

This saves the changes in your current working directory to a stash, leaving your working directory clean.

Apply the stash

git stash apply

This applies the latest stash to the current working directory. The stash remains in place and can be reapplied.

Apply and remove the stash

git stash pop

This will apply the latest stash and remove it from the stash at the same time.

Display a list of stashes

git stash list

This will display a list of saved stashes.

Apply a specific stash

git stash apply stash@{1}

If multiple stashes exist, you can apply a specific stash by using the format stash@{n}.

Drop a specific stash

git stash drop stash@{1}

To drop a specific stash, use the following command.
This will remove the stash at stash@{1}.

Conclusion

A git stash is useful for temporarily storing changes you are working on so you can do other work or switch branches.

Javascript Quizzes You Can't Solve

Đặng Đình Sáng — Mon, 01 Jul 2024 02:53:04 +0000

Q1

console.log(018 - 015);
console.log("018" - "015");

Q2

const isTrue = true == []; 
const isFalse = true == ![]; 

console.log ( isTrue + isFalse);

Q3

console.log(3 > 2 > 1);

Q4

console.log(typeof typeof 1);

Q5

console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());

Q6

console.log(typeof NaN);

Q7

console.log(0.1 + 0.2 == 0.3);

Q8

const numbers = [33, 2, 8];
numbers.sort();
console.log(numbers[1])

Conclusion

What percentage of the eight questions were correct?
If you get all of them right, please leave a comment!

Ref

What is a List?

Đặng Đình Sáng — Tue, 25 Jun 2024 15:04:31 +0000

Lists are an abstract data structure that can be implemented using linked lists or arrays.

Linked lists inherently support list operations and can dynamically adjust their size, while arrays have a fixed length, making them less practical for use as lists. To address the limitations of arrays, lists can be implemented using dynamic arrays that can expand as needed during program execution. Dynamic arrays inherit the advantages of arrays while providing the flexibility to grow and shrink as the program requires. The choice between linked lists and dynamic arrays for implementing lists depends on the specific requirements and trade-offs of the application.

Common list operations

Initializing

# Without initial values
nums1: list[int] = []
# With initial values
nums: list[int] = [1, 3, 2, 5, 4]

Accessing elements

Access and update elements in O(1) time

# Access elements
num: int = nums[1]  # Access the element at index 1

# Update elements
nums[1] = 0    # Update the element at index 1 to 0

Inserting and Removing

Adding elements to the end of a list is an O(1) operation, the efficiency of inserting and removing elements elsewhere in the list remains the same as in arrays, with a time complexity of O(n)

nums.clear()

# Append elements at the end
nums.append(1)
nums.append(3)
nums.append(2)
nums.append(5)
nums.append(4)

nums.insert(3, 6)  # Insert number 6 at index 3

nums.pop(3)        # Remove the element at index 3

Iterating the list

# Iterate through the list by index
count = 0
for i in range(len(nums)):
    count += nums[i]

# Iterate directly through list elements
for num in nums:
    count += num

Concatenating

nums1: list[int] = [6, 8, 7, 10, 9]
nums += nums1  # Concatenate nums1 to the end of nums

Sorting

nums.sort()

List implementation

To understand how lists work, we'll implement a simplified version focusing on three key design aspects:

Initial Capacity: Start with an array of size 10.
Size Recording: Keep a variable size to track the current number of elements, updating it with each insertion or deletion.
Expansion Mechanism: When the array reaches capacity, double its size and transfer all elements to the new array. This approach helps manage dynamic arrays efficiently by balancing memory usage and performance.

class MyList:
    """List class"""

    def __init__(self):
        """Constructor"""
        self._capacity: int = 10  # List capacity
        self._arr: list[int] = [0] * self._capacity  # Array (stores list elements)
        self._size: int = 0  # List length (current number of elements)
        self._extend_ratio: int = 2  # Multiple for each list expansion

    def size(self) -> int:
        """Get list length (current number of elements)"""
        return self._size

    def capacity(self) -> int:
        """Get list capacity"""
        return self._capacity

    def get(self, index: int) -> int:
        """Access element"""
        # If the index is out of bounds, throw an exception, as below
        if index < 0 or index >= self._size:
            raise IndexError("Index out of bounds")
        return self._arr[index]

    def set(self, num: int, index: int):
        """Update element"""
        if index < 0 or index >= self._size:
            raise IndexError("Index out of bounds")
        self._arr[index] = num

    def add(self, num: int):
        """Add element at the end"""
        # When the number of elements exceeds capacity, trigger the expansion mechanism
        if self.size() == self.capacity():
            self.extend_capacity()
        self._arr[self._size] = num
        self._size += 1

    def insert(self, num: int, index: int):
        """Insert element in the middle"""
        if index < 0 or index >= self._size:
            raise IndexError("Index out of bounds")
        # When the number of elements exceeds capacity, trigger the expansion mechanism
        if self._size == self.capacity():
            self.extend_capacity()
        # Move all elements after `index` one position backward
        for j in range(self._size - 1, index - 1, -1):
            self._arr[j + 1] = self._arr[j]
        self._arr[index] = num
        # Update the number of elements
        self._size += 1

    def remove(self, index: int) -> int:
        """Remove element"""
        if index < 0 or index >= self._size:
            raise IndexError("Index out of bounds")
        num = self._arr[index]
        # Move all elements after `index` one position forward
        for j in range(index, self._size - 1):
            self._arr[j] = self._arr[j + 1]
        # Update the number of elements
        self._size -= 1
        # Return the removed element
        return num

    def extend_capacity(self):
        """Extend list"""
        # Create a new array of _extend_ratio times the length of the original array and copy the original array to the new array
        self._arr = self._arr + [0] * self.capacity() * (self._extend_ratio - 1)
        # Update list capacity
        self._capacity = len(self._arr)

    def to_array(self) -> list[int]:
        """Return a list of valid lengths"""
        return self._arr[: self._size]

Reference

List

Guidelines for managing code with Git

Đặng Đình Sáng — Tue, 11 Jun 2024 04:14:21 +0000

For smooth operation

The entire team needs to work on three things:

Adopt a Git operation model
Make clean commits
Send in and obtain the proper pull requests

Adopt a Git operation model

First, learn A successful git branch model (git-flow).

Source: A successful Git branching model

The git-flow standard branching method for Git is depicted in the above diagram.
Complete the tasks on the feature branch and merge it into the develop branch.
The main branch will be utilized for production operations following the release branch. In the event that a bug arises, the hotfix branch will fix it.

This allows you to take risks while working on feature branches, and sometimes even to throw away the branch altogether.

And to prevent human error, it is a good idea to set up the system to prohibit commits and pushes in master and develop.

Make clean commits

A clean commit, in my opinion, is one that makes it easy for a third party to comprehend the what and why of the modification right away.

Describe the "why" in the commit message and the "what" in the actual code change.

Use a template such as "I did XX for XX" to compose your commit messages until you are comfortable with it.

What: Explained by the code change itself

As long as each commit contains only one role, I believe it to be acceptable.

As long as you can utilize a template in your commit message, such as "I did XX for XX," it is acceptable.

Commitments with the format "I changed XX and YY" have a lot of detail.

You might be wondering how many lines of code you can alter. Well, if the task is to make a single commit, I believe it is acceptable to alter one line or even one hundred (albeit that is a bit drastic).

A clean commit is crucial because it allows "a third party to readily identify the what and why of the change."

Why: Explained in the commit message

The modifications are visible in the code, but only the person who made them is aware of their intended purpose.
To ensure that a third party can comprehend the modifications, you should explicitly state them in the commit message.

Use a template, such as "I did XX for XX," for your commit messages while you are still getting used to it.

It should be simple to express the "why" if there is only one change ("what"). It is probably advisable to question the necessity of the modification if you are unable to do so.

Do not forget to prefix your commit message.

feat: A new feature
fix: A bug fix
docs: Documentation only changes 
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing or correcting existing tests
chore: Changes to the build process or auxiliary tools and libraries, such as documentation generation

If you continue in this manner,

The modified category is clearly visible.

See instantly if any modifications impact the logic of the code.

Among the advantages are:

In my opinion, a commit will automatically turn into a clean commit if you can utilize the prefix + template "I did ____ for ____" in a fluid manner.

For reference, we will list the minimum git commands you should remember:

git clone, pull, checkout, add, commit, push
git log, diff
git commit -m "message 1" -m "" -m "message 3" (this will create a three-line commit message)
git commit --amend -m "amended message" (this allows you to amend the previous commit message)
- If you amend after pushing, the hash value will change, causing the local and remote versions to become inconsistent.
- If it is an ad-hoc analysis, I think it is okay to force push the feature branch before merging it into develop. It is a good idea to have the team agree on how to handle these risks.

Submit and receive appropriate pull requests

A pull request is appropriate, in my opinion, if it satisfies the following requirements:

The commits are clean (by the (2) description).
Pull requests only have one purpose; concurrent refactoring is not allowed.
Recognize the reviews you want to receive (see below).
Possibility of taking chances (see below)

Know what you want from reviewers

In the pull request description:

to whom
what
How

Write down what you want to see:

Do you want me to take a look at the overall structure and see if there are any problems?
I'm not too worried, so is it okay to just skim through it?
Is there anything you're unsure about?
Is it just information sharing?
Is it okay to just edit comments so I don't need to look at them?

Please state your stance.

If you simply say, "Please review," it will be unclear what you want from the reviewer, and they may end up reviewing more than necessary, which will increase the reviewer's burden and lead to unnecessary communication.

Write a description for your pull request that lets reviewers know what you're looking for.

Able to take risks

In the end, it comes down to how much risk you are willing to take to ensure quality.

I think merging from a feature branch to a develop branch is particularly risky.

I also think that self-merging and post-merging reviews are a good idea, with an emphasis on work efficiency.

First of all, you should be responsible for the code you write, and it's important to have a sense of responsibility and not rely too much on reviewers.

It is best for the team to agree on how to handle these risks based on each member's level of proficiency.

Next, I'll list the mindset I personally keep in mind when submitting pull requests.

Clean pull requests make code reviews easier
Pull requests left overnight will not be held
Submit pull requests that are easy for both parties
You don’t need to review everything
Self-merging is also OK
- Especially low-risk changes such as:
  - Editing comments etc.
  - Typo bug fixed
  - Light commitment from highly skilled members
However, be careful to provide thorough reviews for junior reviewers and reviewers who have just started the project and have little understanding of the data.
- However, if it is merged to develop, there is no problem with post-mortem review.

What is the benefit of managing your code well by satisfying 1, 2, and 3?

Quality can be guaranteed by smoothly running code reviews.
- Since it is assumed that other people will see it, try to write clean code.
- Code reviews improve internal quality
- Code reviews improve team and individual skills
  - If you don't have the skills, you'll never be able to write clean code, even if you have the time.
Communicate your changes and intentions to others
Other people include your "future self"
You can look back and see what caused the bug and why you made the change.
- For that reason, you need to write in the commit message why you made the change.
By discussing the pull request, you can understand the process of decision-making.
As a result, individual work efficiency increases.
Understanding the "big picture of the work" and "what needs to be done now" makes it easier to make clean commits and pull requests.
On the other hand, if your commits and pull requests are messy, there is a high possibility that you do not understand the "big picture of the work" and "what you need to do now".

Reference

Manage Git

Automatically Update the Local Branch with the Remote Version When Switching Branches in Git

Đặng Đình Sáng — Mon, 10 Jun 2024 04:07:54 +0000

When you switch to your main branch during development, do you ever forget to perform a git pull?

When you checkout to a particular branch, you can utilize a feature called "Git Hooks" to have a git pull executed automatically.

This article explains how to configure it.

Setup procedure

Go to the .git/hooks directory of the repository of your choice.
Create a file named post-checkout in the .git/hooks directory.
In this post-checkout, write the following code:

#! /bin/sh

# Get the current branch name
branch=$(git rev-parse --abbrev-ref HEAD)

# Do a git pull when you move to the `master` branch
if [ "$branch" = "master" ]; then
    git pull origin $branch
fi

After editing post-checkout, go to the root of the desired repository in a terminal.
Execute the following command in the terminal to give the post-checkout file the permission to execute the script.

chmod +x .git/hooks/post-checkout

This completes the configuration. The post-checkout file above will automatically perform a git pull when you git checkout (or git switch) from any branch to the master branch.

If you want to set up "automatic local modernization on branch move" for multiple branches

#!/bin/sh

# Get the current branch name
branch=$(git rev-parse --abbrev-ref HEAD)

# Handle the 'master' and 'develop' branches
if [ "$branch" = "master" ] || [ "$branch" = "develop" ]; then
    # Calling exec < /dev/tty assigns standard input to the keyboard
    exec < /dev/tty
    read -n 1 -p "Do you want to pull the '$branch' branch? (y/n): " answer
    echo "\n"

    if [ "$answer" = "y" ]; then
        # Break line
        git pull origin $branch
    else
        echo "Skipping 'git pull' for the '$branch' branch."
    fi
# Handle other branches
else
    echo "Skipping 'git pull' for the '$branch' branch."
fi

Referenced articles

https://qiita.com/t-sakamoto-0601/items/9254cd4a4a785b1b29e6

Linked List

Đặng Đình Sáng — Fri, 12 Apr 2024 16:32:41 +0000

Memory space is a common resource for all programs. In a complex system operating environment, free memory space may be scattered throughout the memory. We know that the memory space for storing arrays must be continuous, and when the array is very large, the memory may not be able to provide such a large continuous space. At this time, the flexibility advantage of the linked list is reflected.

A linked list is a linear data structure in which each element is a node object, and each node is connected through "references". The reference records the memory address of the next node through which the next node can be accessed from the current node.

The design of the linked list allows each node to be stored scattered throughout the memory, and their memory addresses do not need to be consecutive.

Each node contains two pieces of data: the node's "value" and a "reference" to the next node.

The first node of the linked list is called the "head node" and the last node is called the "tail node".
null The tail node points to "null", which is recorded as, nullptr and in Java, C++, and Python respectively None.
In languages that support pointers, such as C, C++, Go, and Rust, the above "reference" should be replaced by "pointer".

As shown in the following code, ListNode in addition to containing the value, the linked list node also needs to save an additional reference (pointer). Therefore, for the same amount of data, a linked list takes up more memory space than an array.

class ListNode:
    def __init__(self, val: int):
        self.val: int = val
        self.next: ListNode | None = None

Example in real-life scenario

Suppose you are working on a project where you need to keep track of a large number of tasks that need to be completed. You could use a linked list to store the tasks, where each task is represented by a node in the list.

Each node in the list would contain information about the task, such as its description, deadline, and priority. You could also include links to other tasks that depend on the current task, or that the current task depends on.

When a new task is added to the list, a new node is created and added to the end of the list. When a task is completed, its node is removed from the list.

You could also use the linked list to keep track of the dependencies between tasks. For example, if Task A depends on Task B being completed first, you could create a link from Task A's node to Task B's node. This would allow you to easily identify which tasks need to be completed before others.

Using a linked list in this way would allow you to efficiently add, remove, and manipulate tasks in your project management system. It would also allow you to easily visualize the dependencies between tasks, which could help you identify potential bottlenecks and plan your workflow more effectively.

Here's an example of how the linked list could be implemented in Python:

class Task:
    def __init__(self, description, deadline, priority):
        self.description = description
        self.deadline = deadline
        self.priority = priority
        self.dependencies = []

    def add_dependency(self, dependency):
        self.dependencies.append(dependency)

    def remove_dependency(self, dependency):
        self.dependencies.remove(dependency)

class TaskList:
    def __init__(self):
        self.head = None

    def add_task(self, task):
        if self.head is None:
            self.head = task
        else:
            current = self.head
            while current.next is not None:
                current = current.next
            current.next = task

    def remove_task(self, task):
        if self.head is None:
            return
        elif self.head == task:
            self.head = self.head.next
        else:
            current = self.head
            while current.next is not None:
                if current.next == task:
                    current.next = current.next.next
                    break
                current = current.next

    def get_tasks(self):
        tasks = []
        current = self.head
        while current is not None:
            tasks.append(current)
            current = current.next
        return tasks

# Example usage:
task1 = Task("Task 1", "2023-02-28", 1)
task2 = Task("Task 2", "2023-03-14", 2)
task3 = Task("Task 3", "2023-03-21", 3)

task1.add_dependency(task2)
task2.add_dependency(task3)

task_list = TaskList()
task_list.add_task(task1)
task_list.add_task(task2)
task_list.add_task(task3)

print(task_list.get_tasks())
# Output: [<Task 1>, <Task 2>, <Task 3>]

task_list.remove_task(task2)

print(task_list.get_tasks())
# Output: [<Task 1>, <Task 3>]

Try to explain the Array with lockers

Đặng Đình Sáng — Thu, 11 Apr 2024 16:08:22 +0000

An array is a linear data structure that stores elements of the same type in contiguous memory space. We call the position of an element in the array the index of the element.

Array

Imagine a row of lockers in a school hallway. Each locker has a number on it, and inside each locker is a piece of paper with a name on it. The names are arranged in alphabetical order, so the first locker has the name "Alice" on it, the second locker has the name "Bob" on it, and so on.

Now, suppose you want to find out what name is on the third locker. You could open each locker one by one until you reach the third locker, but that would take a long time and be very inconvenient. Instead, you could use a clever trick. You could notice that the names are arranged in alphabetical order, so you know that the third locker must contain the name that comes after "Bob" in the alphabet. Therefore, you can simply look at the second locker to see what name is on it, and then you know what name is on the third locker.

This is basically how arrays work. Instead of lockers, we have a series of boxes that we can put things in. Instead of names, we have numbers or other pieces of data. Instead of looking at each box one by one, we can use a special formula to figure out where a particular piece of data is located in the array.

For example, suppose we have an array of numbers, and we want to find out what number is in the fifth box. We can use the formula box number = (index - 1) * box size to figure out where the fifth box is located. If the box size is 10, then the fifth box is located at index 40.

Initializing arrays

Initializing an array without initial values:

Imagine you have a row of lockers in a locker room, and you want to initialize an array to represent the contents of those lockers. However, you don't know what each locker will hold yet. In this case, you can initialize the array without specifying any initial values.

Here's an example in JavaScript:



let lockers = []; // initialize an empty array

In this example, the locker array is created with no elements. You can add elements to the array later using the push() method.

Initializing an array with specified initial values:

Now imagine you have a row of lockers, and you want to initialize an array to represent the contents of those lockers. You know exactly what each locker will hold, so you can specify the initial values when creating the array.

Here's an example in JavaScript:



let lockers = ['socks', 'shoes', 'jacket']; // initialize an array with specific values
var arr = new Array(5).fill(0); // initialize an array with 0 value

In this example, the lockers array is created with three elements: 'socks', 'shoes', and 'jacket'. These elements are assigned to the first, second, and third indices of the array, respectively.

Accessing elements

To access an element in an array, we need to know its index. The index is like a key that unlocks the locker containing the element we want to access. Once we have the key (or index), we can use it to find the corresponding locker (or memory location) where the element is stored.

The formula shown in the figure above helps us determine the memory address of an element in an array. It takes the base address of the array (which is the memory address of the first element) and adds an offset to it, based on the index of the element we want to access. The offset is calculated by multiplying the index by the size of each element in the array.

For example, let's say we have an array of integers, and we want to access the element at index 5. The base address of the array is 1000, and each integer takes up 4 bytes of memory. To access the element at index 5, we would calculate the memory address as follows:

Memory Address = Base Address + (Index * Element Size)
Memory Address = 1000 + (5 * 4)
Memory Address = 1000 + 20
Memory Address = 1020

Therefore, the memory address of the element at index 5 is 1020.



/* Random access */
function randomAccess(nums) {
    // Choose a random value in [0, nums.length]
    const random_index = Math.floor(Math.random() * nums.length);
    // Get and return a random value
    const random_num = nums[random_index];
    return random_num;
}

Inserting elements

Let's say you want to insert a new locker in the middle of the row. To do this, you would need to shift all the lockers after the new locker one position back to make room for it.

However, this means that the last locker in the row will now be pushed out of the row, as there is no more space to fit it. This is similar to how inserting an element in an array works, as the fixed length of the array means that there is no extra space to accommodate new elements.



function insert(nums, num, index) {
    for (let i = nums.length - 1; i > index; i--) {
        nums[i] = nums[i - 1];
    }
    nums[index] = num;
}

Deleting elements

Delete an element at the index i, all elements following the index i must be moved forward by one position. After deletion, the former last element becomes "meaningless," hence requiring no specific modification.



function remove(nums, index) {

    for (let i = index; i < nums.length - 1; i++) {

        nums[i] = nums[i + 1];

    }

}

Traversing arrays

We can traverse an array either by using indices or by directly iterating over each element



function traverse(nums) {

    let count = 0;

    for (let i = 0; i < nums.length; i++) {

        count += nums[i];

    }

<span class="k">for </span><span class="p">(</span><span class="kd">const</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">nums</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">count</span> <span class="o">+=</span> <span class="nx">num</span><span class="p">;</span>
<span class="p">}</span>



}

Finding elements

Just like how you would need to check each locker to find the one you're looking for, you would need to check each element in an array to find the one you're looking for. This process is called "linear search" because it involves checking each element one by one, just like how you would check each locker in a row



function find(nums, target) {

    for (let i = 0; i < nums.length; i++) {

        if (nums[i] === target) return i;

    }

    return -1;

}

Expanding arrays

If you want to add more lockers to the row, you can't just magically create more lockers out of thin air. Instead, you need to build a bigger locker room with more lockers.

Similarly, when you need to expand an array, you can't just magically increase its size. Instead, you need to create a new array with more capacity and then copy the elements from the old array to the new one. This process is called "resizing" the array, and it can be time-consuming for large arrays.

In programming languages, the length of an array is often immutable, meaning it can't be changed. This is because arrays are designed to be fixed-size data structures, and changing their size can lead to unexpected behavior or errors. To expand an array, you need to create a new array with more capacity and then copy the elements from the old array to the new one. This process has a time complexity of O(n), meaning it can be slow for large arrays.



function extend(nums, enlarge) {

    const res = new Array(nums.length + enlarge).fill(0);

    for (let i = 0; i < nums.length; i++) {

        res[i] = nums[i];

    }

    return res;

}

Advantages and limitations of arrays

Arrays are stored in contiguous memory spaces and consist of elements of the same type.

High space efficiency: Arrays allocate a contiguous block of memory for data, eliminating the need for additional structural overhead.
Support for random access: Arrays allow O(1) time access to any element.
Cache locality: When accessing array elements, the computer not only loads them but also caches the surrounding data, utilizing high-speed cache to enhance subsequent operation speeds.

However, continuous space storage is a double-edged sword, with the following limitations:

Low efficiency in insertion and deletion: As arrays accumulate many elements, inserting or deleting elements requires shifting a large number of elements.
Fixed length: The length of an array is fixed after initialization. Expanding an array requires copying all data to a new array, incurring significant costs.
Space wastage: If the allocated array size exceeds what is necessary, the extra space is wasted.

Ref

https://www.hello-algo.com/chapter_array_and_linkedlist/array/#413

Character encoding

Đặng Đình Sáng — Wed, 10 Jan 2024 00:23:59 +0000

When crafting characters in a narrative, an author builds their own personalized "character set" by establishing traits, behaviors, motivations, and other attributes that represent each individual. As computer character encodings allow standardized interpretation, defining characters helps readers understand their roles.

ASCII character set

"ASCII code" is the earliest character set, and its full name is the American Standard Code for Information Interchange. It uses a 7-bit binary number (the lower 7 bits of a byte) to represent a character and can represent up to 128 different characters. ASCII code includes uppercase and lowercase English letters, numbers 0 ~ 9, some punctuation marks, and some control characters (such as line feeds and tabs).

Around the world, several EASCII character sets suitable for different regions have emerged. The first 128 characters of these character sets are unified into ASCII codes, and the last 128 characters are defined differently to adapt to the needs of different languages.

Unicode character set

With the rapid development of computer technology, character sets and encoding standards have flourished, which has brought about many problems. On the one hand, these character sets generally only define characters for a specific language and cannot work properly in multi-language environments. On the other hand, there are multiple character set standards for the same language. If two computers use different encoding standards, garbled characters will appear when transmitting information.

Researchers at that time were thinking: If a sufficiently complete character set was launched to include all languages and symbols in the world, wouldn't it be possible to solve the problem of cross-language environments and garbled characters? Driven by this idea, Unicode, a large and comprehensive character set, came into being.

Released in 1991, Unicode has undergone continuous expansion to include new languages and characters. As of September 2022, Unicode already contains 149,186 characters, encompassing a wide range of characters, symbols, and even emoticons from various languages. Within the vast Unicode character set, commonly used characters occupy 2 bytes, while rarer characters may require 3 or 4 bytes.

Unicode is essentially a universal character set that assigns a unique number, called a "code point," to each character. However, it does not specify how these code points are stored in a computer. This raises the question: How does the system interpret characters of different lengths within a text? For example, when encountering a 2-byte code, how does the system determine whether it represents a single 2-byte character or two 1-byte characters?

A straightforward solution to this problem is to store all characters using equal-length encodings. This approach ensures consistency in character length.

Reference

However, ASCII code has proven to us that encoding English only requires 1 byte. If the above solution is adopted, the space occupied by the English text will be twice that of ASCII encoding, which is a huge waste of memory space. Therefore, we need a more efficient Unicode encoding method.

UTF-8 encoding

UTF-8, which stands for "Unicode Transformation Format 8-bit," has indeed become the most widely used Unicode encoding method worldwide. It is a variable-length encoding scheme that can represent characters using 1 to 4 bytes, depending on the complexity of the character.

One of the key advantages of UTF-8 is its backward compatibility with ASCII (American Standard Code for Information Interchange). In UTF-8, ASCII characters are represented using a single byte, ensuring that text encoded in ASCII remains unaltered when represented in UTF-8.

Latin letters, Greek letters, and other commonly used characters from various scripts, such as Cyrillic or Hebrew, are represented using 2 bytes in UTF-8. This allows for the inclusion of a wide range of alphabets compactly and efficiently.

For characters outside the ASCII range and the commonly used scripts, such as Chinese characters, UTF-8 uses 3 bytes to represent them. This ensures that a vast array of characters from different languages and scripts can be encoded and displayed correctly.

In addition, UTF-8 can handle even more complex characters, including rare and less commonly used characters, by using 4 bytes for their representation.

The versatility of UTF-8 has made it the de facto standard for encoding Unicode characters, as it strikes a balance between storage efficiency and compatibility with existing systems and applications. Its widespread adoption has enabled seamless communication and interoperability across different languages and scripts on the Internet and other digital platforms.

In addition to UTF-8, common encoding methods include the following two.

UTF-16 encoding: uses 2 or 4 bytes to represent a character. All ASCII characters and commonly used non-English characters are represented by 2 bytes; a few characters require 4 bytes. For 2-byte characters, the UTF-16 encoding is equivalent to the Unicode code point.
UTF-32 encoding: uses 4 bytes per character. This means that UTF-32 takes up more space than UTF-8 and UTF-16, especially for text with a high proportion of ASCII characters.

From the perspective of storage space usage, using UTF-8 to represent English characters is very efficient because it only requires 1 byte; using UTF-16 to encode certain non-English characters (such as Chinese) will be more efficient because it only requires 2 characters byte, while UTF-8 may require 3 bytes.

From a compatibility perspective, UTF-8 is the most versatile, and many tools and libraries give priority to supporting UTF-8.

Reference

Character encoding of programming languages

For most programming languages in the past, the strings used in program execution used equal-length encodings such as UTF-16 or UTF-32. Under equal-length encoding, we can treat strings as arrays. This approach has the following advantages.

Random Access: With equal-length encoding, like UTF-16, accessing characters at any position in a string is straightforward. Since UTF-8 is a variable-length encoding, finding a specific character requires traversing the string from the beginning, resulting in additional time complexity. O(n) time.
Character Count: Calculating the length of a UTF-16 encoded string is a constant-time operation. However, determining the length of a UTF-8 encoded string involves traversing the entire string to count the number of characters. O(1) operation.
String Operations: Performing various string operations such as splitting, concatenating, inserting, and deleting are generally easier with equal-length encoded strings, like UTF-16. Handling these operations with UTF-8 encoded strings often requires additional calculations to ensure proper encoding.

Programming Language Choices:

Java: Java's String type uses UTF-16 encoding. Initially, when Java was designed, it was believed that 16 bits (2 bytes) would be sufficient to represent all possible characters. However, with the expansion of the Unicode specification, characters in Java can now be represented by a pair of 16-bit values, known as a surrogate pair.
JavaScript and TypeScript: Strings in JavaScript and TypeScript also use UTF-16 encoding. When JavaScript was first introduced by Netscape in 1995, Unicode was still in early development, and a 16-bit encoding was considered sufficient for representing all Unicode characters.
C#: C# primarily uses UTF-16 encoding. This choice is influenced by Microsoft, as many Microsoft technologies, including the Windows operating system, widely use UTF-16 encoding.

Alternative Encoding Schemes:

Python: Python's str type uses Unicode encoding and employs a flexible string representation. The size of characters stored in memory depends on the largest Unicode code point in the string. If all characters are within the ASCII range, each character occupies 1 byte. If characters extend beyond ASCII but are within the Basic Multilingual Plane (BMP), each character occupies 2 bytes. If characters extend beyond BMP, each character occupies 4 bytes.
Go: Go's string type internally uses UTF-8 encoding. Additionally, the Go language provides the rune type, which represents a single Unicode code point.
Rust: Rust's String type also uses UTF-8 encoding internally. Rust also provides the char type for representing individual Unicode code points.

It is important to note that the discussion above focuses on how strings are stored within programming languages. This is distinct from how strings are stored in files or transmitted over the network. In file storage or network transmission, UTF-8 encoding is commonly used to achieve optimal compatibility and space efficiency.

Numeric encoding

Đặng Đình Sáng — Sun, 10 Dec 2023 16:44:08 +0000

How are numbers actually represented at the lowest levels inside a computer? Let's break down integer and floating point encoding.

#1 Basic-data-types

Integer encoding

The representation of a number in a computer is collectively called the number of machines. Data processing and computation in a computer are both binary.
Generally, the number of machines is represented in 8 bits. Practical Data has positive and negative numbers, because the computer can only represent 0 and 1 states, and the positive or negative values of the data are "+", in a computer, it is distinguished by a binary value of 0 or 1, which is usually placed in the highest bit and becomes the symbol bit.
After the number of symbols is converted into numeric values, the computer has designed a variety of symbol bit encoding methods to conveniently perform arithmetic operations on the number of machines and improve the computing speed, the most common methods for expressing the number of machines are original code, reverse code, complement code, and transfer code.

The original code representation is a simple representation of the number of machines. Its sign bit uses 0 to represent the positive and 1 to represent the negative numbers. The value is generally expressed in binary format.

[+ 0] original = 0000000, [-0] original = 1000000

\ 000 \ 0000] = 0101 \ 0110 \newline +5 = [- \ 000 \ 0101] = 1100 \ 1010 \newline -0 = [- \ 000 \ 0000] = 1000 \ 0000 \newline -28 = [- \ 001 \ 1100] = 1001 \ 1100 \newline

The original code of negative numbers cannot be directly used in operations

\begin{align*} 1 + (-&2) \end{align*} \newline \to 0000 \ 0001 + 1000 \ 0010 \newline = 1000 \ 0011 \newline \to -3

The reverse code of the number of machines can be obtained from the original code. If the number of machines is positive, the inverse code of the number of machines is the same as the original code. If it is negative, the inverse code of the number of machines is the original code of the machine (except the symbol bit) that you get.

[+ 0] = 0000000, [-0] = 11111111

\ 1010110 \newline X2 = 1 \ 1001010 \newline [X1] \ Reverse \ = [X1] \ original \ = \ 01010110 \newline [X2] \ original = 11001010 \newline [X2] \ reversed = 10110101 \newline

The Complement Representation can be obtained by the original code. If the number of machines is positive, the complement code of the number of machines is the same as the original code; if it is negative, then, the complement code of the number of machines is obtained based on the reverse code of the original code (except the symbol bit) and the value of 1 in the undigit.

\begin{align*} 1 + (-&2) \end{align*} \newline \to 0000 \ 0001 (original) + 1000 \ 0010 (original) \newline = 0000 \ 0001 (reversed) + 1111 \ 1101 (reversed) \newline = 1111 \ 1110 (reversed) \newline = 1000 \ 0001 (original) \newline \to -1

Like the original code, the complement code also has the problem of positive and negative zero ambiguity, so the computer further introduced 2's complement. Let’s first observe the conversion process of the original code, inverse code, and complement code of negative zero:

[+ 0] fill = 0000000, [- 0] fill = 0000000
[-0 ] = 1000 0000 (original) = 1111 1111 (reversed) = 1 0000 0000 (repaired)

Add 1 to the complement of negative zero. A carry will occur, but the length of a byte is only 8 bits, so it overflows to the 9th bit. 1 will be discarded. That is, the complement of the negative zero is 0000 0000, the same as the positive zero's complement. This means that there is only one zero in the two's complement representation and the positive and negative zero ambiguity is thus resolved.

byte the value range of the type is [-128, 127], an extra negative number. How did you get it? We note that the interval [-127, 127]. All integers have corresponding original code, complemented code, and reversed code, and the original code and complemented code can be converted to each other.
However, the complement 1000 0000 is an exception, it does not have a corresponding original code.

According to the conversion method, we get the original code of the complement code as 0000 0000. This is a contradiction because the original code represents the number 0, its complement should be itself. The computer specifies this special complement 1000 0000 represents -128. Actually, -127 + -1 The calculation result under the two's complement code is -128.

(-127) + (-1)
-> 1111 1111 (original) + 1000 0001 (original)
= 1000 0000 (reversed) + 1111 1110 (reversed)
= 1000 0001 (repair) + 1111 1111 (repair)
= 1000 0000
-> -128

The hardware circuits inside the computer are mainly designed based on addition operations. This is because compared to other operations (such as multiplication, division, and subtraction), addition operations are simpler to implement in hardware, easier to parallelize, and faster.

Note that this does not mean that computers can only do addition. By combining addition with some basic logical operations, computers can perform a variety of other mathematical operations. For example, calculating subtraction a - b Can be converted to computational addition a + (-b); Calculating multiplications and divisions can be converted into calculating multiple additions or subtractions.

Floating point encoding

If you are careful, you may find that: the length of int and float is the same as 4 bytes, but why is float the value range of is much larger int?

This is because floating point numbers are represented differently. Remember a 32-bit length binary number as:

b_{31}b_{30}b_{29}...b_2b_1b_0

The 32-bit length float consists of the following three parts:

Sign bit S: Occupies 1 bit, corresponding to $b_{31}$
Exponent bit E: Occupies 8 bits, corresponding to $b_{30}b_{29}...b_{23}$
Fractional digit N: Occupies 23 bits, corresponding to $b_{22}b_{21}...b_0$

The calculation formula converted to decimal is:

(-1)^S \times 2^{E-127} \times (1 + N)

The value range of each item is:

\in \lbrace0,1\rbrace, E \in \lbrace1,2,...,254\rbrace \newline (1+N) = (1 + \displaystyle\sum_{i=1}^{23}b_{23 - i}2^{-i}) \subset \lbrack1,2 - 2^{-23} \rbrack

The representation of float contains an exponent bit, causing its range of values to be much larger than int.

Although floating point numbers extend the range of values, a side effect is that precision is sacrificed. The integer type uses all 32 bits to represent numbers, and the numbers are evenly distributed; due to the existence of the exponent bit, the larger the value of the floating point number, the greater the difference between two adjacent numbers will tend to be.

Double precision also uses a representation method similar to.

Conclusion

By explaining the representation forms rather than just rote specifications, we gain deeper insight into optimizing numeric computation at a fundamental level. The low-level choices reflect beauty in efficiently solving real-world engineering challenges.

Basic Data Types

Đặng Đình Sáng — Fri, 08 Dec 2023 00:35:41 +0000

Basic data types are the fundamental building blocks CPUs use to represent numeric values, text, pictures, videos, speech, 3D models, and more. Although these data are organized differently, they are composed of various basic data types. They form the lowest level of data that programming languages can directly operate on.

A real-life example
Common Types
Representation in Binary
Type Sizes and Ranges
Relationship to Data Structures

A real-life example

The Shipment Journey

Every package is assigned a unique tracking number for identification. As this number can be long, companies use integer data types like long to store billions of IDs without size limitations.

The carrier provides estimated delivery dates, sometimes with partial day granularity. Dates contain both date and time info, making floating point data types suitable to represent complex timestamps down to the minute.

Status Updates

As your package travels, the system logs status messages like "Left Sort Facility" at each location. These short text updates are easily stored using string data types.

Heavier items require special handling and are subject to additional fees. To track weights precisely, the float data type captures decimal values like "4.56 lbs".

Delivery Details

Your driver marks the package as delivered by getting a signature. Boolean data types store true/false values to flag a delivery as complete.

Different service speeds offer varying delivery promises. Enumeration string types classify options as "Standard", "Expedited" etc.

Data types serve many purposes in real life. How it can be stored on the computer?

Common Types

Basic data types are types that the CPU can directly perform operations

Integer types (byte, short, int, long) for whole numbers
Floating point types (float, double) for decimal numbers
Character type (char) for single-character text
Boolean type (bool) for true/false values

Representation in Binary

Basic data types are stored in computers in binary form

Inside computers, all data is stored as bits - the basic units of 1s and 0s. Data types determine how many bits are used to represent each value.

For example:

1 byte typically uses 8 bits and can store values from 0 to 255 ( $2^8$ numbers). Multiple bytes are used for larger integer ranges.
1 integer occupied 4 bytes = 32 bits, represent $2^{32}$ numbers.

Type Sizes and Ranges

The number of bits allocated for a type determines its possible value range. Larger types can hold bigger numbers but take up more memory. Value ranges also depend on the programming language.

For illustration, I've included a table showing common type sizes and value ranges for the Java programming language. These serve as a general guide but can vary between languages and platforms.

type	symbol	space	minimum	maximum	default
integer	`byte`	1 byte	$2^7$	$2^7 - 1$	0
	`short`	2 bytes	$2^{15}$	$2^{15} - 1$	0
	`int`	4 bytes	$2^{31}$	$2^{31} - 1$	0
	`long`	8 bytes	$2^{63}$	$2^{63} - 1$	0
floating point number	`float`	4 bytes	$1.175 * 10^{-38}$	$3.403 * 10^{38}$	0.0f
	`double`	8 bytes	$2.225 * 10^{-308}$	$1.798 * 10^{308}$	0.0
character	`char`	2 bytes	$0$	$2^{16} - 1$	0
boolean	`bool`	1 byte	$f a l se$	$t r u e$	false

Relationship to Data Structures

Data types indicate the type of primitive content, while data structures define how that content is organized in memory. We can store different data types like integers, floats, and chars using the same structures as arrays.

Structures provide the logical “container” for values, independent of their basic format. This relationship allows flexibility in solving problems by decoupling logical structure from physical representation.

python code:

numbers: list[int] = [0] * 2
decimals: list[float] = [0.0] * 2
characters: list[str] = ['0'] * 2
bools: list[bool] = [False] * 2
data = [1, 0.1, '0', False]

javascript code:

const array = [0, 0.0, 'a', false];

typescript code:

const numbers: number[] = [];
const characters: string[] = [];
const bools: boolean[] = [];

DEV Community: Đặng Đình Sáng

[JavaScript] Understand closures in 111 seconds

1. Closure

Uses of Closures

Javascript Set operations can now be performed natively

Introduction

What is it?

intersection

union

difference

symmetricDifference

isSubsetOf

isSupersetOf

isDisjointFrom

Conclusion

Ref

Temporary saving of work using git stash

Introduction

How to use it

Save changes temporarily

Apply the stash

Apply and remove the stash

Display a list of stashes

Apply a specific stash

Drop a specific stash

Conclusion

Javascript Quizzes You Can't Solve

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Q8

Conclusion

Ref

What is a List?

Common list operations

List implementation

Reference

Guidelines for managing code with Git

For smooth operation

Adopt a Git operation model

Make clean commits

What: Explained by the code change itself

Why: Explained in the commit message

Submit and receive appropriate pull requests

Know what you want from reviewers

Able to take risks

What is the benefit of managing your code well by satisfying 1, 2, and 3?

Reference

Automatically Update the Local Branch with the Remote Version When Switching Branches in Git

Setup procedure

If you want to set up "automatic local modernization on branch move" for multiple branches

Referenced articles

Linked List

Example in real-life scenario

Try to explain the Array with lockers

Array

Initializing arrays

Accessing elements

Inserting elements

Deleting elements

Traversing arrays

Finding elements

Expanding arrays

Advantages and limitations of arrays

Ref

Character encoding

ASCII character set

Unicode character set

UTF-8 encoding

Character encoding of programming languages

Numeric encoding

Integer encoding

Floating point encoding

Conclusion

Basic Data Types

Table Of Contents