Will Pocklington
Apr 22 · 9 min read

Over the course of this past semester, we have covered many aspects of JavaScript. From testing to the internals to the basics of the language, many questions have been answered. Yet, the most important question has not been answered: Why should you learn and use JavaScript? Today that question will be answered, along with some other questions that did not fit into the topic discussed previously in this JavaScript investigation.

Benchmarking Speed:

We will now begin finalizing our discussion of this great programming language. The first topic of the discussion will be on bench-marking. Speed and scalability are important concepts in programming, as even a single second of wait time could be seen as an inconvenient to the end-users. In this section, we introduce a tool to further test your program’s performance. JSPerf is a benchmarking tool for JavaScript. It allows programmer to create and share test cases, and run benchmarks on them, and records a wealth of useful information for use.

JSPerf report on the performance of different versions of JQuery across different browsers

If JSPerf is not working, you can also use the library Benchmark.js, which is what JSPerf is based off in the first place, to perform bench-marking on your code. You can find the documentation on the library here: https://benchmarkjs.com/.

Safety:

With great power comes great responsibility. As in, there are a number of security issues concerning JavaScript. Due to the language’s origin as the language for web pages the security model for the language was built on two principles: don’t let malicious sites attack the user, and don’t let sites attack other sites, which is a reason for the inclusion of protocols such as the Same Site Policy, which enforces the rule that scripts loaded on one site cannot interact with another site) However, this is not a foolproof system, as JavaScript can allow malicious actors to manipulate websites into distributing malicious scripts to end users in a process known as Cross Site Scripting (XSS). In a similar vein, Cross Site Request Forgery (CSRF) allows actors to take unintended actions on other sites the user may have visited / possess cookies for. JavaScript programs typically run the moment a user lands on a site, which assists in creating more dangerous URL redirection attacks.

Some other, albeit less common, possible JavaScript security vulnerabilities:

Server-Side JavaScript Injection — This attack is newer and typically targets Node.js apps and similar apps. It is similar to the XSS attack, but the malicious script is sent to the server as opposed to the client, which could result in far greater damages.

Client-Side Logic Issues — Resulting from bad programming, when the JavaScript code chooses to perform secure processing on the client side, it opens the browser to anyone who might be listening in.

Luckily, there are tools that help detect the possible code issues that could result in these attacks. JavaScript Security Analyzers are key to protecting your users and yourself. Here are some of the more popular tools:

ZAP- also known as the Zed Attack Proxy, this tool tests for a wide range of issues and is highly customizable to suit your needs.

Grabber — tests for issues such as file inclusion, XSS, and SQL injections. However, it is slower than other Security Analyzers and should only be used on smaller projects.

Wapiti — tests for both attack and injection vestors. It is more advanced tool and runs via the command line.

British Security Analyst John Graham-Cumming did a presentation over the security of JavaScript in 2009. His slides can be found here

Ease-of-Use:

A quick “Is JavaScript hard to learn?” Google search and you will welcomed by many articles giving reasons why it is a hard language to learn. In reality, the level of difficulty in learning JavaScript depends on the programming language(s) you may already know. Those who have built websites using HTML and CSS may find it difficult to wrap their heads around the logic behind JavaScript. HTML and CSS are markup languages (they describe the layout of the webpage) which means little to no logic is required. If you have experience with computer programming languages such as C/C++, Java, etc. then JavaScript will be much easier to learn.

One other thing that can be intimidating for someone who is just starting off with JavaScript is choosing the right framework. The best way to go about this decision is to narrow down your choices. Remember that a framework is suppose to make a developer’s life easier, so choose a framework that best fits your needs!

If you are going to be mainly dealing with client-side single page applications, then a framework such as Mithril could be your best bet.

You can download Mithril here

Conversely, if you’d like to take part in the server-side of things then Node.js is a great option.

You can download Node.js here.

If for whatever you reason you are still not able to choose a framework, looking into job listings can be helpful. JavaScript is one of the most popular languages out today which translates to a high demand for JS developers. The type of framework that a company is currently using is usually listed in their job listing. By skimming through multiple job listings, you can choose to learn a framework that is commonly used among companies. A major benefit of taking this route is you will acquire experience in a framework that is widely used which places you in a better position when applying for a job.

Memory Footprint:

JavaScript has automatic garbage collection, which employs these two methods:

Reference-Counting garbage collection: A naive approach to garbage collection, this algorithm will delete the object place in memory if there are zero other objects referencing it. One limitation of this is that if two objects reference each other, they will both be stuck in an infinite loop of referencing each other, so there neither objects will ever have zero objects referencing them. This is called a cycle and can lead to memory leaks.

