Detailed introduction to JS basic concepts

Many people overlook the theoretical aspects of Javascript before diving into Javascript . These concepts help us understand the different paths and patterns we take when building Javascript applications. These patterns are present in every framework in JS Land , so it makes sense to understand these concepts before learning the language itself.

1. Characteristics of JS

1.1 Multi-paradigm

Javascript supports procedural, object-oriented and event-driven functional programming! Mastering JS 's object-oriented programming style is very beneficial.

Object-oriented programming helps programmers visualize the components of a software application more easily. Additionally, learning Typescript (Javascript with Types) allows programmers to easily implement the best design patterns in the industry. These design patterns are used to solve the most common problems encountered in software programming in the most efficient way.

This versatility makes Javascript very approachable yet very powerful.

1.2 Explanation

Javascript is different from C/C++ in that it does not read the program all at once, but interprets it line by line. This means that JS will be slower than compiled languages ​​like C/C++ .

Warning: Javascript is notorious for being an extremely reactive language at runtime, making troubleshooting errors very difficult.

But with time and practice, you will learn how to run smoothly. The most common error involves your variables returning NULL values. When problems like these do arise, head over to Stack Overflow , because I promise you that no matter how egregious the error is, you are not the first person to have encountered it. It's also a good idea to use console.log() liberally while developing your project. This can help you pinpoint the exact moment in your program's lifecycle where your variables may have fallen off.

1.3 Single Thread

Javascript can only perform one task at a time. It enqueues different tasks into different queues based on their type.
In the most abstract sense, Javascript basically groups synchronous and asynchronous tasks and queues them separately.

Synchronous tasks are statements that are processed as soon as they are encountered, that is, they run immediately. These tasks include logging statements, variable declarations, conditional checks, etc.

Asynchronous tasks involve tasks that may take variable time to return output. An example of an asynchronous task might be requesting information from Web API .

Additionally, Javascript has a Job Queue that handles JS Feature called Promises .

You can actually see the single-threaded nature of Javascript by right clicking on this webpage and clicking the Inspect tab. Next, go to the Console tab on the window you just opened. Enter the following code and press Enter. \

while(true) {}

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

1.4 Non-blocking

We have discussed asynchronous tasks before. Since JS runs in a single-threaded environment, by default, it does not wait!

Asynchronous code blocks will only execute after all synchronous code blocks have finished executing, regardless of the location of the code in the program.

console.log("I am the first statement")

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

console.log("I am the third statement")

Here console.log() logs the statements to the console, and setTimeout() function runs the second statement after one second.

When checking the output

I am the first statement I am the third statement I am the second statement

We can see that the third statement is logged before the second statement. This is because of the inherent way JS handles synchronous and asynchronous code blocks.

1.5 Advanced

JavaScript is a high-level language. Higher-level languages ​​may just mean that they are closer to languages ​​spoken by humans. Higher-level languages ​​offer more features to help programmers better express what they are trying to build.

This advanced nature of Javascript helps it best serve the client-side portion of Web . One of the major limitations of JS in the past was that it could only be served on the client side and could not do file manipulation like most server-side languages.

However, this has changed NodeJS , which allows developers to build backend servers using Javascript . Therefore, using only one language, software developers can work on both the server and client sides. This has led to the rise of full stack engineers.

1.6 Dynamic typing

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

// In C variables must have a data type. To change the data type from one type to another we need to use type conversion int a = 5;
char b = "a";
float c = 7.036;

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

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

const b = 'JS is cool' 
console.log(b) // JS is cool b = 'I changed my mind'
console.log(b) // Error: const cannot be changed

While type inference seems like a plus point due to its ease of use, it immediately becomes a drawback for larger projects that require type safety as a feature.

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

2. Learning strategies

It took a while to settle down in JS Land , but I have a simple checklist of Minimum Requirements for learning a framework like Express or ReactJS .

First, don't rush into learning these frameworks. You'll need to spend some time mastering Vanilla Javascript .

3. Basic knowledge

• Variables and constants
• Conditional blocks ( if-else )
• Loops ( for , while , forEach )
• Switch Case Case
• Functions

These are your essential programming fundamentals.

Advanced Section (minimum requirement)

• Async/Await
• Promises
• Classes in Javascript
• Rest / Spread Syntax
• Array/Object Iterators
• Array Destructuring
• Modules (import, export)
  

Keep learning as you build your projects, and soon you'll have a strong grasp of the language.

This is the end of this article on the detailed introduction of JS basic concepts. For more relevant JS basic concepts, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!