15 Things To Learn To Be A Javascript Expert

Now, this is a rather interesting topic that I found on a certain forum – How do I become a Javascript expert? What are the things I need to learn? Putting the trolls such as “pray to the Javascript god” and “eat many Javascript books” aside, no one has actually set the criteria to become a Javascript expert.

So I guess anyone can claim to be a “Javascript expert” even with zero knowledge. But as a senior web developer, here is a sharing of the knowledge I personally deem necessary to be a Javascript expert, also a quick explanation to scratch the surface… Feel free to use this as a “learning checklist” – Read on!

 

TABLE OF CONTENTS

Basic Concepts API & Frameworks Advanced Topics
Useful Bits & Links The End

 

 

BASIC CONCEPTS

Let us start with the very basics – These are what every code ninja should know, beginner or master.

 

1) BASIC CONCEPTS

Programming all about crazy coding right? Nope. A mechanic has to learn some science behind how vehicles work, a photographer has to learn the technical stuff behind cameras, and some visual science. Programmers are not spared of the “boring stuff”:

  • Interpreted VS Compiled
    • Interpreted: Script is read line-by-line, as-it-is.
    • Compiled: Script has to be compiled first before running.
  • Object-Oriented Programming (OOP): The important concept behind several programming languages. Yes, Javascript is object-oriented.
  • Copy Read Update Delete (CRUD): This is literally how every device works with data.
  • Model-View-Controller (MVC): A popular design pattern behind various programming languages and frameworks.
  • Representational state transfer (REST): How computers communicate with each other.
  • Application Programming Interface (API): A set of protocols or interfaces… Rules on how to interact with software components.
  • Software Development Life Cycle (SDLC): Projects are not entirely “do coding”, management is also a part of it.
  • Rapid Application Development (RAD): The opposite of planned development, “just code and adapt along the way’.

 

2) VARIABLES & DATA-TYPES

Variables are pretty much the first step in learning any programming language. They are simply “data containers” in layman terms, and a world-famous example is var myvariable = "hello world"; The variable myvariable now contains the string hello world. Apart from strings, there are also various other types of data in Javascript:

  • Number – 1, 2, 3, 16, 99, etc...
  • Boolean – true, false
  • Array – ["Red", "Green", "Blue"]
  • Object – { name: "John Doe", email: "john@doe.com" }
  • Null – null
  • Undefined – Nothing, an empty variable that has no defined value.

It will be good to know the difference between strongly-typed and loosely-typed languages as well:

  • Strongly-typed – Must define the type of data for variables, will only accept the defined data type. E.G. int myNumber = 999, trying to change it to a string myNumber = "foo" will result in an error.
  • Loosely-typed – The variables are not restricted by the data type. E.G. var myVariable = "foo", changing it to a number myVariable = 999 is accepted.

Of course, Javascript is a loosely-typed language.

 

 

3) OPERATORS

Some Math buffs will probably be very confused with programming. The equal sign = in Javascript refers to an “assign” operator, it is not a Mathematical “equal”. There are a ton of other operators, some examples:

  • + Addition
  • - Subtract
  • / Division
  • * Multiplication
  • % Modulus
  • ++ Increment (add one)
  • -- Decrement (minus one)
  • == Is equal to (comparison)
  • != Not equal to (comparison)
  • > More than
  • >= More than or equal to
  • < Less than
  • <= Less than or equal
  • && AND
  • || OR
  • ~ NOT

Yep, and there are more “advanced” ones such as ternary CONDITION ? IF TRUE : IF FALSE, spread ..., and arrow =>. Not easy to get acquainted with all of them, but time and practice is the way to go.

 

4) LOOPS & CONDITIONS

One of the things that computers do best – Repeating tasks and doing them based on certain conditions.

  • for (INIT; STOP CONDITION; ON EACH LOOP) { ... }
  • for (X in Y) { ... }
  • for (X of Y) { ... }
  • while (CONDITION) { ... }
  • if (CONDITION) { ... } else { ... } 
  • switch { CONDITION 1: ... break; CONDITION 2: ... break; }

 

5) EVENTS

In layman’s terms, events are fired whenever “interesting things” happen in Javascript. For example, when the user clicks somewhere, scrolls the page, when an image is fully loaded, etc… Events are indispensable in handling various things:

  • What to do when a user clicks on a button.
  • Run something when the page loads.
  • Load more contents when the user scrolls down.
  • How to handle when a form is submitted.
  • Many more…

 

 

6) ERROR HANDLING

Javascript is robust, but what happens when an error occurs? Well, some beginners will probably say “It crashes”, and that is true. But the other part of it is called error handling, and something which we call a graceful failure.

Instead of an outright crash, we salvage whatever data we can, notify the user of the problem, and ask them to reload the page. Maybe even collect some data on what went wrong, save a crash report.

 