Mark and Sweep: Starts at a set of root objects (The global object in JavaScript) and marks every object referenced from those roots, then objects referenced by those objects, etc. Any non-reachable object is freed. This method eliminate the problem of cycles, but objects need to be explicitly unreachable. However, this is rarely a problem.

To observe the memory consumed by JavaScript, we can watch the memory value in Windows’ task manager while operating Chrome. A Chrome window with only one tab open consumes around 300 megabytes of memory on my machine. Chrome offers window.performance.memory to show the memory consumed by the JavaScript engine. However, you must launch Chrome with the — enable-precise-memory-info flag, otherwise Chrome hides this data. For my Windows machine, this command was:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” — enable-precise-memory-info

With this flag enabled, we can use window.performance.memory in JavaScript and view the memory consumption results in Chrome. I wrote a little script to test out the memory footprint of Chrome’s V8 engine:

This script appends a letter to bigString 1,000,000 times then displays some information about the memory consumption. By using Chrome’s window.performance.memory, we can see the JavaScript engine’s heap size limit, total heap size, and used heap size.

The 1,000,000 character-long string consumes roughly 32 megabytes, averaging 32 bytes per character. The task manager reflects this, as Chrome’s memory usage went from around 300 to 334 megabytes after loading the page. To compare, a character in C++ consumes 1 byte of memory.

The memory consumption of numbers in JavaScript fared about the same. To ensure this was consistent, I checked for arrays of length 10, 100, 1000, …, 100 million. Instead of concatenating a long string, I simply placed the current loop counter value into one large array.

The second value of each index is the difference of the heap size before and after the creation of bigArray. The third value is the average memory each number consumes. When bigArray is length 1,000,000, the array consumes roughly 32.5 megabytes, and each number in the array consumes 32.5 bytes on average. Once the array reaches a length of 10 million or more, presumably virtual memory moves parts of the heap into storage. This could explain why the average memory usage drops at this point.

It’s worth noting that in the task manager, Chrome’s memory usage jumped up to around 1.2 gigabytes after running this script. If each number is on average 32 bytes, that should consume 3.2 gigabytes. Also, on my machine, trying to run it one more loop, with an array of 1 billion entries, causes Chrome to crash. This may be because the maximum heap size is around 2.2 gigabytes. Dividing the maximum heap size by 32 bytes yields 68,157,440 numbers that JavaScript can theoretically handle on my machine. Beyond that, garbage collection and virtual memory must be affecting these results.

Lastly, it’s important to note that the results were different every time the script was run. The other tabs or number of times the page was refreshed affected the results as well.

Reasons to Use JavaScript:

It’s a scripting language, which gives it a great deal of flexibility and, as mentioned earlier, is very easy to learn with its countless resources that stems from its popularity. There are also numerous packages for usage with NodeJS that will make your developer life a lot easier if you do decide to start learning JavaScript. If you also have been following our blog posts, you would also know how fun and simple JavaScript can be to program with.

Using JavaScript we can not only building web apps but also mobile apps by using React Native. React Native is a framework based on JSX. If you know React, you can easily pick up React Native. React Native saves time and cost to build cross platform mobile apps.

It is an extremely popular language, topping StackOverflow’s ranking of popular languages for six consecutive years. And the most popular framework is Node.js, which is based off JavaScript. While popularity is not everything, JavaScripts continuous placement at the top of the charts implies that there will be great demand for JS programmers in the future.

It’s practically everywhere on the internet. 95.1% of websites use JavaScript in some capacity as of April 2019. JavaScript is at this point a basic prerequisite for any sort of web development or use, especially if you want to work at a big company as a web developer or a full-stack developer.

In addition to JavaScript’s popularity, JS developers make great income too and is in great demand (again because JavaScript is so popular). As of April 10, 2019 the average annual pay for JavaScript developers is around $106,056 in the U.S with some of the higher paying companies paying up to $164,500/yr. Therefore, learning JavaScript can potentially increase your pay, especially if your coming from programming languages such as PHP where the average annual pay for a PHP developer is $86,077.

Authors:

Anh Le @anhle697

David Alvarado David Alvarado

Payne Wheat @PayneWheat

Shouchuang Zhu @shouchuangzhu

Will Pocklington @pocklingtonWill

UH COSC 4315 Group Project

A publication for COSC 4315

Will Pocklington

Written by

UH COSC 4315 Group Project

A publication for COSC 4315

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade