Forem: Ahmad Mukahal

LinkedList Implementation of the most critical methods using Java generics.

Ahmad Mukahal — Sun, 10 Jul 2022 13:31:30 +0000

Introduction

Hi guys!
In this post, I will explain the LinkedList data structure Briefly and try to implement its most critical methods using Java programming language. So, you will know how it works in the memory and how it implements its main methods.
We will implement it using Java's generics, so, we can store any type of data on our LinkedList.

Linked List

A Linked List Is Linear Data Structure that store values in nodes. Each node contains two parts: Data and Reference for the next node.

Linked list is the second most-used data structure after array. Following are the important terms to understand the concept of Linked List.

Node: Each node of a linked list can store data called an
element.
Next: Each node of a linked list contains a link(Reference) to
the next node is called Next.
Head: Each LinkedList contains a head that points to the first
node in the list and to NULL if the list is empty.

This image will illustrate the Linked List concepts:

Basic Operations

Insertion: Adds an element to the LinkedList.
Deletion: Delete an element from the LinkedList.
Get: Get the element's data specified in an array-like index (0-length)
Clear: Clear the LinkedList and make it empty.

Now we will start implementing all these operations in Java from scratch.

Node class

First, we will define the Node class that contains two parts: data and next

class Node<T> {
        T nodeData;
    Node<T> next; // points to the next node

// Constructor to instantiate the node object with default values
        Node(T data) {
       this.nodeData = data;
       next = null;
    }
  }

LinkedList class

Second, we will define the LinkedList class that contains:

head: Object of type Node.
length: An integer value (length of the list).

public class MyLinkedList<T> {
    Node<T> head;
    private int length = 0;
// Constructor 
MyLinkedList() {
        this.head = null;
    }
}

Now we will start implementing the basic operations

Insertion

Insert has two methods:
First public final void add(T data) insert to the end of the list
And
public final void add(T data, int pos) Inserts in Specific Position.

// Insert on the end of the LinkedList
    // Complexity: O(n)
    public final void add(T data) {
        Node<T> newNode = new Node<T>(data);

        if(this.head == null) {
            this.head = newNode;
            newNode.next = null;
        } else {
            Node<T> pointer = this.head;

            while (pointer.next != null) {
                pointer = pointer.next;
            } 

            pointer.next = newNode;  
            newNode.next = null;
        }
        this.length++;
    }
    // Insert in Specific Position
    // Complexity: O(n)
    public final void add(T data, int pos) {
        if(pos == 0) {
            this.addFirst(data);
            return;
        }
        if(pos < 0 || pos > this.length) {
            System.out.println("Error: Out of range");
        } else {
            Node<T> newNode = new Node<T>(data);
            Node<T> pointer = head;

            for(int i = 1; i < pos; i++) {
                pointer = pointer.next;
            }
            newNode.next = pointer.next;
            pointer.next = newNode;
            this.length++;
        }
    }

    // Insert First (begging of the list)
    public final void addFirst(T data) {

        Node<T> newNode = new Node<T>(data);

        newNode.next = head;
        head = newNode;
        this.length++;
    }

Deletion

// Delete from last of LinkedList 
    // Complexity: O(n)
    public void remove() {
        if(isEmpty()) {
            System.out.println("Sorry, List is empty!!");
        } else if(this.length == 1) {
            head = null;
            System.out.println("Removed Successfully");
            this.length = 0;
        } else {
            Node<T> pointer = head;

            while(pointer.next.next != null) {
                pointer = pointer.next;
            }
            pointer.next = null;
            this.length--;
            System.out.println("Removed Successfully");
        }
    }
    // Remove LinkedList Element from specific position
    // Complexity: O(n)
    public void remove(int pos) {
        if(pos < 0 || pos >= length) {
            System.out.println("Error: Position is out of range");
        } else if (pos == length - 1) {
            remove();
        } else {
            if (pos == 0) {
                removeFirst();
                return;
            }
            Node<T> pointer = head;

            for(int i = 1; i < pos; i++) {
                pointer = pointer.next;
            }
            pointer.next = pointer.next.next;
            length--;
        }
    }
    // Remove the first element in the LinkedList
    public void removeFirst() {
        head = head.next;
        length--;
    }
    // Get LinkedList element's Data for specific Index
    // Complexity: O(n)
    public T get(int index) {
        if(index < 0 || index >= length) {
            return  null;
        }
        Node<T> pointer = head;
        for(int i = 0; i < index; i++) {
            pointer = pointer.next;
        }
        return pointer.nodeData;
    }

