What is React.js

Introduction to Web Workers

For websites and web applications, we rely on Javascript to handle logic, interacting with existing HTML and CSS on the page, and even use it to create and add DOM content on styles on our website. Javascript is essential in any developers toolset.





However, as time has gone on, web applications have become more complex. Applications that would've been previously built natively on desktop are now available on the web.



But many applications are now a lot more complex than they were back then. We have single page web applications now that handle multiple pages of content without ever having to refresh the page or go to a different url in the browser. 



Even applications that are still one single page need plenty of complex Javascript for handling the business logic of their page.



As we continue to add more Javascript to our pages, our site needs to handle our Javascript and this could harm the user experience and the performance of a page.



<h2>Javascript by default runs on the main thread</h2>



Javascript that we run on the page by default runs on the main thread. Not just in web applications but also in other applications any code relating to the UI interface is run on the main thread. Why is that important? Because if the main thread is blocked, the user won't be able to interact with the page



<h2>But wait, isn't Javascript asynchronous?</h2>



Javascript is known by many as an asynchronous, non blocking programming language. However there are only certain tasks in Javascript that can be non blocking, such as fetching a request, or running code wrapped in a setTimeout or setInterval function. 



The following lines of code



<pre class="wp-block-code"><code>const some_number = 4;

console.log("Hello");

for(let i = 0; i &lt; some_number; i++) {
 console.log(i);
}</code></pre>



Are synchronous, blocking Javascript. Theres no possibility where the for loop can happen before the declaration of the some_number variable 



However, if we wrap the console.log statement that prints out hello world in a setTimeout with a timeout of 1000ms, you would see that the "Hello" would print to the console after the for loop. setTimeout allowed us to run code that did not block the for loop printing out numbers to the console from running. Since both actions occurred on the same thread the main thread, the console log inside the setTimeout and the for loop do not run at the same time.



<h2>Running Javascript in multiple threads</h2>



To run different pieces of Javascript code at the same time we can run Web Workers! Web workers allow us to run Javascript to run in different threads on our CPU.

What are Web Workers in Javascript

How to create a Web worker

To start, create a webpage using web workers, the first thing we want to do is create a small webpage containing an HTML file and two Javascript files.



The first Javascript file should be named script.js and the second file should be named worker.js



The HTML file should contain the following markup



<pre class="wp-block-code"><code>&lt;div id="container"&gt;&lt;/div&gt;
&lt;script src="./script.js"&gt;&lt;/script&gt;</code></pre>



In your script.js file, initialize a worker instance that takes in the location of the script we want to run inside a Web Worker. 



<pre class="wp-block-code"><code>const myWorker = new Worker('worker.js');</code></pre>



Next, we want to go to our worker.js file and add some code that will run on the main thread. I am going to just add a variable. 



<pre class="wp-block-code"><code>const a = 2;</code></pre>



<h2 id="postmessage">Use postmessage to send data from the Webworker back to the main thread</h2>



Now that we have declared our variable inside our Web Worker, we want to send the data (our variable) inside it back to the main thread



<pre class="wp-block-code"><code>const a = 2;

postMessage(a);</code></pre>



We now need to add the handler that will run when postmessage is called. To do this, we need to set the onmessage property of our worker to a function that can be used to get back the data passed in the postMessage parameter in our Web worker.



Go back to the script.js file and set the onmessage attribute to be the following function here



<pre class="wp-block-code"><code>myWorker.onmessage = function(e) {
}</code></pre>



To get the data from our Web Worker we would call e.data. Lets set the HTML of our container div element to be the value from the variable inside our Web Worker



<pre class="wp-block-code"><code>myWorker.onmessage = function(e) {
 document.getElementById('container').innerHTML = e.data;
}</code></pre>

How to add Javascript to a webpage

Introduction to Javascript

Arrays are a data type that contain many different values inside of them. These are useful when we have a list of information we need to work with.



For example, let's say we want to run <code>console.log</code> on all the companies we applied to. We could do something like this



<pre class="wp-block-code"><code>var company1 = "Company A";
var company2 = "Company B";
var company3 = "Company C";

console.log(company1);
console.log(company2);
console.log(company3);</code></pre>



This is a lot of repeated code and extra variables. Every time we add a new value we have to add a new variable. 



We could fix this by creating one value that contains many values.



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];</code></pre>



With our array, we get a specific value in our array using an index value.



Index values for arrays start at 0, not at 1



Since we have three values in our array, we can numbers 0 - 2 at our disposal. 



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

