This is the 10th day of my participation in the First Challenge 2022, for more details: First Challenge 2022.

Contempt to the poor will be old, learn the ancient sorrow when full embrace.

preface

How to write good JS, what is good code? This is a tough question to answer. There are a thousand Hamlets in a thousand people. This article is just a superficial discussion of what is the most important thing to focus on when writing code.

Let’s start with some code:

// Check whether a mat2d matrix is identity matrix
function isUnitMatrix2d(m) {
    return m[0= = =1 && m[1= = =0 && m[2= = =0 && m[3= = =1 && m[4= = =0 && m[5= = =0;
}
Copy the code

This code looks pretty low in terms of code elegance alone, but it is real code from the 4.8K ⭐ open source project Spritejs. This code is responsible for graphics rendering, which means that every frame is computed using this code. In such a scenario, the most important thing to focus on is efficiency performance, not code style.

Therefore, in general, code should be combined with the use of scenarios, focusing on the following aspects:

Left-pad incident of the year

Many popular NPM modules fail due to the introduction of a module called left-pad, which contains only 11 lines of code and is a simple string-handling function:

module.exports = leftpad;
function leftpad (str, len, ch) {
  str = String(str);
  var i = -1;
  if(! ch && ch ! = =0) ch = ' ';
  len = len - str.length;
  while (++i < len) {
    str = ch + str;
  }
  return str;
}
Copy the code

There are many problems with this issue. The first is the granularity of the NPM module. Why 11 lines of code for a function constitute a module? Then there is the code style problem. The code is very readable, but very inefficient, O(N) time complexity, and overall, the code itself is not a big problem.

However, in view of efficiency, the code can still be improved, and the most influential part is the loop part. We do not need to splice one by one, we can adopt repeat() method to simplify and improve efficiency:

function leftpad(str, len, ch=""){
  str = "" + str;
  const padLen = len - str.length;

  if (padLen <= 0) {return str;
  } else {
    return (""+ ch).repeat(padLen) + str; }}Copy the code

The core code for repeat() in the previous MDN document is:

var rpt = "";
for(;;) {
  if ((count & 1) = =1) {
    rpt += str;
  }
  count >>>= 1;
  
  if (count == 0) {break;
  }
  str += str;
}
Copy the code

For example, if the number passed in is 20, its binary is 0001 0100, compare the last bit each time, if it is 1, join it, then move it right one, repeat the process, the time complexity is O(log2N).

But now the core code in MDN repeat() is:

var maxCount = str.length * count;
count = Math.floor(Math.log(count) / Math.log(2));
/ / while loop
while (count) {
  str += str;
  count--;
}
str += str.substring(0, maxCount - str.length);
return str;
Copy the code

This is the same as if it had not been improved in the beginning, so most scenarios don’t need to focus on efficiency, and code style is the most important thing to focus on.