Get

This method returns the data contained by the node specified by the index parameter.

// Get LinkedList element's Data for specific Index
    // Complexity: O(n)
    public T get(int index) {
        if(index < 0 || index >= length) {
            return  null;
        }
        Node<T> pointer = head;
        for(int i = 0; i < index; i++) {
            pointer = pointer.next;
        }
        return pointer.nodeData;
    }

Clear

public final void clear() {
        this.head = null;
        length = 0;
    }

Additional methods

// Get LinkedList Length
    public int getLingth() {
        return this.length;
    }
    // Return true if the LinkedList is empty
    public boolean isEmpty() {
        if (this.length == 0) return true;
        return false;
    }

    // Convert LinkedList to string
    // Complexity: O(n)
    public String toString()
    {

        String S = "{ ";

        Node<T> X = head;

        if (X == null)
            return S + " }";

        while (X.next != null) {
            S += String.valueOf(X.nodeData) + " -> ";
            X = X.next;
        }

        S += String.valueOf(X.nodeData);
        return S + " }";
    }

Print method

// Print all List elements
    // Complexity: O(n)
    public final void print() {
        Node<T> pointer = head;

        while (pointer != null) {
            System.out.println(pointer.nodeData);
            pointer = pointer.next;
        }
    }

Hope this post is helpful.

I'm sorry if I made any mistakes, and thank you for reading.

BR
Ahmad Mukahal.

Association in OOP

Ahmad Mukahal — Sun, 29 May 2022 20:38:34 +0000

Association in OOP is a connection or relation between two separate #classes that are set up through their #objects. Association relationship indicates how objects know each other and how they are using each other’s functionality. It can be one-to-one, one-to-many, many-to-one, and many-to-many.

For example, a person can have only one passport. That is a “one-to-one” relationship between person class and passport class.
And so on;

- Two Forms of Association

Composition and Aggregation are the two special forms of association, both of them have a "has-a" relationship. let's check them out:

1- Composition
It simply means that one large object contains the other smaller object. In other words, it’s part or member of the larger object.
For example, a building (large object) #has rooms (smaller object).

2- Aggregation
Aggregation is also a “has-a” relationship, It is like a composition with Minor logical differences:

- Aggregation vs Composition

1. Dependency:
Aggregation implies a relationship where the child can exist independently of the parent. For example, Bank and Employee, delete the Bank and the Employee still exist. whereas Composition implies a relationship where the child cannot exist independent of the parent. For example: if the building is destroyed the room is destroyed but the building will still exist!

2. Type of association:
Composition is a strong Association whereas Aggregation is called a weak Association.

JavaScript factory functions and Object.create()

Ahmad Mukahal — Fri, 14 Jan 2022 13:52:23 +0000

Do you know JavaScript factory function and its issues, and why we use Object.create() method instead?

Hello 🖐,

Factory functions in JS are any function that return an object.

like this one:

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName,
        getFullName() {
            return firstName + ' ' + lastName;
        }
    }
}
const person1 = createPerson("Ahmad", "Mukahal");
const person1 = createPerson("john", "Deo");

and so on...

With the factory function, you create any number of the person objects you want without duplicating code.

What if we have one thousand persons? It will store a thousand objects in the memory heap! and this is not an efficient way.

Example:
Each object will have a different address in the memory and every object will have the getFullName() method, Ooh no, I'm not DRY!!

This is why the Object.create() method comes into play.

The Object.create() method creates a new object using an existing object as the prototype of the new object:

const person = {
firstName : "John",
lastName: "Deo",
getFullName() {
            return firstName + ' ' + lastName;
        }
}

// Make prototype chain:

const me = Object.create(person);

so, now me object has all properties and methods in person object, and it can hold its own props and methods and override props and methods as you want like this:

console.log(me.firstName) // John
me.firstName = "Ahmad";
me.lastName = "Mukahal";
console.log(me.firstName) // Ahmad

