DEV Community

Cover image for Essential Concepts in JS
Ambadi Ritik
Ambadi Ritik

Posted on

Essential Concepts in JS

For first-timers , Javascript might seem easy at first with its C-like syntax...

However the way it runs, the constant changes that are made to the language (ESNext) and its frameworks might overwhelm a beginner.
I'm here to clear the confusion surrounding what I think is a beautiful , but most importantly , a highly lucrative language.

Highly Lucrative because JS can do almost anything you want it to do today with much ease.

  • Want to build a Web Application? No Problem.
  • Want to build a CLI Tool? No Problem.
  • Want to build a Desktop App? Puh. Easier done than said!

The increasingly vast amount of packages and libraries being made available daily indicate how abstract JS is when it comes to building a software application.

JS however seems to receive a lot of hate , mostly because of how unconventional it is when compared to its rivals. It is confusing for anyone who might miss out on the theoretical aspects of JS.

A lot of people overlook the theoretical aspects of Javascript before diving into the language. These concepts help us wrap our head around the different paths and patterns we take when building Javascript Applications. These patterns exist across every framework in JS Land so it makes a lot of sense to go through these concepts before learning the language itself.

Code

Features Of JS

(1) Multi-paradigm

Javascript supports procedural , object-oriented and event-driven functional programming!
Getting to grips with JS' Object Oriented Style of Programming can prove to be extremely beneficial.

Object Oriented Programming helps programmers visualise components of a Software Application much more easily.
Furthermore , learning Typescript (Javascript with Types) allows programmers to implement the best design patterns in the industry with much ease. These design patterns are used to solve the most common problems encountered in software programming in the most efficient manner possible.

This versatility makes Javascript very approachable but also very powerful.

(2) Interpreted

Javascript is different from C/C++ wherein , rather than a program being read at once , It is interpreted line-by-line. This is to say that JS will be slower than compiled languages like C/C++.

Warning: Javascript is infamous for being an extremely passive language during runtime. Troubleshooting for errors is extremely difficult.

Don't be disheartened however. With time and practice , you'll learn how to comfortably sail through. The most common error involves your variables returning NULL values. When such issues do creep up , head onto Stack Overflow because I guarantee you , you're not the first to get stuck with an error , no matter how niche it may be. It's always a good idea however to use the console.log() liberally while your projects are undergoing development. This helps you pick out exactly the moment in your program's lifecycle , where your variable might have flaked out.

(3) Single-Threaded

Javascript can only perform one single task at a time. It queues different tasks into different queues based on type.
In the most abstract sense , Javascript will basically group Synchronous tasks and Asynchronous tasks and queue them separately.

Synchronous tasks are statements that are processed the moment they're encountered , i.e they run instantly. These tasks include log statements , variable declarations , conditional checking etc.

Asynchronous tasks involve tasks that may take a variable amount of time to return an output. An example for asynchronous tasks may be requesting information from Web APIs.

Additionally, Javascript also has a Job Queue which is used to deal with a JS Feature called Promises.

You can practically see Javascript's single threaded nature by right clicking on this web page and hitting the inspect tab. Next , go to the console tab on the window that has just opened. Type the following code and hit enter.

while(true) {}
Enter fullscreen mode Exit fullscreen mode

You can now observe that this page has become completely unresponsive. This is because the Javascript on this page is now busy running the infinite while loop that we executed above.

(4) Non-Blocking

We've discussed about Asynchronous tasks before. Since JS runs in a single-threaded environment , by default , it waits for nobody!

Asynchronous code blocks are executed only after all the Synchronous code blocks are executed irrespective of the code's position in the program.


console.log("I'm the first statement")

setTimeout(()=> {
console.log("I'm the second statement")
},1000)

console.log("I'm the third statement")

Enter fullscreen mode Exit fullscreen mode

Here console.log() logs the statement inside it to the console.
The setTimeout() function described above runs the second statement after one second.

On examining the output

I'm the first statement
I'm the third statement
I'm the second statement
Enter fullscreen mode Exit fullscreen mode

We can see that the third statement was logged before the second statement. This is because of JS's inherent method of handling Sync and Async code blocks.

Alt Text

(5) High-level

Javascript is a high-level language. High-Level languages could simply mean that they're much more closer to the language humans speak. High-level languages are capable of offering more features to help programmers better express what they're trying to build.

This high-level nature of Javascript helps it best serve the client-side portion of the web. A major limitation for JS used to be that it could only be served on the client-side and couldn't do file manipulations like most server-side languages could.

However this has changed with NodeJS that allows developers to use Javascript to build Backend Servers. Therefore with just one language , a software developer can operate on both the server and client-side. This has led to Full Stack Engineers becoming prominent.

(6) Dynamically Typed

Javascript is a dynamically typed language. This means that unlike C where we need to specify the datatype for a variable , we can instead use type-inference in Javascript to automatically sense the type of data , a variable holds.

