DEV Community: Ali Turki

Physical vs Logical Data Structures

Ali Turki — Thu, 14 Nov 2024 16:39:40 +0000

Understanding the distinction between physical and logical data structures is crucial to grasp how data is actually organized in memory and how it is used conceptually by algorithms and applications. Here, we'll go over these two types of data structures, how they relate to each other, and why the distinction matters.

Logical Data Structure: The Abstract View

Imagine a logical data structure as a blueprint. It represents how data is organized, manipulated, and accessed, but at a higher, conceptual level that doesn't care about the details of where that data is physically located in memory.

For instance, you've probably heard about common data structures such as arrays, linked lists, trees, and graphs. These are all logical data structures, which means they describe how data is logically organized.

A linked-list is logically a sequence of elements, each pointing to the next, with nodes linked together.
A binary tree is logically organized in a hierarchical structure, with nodes having references to child nodes.
A graph is a set of nodes connected by edges, ofen used to represent relationships.

Let's visualize a linked list:

Here's a simple implementation of a linked list in Java:

public class LinkedList<T> {
    private Node<T> head;

    private static class Node<T> {
        T data;
        Node<T> next;

        Node(T data) {
            this.data = data;
            this.next = null;
        }
    }

    public void add(T data) {
        Node<T> newNode = new Node<>(data);
        if (head == null) {
            head = newNode;
        } else {
            Node<T> current = head;
            while (current.next != null) {
                current = current.next;
            }
            current.next = newNode;
        }
    }

}

A logical data structure helps define how elements are conceptually related to each other, what operations can be performed (e.g., insertions, deletions, lookups), and how the data is accessed. For example, in a stack (a logical data structure), elements are added and removed in a LIFO manner.

What's important here is that a logical data structure provides an abstract interface. It tells you how the data should behave, what operations you can use, and the general relationships between elements, but it does not tell you the details of how or where that data is actually stored in memory.

In software development, logical data structure are essential because they provide a standardized approach to problem-solving. By understanding the logical structure and behavior, programmers can implement efficient algorithms to manipulate data without worrying about how data is represented at a physical level. This layer of abstraction provides flexibility and modularity, allowing us to swap out implementations or changes optimization without affecting the core logic.

Physical Data Structures: The Concrete View

While logical data structures are the abstract idea, physical data structure are all about how data is actually laid out in memory. It's like the physical constructions of a building from a blueprint: whereas the blueprint tells you where things should go and how they connect, the physical construction is about actually placing bricks and pouring concrete.

When discussing physical data structures, we're talking about how data gets stored in a computer's memory, whether it's in RAM, on a hard disk, or in a database. physical data structure are about the low-level representation of data:

Arrays in memory: When we use an array, the elements are physically contiguous in memory and each element can be accessed by computing its memory address. This physical layout makes accessing elements by index very fast, but also means resizing an array is costly since there might not be adjacent space available.

Linked Lists in memory: A linked list is represented as nodes scattered around in memory, where each node contains data and a reference (a memory address or pointer) to the next node. This physical layout makes linked list slower for random access compared to arrays but it allows for efficient insertion and deletion of nodes.
Disk blocks in databases: In the case of data storage, a B-tree might be used to represent indexes on disk, physically storing keys in blocks that allow efficient access patterns with minimal disk I/O. Here, the actual arrangement of data blocks on disk forms the physical data structure.

The physical representation impacts performance and efficiency significantly. By deciding on the physical layout, we determine how fast data can be read or written, how much memory is used, and whether operations can take advantage of hardware features like caches or paging. Physical data structure are crucial when considering low-level performance tuning or when trying to optimize for speed, memory use, or efficient access.

Connecting Logical and Physical Data Structures

To make these concepts clear, think about the role of data structures in a real-world scenario. Consider a library. The logical data structure is like the catalog system, it tells you what books exist, their genres, titles, and author names, and provides a systematic way to search and browse it's all about how information is represented and accessed.

The physical data structure is the actual bookshelf arrangement. It represents where each book is physically located in the library: some books might be grouped on the same shelf because they are contiguous in the genre catalog, while others may be across the room because they are part of a different category. How they're arranged impacts how quickly someone can retrieve them.