What efficient is that !!

Hopefully enjoyed reading.

Ahmad Mukahal 🌹

JavaScript is a single threaded "Synchronous", What does that mean?!

Ahmad Mukahal — Fri, 24 Dec 2021 13:48:00 +0000

Hello everyone, in this article I will give you the mean of single threaded javascript.

First, let's talk about the JavaScript engine in brief way.

A JavaScript engine is a software component that executes JavaScript code, Its consists of many steps and components to allow it perform it's tasks.

The two main important things in this step are:

1- We need to store and write information/data for our application (variables, objects, etc..).

2- We need to keep track of what's happening to our code line by line.

This is where a Call stack and Memory heap comes in.

This image explain this two component in graphical way :

1. Call stack:

Help to know where we are in the code and to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
To know more about call stack and how it is work exactly, I recommend this tutorial for you.

2. Memory heap:

The memory heap, also called the ‘heap’, is a section of unstructured memory that is used for the allocation of objects and variables, so it is where our variables and functions stores Briefly.
To deep in heap from here

After that, back to our main subject, "Javascript is a single threaded programming language" which means it has only one call stack that is used to execute the program, so one set of instructions is executed at a time, it's not doing multiple things.
And because of that JavaScript is Synchronous.

So if you understand what is single threaded means, it's the same concept with Synchronous JavaScript "one thing at a time".

This approach of programming lead to make many problems, so the direction now to use another way of JavaScript called "Asynchronous" programming.
I will make to it another article in the come in days.

Hope you clearly understand this important concepts as a JavaScript developer! 🙌🌹

Ahmad Mukahal

Complete guides to React useReducer() Hook

Ahmad Mukahal — Sun, 05 Sep 2021 13:51:44 +0000

useReducer() is a React.js Hook which manage complex state in your application and update it based on the 'action' you send to.
It's used as an alternative for useState if you have a complex states or can be used both together according to your application requirements.
It's very similar to Redux if you want to not use a 3rd-party library.

First

You should import useReducer from react js

import React, { useReducer } from 'react';

Second :

useReducer Hook accepts a reducer function, and an initial state.
It's returns an array with 2 values:
The first one is the state value, and the second value is the dispatch function which is used to trigger an action with the help of ES6 destructuring.

const [state, dispatch] = useReducer(reducer, initialState);

initialState :

The initial state that we want to start working on it

reducer :

Which we'll use to manipulate our state.

Let's go with simple example

Let's say you're displaying some products in your app, and you want to :

Add a product to the cart when user click on add to cart button and list it in cart page.
Remove the product from cart list if the user click on remove from cart button.
User can switch the application (dark/light mode)

Create Reducer.js component to add our reducer in it.

How to use it ?

Firstly, we will define the reducer function that will manipulate our state:

// Reducer.js
const reducer = (state, action) => {
  // reducer function accepts two arguments 
  /* 
   the first one is `state` which is going to be the state 
   before the update.
  */ 
  /* 
   the second one is `action` which is what are we trying to do.
  */ 
}

export default reducer;

Second step, we will define the initial state object which contains our initial values :
1- cart array property which holds products user added to his/her cart.

2- mode property which holds the app mode and it's by default will be light.

We'll put those in our file, but outside of the component:

// Reducer.js
export const initialState = {
    cart: [],
    mode: 'light'
};

const reducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state,
                cart: [...state.cart, action.item]
            };

        case 'REMOVE_FROM_CART':
            const index = state.cart.findIndex(item => action.id === item.id);
            let newCart = [...state.cart];
            if (index >= 0) {
                newCart.splice(index, 1);
            }

            if (newCart.length === 0) {
                return {
                    ...state,
                    cart: newCart,
                }
            } else {
                return {
                    ...state,
                    cart: newCart,
                }
            };
        case 'CHANGE_MODE':
            return {
                ...state,
                mode: action.mode
            }
        default: return state
    }

}

export default reducer;

Now, let's imagine we have a Product.js component that return a products to be displayed in your app.

// Product.js
import React from 'react'

function Product({ name, image }) {
    const addToCart= () => {
        // some code
    }
    return (
        <div className="product">
            <img src={`${image}`} />
            <p>{name}</p>
            <button onClick={addToCart}>add to cart</button>
        </div>
    )
}

