English| https://niemvuilaptrinh.medium.com/11-social-buttons-for-website-design-a62cf3e143ad

Yang Xiaoai

During my university, I spent most of my time using JVM languages such as Java and Kotlin. Ironically, my first job after graduating from college was ReactJS developer.

In the past four years, the language I fear and escape is now in front of me. The main reason I'm afraid of JavaScript is that it's hard to understand why it works this way.

Nearly a year and a half later, I have confidence and slowly understand the working mode of JavaScript. I hope you will understand JavaScript better after reading this article.

Here, I share some JavaScript mysteries that I'm sure you never thought existed in JavaScript.

Now, let's start.

01. False value

undefined, null, 0, false, NaN, and '' are all false values. You may already know this, but do you know that empty strings are also false?

See below:

console.log('' == false); // true
console.log('' === false); // false

02. Filter function

You must often use the filter function on arrays. If you want to filter false values in the array, here is a hint. Simply provide a Boolean value in the filter function.

const arr = [1,4,undefined,null,9,NaN,10,''];
console.log(arr.filter(Boolean)); // [1,4,9,10]

03. Sort function

What do you know about the sort function in JavaScript? It sorts the array, right? Well, not exactly.

const arr = [1,2,20,10,8];
arr.sort(); // [1, 10, 2, 20, 8]
arr.sort((a,b) => a-b); //[1,2,8,10,20]

The output in line 2 above does not look like a sorted array. Why? This is because when we call the sort method without parameters, JavaScript will convert the elements of the array into strings and sort them alphabetically. Crazy?

04. Exchange

Many times, I will use an example to exchange two elements or two variables in an array. I once wrote a utility function for this, but this is a JavaScript method.

Inside arrays
let arr = [1,2,3,4,5];
[arr[4],arr[0]] = [arr[0],arr[4]];
console.log(arr); //[5,2,3,4,1]
Just two variables
let a = 10, b = 20;
[a,b] = [b,a];
console.log(a,b); // 20 10

This is the power of JavaScript deconstruction. Although I spent a long time learning deconstruction, I never thought so.

05. Trim function

In many programming languages, we have a pruning method on a string that removes any spaces in the string. However, using JavaScript pruning does not delete all spaces in the string. See below.

" shivam bhasin  ".trim(); // "shivam bhasin"
"shivam bhasin".trim(); // "shivam bhasin"

It removes all leading and trailing spaces from your string, but not all. This puzzles me because of my experience with strings in Java.

06. Push function

I often use the push method in my code. Although I recently learned that we can also use push to merge arrays.

const a = [1,2];
const b = [3,4];
a.push(b); // [1,2,[3,4]] not merged
Array.prototype.push.apply(a,b); // [1,2,3,4] merged

In line 4 above, the merged array will be in variable a.

07. isNaN function

isNaN has once again become one of the most commonly used methods in JavaScript. It checks whether the given parameter is a number. But it behaves differently for empty strings and filled strings. See below.

isNaN(1); // false
isNaN(""); // false
isNaN("a"); // true
isNaN("1"); // false

Line 1 may be clear to you that 1 is a number, so it returns false.

However, in line 2, JavaScript treats the empty string as 0, which is a number, so it cannot pass the NaN test.

Line 3 should also be clear because "a" is a string and therefore not a number.

Similarly, in line 4, "1" is a string, but JavaScript internally parses it into the number 1, so it fails the NaN test. Isn't that strange? Knowing this, I started using parseInt() on the parameters, and then passed them to the isNaN function.

08. Dynamic key of object

Sometimes I have to assign dynamic keys to my objects based on API responses or some calculations. At this time, how can we do this.

const a = "age";
const b = {
     name: 'shivam',
     [a]: 22, // this will become age: 22 at runtime
};

09, Splice and Slice

Nearly three months later, I realized that slice and splice are different methods in JavaScript. Laugh, I know. Here are the different ways they behave.

slice(s,e);
Here s is the starting index and end is the end index of the new array which will be a sub-array of the original array. Note that the original array will not be changed when using slice.

splice(i,n);
Here i denotes the starting index and n denotes the number of items to be removed starting from index i. Note that splice will alter the original array.

10. Floating point number It's almost incredible, but please stay with me. The behavior of adding floating-point numbers in JavaScript is very strange. See below.

console.log(0.1+0.2 === 0.3); // fals

This is because 0.1 + 0.2 gives a result of 0.300000000000000 4, which is not equal to 0.3.

console.log(9007199254740992 + 1); // 9007199254740992  
console.log(9007199254740992 + 2); // 9007199254740994

This seems strange. I didn't understand this until I knew that all JavaScript numbers represented floating-point numbers in 64 bit binary internals according to IEEE 754 standard. 11. typeOf operator typeOf is a unary operator that returns a string representing the original type of the variable. We know that JavaScript is the main object, so in most cases, this will return object. There are some strange exceptions.

typeOf NaN; // 'number'

typeOf NaN is a seemingly strange number, but NaN is technically a digital data type. However, it is a numeric data type whose value cannot be represented by an actual number. See below.

const nan1 = 2*'a'; // NaN
const nan2 = 4*'b'; // NaN
nan1 === nan2; // false

In the above example, nan1 and nan2 are not equal, which means they have some values. Only the values cannot be represented by numbers, so they are NaN. See another exception,

typeOf null; // 'object'

It would be great if you did it here. Most people end before that. But the more you know about it, the more you understand how the world's first programming language works. This is the secret I share with you. Basic operations > methods If you want your code to be faster, try using raw operations instead of method calls. Use vanilla JS whenever possible, which will make your code run faster at run time. See below.

const min = Math.min(a,b); // slow
const min = a<b? a: b; // fast
arr.push(x); // slow
arr[arr.length] = x; // fast

Finally, I hope you can gain something from the content I share with you today. If you find it useful, please share it with your development friends.