The basic concept of JS for Xiaobai is introduced in detail

This article has participated in 「 Digging force Star Program 」, Win a creative gift bag , Challenge creation incentive fund .

For beginners ,Javascript At first glance, it seems easy , Because it's similar to C The grammar of

But no matter how it works , On language (ESNext) The constant changes made by and its framework may confuse beginners .

Learning pays off , because JS Almost anything you want to do can be done easily .

• Want to build a Web Applications ？ That's all right. .
• Want to build CLI Tools ？ That's all right. .
• Want to build desktop applications ？ It's easier to do than to say

The increasing number of packages and libraries provided every day shows that JS How abstract it is when building software applications .

However ,JS It seems to be hated by many people , Mainly because it is too traditional compared with its competitors . Anything that might miss JS People in theory will be confused .

Many people are studying Javascript I ignored Javascript Theoretical aspects of . These concepts help us understand how to build Javascript Different paths and patterns used in the application . These patterns exist in JS Land In each frame of , Therefore, it is meaningful to understand these concepts before learning the language itself .

JS Characteristics

(1) Multiple paradigm

Javascript Support process 、 Object oriented and event driven functional programming ！ master JS The object-oriented programming style is very useful .

Object oriented programming can help programmers more easily visualize the components of software applications . Besides , Study Typescript（Javascript with Types） It 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 effective way .

This versatility makes Javascript Very approachable and very powerful .

(2) explain

Javascript And C/C++ Different , It's not a one-time reader , It's line by line . That is to say JS than C/C++ Wait until the compiled language is slow .

Warning ：  Javascript Notorious for being an extremely passive language at runtime , Troubleshooting errors is very difficult .

But with time and practice , You will learn how to run smoothly . The most common errors involve the return of your variables NULL value . When such problems do occur , Please go to Stack Overflow, Because I promise you , No matter how outrageous the mistake is , You're not the first person to make a mistake . Be free to use... When developing your project console.log() It's also a good way . This can help you pinpoint the moment in the program lifecycle , Your variable may have fallen off .

(3) Single thread

Javascript You can only perform one task at a time . It queues different tasks into different queues according to the type .
In the most abstract sense ,Javascript Basically, synchronous tasks and asynchronous tasks are grouped , And line them up separately .

Synchronization tasks are statements that are processed immediately when they are encountered , That is, they run immediately . These tasks include logging statements 、 Variable declarations 、 Condition check, etc .

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

Besides ,Javascript One more Job Queue, Used to process files named Promises Of JS Feature.

By right clicking this page and clicking the check tab , You can actually see Javascript Single thread feature . Next , Go to the console tab on the window you just opened . Enter the following code and press enter .\

while(true) {}
 Copy code 

You can now observe that this page is completely unresponsive . This is because... On this page Javascript Now we are busy running the infinite while loop .

(4) Non blocking

We've discussed asynchronous tasks before . because JS Run in a single threaded environment , By default , It will not wait ！

Asynchronous code blocks are executed only after all synchronous code blocks have been executed , No matter where the code is in the program .

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

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

console.log(" I'm the third sentence ")
 Copy code 

here console.log() Record the statements to the console ,setTimeout() The function runs the second statement in a second .

When checking the output

 I'm the first sentence 
 I'm the third sentence 
 I'm the second sentence 
 Copy code 

We can see that the third statement records... Before the second statement . This is because JS The inherent method of dealing with synchronous and asynchronous code blocks .

(5) senior

JavaScript It's a high-level language . High level languages may just mean that they are closer to the language spoken by humans . High level languages can provide more functions to help programmers better express what they are trying to build .

Javascript This advanced feature of helps it best serve Web The client part of . In the past JS A major limitation of is that it can only provide services on the client , Instead of doing file operations like most server-side languages .

However , This has changed NodeJS, Allow developers to use Javascript To build back-end servers . therefore , Just use one language , Software developers can operate on the server and client . This makes the whole stack of engineers stand out .

(6) Dynamic type

Javascript It is also a dynamically typed language . This means that it is different from the one that needs to specify the data type for the variable C Different , We can type-inference stay Javascript Used in to automatically detect the type of data , Variable to hold the .\

//  stay  C  Variables in must have data types .  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;
 Copy code 

stay Javascript in , We use let and const Declare variables or constants separately .\

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

const b = 'JS  cool ' 
console.log(b) // JS  cool 

b = ' I changed my mind '
console.log(b) // Error: const cannot be changed
 Copy code 

Although type inference seems like a bonus point because it's easy to use , But it immediately became a hoax for large projects that needed type safety as a function .

For this reason , Larger projects use TypeScript, It's just Javascript The wrapper , Provide type 、 Interfaces and various other functions .

Learning strategies

stay JS Land It will take some time to settle down , But I have a simple list ,Minimum Requirements For learning Express or ReactJS Other framework .

First , Don't rush to learn these frameworks . You need to take some time to master Vanilla Javascript.

Basic knowledge of

1. Variables and constants
2. Conditional block （if-else）
3. loop （for、while、forEach）
4. Switch box （Switch Case）
5. Method （Functions）

These are your essential programming basics .

Advanced part （ Minimum requirements ）

1. asynchronous / wait for
2. Promises
3. Javascript Class in
4. Rest/Spread grammar
5. Array / Object iterator
6. An array of deconstruction
7. modular （ Import 、 export ）

Continue learning as you build your project , Soon you will have a strong command of language .

Past excellent articles

️ Use HTML and CSS Glass login form ( Including free and complete source code )️
【python Entry project 】 stay Python Create bar chart animation in
7 One for you. console.log() Output tips and tricks that stand out
️ Use HTML、CSS and JS Create an online music player ( Including free and complete source code )️

I've been writing a technology blog for a long time , And mainly through the Nuggets , This is my article JS Basic concepts in . I like to share technology and happiness through articles . You can visit my blog ： juejin.cn/user/204034… To learn more . I hope you will like ！

You are welcome to put forward your opinions and suggestions in the comment area ！

Nuggets officials will be in Digging force Star Program After the event , Draw... In the comment area 100 Around the Nuggets , For details of the lucky draw, see the activity article