These features are really the wolong phoenix chicks in JS

The background of JavaScript

In the early days of the Internet, before JavaScript, some form validation on the browser side could only be sent to the server side for execution. Back then, people were using a maddeningly slow “cat” at 28.8kbit/s. Imagine you fill out a form and click submit. After a long 30-second wait, the server finally returns a required field as empty, and you go……

Netscape, then at the forefront of technological innovation, decided to remedy this shortcoming by developing a client language. Brendan Eich, who works for the company, set about developing the design. Due to tight schedule and personal interests at the time, he designed the language in only about ten days.

Netscape called it LiveScript at the time, but Sun’s Java language was in its heyday. Netscape, riding the wave of media hype surrounding Java, changed the name of LiveScript to JavaScript just before its release.

This is like our development process: I don’t care how to achieve, anyway, today to launch! It is also due to the short design time, some of the details of the language considered not rigorous enough, resulting in a long period of time later, JavaScript written procedures are ridiculed. If Brendan Eich had foreseen that his JavaScript would be learned by millions around the world and become a popular programming language for the Internet, would he have taken a little longer?

Today let’s take a look at the wolong phoenix in JavaScript.

From zero handwritten simple version Vue2/Vue3, from zero handwritten Promise complete source code, from zero using typescript wheel packaging AXIOS, manual teach you to build node+ Egg project and other high-quality resources to send “1024” get it!!

The global variable

JavaScript dependencies on global variables are a particularly bad feature. There are global variables, which many programming languages allow, and in JavaScript, it allows you to rely on global variables anywhere. For example, if I use script to import a, B, and C files, I can directly use global variables declared in other files in my own file D.

There will be confusion in your OWN D file about where the global variable came from and where to go if there is a problem. In addition, if you declare a variable with the same name as the global variable in the d file, it will be overwritten, so that the same global variable defined in the previous three files cannot be used in subsequent imported files.

There are several ways to define global variables:

0. Arrange a var statement at the top level without any function:

   var foo = 'foo'
   Copy the code

1. Add a property directly to the global object. On the browser side, the global object is called window:

   window.foo = 'foo'
   Copy the code

2. Using an undeclared variable directly is called an implicit global variable:

   foo = 'foo'
   Copy the code

Therefore, in practical development, we must avoid using global variables and use local variables. For example, call the function immediately and turn on strict mode:

Var foo = 'foo'} (function() {'use strict' // var foo = 'foo'})()Copy the code

scope

JavaScript, whose syntax is derived from C, also has block syntax. If, for example, can be followed by curly braces to form a block of code in which variables declared should theoretically be invisible to the outside world. Not in JavaScript blocks. That is, JavaScript uses block syntax without providing block-level scope. This comes as a surprise to programmers with experience in other programming languages.

After ES6 came out, the let keyword declared variables. Using let can avoid this error. Therefore, we should always use let instead of VAR in practical development.

Automatic insertion of semicolons

JavaScript has a mechanism that always tries to fix flawed programs by automatically inserting semicolons. But don’t rely on it. It can cover up more serious mistakes. Because it sometimes inserts semicolons at the wrong time. Such as:

function genObj() {
  return 
  {
    status: 'ok'
  }
}
Copy the code

This appears to return an object containing a status member, but it actually returns undefined. This is because JavaScript inserts a semicolon after the return and runs this line of code without an error. This can be avoided by placing the {in curly braces on the line with return:

function genObj() {
  return {
    status: 'ok'
  }
}
Copy the code

This does not mean that a semicolon is inserted at the end of a line, but it does not mean that a semicolon is not automatically inserted when there is an open pair of punctuation marks on the line.

var a = (function (){
  return 'a'
})()
​
()  // common.js:5 Uncaught TypeError: (intermediate value)(...) is not a function
Copy the code

We want the return value of this call to be assigned to a immediately before we do anything else, but JavaScript does not insert a semicolon at the end of the third line, instead saying that this should be a continuous call. To test our idea, let’s change the return value of the immediately called function to a function:

var a = (function (){
  return function() {
    console.log(1)
    return 'a'
  }
})()
​
()
Copy the code

There is no error and a 1 is printed. So in real development, we should always add a semicolon. But since the absence of a semicolon looks very succinct, many developers do not write semicolons. Source code like Vue does not have semicolons, so we just need to manually add semicolons where certain JavaScript auto-insert semicolons are prone to errors.

We just need to remember to put a semicolon before “+”, “-“, “*”, “/”, “(” and” [“.

typeof

The typeof operator returns a string that identifies the typeof its operand. Such as:

typeof 98     // number
typeof 'q'    // string
Copy the code

Unfortunately, typeof NULL returns object instead of NULL. More perversely, null detection is simple:

val === null
Copy the code

Therefore, when checking the typeof an object, typeof cannot return a more accurate type string between null and object. Therefore, we need to check whether the object type is null before checking the object type:

if(val ! == null && typeof val === 'object') { // do something }Copy the code

The plus operator

The plus operator is often a common source of bugs. It can be used for addition or concatenation of strings, but the result depends entirely on the type of the argument. If one of the operands is a string, it converts the other argument to a string and returns it. The sum is performed only when both operands are numbers, otherwise the two operands are converted to strings for concatenation.

If you plan to add using the + operator, make sure that both operands are numeric. Otherwise unexpected bugs will appear.

= = 和 = = =

== and === are like evil twins. The former compares the value represented by two operands, but does not compare their types. The latter is a strict comparison in which values are compared and type matches are performed first. If two operands are of different types, they try to cast their values, and the conversion rules are complex and hard to remember. Here are some interesting examples:

console.log('' == 0) // true console.log(0 == '') // true console.log('0' == 0) // true console.log(false == '0') // true console.log([] == ! []) // true console.log(! [] = =! []) // trueCopy the code

So always using === in development can avoid many unexpected bugs unless you know exactly which operands are of the same type, such as when using Typeof:

typeof 'a' == 'string'
Copy the code

conclusion

Because of the context in which JavaScript was born, there are a lot of weird features. These are just the tip of the iceberg. They are literally called Wolong and Phoenix, but that doesn’t stop it from becoming a popular language. With the web boom of recent years, people have come up with a solution to circumvent them. Even with constant tinkering along the way, JavaScript has become a desirable sword.

Add in typescript and ancillary tools like ESLint, and the JavaScript ecosystem flourishes. World domination is just around the corner, and everything that can be implemented in JS will be implemented in JS. (Just kidding, there are no heroes in King Canyon, only invocators.)

In addition: if the article is not appropriate or knowledge points wrong, welcome comments criticism, common progress!