console.log(companies&#91;0]);
console.log(companies&#91;1]);
console.log(companies&#91;2]);</code></pre>



It's also important we learn about the <code>.length</code> attribute in an array.



The length attribute of an array tells us how many items are in our array.



So for our array, calling we would have a length of 3.



We can print out the length of our array in the console like this:



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

console.log(companies.length);</code></pre>



Next we'd want to iterate through this array. Iterating through an array requires looping through it.





<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

for(var i = 0; i &lt;= companies.length; i++) {
 console.log(companies&#91;i]);
}</code></pre>



Now our code only takes up 4 line, instead of the 7 we started with.



We can also add a new element to our companies array without worrying about adding another <code>console.log</code>



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C", "Company D"];

for(var i = 0; i &lt;= companies.length; i++) {
 console.log(companies&#91;i]);
}</code></pre>

Arrays in Javascript

Loops in Javascript allow us to call a block of code many times over without having to write the same code over and over again. 



For example, lets say we want to print out the number's one two and three in the console.



<pre class="wp-block-code"><code>console.log(1);
console.log(2);
console.log(3);</code></pre>



With loops we could reduce the amount of console logs we call.



<h2>About the while loop</h2>



The while loop is a loop that doesn't define how much iterations will be done. Our while loop will continue to iterate over and over again until its condition is no longer met. 



For example:



<pre class="wp-block-code"><code>while(true) {
 console.log("Hello world");
}</code></pre>



Will run over and over again in the console indefinitely



For our scenario we will need to set a variable number equal to zero. and the condition inside our while loop will be that our variable must be less than 4 when we're deciding whether or not we should enter the while loops block of code enclosed by curly brackets <code>{ }</code> 



Note that we have to increment our variable otherwise we'll end up in an infinite loop where our variable is always equal to 0. 



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 console.log("This is iteration number: " + i");
 i++;
}</code></pre>



<h2>Using the break statement to leave a while loop early</h2>



We can leave a while loop earlier than our conditional value will allow using the <code>break</code> statement.



Using <code>break</code> we can leave the loop if i is equal to 2, even if our while loops condition states to go through the loop while i is less than 4



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 console.log("This is iteration number: " + i");
 if(i === 2) {
 break;
 }
 i++;
}</code></pre>



<h2>Using the continue statement to avoid executing succeeding lines of code</h2>



We may want to iterate through our loop but go back to the beginning of the loop at an earlier point. We can use the <code>continue</code> statment to do this. To show this, lets increment our loop twice and not show our console.log



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 if(i === 1) {
 i+=2;
 continue; // the code below this wont run when i = 1
 }
 console.log("This is iteration number: " + i);
 if(i === 2) {
 break;
 }
 i++;
}</code></pre>

While Loops in Javascript

For loops in Javascript

<h2>About for loops</h2>



For loops are a way we can run multiple iterations of something, in this case, repeat a block of code.



For loops have three different rules defined inside of them, the initial variable we use in our conditional, the conditional itself, and what we do with the variable after we've finished an iteration of the loop



Here's an example of what a for loop looks like



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 console.log(i);
}</code></pre>



We define our initial value i as 0.



We keep running our block of code over and over again until our value of i is equal to 4



Each time we reach the end of the loop, we add 1 to our variable i.



<h2>Using the break statement to leave a for loop early</h2>



We can leave a f0r loop earlier than our conditional value will allow using the <code>break</code> statement.



Using <code>break</code> we can leave the loop if i is equal to 2, even if our while loops condition states to go through the loop while i is less than 4



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 if(i === 2) {
 break;
 }
 console.log(i);
}</code></pre>



<h2>Using the continue statement in a for loop</h2>



We may want to iterate through our loop but go back to the beginning of the loop at an earlier point. We can use the <code>continue</code> statment to do this. To show this, lets increment our loop twice and not show our console.log



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 if(i === 1) {
 i+=2;
 continue; // the code below this wont run when i = 1
 }
 if(i === 2) {
 break;
 }
 console.log(i);
}</code></pre>

If statements allow us to conditionally run code. We do this because we may want to run different code and chose between two blocks of code base on some predetermined values.



Think of conditionals in the same way you'd get a conditional acceptance for a job offer that requires you to send over a reference.



If you have a reference, then you get the job. We can write this out in code like this.



<pre class="wp-block-code"><code>var hasReference = true;

if(hasReference) {
 console.log("You got the job");
}</code></pre>



<h2>Else statements</h2>



We also want to say something when we don't have enough references. In this case we can use an else statement.



If we have a reference, you got the job, otherwise (or, else) you didnt get the job



<pre class="wp-block-code"><code>var hasReference = true;

if(hasReference) {
 console.log("You got the job");
} else {
 console.log("You didn't get the job");
}</code></pre>



<h2>Else if statements</h2>



What if we don't have a reference, but we impressed our interviewers so much that they'll give us a job even if we don't have a reference. They're so confident in us, that we want to add another conditional in case we didn't have a reference, but we did so well on the job interview that we don't need one.



Basically, if we have a reference, we get the job, if we don't have a reference but we nailed the interview, we also get the job. If we don't have a reference and we didn't get the interview, we don't get the job.



<pre class="wp-block-code"><code>var hasReference = false;
var nailedTheInterview = true;

if(hasReference) {
 console.log("You got the job");
} else if(nailedTheInterview) {
 console.log("You don't have a reference but still got the job");
} else {
 console.log("You didn't get the job");
}</code></pre>



Note that if we already have a reference, our else if statement will never be reached because we've already satisfied the condition of our if statement. Only if the conditional in our if statement is false will we reach our else if statement

If statements in Javascript

Objects in Javascript

We can create Objects to represent a collection of data in Javascript. Note that this is different from Arrays, which store a list of data in a specific order.



Data in objects have their own names and values. Let's do an example where we want to create a duck and define different information about that duck.



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
}</code></pre>



