Javascript
13 Most Important Google's Javascript Style that You Should Know

5c6f5c81a92cc

As we all might have experienced when writing codes that sometimes writing a clean and maintainable code is always the issue since we battle with our mindset especially as beginners doubting if what we are doing is actually the right solution, pattern or style. Sometimes this has led to argument between developers about which style is the best to use as everybody believes that what he or she is doing works best for them.

Google's JavaScript Style Guide . The issue above is what google team has come to solve by creating style guides that developers should follow while writing codes.

Please Note that these guides are not mandatory to follow or will it make your code not work, but it is a standard brought to us by the Giant tech Company in the world and I guess no Javascript developer will fail to abide to this in order to keep maintainable and clean code as it is recommended by this Giant company (Google).

This guide will help improve your coding skills as you might likely change how you indent, declare variables or use single or double quotes and so many other things.

1. Use Spaces not tabs

It has always been my habit to hit the tab key whenever I want to indent my code, well it works fine for me as I use Visual studio Code, so my tabs are automatically converted to 4 spaces. But do I escape failing this guide by using Vscode? Well I will say no, but why? this is because in general using tabs is not advisable and I might one day find my self in an development environment that is not Vscode and unfortunately the editor is not changing my tab characters to spaces and this might lead to error in one way or the other.

Use two spaces not four

Also again, Google's JS Style Guide advices we use only two spaces but not four.

// bad practice
if(typeof 23 == "number" ) {
    console.log(true)
}

//good practice
if(typeof 23 == "number" ) {
  console.log(true)
}

So the conclusion for this is to avoid it at all and always use two spaces. learn how to use spaces.

2. Always terminate with Semicolons

Developers with JavaScript as their first language always fall culprit to this crime as JavaScript error will not be thrown if you fail to terminate with semicolon ( ; ) but instead during the compilation javascript engine will add it at for.

This will also increase the compilation time as extra time is consumed adding semicolons though this is not noticeable as the time is so small in milliseconds

// bad
let age = 23
let name = "Michael"

function sayHello() {let message = 'Hello'; console.log('Hello');}

// good
let age = 23;
let name = "Michael";

function sayHello() {
  let message = 'Hello';
  console.log('Hello');
}

3. Avoid ES6 Module for Now

The semantic syntax for es6 modules (import and export) are not yet finalized, this might change in the future so it is advised not use it for now.

// Avoid doing this

//------ color.js ------
export function color(ab) {
    return ab;
}
export function rgba(r, g, b, a) {
    return r;
}

//------ index.js ------
import { color, rgba } from 'color.js';

Note this rule might change in the future

4. Using Horizontal Alignment is not encouraged but not forbidden

Though is not bad but it is condemned by Google, so if you are a fan of this pattern I think you should have a rethink since this is condemned by Google

// bad
{
  age:        42,  
  height:    '125inch', 
};


// good
{
  age: 42,  
  height: '125inch', 
};

5. Detach from Using var

ES6 was introduced with a lot sugar, let and const was added as the keyword for assigning variable, but developers still stick with var, this might be because var has been common, but keeping with recent updates and implementing them while coding should be among the characteristic of a good developer.

// bad
var name = 'Michael';
var PI = 3.142;

// good
let name = 'Michael';
const PI = 3.142

6. Stick with Arrow Functions

Arrow function provides more nice looking code and it solves a lot of problems like binding this in Class/Object. I prefer it most when used as a callback function or nested function

// bad
arr.forEach(function (items) {
  console.log(items)
});

arr.reduce(function (carry, items) {
  return carry
});

//good
arr.forEach( items => {
  console.log(items)
});

arr.reduce( (carry, items) => {
  return carry
});

7. Make Use of Template strings instead of concatenation

Using template strings makes your code looks nicer than that concatenation operator + appearing everywhere in your code just because you want to use variables inside a string. Template strings was added in ES6

// bad
functoin sayAge(age) {
  return "My age is "+age;
}

// good
function sayAge(age) {
  return `My age is ${age}`;
}

8. Avoid line continuations in Long strings

