JavaScript Code Style
h
Coder100 (12657)

JavaScript, unlike many languages, has a very diverse code style. This is probably a combination of not only ASI (Automatic Semicolon Insertion) code style, but also if quotes should be used or not, and type safety.

So without further ado, lets talk about my favorite code style!

Coder100's code style

Semicolons

Semicolons are always required, but beware of ASI.

console.log("hey :smirk:"); // <-- good!
console.log("hey :smirk:") // <-- avoid!

ASI

ASI automatically inserts a semicolon if the program errors. You can read up here

Quotes

Due to how often we're using single quotes, it is very recommended to use double quotes. Also in lower level languages, double quotes signify a string, and I believe it is wise to adapt that into your coding as well.

console.log("Let's go outside!");  // <-- good!
console.log('Let\'s go outside!') // <-- avoid!

However, the exception is when you require double quotes:

console.log("\"That's what she said\""); // <-- avoid!
console.log('"I am Coder100"'); // <-- good!
console.log('"That\'s what she said"'); // <-- edge case
console.log(`"That's what she said"`); // <-- good!

Try to minimize escaping, and if there is no need for escaping, just use ".

Spacing

I have always used two spaces, but sometimes I use 4, and sometimes I use tabs. So which one should we use? I flipped a coin between two spaces and tabs and got two spaces, so that's what we are using.

function hi() {
  return 5; // <-- good!
}

function hi() {
	return 5; // <-- avoid!
}

Resolving Paths

Use path.join, not only is it going to make your life easier, it also allows you to make more complex paths.

const path = require("path");

path.join(__dirname, "./index.html"); // <-- good!
__dirname + "/index.html"; // <-- avoid!

Destructuring

I haven't found much use for destructuring, but just make sure you add spaces:

const {log} = console; // <-- avoid!
const { log } = console; // <-- good!
const { log, debug, dir, table, error, warn } = console; // <-- good!
const { log,
        debug,
        dir,
        table,
        error,
        warn } = console; // <-- consider using no wrap (avoid)

Spacing

This code snippet will tell you everything.

if (true) {
  // this is what we want
} else {
  console.log("POG UR COMPUTER IS BROKE");
}

function poggers(a) {
  return 5;
}

let myArr = [1, 2, 3];
myArr.push(10);

poggers(10);

Arrow functions

I only use arrow functions as lambdas. You should too. It allows you to define functions anywhere!

const bad = () => console.log("bad"); // <-- avoid!

hi();

function hi() { // <-- good!
  console.log("goodbye");
}

[1, 2, 3].map(n => n ** 2); // <-- good!
[1, 2, 3].map(function square(n) {
  return n ** 2;
}); // <-- uh ew (avoid)

Also anonymous functions should always be converted to arrow functions, except for when binding.

const x = {
  key: "value",
  func: () => this.key // good!
};
x.func(); // => undefined

const y = {
  key: "value",
  func: function () { return this.key; } // good!
};
y.func(); // => "value"

Function Definition

I normally call functions before defining them,

a();

function a() {
  console.log("hi");
}

however, what you want is really up to you. However, never define functions within loops.

for (let i = 0; i < 10; i++) {
  function a() { return i; }
  console.log(a);
}

Mutability

Like rust, make sure to define everything as constant. Only when you need to change mutability should you change the const keyword to let.

const a = 5; // <-- good!
const b = 10; // <-- good!
let g = 10; // <-- good!
g++;

let j = 3; // <-- avoid!

Objects and Arrays

These can be prefixed with let if you are going to change them. const isn't only for the interpreter, it is also for programmers.

const a = {
  b: 6
};

a.b = 6; // <-- avoid!

If you want objects to be constant, consider also adding Object.freeze()

const a = Object.freeze({
  b: 6
});

a.b = 10; // <-- will silently fail

Same goes with arrays.

Member Access

The final code style is with member access. Try to use . as much as you can, but use [] for variables and numbers.

let a = { b: 6 };
a.b = 10; // <-- good!
a[3] = 10; // <-- good!
a["b"] = 10; // <-- bad!

Conclusion

Hopefully you like this code style. Finally I have peaked in good coding practices!
In the next tutorial, I will be showing you how to use eslint to enforce this code style :))

See you then!

Credits

Special thanks to @fuzzyastrocat and @Baconman321 for pointing out some edge cases

You are viewing a single comment. View All
fuzzyastrocat (1472)

Pretty good tutorial! However:

Also anonymous functions should always be converted to arrow functions.

That's not the case! They have two different roles and arrow functions will not work in some situations due to their this scoping. (Otherwise anonymous functions would have no purpose in the language at all.) Example:

const x = {
  key: "value",
  func: () => this.key
};
x.func(); // => undefined

const y = {
  key: "value",
  func: function () { return this.key; }
};
y.func(); // => "value"

Also, I have to disagree with the first part on arrow functions. For the example:

const bad = () => console.log("bad");

hi();

function hi() {
  console.log("goodbye");
}

For such a trivial example, the function bad is much more succinct. And, such a trivial function should not require a circular dependency, which is the only reason function hoisting is useful. So, I feel that simple one-liners (function = evaluate a single expression) should be expressed as arrow functions, while multiline functions (functions which would require () => { ... statements ... }) should be expressed as function name () { ... }.

Coder100 (12657)

thanks! yeah, ig I didn't consider many edge cases in this tutorial, thanks for pointing those out, I'll add them @fuzzyastrocat

Coder100 (12657)

wait a second why doesn't y require binding? It's an anonymous function right? @fuzzyastrocat

fuzzyastrocat (1472)

@Coder100 It works just fine like that, no binding needed. That's the point of (and my point with) the function () { } expression. (Try it yourself).

realTronsi (845)

@Coder100 why did you make a tutorial on your own opinions -_-

cycle farmer

also for example:

for (let i = 0; i < 10; i++) {
  function a() { return i; }
  console.log(a);
}

defining functions in loops is fine if you want to programmatically define functions for some reason, just that it's not commonly needed

const a = {
  b: 6
};

a.b = 6; // <-- avoid!

why is the avoid there, as you stated afterwards, for objects to be constant use Object.freeze()

const != Object.freeze() at all

console.log("\"That's what she said\""); // <-- avoid!
console.log('"I am Coder100"'); // <-- good!
console.log('"That\'s what she said"'); // <-- edge case
console.log(`"That's what she said"`); // <-- good!

purely personal preference, using escape characters is arguably even better in most situations since it allows you to utilize all three

Coder100 (12657)

@realTronsi well the thing is this tutorial was inspired by the standard code style, which is absolutely trash

realTronsi (845)

@Coder100 I just don't know what the purpose of this tutorial is lmao, like it doesn't really teach you anything??? Otherwise decently entertaining ig

fuzzyastrocat (1472)

@Coder100 @realTronsi Note that while systematically defining functions in loops is possible, it's very inefficient.

well the thing is this tutorial was inspired by the standard code style, which is absolutely trash

If it's absolutely trash, why did you make a tutorial on it? Shouldn't you make a tutorial on the best way to try to educate people? (Also if it was inspired by the standard code style then everyone's already doing this, so a tutorial isn't needed...)

realTronsi (845)

@fuzzyastrocat I mean if you want to systematically mass define functions that's the way to go, you don't want to do something like

let i = 1;
functions.push(function(){
  return i;
});
i++;
functions.push(function(){
  return i;
});
i++;
//etc

obviously systematically defining functions will be rarely useful though (I can't even think of a great example atm)