// In C variables must have datatypes. In order to change datatypes from one type to //another , we need to use type-casting
int a = 5;
char b = "a";
float c = 7.036;
Enter fullscreen mode Exit fullscreen mode

In Javascript , we use let and const to declare either variables or constants respectively.

let a = 5
console.log(a) // 5
a = 'Hello World'
console.log(a) // Hello World

const b = 'JS is awesome' 
console.log(b) // JS is awesome

b = 'I changed my mind'
console.log(b) // Error: const cannot be changed
Enter fullscreen mode Exit fullscreen mode

While type inference may seem like a plus point because of its ease of use , it immediately becomes a con for larger projects that require type safety as a feature.

For this reason , larger projects use TypeScript which is just a wrapper over Javascript that provides types , interfaces and various other features.

Learning Strategy

It takes a while to settle in JS Land but I have a simple checklist that serves as Minimum Requirements for learning frameworks like Express or ReactJS.

First off , do not rush towards learning these frameworks. Take your time mastering Vanilla Javascript .

The Basics

  1. Variables and Constants
  2. Conditional Blocks (if-else)
  3. Loops (for, while , forEach)
  4. Switch Case
  5. Functions

These are your essential programming fundamentals.

The Advanced Part (Minimum Requirements)

  1. Async/Await
  2. Promises
  3. Classes in Javascript
  4. Rest/Spread Syntax
  5. Array/Object Iterators
  6. Array Destructuring
  7. Modules (import,export)

Continue learning as you build projects and soon enough , you'll have a pretty strong grasp on the language.

Discussion (16)

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited

It's worth reading, NodeJS is JavaScript and it's not single threaded at all.

Node.js is not single threaded

The true is that browser have single tread not JavaScript. But this is also not true because you have web workers.
In any language when you create while(true) {} loop you will block the tread, unless you will spawn another tread, with Web Worker you can do the same what you can do with Java. while(true){} will not block the web worker.

Collapse
vladmel1234 profile image
vlad melnik

Hey, NodeJS is not JavaScript, it is environment to run javascript, and JS is single threaded because it runs in a single thread provided by this env.
And the not single threaded part of Nodejs is C++ part

Collapse
jcubic profile image
Jakub T. Jankiewicz

You're not correct, JavaScript is not single threaded, the environment is single threaded. The way the language is implemented. The same way JavaScript is not asynchronous that is provided by environment (browser or NodeJS). Environment is not part of the language.

Collapse
aritik profile image
Ambadi Ritik Author

You're right Vlad. The underlying C++ part is multi-threaded. The NodeJS part is single-threaded and I think the intention is for NodeJS developers to write code in a single-threaded manner.

For anybody , who wants to understand these concepts in detail , I used Stephen Grider's Advanced NodeJS course on Udemy.

udemy.com/course/advanced-node-for...

Collapse
mohamed24awwad profile image
M.Awwad

In addition to that NodeJS is just a referable variables to the C++ modules and functions.

Collapse
aritik profile image
Ambadi Ritik Author

Hey Jakub!
You're absolutely right about referring to the environment being Single-Threaded and not the language. The environment dictates the threading model and the language utilises it. However I thought it best for beginners to understand JS as a single-threaded language because afaik , there are no environments for JS that support multi-threading. Workers are a browser feature and it's not directly related to JS.

Collapse
rochucky profile image
Rodrigo Alves

God, this is a great post!!!

Collapse
lucaspsilveira profile image
Lucas Pacheco

As a previously PHP developer and currently C# developer, I did some development with JS, mostly on frontend, I would like to deep my knowledge into Backend Javascript. Just to have a second tool available

Collapse
aritik profile image
Ambadi Ritik Author

My brother works with PHP and says he appreciates the opinionated approach of Symfony but he gets the point of using NodeJS. He loved using Express to build an API recently. Can't wait to see his reaction when he uses Fastify.

Collapse
mayannaoliveira profile image
Mayanna Oliveira

thank you
I like it too much πŸ‘

Collapse
macnick profile image
Nick Haralampopoulos

Nice article about my beloved language. One little clarification though. Although Javascript is an interpreted language, all modern browsers support JIT compilation which converts it to bytecodes hence its high performance.

Collapse
aritik profile image
Ambadi Ritik Author • Edited

Absolutely Nick. JIT makes JS much faster than it was some years ago but it still can't compete with statically typed compiled languages.
However I see a possible change with Web Assembly that can enhance existing JS projects. It's an exciting time to be alive.

Collapse
architg98 profile image
Archit Garg

Great Post, Thanks for sharing!

Collapse
trailblazer1902 profile image
Adegboyega Blessing Olamide

Wow. Tis amazing to see how you guys elicits knowledge form different positions.

Thanks to Mr Ritik who shared the post in the first place.

Collapse
iamharnad profile image
Krishna Haranath πŸ’™

thank you ritik

Collapse
absan profile image
Ansuman Behera

Thanks for sharing this :)