DEV Community: Arafat Ahmed

ArrayBuffer in JS

Arafat Ahmed — Sun, 08 Dec 2024 18:32:23 +0000

Introduction

Array Buffer is part of the Binary Data API introduced in ECMAScript 6 which is commonly used to handle Binary Data such as files, images, audio, and any other raw binary data buffer.

Constructor

The ArrayBuffer() constructor creates ArrayBuffer objects.

const buffer = new ArrayBuffer(<number>)

When constructing an Array Buffer, the JavaScript engine requests a block of bytes from the System’s Memory. This allocation occurs in the heap, a region of memory used for dynamically allocated objects in most programming languages. Allocation for ArrayBuffer is guaranteed to be contiguous in memory.

For example:
If the starting address is 0x1000, the memory addresses for an 8-byte ArrayBuffer would look like this:

Address	Content
0x1000	Byte 1
0x1001	Byte 2
0x1002	Byte 3
0x1003	Byte 4
0x1004	Byte 5
0x1005	Byte 6
0x1006	Byte 7
0x1007	Byte 8

So if we replace 'number' by 8 then the outcome will be

const buffer = new ArrayBuffer(8); // Creates a buffer with 8 bytes
console.log(buffer.byteLength); // Output: 8

Example with Sequential Access

Here's how we can observe the sequential nature of memory in practice:

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer); // 1-byte view for each element

// Fill the buffer with data
for (let i = 0; i < view.length; i++) {
  view[i] = i + 1; // Assign values 1, 2, 3, ..., 8
}

console.log(view); // Output: Uint8Array(8) [1, 2, 3, 4, 5, 6, 7, 8]

Manipulation

Unfortunately/fortunately JS doesn’t provide the pointer. So, we can't manipulate ArrayBuffer directly using the memory address, and it doesn’t provide a method to manipulate data.
Instead, we must use Typed Arrays or DataView to interpret and manipulate data.

Using Typed Arrays

const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
const view = new Int32Array(buffer); // Create a view for 32-bit integers

view[0] = 42; // Store the value 42 in the first 4 bytes (32 bits)
view[1] = 256; // Store 256 in the next 4 bytes

console.log(view[0]); // Output: 42
console.log(view[1]); // Output: 256
console.log(view.length); // Output: 2 (because it's an Int32Array)

Using DataView

const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
const view = new DataView(buffer); // Create a DataView for arbitrary manipulation

view.setUint8(0, 255); // Store 255 in the first byte
view.setUint16(1, 65535); // Store 65535 in the second and third bytes (big-endian by default)
view.setFloat32(4, 3.14); // Store 3.14 starting at the 5th byte

console.log(view.getUint8(0)); // Output: 255
console.log(view.getUint16(1)); // Output: 65535
console.log(view.getFloat32(4)); // Output: 3.14

Array Buffer reads its bits from right to left

const buffer = new ArrayBuffer(8);
const view = new Int8Array(buffer);
view[0] = 1;  //00000001  first 8 bits
view[1] = 1;  // 00000001 second 8 bits
console.log(view[0]); // 1
console.log(view[1]); // 1

const view2 = new Int16Array(buffer); // Here we change the access method for buffer
console.log(view2[0]); // 0000000100000001 = 257
console.log(view2[1]); // 0

One interesting question is whether overflow happens in ArrayBuffer.
Answer is NO

JavaScript doesn’t crash or corrupt memory when you attempt out-of-bounds access. Instead:

Read Access: Returns undefined.
Write Access: Does nothing silently.

Example:

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);

view[10] = 42; // No error, but it does nothing
console.log(view[10]); // Output: undefined

Conclusion

Mastering ArrayBuffer empowers developers to handle raw binary data with precision and efficiency. Whether we're processing file I/O, implementing custom binary protocols, or working with performance-critical applications like WebAssembly and multimedia processing, ArrayBuffer serves as an essential tool. Its seamless integration with TypedArrays, DataViews, and Web APIs ensures that JavaScript remains capable of tackling even the most demanding binary data tasks. By leveraging ArrayBuffer, developers can unlock new possibilities in performance optimization and advanced data manipulation.