Here we're saying that our duck's name is Sylvester and that the duck's feathers are white.



We can print our different attributes to the screen like this



<pre class="wp-block-code"><code>console.log(duck.name);</code></pre>



Which will print out "Sylvester" and



<pre class="wp-block-code"><code>console.log(duck.feather_color);</code></pre>



Which will print out "white"



We can also include functions as values to our object. Let's say we want to call a function that makes the sound a duck normally makes. We can add the a key named call_sound with its value be printing to the console the sound a duck makes



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
 call_sound: function() {
 console.log("Quack");
 }
}</code></pre>



Now we can have our duck object call the call_sound function whenever we want



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
 call_sound: function() {
 console.log("Quack");
 }
}</code></pre>



Now we can call our function



<pre class="wp-block-code"><code>duck.call_sound();</code></pre>



Which will print "Quack" to the screen.



What if you want one of the attributes in our object? Lets change our Ducks name to Mittens



<pre class="wp-block-code"><code>duck.name = "Mittens"</code></pre>



We could also use bracket notation to update our attribute



<pre class="wp-block-code"><code>duck&#91;"name"] = "Mittens";</code></pre>

We can declare variables as a shorthand to store information. The reasons we want to do this is to make our code more readable and potentially more reusable.



If we wanted to print out a long string of text without variables would look like this



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");</code></pre>



This is what it would look like with a variable



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);</code></pre>



In addition, you'll eventually run into a situation where you will have to use the same values in many places in your code. 



Lets say we wanted to call <code>console.log</code> not once but twice. Without variables this is how we'd do it



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");

console.log("This is a very long sentence with lots of words in it");</code></pre>



With variables we don't need to spend all that time writing the same sentence all over again



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);

console.log(longString);</code></pre>



This might not seem like much now, but as you develop complex software and the amount of lines in your code increase, it would be difficult to pass values directly to a function without using variables.

Variables in Javascript

Getting started with Javascript is pretty straightforward. One of the great things about working in Javascript is that we don't need to download a runtime package to get started, we can use the web browser to start working with Javascript We're going to create a simple page that logs hello world in the brower's console.



First let's create an index.html file. This is where the page in our browser will be located.



In our HTML file, we want to only write hello world. Lets add the basic boilerplate 



<pre class="wp-block-code"><code>&lt;!-- index.html --&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
&lt;/html&gt;</code></pre>



Next we want to add a script tag that points to our soon to be created Javascript file. Lets add a script tag inside the head tag, and lets let its resource be <code>./script.js</code>



<pre class="wp-block-code"><code>&lt;!-- index.html --&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;script src="./script.js" /&gt;
 &lt;/head&gt;
&lt;/html&gt;</code></pre>



Now let's create our script.js in the same directory as our index.html file. In our script.js file, write the following line of code



<pre class="wp-block-code"><code>console.log("Hello world");</code></pre>



console.log is what we use to print logs into the console. Inside it, we pass what we call an parameter, and in this case, it contains a string of Hello world.



Now open your index.html file using your browser of choice. You should see a blank page, because we didn't add anything to our HTML body. Right click the page and select inspect element. Then, click on console, you should see your hello world log.

Tutorials, articles and quizzes on Software Development

More Articles