The same principle applies in computing:

A logical data structure like a linked list tells us how each element is connected to the next.
The physical data structure involves putting each of these elements somewhere in memory, using pointers to keep track of those relationships.

Consider another example in programming:

Imagine a queue as a logical data structure. Conceptually, it's FIFO: you add items to the back and remove from the front.
Physically, that queue could be implemented in different ways: as an array, a linked list, or even as a ring buffer in memory. Each implementation comes with different memory management, different access patterns, and different trade-offs.

Let's visualize how a queue can be implemented using different physical structures:

Different physical implementations of a queue: array-based and linked list-based

Why the Difference Matters

The distinction between logical and physical data structures is what allows for abstraction in programming. When a developer writes code, they often start with a logical data structure, defining how data should behave and what operations it should support. Afterward, they choose the physical representation that best meets the performance requirements and memory constraints of their application.

Logical data structures focus on problem-solving and abstraction. They allow you to think about the relationships and operation without getting bogged down by the details of how memory works.
Physical data structure are about efficiency. The specific way in which data is stored impacts how quickly operations can be performed and how much memory is used.

For example, if you're designing a system to quickly retrieves records, a hash table might be a good logical data structure. But then the physical implementation would need careful consideration, such as how memory is allocated for the buckets, how collision resolution is managed, and what specific layout will reduce latency.

An Example: HashMap in Java

In languages like Java, logical and physical structures often together from powerful tools. Take HashMap for instance:

Logical View: A HashMap is a collection that allows you to store and retrieve data by key-value pairs. It offers efficient lookup, insertion, and deletion operations based on a key.
Physical View: Behind the scenes, a HashMap uses an array of linked lists or a more advanced structure like trees. The physical memory is organized so that elements are distributed across an array, with linked lists used to manage collisions.

Here's a simplified implementation of a HashMap in Java:

public class SimpleHashMap<K, V> {
    private static final int DEFAULT_CAPACITY = 16;
    private Node<K, V>[] buckets;
    private int size;

    @SuppressWarnings("unchecked")
    public SimpleHashMap() {
        buckets = (Node<K, V>[]) new Node[DEFAULT_CAPACITY];
        size = 0;
    }

    private static class Node<K, V> {
        K key;
        V value;
        Node<K, V> next;

        Node(K key, V value) {
            this.key = key;
            this.value = value;
        }
    }

    public void put(K key, V value) {
        int index = getIndex(key);
        Node<K, V> newNode = new Node<>(key, value);

        if (buckets[index] == null) {
            buckets[index] = newNode;
        } else {
            Node<K, V> current = buckets[index];
            while (current.next != null) {
                if (current.key.equals(key)) {
                    current.value = value;
                    return;
                }
                current = current.next;
            }
            if (current.key.equals(key)) {
                current.value = value;
            } else {
                current.next = newNode;
            }
        }
        size++;
    }

    public V get(K key) {
        int index = getIndex(key);
        Node<K, V> current = buckets[index];
        while (current != null) {
            if (current.key.equals(key)) {
                return current.value;
            }
            current = current.next;
        }
        return null;
    }

    private int getIndex(K key) {
        return Math.abs(key.hashCode() % buckets.length);
    }
}

This combination provides both the logical abstraction (a collection of key-value pairs that allows efficient access) and the physical implementation (using memory arrays and pointers).

Wrapping-up

Logical data structures are abstract models that define how data is organized and accessed. They're all about concepts, how the data is related and what operations can be performed. Physical data structures are the real, low-level representation of data in memory. They determine how data is laid out and how efficiently it can be stored accessed, and manipulated.

The power of separating logical and physical representation is at the heart of computer science, enabling modularity, reusability, and optimization. By understanding and leveraging both sides, developers can write more efficient and maintainable code, ultimately building systems that solve problems effectively while making the best use of the hardware.

Create a digital clock with vanilla JS

Ali Turki — Sat, 19 Jun 2021 14:09:00 +0000

