NumPy = TypedArrays + Array Methods
NumPy ndarrays and TensorFlow.js tensors are the same concept — typed, shaped, contiguous memory buffers with vectorized math operations.
If you've used Float32Array or tf.tensor, you already understand NumPy. It's the same idea: a typed buffer of numbers with a shape and fast math. The function names are even similar.
NumPy is the bedrock of Python's ML ecosystem. Every PyTorch tensor, every pandas DataFrame, every scikit-learn model uses NumPy under the hood. The good news: you already know its equivalent. TensorFlow.js tensors and NumPy arrays share the same lineage and nearly the same API.
Learning Objectives
- ○Map NumPy array operations to TensorFlow.js tensor operations
- ○Understand broadcasting rules (identical in NumPy and TF.js)
- ○Read NumPy slicing and indexing syntax
- ○Translate NumPy reshape, concatenate, and math operations to TF.js
Creating Arrays
Frontend
Float32Array + Array methods
const a = new Float32Array([1,2,3]); a.map(x => x * 2)Machine Learning
NumPy ndarray
a = np.array([1,2,3]); a * 2import numpy as np
# Create arrays
a = np.array([1, 2, 3, 4]) # tf.tensor([1, 2, 3, 4])
b = np.zeros((3, 4)) # tf.zeros([3, 4])
c = np.ones((2, 3)) # tf.ones([2, 3])
d = np.random.randn(3, 4) # tf.randomNormal([3, 4])
e = np.arange(0, 10, 2) # tf.range(0, 10, 2)
f = np.linspace(0, 1, 5) # tf.linspace(0, 1, 5)import * as tf from '@tensorflow/tfjs';
const a = tf.tensor([1, 2, 3, 4]);
const b = tf.zeros([3, 4]);
const c = tf.ones([2, 3]);
const d = tf.randomNormal([3, 4]);
const e = tf.range(0, 10, 2);
const f = tf.linspace(0, 1, 5);The names are almost identical. np.zeros becomes tf.zeros. np.ones becomes tf.ones. The main difference: NumPy uses tuples (3, 4) for shapes; TF.js uses arrays [3, 4].
Shape, Reshape, Transpose
# NumPy
a = np.random.randn(6, 8)
print(a.shape) # (6, 8)
b = a.reshape(2, 3, 8) # reshape to 3D
c = a.T # transpose
d = a.flatten() # flatten to 1D
# TF.js equivalents:
# a.shape → [6, 8]
# a.reshape([2, 3, 8]) → reshape to 3D
# a.transpose() → transpose
# a.flatten() → flatten to 1DBroadcasting
Broadcasting rules are identical in NumPy and TF.js. When arrays have different shapes, both libraries automatically expand dimensions to make operations work.
# NumPy
a = np.array([[1, 2, 3],
[4, 5, 6]]) # shape (2, 3)
b = np.array([10, 20, 30]) # shape (3,)
result = a + b # broadcasts b across rows
# [[11, 22, 33],
# [14, 25, 36]]
# TF.js — identical behavior
# const a = tf.tensor2d([[1,2,3],[4,5,6]]);
# const b = tf.tensor1d([10, 20, 30]);
# const result = a.add(b);Slicing and Indexing
NumPy's slice syntax is more compact, but the logic maps directly to TF.js slice and gather.
a = np.array([[1, 2, 3],
[4, 5, 6],
[7, 8, 9]])
a[0] # [1, 2, 3] → tf.slice(a, [0, 0], [1, 3])
a[:, 1] # [2, 5, 8] → tf.gather(a, 1, axis=1)
a[1:3, 0:2] # [[4,5],[7,8]] → tf.slice(a, [1, 0], [2, 2])
a[a > 5] # [6, 7, 8, 9] → tf.booleanMaskAsync(a, a.greater(5))Common Math Operations
# NumPy # TF.js
np.sum(a) # tf.sum(a)
np.mean(a, axis=0) # tf.mean(a, 0)
np.max(a) # tf.max(a)
np.dot(a, b) # tf.dot(a, b)
np.matmul(a, b) # tf.matMul(a, b)
np.exp(a) # tf.exp(a)
np.log(a) # tf.log(a)
np.sqrt(a) # tf.sqrt(a)
np.clip(a, 0, 1) # tf.clipByValue(a, 0, 1)Challenge
Translate NumPy operations to their TensorFlow.js equivalents.
Exercise
NumPy Operations in TensorFlow.js
Translate these NumPy operations to TensorFlow.js. You're given a set of commented NumPy operations — implement each one using the tf.* API. The operations cover creation, reshaping, math, and broadcasting. All functions should return tensors.
Key Takeaways
- ✓NumPy ndarrays and TF.js tensors are the same concept — typed, shaped number buffers
- ✓Creation functions map almost 1:1: np.zeros → tf.zeros, np.ones → tf.ones
- ✓Broadcasting rules are identical in both libraries
- ✓Shape tuples (3, 4) in NumPy become shape arrays [3, 4] in TF.js