Quick Guide: Neural Networks using JavaScript

Whether it is a Google Search Engine, Netflix’s recommendation system, YouTube’s suggestions, or Facebook’s automatic photo-tagging, all of them have one thing in common: neural networks. All of the aforementioned services incorporates neural networks in one way or another to accomplish their task. In this article, we will look at what a neural network is and by using JavaScript, the mechanism will be explained as well. So without further ado, let’s get started!

What is a Neural Network?

The formal definition of Neural Network is as follows:

A computer system modelled on the human brain and nervous system.

The fascination of neural network comes from the working of a neuron in a human body. The neuron is shown below:

From the above picture, following are the three things you need to remember:

  • Dendrite(s): They received the information from the other neuron through synapse.
  • Cell Body: Cell body contains the nucleus, which fires the electrical impulse when certain threshold reaches.
  • Axon Terminal(s): They transmit the information fired from the neuron’s nucleus to the other neurons.

Enough Biology! Now let us map the concept of neuron with a neural network. Below is the image shown the simple neural network:

In the above image, following are the things that are significant:

  • Input Layer: It is the layer through which the data is passed. Think of it as the information that is passed through the dendrites of a neuron.
  • Each black line carries a certain weight. Weight in neural networks is simply a number which is multiplied with the information coming from the input layer.
  • One thing to remember here is that the input layer’s information is in the form of tensor. If you want to know more about a tensor, I would highly recommend you to go and find the article titled: Machine Learning: TensorFlow in JavaScript. In that article, I have discussed the tensor as well.
  • In the above simple neural network, we have two layers: hidden layer 1 and hidden layer 2.
  • When there are two or more hidden layers in a neural network, we call it a Deep neural network. It is one of the distinctions between the Deep learning and Machine learning.
  • Now in those hidden layers, there are nodes (white circles). Those nodes are like the nucleus of a neuron. When certain threshold reaches, the neuron fires the signal. Likewise, in those nodes, there are activation functions present. Those activation functions decide whether to fire a neural impulse or not.
  • The last layer is the output layer. It usually classifies the objects (in classification problems especially).
  • One thing to note here is that there exists a bias on each node that helps the neural network to learn effectively. It is simply added to the multiplied result of input tensors and the weights on the black lines coming to each and every node in the above picture.


For doing neural networks in JavaScript, we would require the following tools:

  • Google Chrome or Safari (Any browser you like; I am going to use Safari in the article.)
  • Code Editor (You can use simple Text Editor; however, I am using Visual Studio Code.)
  • XAMPP (Optional; it is used to run the code locally)


The following languages will be used:

  • HTML5
  • JavaScript (for writing a neural network)


For this article, we will use the tensorflow.js library. It is a JavaScript (WebGL based) library by Google used to perform Machine/Deep learning. The following script has to be added in the HTML body to include the TensorFlow in the project:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>

Essential Steps

Almost every neural network follows the following essential steps:

  • Collecting the input data (in tensors form) step
  • Building the neural network model step
  • Training the neural network step
  • Predicting the neural network step
  • Finding Accuracy of the neural network step

Simple Neural Network using JavaScript

This article assumes that you have added the JavaScript of TensorFlow in the HTML file. In this section, we are going to look at the sample neural network in TensorFlow using JavaScript. The official sample code is as follows:

// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
// Generate some synthetic data for training.
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);
// Train the model using the data.
model.fit(xs, ys).then(() => {
  // Use the model to do inference on a data point the model hasn't seen before:
  // Open the browser devtools to see the output
  model.predict(tf.tensor2d([5], [1, 1])).print();

The above code works as follows:

  • First the model is created using tf.sequential(). This function is Keras based function to define the linear regression (dense) model. Again, this article assumes that you have read the article titled Machine Learning: TensorFlow in JavaScript.
  • Next we add one hidden layer in the model by using the add function. In that function, we pass the dense layer, which means that all the input coming are connected with this layer fully.
  • Then we define the loss function and the optimizer. The loss function, in simple terms, is the function that compares the desired output with the current output. In this case we used the mean squared error function as the loss function. Again, it takes the difference of the current output and the desired out, square the resultant and then takes the mean of all the results. The optimizer, on the other hand, is used to minimize the loss. In this neural network, we have used Stochastic Gradient Descent(sgd) as an optimizer function. In this article, just think of it as the function that reduces the loss. In future articles, I shall discuss its functionality in more detail (mathematically).
  • Then the simple input and output data is generated using the tensor2d function.
  • After that we train the data using model.fit function. Once it is trained, then we predict the value 5 against the trained network. One thing to note here is that the then function after model.fit is the Promise (feature of JavaScript).

That is how the general neural network works. In the upcoming articles, I shall discuss other kinds of neural networks that require a bit of mathematics as well as some logic. I hope you learn the basics of the practical neural networks by reading this article. Saying Goodbye… till we meet again! 😊



Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?