Compound Component Design Pattern in React

Arafat Ahmed — Tue, 13 Jun 2023 14:06:59 +0000

Compound component

Compound component is a design pattern in React
that allows you to create reusable components that
encapsulate logic and state.

This can make your code more modular and easier to maintain.

The compound pattern can be a powerful tool for creating reusable and maintainable React components.

Here are some of the benefits of using compound components:

Modular code: Compound components can help you break down your code into smaller, more manageable pieces. This can make your code easier to understand, test, and maintain.
Reusable code: Compound components can be reused in multiple places throughout your application. This can save you time and effort when developing your application.
Encapsulated state: Compound components can encapsulate state within themselves. This can make your code more predictable and easier to reason about. If you are developing a large React application, I recommend using compound components to help you organize your code and make it more maintainable.

EXAMPLE :

We are going to build a Tab component here to demonstrate the
Compound component design pattern.

import React, { useState } from "react";

import Tab from "./Tab";

function App() {
  const [currentTab, setCurrentTab] = useState(0);
  const handleCurrentTab = (tabIndex) => {
    setCurrentTab(tabIndex);
  };

  return (
    <div className="App">
      <Tab value={currentTab} onChange={handleCurrentTab}>
        <Tab.Heads>
          <Tab.Item label="Tab 1" index={0} />
          <Tab.Item label="Tab 2" index={1} />
          <Tab.Item label="Tab 3" index={2} />
        </Tab.Heads>

        <Tab.ContentWrapper>
          <Tab.Content index={0}> Content 1 </Tab.Content>
          <Tab.Content index={1}> Content 2 </Tab.Content>
          <Tab.Content index={2}> Content 3 </Tab.Content>
        </Tab.ContentWrapper>
      </Tab>
    </div>
  );
}

export default App;

This App.js file contains the presentation structure of the Tab Component.

The Tab component has four children:

Tab.Heads component : The Tab.Heads component is responsible for rendering the tab header.
Tab.Item component : The Tab.Item component is used to render the tab label.
Tab.ContentWrapper component : The Tab.ContentWrapper component is responsible for rendering the content areas.
Tab.Content component: The Tab.Content component is responsible for rendering the content for a specific tab.

import React, { useContext, createContext } from "react";

const TabContext = createContext();

export default function Tab({ children, value, onChange }) {
  return (
    <TabContext.Provider value={{ value, onChange }}>
      {children}
    </TabContext.Provider>
  );
}

const Heads = ({ children }) => <div> {children} </div>;

const Item = ({ label, index, children }) => {
  const { onChange } = useContext(TabContext);
  const handleClick = () => {
    return onChange(index);
  };

  return <div onClick={handleClick}> {label} </div>;
};

const ContentWrapper = ({ children }) => <div> {children} </div>;

const Content = ({ children, index }) => {
  const { value } = useContext(TabContext);

  return index === value ? <div> {children} </div> : null;
};

Tab.Heads = Heads;
Tab.Item = Item;
Tab.ContentWrapper = ContentWrapper;
Tab.Content = Content;

This is our Tab.js file where we implement all the logical parts for this component.
The Tab component uses the useContext hook to access the context object.
The Heads component uses the children's prop to render the tab labels.
The Item component uses the label, index, and children props to render a tab label and a content area.
The ContentWrapper component uses the children's prop to render the content areas.
The Content component uses the children and index props to render the content for a specific tab.
Here we decouple our Content and Item component in such a way that we can pass any component as content or tab item.

Execution Context

Arafat Ahmed — Thu, 08 Jun 2023 18:38:03 +0000

Execution Context

A theoretical environment created by JS for code evaluation and execution.

Three types of execution in JS:

Global Execution Context: Primary or base execution context, has 2 main functions:
- Create a global object
- Attach the this value to the global object
Function Execution Context: The execution context created for every function invocation (created when a function is called).
Eval Execution: This is not important and I haven't clear idea about this.

Execution ( Call ) Stack

STEP 1: Global execution context is pushed on the Call stack.
STEP 2: Function execution context is created and pushed on the Call stack when a function is called.
STEP 3: The invoked function is executed and removed from the stack, along with its execution context.