export default Product

The fourth step, our reducer is all setup, now let's define then use it. To be able to use the reducer function you must define it in everywhere you need like so:

import React, {useReducer} from 'react'
import reducer, {initialState} from './Reducer';

function Product({ name, image }) {
    const [state, dispatch] = useReducer(reducer, initialState) ;
    .
    .
    .

Firstly you need to import useReducer from React, then import the reducer and initialState to be used.
Now we will define our reducer using useReducer() hook

const [state, dispatch] = useReducer(reducer, initialState) ;

The useReducer hook will return two things in an array: the state, and a dispatcher to update the state.

We will grab those with array destructuring, similar to state and setState with the useState.

Dispatch actions :

Every time the user clicks on add to cart button, addToCart function will be called to dispatch the action to the reducer function to do some changes in that state.
So, the addToCart function will contains the following code :

const addToCart= () => {
        dispatch({
            type: 'ADD_TO_CART',
            item: {
                image,
                name
            }
        })
    }

We sent the action name to the reducer function to know what kind of changes will be happened, in this case the action is ADD_TO_CART action. Also we sent the item or the product which user need to add to the card to be added to the state.cart array.

So, the Product.js component will be :

import React, {useReducer} from 'react'
import reducer, {initialState} from './Reducer';

function Product({ name, image }) {
    const [state, dispatch] = useReducer(reducer, initialState) ;
    const addToCart= () => {
        dispatch({
            type: 'ADD_TO_CART',
            item: {
                image,
                name
            }
        })
    }
    return (
        <div className="product">
            <img src={`${image}`} />
            <p>{name}</p>
            <button onClick={addToCart}>add to cart</button>
        </div>
    )
}

export default Product

We will be satisfied with ADD_TO_CART, others actions will be the same but with deferent functionality

Accessing state

Now you can accessing the state and make on it anything you want like mapping cart array and so on.

Conclusion

useReducer Hook is extremely useful when working on complex and different states depend on each other.
useReducer is very similar to Redux if you want to not use a 3rd-party library or if it's only for a component or two.

Hope this article helped you to understand useReducer hook what is exactly.

Thanks for reading 🙌
-Ahmad Mukahal

React Context API - Why, How and When ? With full example.

Ahmad Mukahal — Mon, 16 Aug 2021 10:11:00 +0000

Hello everybody, in this article we are gonna go deeper and deeper in some React more complex topics like state management, let's get going ...

One of the most important features about React is that we have a lot of different ways to solve any problem we face. And one of this problems we might have is 'State Management' issues in React.

First, let's say we building an e-commerce app, so we want to display a list of products and we want to have a navigation bar in a head, so let's make a component with the products list first ProductList.js.

So I'm just created a new React component with ProductList.js name.

Now, we need a state Hook to store our products list array on objects form, I just want tow properties in each product object, it's productName and productIamge.

So now, I just want to render this products as a cards using some CSS and products.map() method so you can imagen this cards listed in a screen like so.

We know that one of the concepts of React is you can split your app into components for reusability purposes and to be more maintainable code. So we want to make another component called Product.js that receives product image and name as a prop and return this products one by one to be rendered :

and calls this component inside products.map() method in ProductList.js like so :

Now, I want create a navbar in a top of our app that contain my name and the number of products I have in my list, so I will create Nav.js component and render it in our App.js component with some css ..

Ok, everything is fine ..
Now I want to render the number of products I have in the ProductList.js to Nav.js component and I can't do that !!
Because I have rendered the Nav component in the App.js that not have an access to our state in ProductLis.js component and the only way to do that is to passing the state length down to props ..
The only way is we will render the Nav.js component in our ProductList.js component like so :

But I don't want to render the Nav.js here ! it's make no sense to have the navbar in my ProductList.js so we will fix this in take the state from ProductList.js, cut it, and move it up to App.js (the parent component) like so :

In this way, now we can pass down the products to our navbar and products list, so we can pass it to any component we want.

But, the problem with that we will have a lot of state in our App.js component that doesn't belong to App.js component, so this will work, but will be a bit difficult, Why?

Because if we also want to pass down props we're gonna have Prop Drill.

What is Prop Drilling ?
It's basically means we will pass props down from component to components to components to components until we arrives the component we want..
So we would have keep passing the props over and over and over again..!

So in our example, we will passing the products state :
1- from App.js to ProductList.js component
2- from ProductList.js to Product.js component
3- from App.js to Nav.js component
4- and more and more ..

It's a big problem that's effects the app performance and make it hard to read, understand and to be edited.

So we will go back and pass everything back up so the way we were in the first place.

So The way to fix the "Prop drilling issue" is with State Management.

React offers a way to manage our state which is called context. The way this works is rather than adding the state in particular component, we can separate that logic into one component called Context Component that's holds all information, then with the context we can pass it down to which every component we want without going to props.

So let's take a look how we can do that, I will create a new file and I gonna call this ProductsContext.js.
Inside this file I gonna import React from 'react'
and make a new component ProductsProvider as ES6 function component and export it but not default because I want export tow different things from this component like so : (I will explain everything don't worry)

Now, what we want to do ?

First step :
I will move our products state from ProductList.js component to ProductsProvider component and import useState in it like this :

Second step :
Now, we want create our context, the first step to create any React context is with createContext function from react:

createContext

To start with the Context API, the first thing we need to do is create a context using the createContext function after we import it from React like so :
import {createContext} from 'react' ;.
The second thing is to create our context like so:
export const ProductsContext = createContext(initialValue);

** The createContext function accepts an initial value, but this initial value is not required.

After creating the context, our context now has tow React components to be used: Provider and Consumer.

Provider :
The Provider component is going to be used to wrap the components that are going to have access to our context, such as Product.js and Nav.js who are the children of App.js component in our example.
So, we will import our productsProvider in App.js component first, then we will use it to wrap other components we want to give an access to the context like so :

So now everything in the productsProvider are easily accessible for Product.js and Nav.js.

Now, we will go back to our ContextProvider component and make some changes in our ProductsProvider function.
In this function we will make it receives a prop that holds consumers children and return the ProductsContext.Provider component like so :

<ProductsContext.Provider value={products}> {prop.children} </ProductsContext.Provider>

The Provider component receives a prop called value, which can be accessed from all the components that are wrapped inside Provider, and it will be responsible to grant access to the context data.
The component will be like this after this changes :

**{prop.children} represents the components wrapped inside the ProductsProvider component in App.js.

So, how we can use our context now ?
Third step :

useContext#

React has a built-in hooks such as useState, useCallback, useEffect, etc. But the one that we’re going to talk and learn more about here is the useContext hook.

The useContext hook allows us to connect and consume a context. The useContext hook receives a single argument, which is the context that you want to have access to.

So, first we must import our context which is already defined from previous steps in the component we want to consume this context :
import {ProductsContext} from './ProductsContext';
and then we must import useContext from react :
import {useContext} from 'react';

I will use the context in ProductList.js first
So, I will say
const products = useContext(ProductsContext); like so :

Now, if we console.log(products) will get an array of objects that contains this products data and we can use it as we like and everywhere without using props !!
Congratulations 😍✌

Now, we can use this data and display products in our app, display the number of products we have in Nav.js component very fast like so.

ProductList.js :

Nav.js :

Conclusion

In this article, we learned more about the React Context API. The Context API came to solve problems that we were having in React applications. One of the most important is prop-drilling issue. We created a simple example using the React Context API. Also, we were learned how to use the useContext hook.

I hope you will forgive me if there are any mistakes.
Don't forget to support me 🙌🌹
Best wishes ❤

Forem: Ahmad Mukahal

LinkedList Implementation of the most critical methods using Java generics.

Introduction

Linked List

Basic Operations

Node class

LinkedList class

Insertion

Deletion

Get

Clear

Additional methods

Print method

Association in OOP

- Two Forms of Association

- *Aggregation vs Composition *

JavaScript factory functions and Object.create()

JavaScript is a single threaded "Synchronous", What does that mean?!

Complete guides to React useReducer() Hook

First

Second :

initialState :

reducer :

Let's go with simple example

How to use it ?

Dispatch actions :

Accessing state

Conclusion

React Context API - Why, How and When ? With full example.

createContext

useContext#

Conclusion

- Aggregation vs Composition