let arr = new ArrayBuffer(8, { maxByteLength: 24 });

console.log(arr.maxByteLength);
arr.resize(28);

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="text-align:center;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <p>
        Size of ArrayBuffer:
    </p>
    <p id="gfg"></p>

    <button onclick="increase()">
        Click here to increase size
    </button>

    <script>
        let arr1 = new ArrayBuffer(22, { maxByteLength: 24 });
        document.getElementById("gfg")
            .innerHTML = arr1.byteLength;

        function increase() {
            console.log("hello");
            if (arr1.byteLength == arr1.maxByteLength) {
                document.getElementById("gfg")
                    .innerHTML = "Maximum capacity reached";
            } else {
                arr1.resize(arr1.byteLength + 1);
                document.getElementById("gfg")
                    .innerHTML = arr1.byteLength;
            }
        }
    </script>
</body>
</html>