Tiny digital clock using JavaScript

In this tutorial, I will show you how to build a digital clock using pure JavaScript.

At the end of this tutorial, we'll have done this clock that in the following image below.

Create the file index.html



<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Digital Clock</title>
    </head>
    <body>
        <!--for representing our "hh:mm:ss tt" format.-->
        <h1 id="time"></h1>
        <!--Include our external JavaScript file -->
        <script src="./script.js"></script>
    </body>
</html>

Now we have created starter Html file, let's create the JavaScript file.

Let's first create a reference for the h1 tag.



var timeEl = document.getElementById('time');

Now we need to create a function that get the current time and format the time as "hh:mm:ss tt"



function getCurrentTime(){
    // Get the current time
    var dateOBJ = new Date();
    // Serialize clock time
    var time = {
        hours:dateOBJ.getHours(),
        minutes:dateOBJ.getMinutes(),
        seconds:dateOBJ.getSeconds(),
        tt:'AM'
    }
    // convert to 12 time
    if(time.hours == 12){
        time.ampm = 'PM';
    }else if(time.hours > 12){
        time.hours -= 12;
        time.tt = 'PM'
    }
    // Prepend a 0 on the hours to make double digits
    if(time.hours < 10){
        time.hours = '0'+time.hours
    }
    // Prepend a 0 on the Minutes to make double digits
    if(time.minutes < 10){
        time.minutes = '0'+time.minutes
    }
    // Prepend a 0 on the Seconds to make double digits
    if(time.seconds < 10){
        time.seconds = '0'+time.seconds
    }

    // Format the click time as a string "hh:mm:ss tt"
    return time.hours + ':' + time.minutes + ':' + time.seconds + ' ' + time.tt
}

We've done the first function that gets the current time and return it formatted as "hh:mm:ss tt"

Now, every second get the current time, so, we'll use a built-in method setInterval(function, milliseconds) calls a function or evaluates an expression at specified intervals (in milliseconds).



// We added this for work on page open
var time = getCurrentTime();
timeEl.innerText = time;

setInterval(function(){

    // GET TIME STRING
    var time = getCurrentTime();
    // Replace the current text
    timeEl.innerText = time;

},1000);

we've finished our Js file it should be looks like.



var timeEl = document.getElementById('time');
// We added this for work on page open
var time = getCurrentTime();
timeEl.innerText = time;

setInterval(function(){

    // GET TIME STRING
    var time = getCurrentTime();
    // Replace the current text
    timeEl.innerText = time;

},1000);


function getCurrentTime(){
    // Get the current time
    var dateOBJ = new Date();
    // Serialize clock time
    var time = {
        hours:dateOBJ.getHours(),
        minutes:dateOBJ.getMinutes(),
        seconds:dateOBJ.getSeconds(),
        tt:'AM'
    }
    // convert to 12 time
    if(time.hours == 12){
        time.ampm = 'PM';
    }else if(time.hours > 12){
        time.hours -= 12;
        time.tt = 'PM'
    }
    // Prepend a 0 on the hours to make double digits
    if(time.hours < 10){
        time.hours = '0'+time.hours
    }
    // Prepend a 0 on the Minutes to make double digits
    if(time.minutes < 10){
        time.minutes = '0'+time.minutes
    }
    // Prepend a 0 on the Seconds to make double digits
    if(time.seconds < 10){
        time.seconds = '0'+time.seconds
    }

    // Format the click time as a string "hh:mm:ss tt"
    return time.hours + ':' + time.minutes + ':' + time.seconds + ' ' + time.tt
}

Now, try it open the index.html file in a browser and you will see the following below without any style.

Wow, so far so good, now we need to style our pretty clock.
In our index file.



<style>
    body{
        background-size: cover;
        height: 100%;
        font-family: 'Fjalla One', sans-serif;
        text-align: center;
        color: #fff;
        text-shadow: 0px 5px 0px #6d6d6d;
        font-size: 100px;
        padding: 30px;
        background-color: #25beec;
    }
</style>

We've finished our tutorial.
I hope it'll be helpful for you.

Code on Codepen.