7) DEBUGGING

This part annoys me to infinity and beyond. Every few days on Code Boxx, I will get “questions” like “this does not work”, “I don’t know what went wrong”, and “can you do my project for free”. Ever know something called “debugging”? Just open up the developer’s console (F12 in most modern browsers), and look at the error message. Mystery solved.

 

8) SERVER-SIDE JAVASCRIPT

Ignore the “experts” who say that Javascript is a client-side script, they need to go for an update course… Javascript can be used on the server-side, and just look at projects such as NodeJS.

 

 

WEB API & FRAMEWORKS

As in the introduction above, Javascript has evolved to support many different features over the years – There are many different APIs to support the various features, many libraries developed to help projects. Don’t have to master all of them, but at least know some of the “common goodies”.

 

9) MOBILE TECHNOLOGY

Once upon a time in the Stone Age of the Internet, Javascript is very simple. But with the rise of mobile devices, Javascript also became much more robust to fully support the use of various mobile technologies:

    • Orientation
    • Web Camera
    • Geolocation (GPS)
    • Vibration
    • Accelerometer

Yes, ignore those “Javascript experts” who are still living at the bottom of the well, saying “Javascript is obsolete”.

 

10) DATA STORAGE

The days of “Javascript cannot do data storage” are over, modern Javascript does provide means to support persistent data storage:

  • Web Storage – Session Storage and Local Storage.
  • File System – NodeJS Server-Side Javascript is fully capable of reading and writing files.

 

11) MEDIA

The Stone Age of the Internet is long over… Javascript may not be the best performing script for media, but it is still mighty capable of dealing with them:

  • Video
  • Audio
  • Fullscreen
  • Canvas
  • WebGL

 

 

12) THIRD-PARTY FRAMEWORKS

There are way too many third-party Javascript libraries and frameworks these days… Just know a few of the popular ones:

 

ADVANCED TOPICS

Finally, an advanced code ninja has to know some advanced moves…

 

13) ASYNCHRONOUS JAVASCRIPT

This is probably one of the more demanding and difficult parts. Javascript is traditionally “linear” – Do A, then B, then C. But when it comes to parallel processing – It is to do A, B, and C together all at the same time. This is where the confusing asynchronous, processes, threads, and stuff come into play.

  • Threading – Workers
  • ASync – Promise
  • Asynchronous Javascript and XML (AJAX)

 

14) SECURITY

The painful but necessary knowledge to survive modern-day development… Rest assured that when you create a system these days, there will always be people who will try to break it. Don’t have to be a super-hacker, but at least know some moves to protect yourself:

  • Cross-Site Request Forgery (CSRF)
  • Encryption-Decryption
  • Injection
  • Cross-origin resource sharing (CORS)

 

15) EVEN MORE

Javascript has evolved… Beyond Javascript. These are the technologies that are worth checking out:

  • Web Components – Create your own HTML elements.
  • Web Assembly – The performance of Javascript has always been a bugbear for many games and media developers. With web assembly, one can compile a “micro script”, embed it with Javascript, and run it at near-native performance.

 

 

USEFUL BITS & LINKS

That’s all for this sharing, and here is a small section on some extras and links that may be useful to you.

 

JAVASCRIPT IS NOT ENOUGH

Sadly, with the way of how things work today, a Javascript expert is not just an expert in Javascript. As some of you code ninjas may have realized – You will have to know HTML and CSS as well. Don’t keep the mindset to master only one language. A true code ninja also has to know how to link up and work with other languages – C, C#, PHP, Python, ASP, Java, and a whole lot more.

 

KEEP UP WITH THE TIMES

Technology is moving fast, and the programming world is forever changing. Follow up with the developments, and keep experimenting! Learning never stops. Once upon a time I only had to learn the basics in school.

Now, I have to experiment and learn how many other things work too – GPS, orientation, push notification, real-time systems, voice recognition, voice commands, etc… Stop learning and you will be left in the dust, get outdated, and become irrelevant in the industry.

 

INFOGRAPHIC

Don’t call yourself a master code ninja until you know these (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. Sorry to disappoint the beginner code ninjas who thought “I can master Javascript quickly”. It is virtually impossible with modern Javascript, it has evolved a lot, and it is still changing.

Javascript is no longer just a language that runs behind web pages. Apart from basics, one has to also learn web APIs, various programming concepts, and also Javascript as a server-side language. Becoming a Javascript master requires a lot of time, patience, knowledge, and experience.

I hope that it has helped you to better understand, and before the angry trolls start to spew acid again – These are only a couple of personal thoughts that I threw out of my mind. This is by no means, an authoritative exhaustive list of “you must know these” to be a Javascript master… This is only what a senior web developer will deem necessary to be a good code ninja. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *