Skip to main content

JS Array & Matrix Concepts


JavaScript Array & Matrix Concepts Demo

This demo covers key JavaScript array and matrix operations used in signal processing and general programming.

1. Array Manipulation (1D)


// Original binary array
let inputBits = [0, 1, 1, 0, 1, 0];

// map(): Convert bits to BPSK symbols (0 -> -1, 1 -> 1)
let inputSymbols = inputBits.map(bit => bit===0 ? -1 : 1);
console.log('map():', inputSymbols); // [-1, 1, 1, -1, 1, -1]

// filter(): Split even and odd indices
let s1 = inputSymbols.filter((_, i) => i % 2 === 0); // Even indices
let s2 = inputSymbols.filter((_, i) => i % 2 === 1); // Odd indices
console.log('filter() s1:', s1); // [-1, 1, 1]
console.log('filter() s2:', s2); // [1, -1, -1]

// reduce(): Sum of all bits
let sumBits = inputBits.reduce((sum, b) => sum + b, 0);
console.log('reduce() sum:', sumBits); // 3

// some() / every(): Check conditions
let allValid = inputBits.every(b => b===0 || b===1);
console.log('every() all valid bits?', allValid); // true

2. Pre-allocating Arrays


// Array.from(): Pre-allocate a 2D array for transmitted signals
let numSymbols = inputBits.length;
let transmittedSignals = Array.from({ length: 2 }, () => new Array(numSymbols).fill(0));
console.log('Array.from() 2D array:', transmittedSignals);
/*
[
  [0,0,0,0,0,0],
  [0,0,0,0,0,0]
]
*/

3. Matrix Manipulation (2D)


// Original binary matrix (antennas × time slots)
let bitMatrix = [
  [0, 1, 1],
  [1, 0, 1]
];

// map(): Convert each row to BPSK symbols
let symbolMatrix = bitMatrix.map(row => row.map(bit => bit===0 ? -1 : 1));
console.log('map() 2D matrix:', symbolMatrix);
/*
[
  [-1, 1, 1],
  [1, -1, 1]
]
*/

// flat(): Flatten matrix into 1D array
let flatSymbols = symbolMatrix.flat();
console.log('flat():', flatSymbols); // [-1,1,1,1,-1,1]

// flatMap(): Transform & flatten in one step
let transformedFlat = bitMatrix.flatMap(row => row.map(bit => bit*2));
console.log('flatMap():', transformedFlat); // [0,2,2,2,0,2]

// reduce() per row: sum of each row
let rowSums = bitMatrix.map(row => row.reduce((a,b) => a+b, 0));
console.log('reduce() row sums:', rowSums); // [2,2]

// every() on matrix: check all bits are 0 or 1
let allBitsValid = bitMatrix.every(row => row.every(b => b===0 || b===1));
console.log('every() 2D matrix all valid?', allBitsValid); // true

// Pre-allocate 2D array with Array.from() for matrix
let rows = 2, cols = 3;
let matrixPrealloc = Array.from({ length: rows }, () => new Array(cols).fill(0));
console.log('Array.from() preallocated 2D matrix:', matrixPrealloc);

4. Concepts Summary Table

Concept Similar JS Methods 1D Array Example 2D/Matrix Example
map() → transform each element forEach(), reduce(), flatMap() inputBits.map(bit => bit===0?-1:1) matrix.map(row => row.map(bit => bit===0?-1:1))
filter() → select elements reduce() with condition, some(), every() inputBits.filter((_,i) => i%2===0) matrix.flat().filter((_,i) => i%2===0)
Array.from() → create arrays new Array(length).fill(), spread [...Array(length)], Array.of() Array.from({length:n},()=>0) Array.from({length:rows},()=>new Array(cols).fill(0))
reduce() → combine values array.reduce((acc,val)=>acc+val,0) inputBits.reduce((sum,b)=>sum+b,0) matrix.map(row => row.reduce((a,b)=>a+b,0))
flat() / flatMap() → flatten arrays [].concat(...arrays) [[1,2],[3,4]].flat() → [1,2,3,4] matrix.flatMap(row => row.map(b => b*2))
some() / every() → check conditions logical checks inputBits.every(b => b===0||b===1) matrix.every(row => row.every(b => b===0||b===1)) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array & Matrix Concepts Demo</title>
<style>
body{
    font-family: Arial, sans-serif;
    background:#f4f6f9;
    margin:40px;
}
.container{
    max-width:700px;
    margin:auto;
    background:white;
    padding:30px;
    border-radius:8px;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}
input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:5px;
    margin-top:10px;
}
.message{
    margin-top:12px;
    font-weight:bold;
}
.valid{ color:#2ecc71; }
.error{ color:#e74c3c; }
pre{
    background:#eee;
    padding:10px;
    border-radius:5px;
    overflow-x:auto;
}
</style>
</head>
<body>

<div class="container" id="container">
    <h1>Array & Matrix Concepts Demo</h1>
    <p>Enter numbers separated by commas (example: <strong>1,2,3,4</strong>)</p>

    <input type="text" id="inputArray" placeholder="Enter numbers here">

    <div id="message" class="message"></div>

    <h2>Results:</h2>
    <pre id="results"></pre>
</div>

<script>
const inputField = document.getElementById("inputArray");
const message = document.getElementById("message");
const results = document.getElementById("results");

// Fixed size for 2D array (rows x cols)
const ROWS = 2;
const COLS = 3;

inputField.addEventListener("input", function() {
    const value = inputField.value.trim();
    if(value === "") {
        message.textContent = "";
        results.textContent = "";
        return;
    }

    // Convert input to numerical array
    let numArray = value.split(',').map(item => Number(item.trim()));

    // Validate input
    if(!numArray.every(n => !isNaN(n))) {
        message.textContent = "Only numbers are allowed.";
        message.className = "message error";
        results.textContent = "";
        return;
    }

    message.textContent = "✓ Valid input!";
    message.className = "message valid";

    // 1. map(): double each element
    let doubled = numArray.map(n => n * 2);

    // 2. filter(): get even numbers
    let evens = numArray.filter(n => n % 2 === 0);

    // 3. reduce(): sum of all numbers
    let sum = numArray.reduce((acc, n) => acc + n, 0);

    // 4. some(): check if any number > 10
    let anyLarge = numArray.some(n => n > 10);

    // 5. every(): check if all numbers >= 0
    let allPositive = numArray.every(n => n >= 0);

    // --- Pad numArray for 2D matrix ---
    let matrixArray = [...numArray];
    let totalSize = ROWS * COLS;
    if(matrixArray.length < totalSize){
        matrixArray = matrixArray.concat(Array(totalSize - matrixArray.length).fill(0)); // pad zeros
    } else if(matrixArray.length > totalSize){
        matrixArray = matrixArray.slice(0, totalSize); // truncate
    }

    // 6. Array.from(): create 2D matrix
    let matrix = Array.from({ length: ROWS }, (_, r) =>
        matrixArray.slice(r * COLS, r * COLS + COLS)
    );

    // --- Pad for flatMap ---
    let flatMapArray = [...numArray];
    if(flatMapArray.length < totalSize){
        flatMapArray = flatMapArray.concat(Array(totalSize - flatMapArray.length).fill(0));
    }
    let flatMapped = flatMapArray.flatMap(n => [n, n]);

    // --- Pad for flat() ---
    let flatMatrix = matrix.flat();

    // Display results
    results.textContent = `
Original array: [${numArray}]
map() - doubled: [${doubled}]
filter() - even numbers: [${evens}]
reduce() - sum: ${sum}
some() - any number > 10? ${anyLarge}
every() - all numbers >= 0? ${allPositive}
Array.from() - 2D matrix (padded to ${ROWS}x${COLS}): ${JSON.stringify(matrix)}
flatMap() - duplicate each element (padded if needed): [${flatMapped}]
flat() - flattened matrix: [${flatMatrix}]
    `;
});
</script>

</body>
</html>


Output 

 

People are good at skipping over material they already know!

View Related Topics to







Contact Us

Name

Email *

Message *

Popular Posts

Constellation Diagrams of ASK, PSK, and FSK with MATLAB Code + Simulator

📘 Overview of Energy per Bit (Eb / N0) 🧮 Online Simulator for constellation diagrams of ASK, FSK, and PSK 🧮 Theory behind Constellation Diagrams of ASK, FSK, and PSK 🧮 MATLAB Codes for Constellation Diagrams of ASK, FSK, and PSK 📚 Further Reading 📂 Other Topics on Constellation Diagrams of ASK, PSK, and FSK ... 🧮 Simulator for constellation diagrams of m-ary PSK 🧮 Simulator for constellation diagrams of m-ary QAM BASK (Binary ASK) Modulation: Transmits one of two signals: 0 or -√Eb, where Eb​ is the energy per bit. These signals represent binary 0 and 1.    BFSK (Binary FSK) Modulation: Transmits one of two signals: +√Eb​ ( On the y-axis, the phase shift of 90 degrees with respect to the x-axis, which is also termed phase offset ) or √Eb (on x-axis), where Eb​ is the energy per bit. These signals represent binary 0 and 1.  BPSK (Binary PSK) Modulation: Transmits one of two signals...
Read more

Fading : Slow & Fast and Large & Small Scale Fading (with MATLAB Code + Simulator)

📘 Overview 📘 LARGE SCALE FADING 📘 SMALL SCALE FADING 📘 SLOW FADING 📘 FAST FADING 🧮 MATLAB Codes 📚 Further Reading LARGE SCALE FADING The term 'Large scale fading' is used to describe variations in received signal power over a long distance, usually just considering shadowing.  Assume that a transmitter (say, a cell tower) and a receiver  (say, your smartphone) are in constant communication. Take into account the fact that you are in a moving vehicle. An obstacle, such as a tall building, comes between your cell tower and your vehicle's line of sight (LOS) path. Then you'll notice a decline in the power of your received signal on the spectrogram. Large-scale fading is the term for this type of phenomenon. SMALL SCALE FADING  Small scale fading is a term that describes rapid fluctuations in the received signal power on a small time scale. This includes multipath propagation effects as well as movement-induced Doppler fr...
Read more

BER vs SNR for M-ary QAM, M-ary PSK, QPSK, BPSK, ...(MATLAB Code + Simulator)

📘 Overview of BER and SNR 🧮 Online Simulator for BER calculation of m-ary QAM and m-ary PSK 🧮 MATLAB Code for BER calculation of M-ary QAM, M-ary PSK, QPSK, BPSK, ... 📚 Further Reading 📂 View Other Topics on M-ary QAM, M-ary PSK, QPSK ... 🧮 Online Simulator for Constellation Diagram of m-ary QAM 🧮 Online Simulator for Constellation Diagram of m-ary PSK 🧮 MATLAB Code for BER calculation of ASK, FSK, and PSK 🧮 MATLAB Code for BER calculation of Alamouti Scheme 🧮 Different approaches to calculate BER vs SNR What is Bit Error Rate (BER)? The abbreviation BER stands for Bit Error Rate, which indicates how many corrupted bits are received (after the demodulation process) compared to the total number of bits sent in a communication process. BER = (number of bits received in error) / (total number of tran...
Read more

Theoretical BER vs SNR for BPSK

Theoretical Bit Error Rate (BER) vs Signal-to-Noise Ratio (SNR) for BPSK in AWGN Channel Let’s simplify the explanation for the theoretical Bit Error Rate (BER) versus Signal-to-Noise Ratio (SNR) for Binary Phase Shift Keying (BPSK) in an Additive White Gaussian Noise (AWGN) channel. Key Points Fig. 1: Constellation Diagrams of BASK, BFSK, and BPSK [↗] BPSK Modulation Transmits one of two signals: +√Eb or −√Eb , where Eb is the energy per bit. These signals represent binary 0 and 1 . AWGN Channel The channel adds Gaussian noise with zero mean and variance N₀/2 (where N₀ is the noise power spectral density). Receiver Decision The receiver decides if the received signal is closer to +√Eb (for bit 0) or −√Eb (for bit 1) . Bit Error Rat...
Read more

Understanding the Q-function in BASK, BFSK, and BPSK

Understanding the Q-function in BASK, BFSK, and BPSK 1. Definition of the Q-function The Q-function is the tail probability of the standard normal distribution: Q(x) = (1 / √(2Ï€)) ∫ x ∞ e -t²/2 dt What is Q(1)? Q(1) ≈ 0.1587 This means there is about a 15.87% chance that a Gaussian random variable exceeds 1 standard deviation above the mean. What is Q(2)? Q(2) ≈ 0.0228 This means there is only a 2.28% chance that a Gaussian value exceeds 2 standard deviations above the mean. Difference Between Q(1) and Q(2) Even though the argument changes from 1 to 2 (a small increase), the probability drops drastically: Q(1) = 0.1587 → errors fairly likely Q(2) = 0.0228 → errors much rarer This shows how fast the tail of the Gaussian distribution decays. It’s also why BER drops drama...
Read more

Online Simulator for ASK, FSK, and PSK

Try our new Digital Signal Processing Simulator!   Start Simulator for binary ASK Modulation Message Bits (e.g. 1,0,1,0) Carrier Frequency (Hz) Sampling Frequency (Hz) Run Simulation Simulator for binary FSK Modulation Input Bits (e.g. 1,0,1,0) Freq for '1' (Hz) Freq for '0' (Hz) Sampling Rate (Hz) Visualize FSK Signal Simulator for BPSK Modulation ...
Read more

Pulse Shaping using Raised Cosine Filter (with MATLAB + Simulator)

  MATLAB Code for Raised Cosine Filter Pulse Shaping clc; clear; close all ; %% ===================================================== %% PARAMETERS %% ===================================================== N = 64; % Number of OFDM subcarriers cpLen = 16; % Cyclic prefix length modOrder = 4; % QPSK oversample = 8; % Oversampling factor span = 10; % RRC filter span in symbols rolloff = 0.25; % RRC roll-off factor %% ===================================================== %% Generate Baseband OFDM Symbols %% ===================================================== data = randi([0 modOrder-1], N, 1); % Random bits txSymbols = pskmod(data, modOrder, pi/4); % QPSK modulation % IFFT to get OFDM symbol tx_ofdm = ifft(txSymbols, N); % Add cyclic prefix tx_cp = [tx_ofdm(end-cpLen+1:end); tx_ofdm]; %% ===================================================== %% Oversample the Baseband Signal %% ===============================================...
Read more

Envelope Detector Online Simulator

General Envelope Detector Simulator Modulation Type: AM (with carrier) PAM Message Frequency (fm): Hz Carrier Frequency (fc): Hz Carrier Amplitude (Ac): Modulation Index (m = Am / Ac): Envelope Detection and Amplitude-Based Modulations Envelope detectors are fundamental for amplitude-based modulations because they exploit the fact that the instantaneous amplitude of the carrier encodes the message signal . 1. Why Envelope Detection Works In amplitude modulation (AM), the modulated signal has the form: s(t) = [A_c + m(t)] cos(2Ï€ f_c t) A_c is the carrier amplitude m(t) is the message signal f_c is the carrier frequency The envelope of this waveform is: Envelope = |A_c + m(t)| . An envelope detector (e.g., a diode + RC circuit) follows the peaks of the ca...
Read more