As Google and Airbnb has being going in different direction about this particular guide, Google encourages using concatenation operator while Airbnb suggest living long text to be long as it is. Either way, using line continuations is not recommended.

This makes your code ugly to read.

// bad 
const longString = "This is a very long string that \
    far exceeds the 80 column limit. It unfortunately \
    contains long stretches of spaces due to how the \
    continued lines are indented.";


// good (according to google)
const longString = "This is a very long string that " + 
    " far exceeds the 80 column limit. It does not contain " + 
    " long stretches of spaces since the concatenated " +
    " strings are cleaner."

9. "for..of'' loop is the Preferred for loop

Most times developers makes this mistake of always using the for...loop in each case forgetting that every loop has a particular case where it is recommended. for...of loop is recommended in arrays while for..in is the best option in objects.

Here Google is telling us to make a better use of the for..of loop instead of the traditional for...loop

10. Run from eval ( ) and Function (...string)

Yeah, you read it clearly, as we all know that with the functions above we are able to run strings as code. Things might go funny when a user injects his own harmful string of JavaScript code into these functions

11. Always Name Constants with Uppercases and Underscores

You should avoid using lowercase for naming your constants, by convention constants are always named in UPPER CASE. Avoid falling to the culprit of this crime

// bad
const pi = 3.142

// good
const PI = 3.142

12. One variable per declaration

In every local variable declaration only one variable should be declared in on line: declarations such as let a = 1, b = 2; are not used.

// bad
let a = 1, b = 2, c = 3;

// good
let a = 1;
let b = 2;
let c = 3;

13. Use single quote not double qoute