Example:

function person(){
 sayName();
}

function sayName(){
 console.log("Arafat Ahmed");
}

// invoke the ‘person ‘ function
person();

Step 1:





global()

Step 2:



person()
global()


sayName()
person()
global()

Step 3:



person()
global()




global()

Execution context

This execution is completed in 2 stages:

Creation stage,
Execution stage

Each step has 2 parts:

Lexical environment
- Has 3 components:
  - Environment Record
  - Ref to an outer environment
  - this binding
- Is 2 types:
  - Declaration environment record:\ This type is used by a Lexical environment created in the Function execution context.
  - Object environment record:\ A Lexical environment mainly uses this created in the Global execution context.
Variable environment
- The structure is the same as the Lexical environment but this environment is used especially by the var variable statement.

theoretically,

   executionContext = {
       lexicalEnvironment = <ref>,
       variableEnvironment = <ref>
   }

EXAMPLE:

let a = 1;
var b = 2;

function person(){
 sayName("Hello");
}

function sayName(greeting){
 console.log(greeting + " Arafat Ahmed");
}

// invoke the "person" function
person();

execution of this code will end in two stages

Creation stage
Execution stage

Creation Stage

globalExecutionContext:{
    "lexicalEnv":{
        environmentRecord:{
            type: "Object",
            a: <initialization>,
            person: <func>,
            sayName: <func>
        }
        outerEnv: <null>,
        thisBinding: <Global Object>
    },

    "variableEnv":{
        environmentRecord:{
            type: "Object",
            b: <initialization with "undefined">
        },
        outerEnv: <null>,
        thisBinding: <Global Object>
    }
}

When the person function is called, a new Function execution context is created to execute the function code.

functionExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: {length: 0},
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object or undefined>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object or undefined>
    }
}

When the sayName function is called in person function another new Function execution context will created.

functionExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: {0: "Hello", length: 1},
        },
        outerEnv: <Global Env>,
        thisBinding: <Global Object or undefined>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        },
        outerEnv: <Person Env>,
        thisBinding: <Global Object or undefined>
    }
}

Execution Stage

globalExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Object",
            a: 1,
            person: <func>,
            sayName: <func>
        }
        outerEnv: <null>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Object",
            b: 2
        },
        outerEnv: <null>,
        thisBinding: <Global Object>
    }
}

functionExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: {},
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    }
}

When the sayName function is called in person function another new Function execution context will created.

functionExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: {0: "Hello", length: 1},
        },
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        },
        outerEnv: <Person Env>,
        thisBinding: <Global Object>
    }
}

Now, we make a little change to our previous example

let a = 1;
var b = 2;

function person(greeting){
    return function(){
         console.log(greeting + " Arafat Ahmed");
    }
}

const sayName = person("Helo");
sayName();

What will happen?

Creation stage

globalExecutionContext:{
    "lexicalEnv":{
        environmentRecord:{
            type: "Object",
            a: <initialization>,
            person: <func>,
            sayName: <initialization>,
        }
        outerEnv: <null>,
        thisBinding: <Global Object>
    },

    "variableEnv":{
        environmentRecord:{
            type: "Object",
            b: <initialization with "undefined">
        },
        outerEnv: <null>,
        thisBinding: <Global Object>
    }
}

Execution Stage

globalExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Object",
            a: 1,
            person: <func>,
            sayName: <func> //This will create a new context
        }
        outerEnv: <null>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Object",
            b: 2
        },
        outerEnv: <null>,
        thisBinding: <Global Object>
    }
}

functionExecutionContext:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: {0: "Hello", length: 1},
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    }
}

Here a Closure will be created because of the inner anonymous function of the parson function.

closure:{
    lexicalEnv:{
        environmentRecord:{
            type: "Declarative",
            args: { length: 0 },
        }
        outerEnv: <Person Env>,
        thisBinding: <Global Object>
    },

    variableEnv:{
        environmentRecord:{
            type: "Declarative",
        }
        outerEnv: <Global Env>,
        thisBinding: <Global Object>
    }
}

When the execution stage will come the inner function will get access to the execution context of the outer function through its outerEnv.