📜 ⬆️ ⬇️

20 and 1 javascript lotion that I just can't remember

This article describes the features of Javascript ES3, which have the property of being forgotten. Some of them are oddities of the language, while others are just properties that, in my opinion, are difficult to remember. I tried to collect here not those of them for which you can just give a link to the language description (as for the differences between apply and call), but about which little is said in the manuals.

Before I begin, I want to clarify 3 points that I don’t try to prove with this article:

1. I do not say that these features are forgotten by everyone or that they are in essence. I find them difficult for me personally (for example, the details are forgotten if they are not refreshed in memory). They can be easy for you. Nevertheless, I think that this collection can be useful not only to me.

2. I'm not saying that you need to use these parts of the language, but only assert that if you know them, you can easily read the code of other developers. Most of them can be useful, but not always having them in the code is the best solution.
')
3. I do not affect the features of ES5 - neither Strict, nor in general, nor ES6 as a whole. I will talk about them later. I recognize that some of the features discussed are changing or evolving in future versions of ECMAScript.

Taking this into account, let's start.

1. −0 = +0 = 0 (or a strict zero is equal to positive and negative zeros)


In JavaScript, there is a value of the number -0 and +0, indicating which side you have come to zero. But it is converted to strict zero by comparison.
jsfiddle.net/codylindley/6phD9/light
console.log(-0); //logs 0 console.log(+0); //logs 0 console.log(-0 === +0); //logs true console.log(0 === -0); //logs true console.log(0 === +0); //logs true 


2. The word new can independently execute the constructor.


A call to a constructor without arguments can be executed by one keyword new, without writing parentheses after the constructor.
jsfiddle.net/codylindley/nHCvx/light
 var Human = function(){ this.type = 'human'; console.log('I was called'); }; new Human; //       "I was called" console.log((new Human).type); // human (  ) 


3. instanceof does not work with primitives.


The instanceof operator returns false for strings, numbers, and logical variables. If they are located in objects (that is, in the wrappers of primitives), then it works normally. Remember that null and undefined do not have object wrappers.
jsfiddle.net/codylindley/bpJjZ/light

 //instanceof     console.log("" instanceof String); // false console.log(3 instanceof Number); // false console.log(false instanceof Boolean); // false //instanceof     () console.log(new String() instanceof String); // true console.log(new Number() instanceof Number); // true console.log(new Boolean() instanceof Boolean); // true console.log([] instanceof Array); // true console.log({} instanceof Object); // true console.log(/foo/ instanceof RegExp); // true // , console.log([] instanceof Object); // true 


4. The typeof operator is non-universal and with errors


The applicability of typeof is limited to primitives, but even there it has an error: (typeof null === "object") == true, because of which samopisno-kostichnye methods of checks are the best. /
jsfiddle.net/codylindley/U64aZ/light

 //    string, number,  boolean console.log(typeof ""); // "string" console.log(typeof 4); // number console.log(typeof true); // boolean console.log(typeof undefined); // undefined // ,    null console.log(typeof null); //?? !  Object 


5. Boolean object from false values ​​is always true


 console.log(!!(new Boolean(false)) ) //true 

new Boolean (new Boolean (false)) is not false because it returns a wrapper object. And the object (watch hands) is always converted to true. Therefore, this sophism refers generally to any value of the constructor. But the real false is created only by primitives (NaN, false, 0, null, undefined, and '') and the values ​​of expressions.

6. Arguments or function parameters?


Arguments are used when the function is called. We pass arguments to the function. Parameters are set at the time the function is defined. Thus, the parameters are said to be used to define a function. These words are interchangeable, but knowing their differences may come in handy.
jsfiddle.net/codylindley/8Zkdd/light

 var myFunction = function(x,y,z){ //x,y,z -  return x+y+z }; myFunction(1,2,3); //1,2,3 -  


7. Changing the parameter value does not change the value of the argument.


For example, if you pass an array to a function, changing the parameter value will not change the original parameter value.
jsfiddle.net/codylindley/c2xb4/light
 var myFunction = function(parameter){ parameter = undefined; //    undefiend console.log(parameter); }; var myArray = [1,2,3]; myFunction(myArray); // myFunction,   //myArray -  undefined ,   ,        console.log(myArray); //logs [1,2,3] 


8. Calling Boolean () as a function converts any value to boolean


Calling a constructor as a function (without new) with an argument converts it to a boolean.

jsfiddle.net/codylindley/4wQLd/light
 //,  ,  false console.log(Boolean(undefined)); console.log(Boolean(null)); console.log(Boolean(0)); console.log(Boolean('')); console.log(Boolean(NaN)); //,  ,  true console.log(Boolean(1)); console.log(Boolean('false')); console.log(Boolean([])); console.log(Boolean({})); console.log(Boolean(function(){})); console.log(Boolean(/foo/)); 

Of course, double inversion !! () will give the same effect. But this is not expressive enough for me to like.
jsfiddle.net/codylindley/jNPvH/light
 //,  ,  false console.log(!!undefined); console.log(!!null); console.log(!!0); console.log(!!''); console.log(!!NaN); //,  ,  true console.log(!!1); console.log(!!'false'); console.log(!![]); console.log(!!{}); console.log(!!function(){}); console.log(!!/foo/); 


9. Calling the constructor of primitive objects without new returns primitives


jsfiddle.net/codylindley/ymGmG/light
 // true console.log(String('foo') === 'foo'); console.log(Number(5) === 5); console.log(Boolean('true') === true); // false,      console.log(new String('foo') === 'foo'); console.log(new Number(5) === 5); console.log(new Boolean('true') === true); 


10. Object () creates object wrappers for primitives.


Unlike other constructors, Object () wraps primitives into wrappers.
jsfiddle.net/codylindley/tGChw/light
 // number    console.log(Object(1) instanceof Number); //logs true // string    console.log(Object('foo') instanceof String); // boolean    console.log(Object(true) instanceof Boolean); 


11. Access to properties of primitives hides an error



Everything is perfectly written in primitives, no matter what anyone says. There are no problems with reading. Except that read is always undefined. The reason is that the object shell for the primitive is not created .
jsfiddle.net/codylindley/E7GGK/light
 //  var N = 5; var S = 'foo'; var B = true; //   ,  ,       N.test = 'test'; S.test = 'test'; B.test = 'test'; //,     console.log(N.test); // undefined console.log(S.test); // undefined console.log(B.test); // undefined 


12. delete does not delete inherited properties.


jsfiddle.net/codylindley/xYsuS/light

 var Person = function(){}; //  Person Person.prototype.type = 'person'; //  var cody = new Person(); // Person delete cody.type // (?) type console.log(cody.type) // person,        


13. The object wrappers of strings are mass-like.


Because the shell of a string object creates a mass-like object (i.e. console.log (new String ('foo')); // displays foo {0 = “f”, 1 = “o”, 2 = “O”}), you can use character indexing (except IE7-).
jsfiddle.net/codylindley/7p2ed/light

 //  var foo = 'foo'; //      console.log(foo[0]) // "f",      {0="f", 1="o", 2="o"} //       console.log(foo['length']); // 3 


14. Access to properties from primitives of numbers


The first point after the primitive number is recognized as a decimal point and conflicts with a point in the sense of access to the property. But the second ...
jsfiddle.net/codylindley/Pn6YT/light

 //  console.log(2['toString']()); //logs 2 //       . console.log(2..toString()); //logs 2 //    console.log((2).toString()); //logs 2 


15. Array.length can be rewritten, which has side effects


By explicitly assigning the length property, you can add a series of undefined values ​​to the end of the array or shorten the array.
jsfiddle.net/codylindley/9Pp9h/light

 var myArray1 = []; myArray1.length = 3; console.log(myArray1); // [undefined, undefined, undefined] //   myArray2 = [1,2,3,4,5,6,7,8,9] myArray2.length = 1; console.log(myArray2); // [1] 


16. The logical operator "||" works up to the first true value


If the value of the left argument in this statement is true, the right value will not be calculated, which is figuratively referred to as the term “short circuiting” (shorting, short circuit, or, in this case, “go a short way”). In fact, finding the true value in the first value leads to the non-touching of the functions and expressions of the right-hand side, unchanged values ​​in their hidden setters.
jsfiddle.net/codylindley/NUKKZ/light

 //  ,   true,     var foo = false || 0 || '' || 4 || 'foo' || true; console.log(foo); // 4,     //        


17. The logical operator "&&" works up to the first false value.


Similarly, but with a reverse logical value, is performed before the first foul, inclusive.
jsfiddle.net/codylindley/DEbk5/light

 //  ,   false,     var foo = true && 'foo' && '' && 4 && 'foo' && true; console.log(foo); // '',      false 


18. When to use null, and when - undefined?


Simply put, null is the value for “nothing”, and undefined is the “nothing” itself: the absence of any primitive, object, property, a blank link. In normal practice, developers are advised to use null to indicate a clearly indicated absence of values, and undefined to leave for Javascript to indicate the absence of what “never happened”. When using null in a program, you distinguish script messages from traces of conscious null settings.

19. undefined by default


undefined describes the absence of a value. The following examples do not create values ​​(return undefined).
jsfiddle.net/codylindley/3buPG/light
jsfiddle.net/codylindley/3buPG/light
 //    -    var foo; console.log(foo); //undefined //      undefined console.log(this.foo); //undefined //   ,  ,   undefined- var myFunction = function f(x){return x} console.log(myFunction()); //undefined //  undefined,     return  var myFunc = function f(){}; console.log(myFunc()); //undefined 


20. The expression can work where the operator can not


Expressions return values, while operators perform actions, which is vividly illustrated by the example of the differences between if and the ternary logic operator for a conditional expression. "If" can not work when setting the parameters of functions, the conditional expression - can.
jsfiddle.net/codylindley/SSh68/light
 var verify = true; // if     if(verify){console.log('verify is true');} //   ,       //   (  --..) var check = verify ? console.log('verify is true') : console.log('verify is false'); //    console.log(verify ? 'verify is true' : ' verify is false'); 


21. Location of operators ++ and -


If the operators are prefix (before the variable), the value changes first, then it returns to the expression. If postfix - in the expression returns the initial value, but before returning the variable is changed.
jsfiddle.net/codylindley/QzG9w/light
 http://jsfiddle.net/codylindley/QzG9w/light/ var boo = 1; var foo = 1; console.log(boo++); // 1,   console.log(boo)   2 console.log(++foo); // 2,    foo 

Source: https://habr.com/ru/post/202686/


All Articles