Always make use of Single quote ( ' ) instead of double quotes ( " )

Note, when it falls that you have to use single quote inside a single quote you have to switch to string literals instead of escaping quotes

// bad
let str = "Hello, w'll come";
let txt = 'Hello, w\'ll come`;

// good
let str = 'Hello, we will come';
let txt = `Hello, w'll come;

More on this soon.

Hope you enjoy this article, please some thumbs up.

![5c6f5c81a92cc](serve/attachment&path=5c6f5c81a92cc) As we all might have experienced when writing codes that sometimes writing a clean and maintainable code is always the issue since we battle with our mindset especially as beginners doubting if what we are doing is actually the right solution, pattern or style. Sometimes this has led to argument between developers about which style is the best to use as everybody believes that what he or she is doing works best for them. **[Google's JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) .** The issue above is what google team has come to solve by creating style guides that developers should follow while writing codes. > Please Note that these guides are not mandatory to follow or will it make your code not work, but it is a standard brought to us by the Giant tech Company in the world and I guess no Javascript developer will fail to abide to this in order to keep maintainable and clean code as it is recommended by this Giant company (Google). This guide will help improve your coding skills as you might likely change how you indent, declare variables or use single or double quotes and so many other things. 1. Use Spaces not tabs ================== It has always been my habit to hit the tab key whenever I want to indent my code, well it works fine for me as I use **Visual studio Code**, so my tabs are automatically converted to 4 spaces. But do I escape failing this guide by using **Vscode**? Well I will say no, but why? this is because in general using tabs is not advisable and I might one day find my self in an development environment that is not **Vscode** and unfortunately the editor is not changing my tab characters to spaces and this might lead to error in one way or the other. ### Use two spaces not four >Also again, Google's JS Style Guide advices we use only two spaces but not four. ```` // bad practice if(typeof 23 == "number" ) { console.log(true) } //good practice if(typeof 23 == "number" ) { console.log(true) } ```` So the conclusion for this is to avoid it at all and always use two spaces. learn how to use spaces. 2. Always terminate with Semicolons =========== Developers with JavaScript as their first language always fall culprit to this crime as JavaScript error will not be thrown if you fail to terminate with semicolon **( ; )** but instead during the compilation javascript engine will add it at for. >This will also increase the compilation time as extra time is consumed adding semicolons though this is not noticeable as the time is so small in milliseconds ```` // bad let age = 23 let name = "Michael" function sayHello() {let message = 'Hello'; console.log('Hello');} // good let age = 23; let name = "Michael"; function sayHello() { let message = 'Hello'; console.log('Hello'); } ```` 3. Avoid ES6 Module for Now == The semantic syntax for es6 modules (import and export) are not yet finalized, this might change in the future so it is advised not use it for now. ```` // Avoid doing this //------ color.js ------ export function color(ab) { return ab; } export function rgba(r, g, b, a) { return r; } //------ index.js ------ import { color, rgba } from 'color.js'; ```` >Note this rule might change in the future 4. Using Horizontal Alignment is not encouraged but not forbidden ==== >Though is not bad but it is condemned by Google, so if you are a fan of this pattern I think you should have a rethink since this is condemned by Google ```` // bad { age: 42, height: '125inch', }; // good { age: 42, height: '125inch', }; ```` 5. Detach from Using var === ES6 was introduced with a lot sugar, **let** and **const** was added as the keyword for assigning variable, but developers still stick with var, this might be because var has been common, but keeping with recent updates and implementing them while coding should be among the characteristic of a good developer. ```` // bad var name = 'Michael'; var PI = 3.142; // good let name = 'Michael'; const PI = 3.142 ```` 6. Stick with Arrow Functions === Arrow function provides more nice looking code and it solves a lot of problems like binding **this** in Class/Object. I prefer it most when used as a callback function or nested function ```` // bad arr.forEach(function (items) { console.log(items) }); arr.reduce(function (carry, items) { return carry }); //good arr.forEach( items => { console.log(items) }); arr.reduce( (carry, items) => { return carry }); ```` 7. Make Use of Template strings instead of concatenation === >Using template strings makes your code looks nicer than that concatenation operator **+** appearing everywhere in your code just because you want to use variables inside a string. Template strings was added in ES6 ```` // bad functoin sayAge(age) { return "My age is "+age; } // good function sayAge(age) { return `My age is ${age}`; } ```` 8. Avoid line continuations in Long strings === As **Google and Airbnb** has being going in different direction about this particular guide, Google encourages using concatenation operator while Airbnb suggest living long text to be long as it is. Either way, using line continuations is not recommended. This makes your code ugly to read. ```` // bad const longString = "This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces due to how the \ continued lines are indented."; // good (according to google) const longString = "This is a very long string that " + " far exceeds the 80 column limit. It does not contain " + " long stretches of spaces since the concatenated " + " strings are cleaner." ```` 9. "for..of'' loop is the Preferred for loop === Most times developers makes this mistake of always using the for...loop in each case forgetting that every loop has a particular case where it is recommended. **for...of loop** is recommended in arrays while **for..in** is the best option in objects. >Here Google is telling us to make a better use of the for..of loop instead of the traditional for...loop 10. Run from **eval** **(** **)** and Function (...string) === Yeah, you read it clearly, as we all know that with the functions above we are able to run strings as code. Things might go funny when a user injects his own harmful string of JavaScript code into these functions 11. Always Name Constants with Uppercases and Underscores ==== You should avoid using lowercase for naming your constants, by convention constants are always named in UPPER CASE. Avoid falling to the culprit of this crime ```` // bad const pi = 3.142 // good const PI = 3.142 ```` 12. One variable per declaration === In every local variable declaration only one variable should be declared in on line: declarations such as let a = 1, b = 2; are not used. ```` // bad let a = 1, b = 2, c = 3; // good let a = 1; let b = 2; let c = 3; ```` 13. Use single quote not double qoute === Always make use of Single quote **( ' )** instead of double quotes **( " )** >Note, when it falls that you have to use single quote inside a single quote you have to switch to string literals instead of escaping quotes ```` // bad let str = "Hello, w'll come"; let txt = 'Hello, w\'ll come`; // good let str = 'Hello, we will come'; let txt = `Hello, w'll come; ```` More on this soon. Hope you enjoy this article, please some thumbs up.
edited Feb 22 at 9:47 am
0
134
0
1
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
With selected deselect posts show selected posts
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft