## Javascript coding standards

#### File name
- File names must be all lowercase and may include underscores (_) or dashes (-), but no additional punctuation.Filenames’ extension must be .js.

#### File encoding: UTF-8
- Source files should be encoded in UTF-8.

#### Line Length

- For readability, avoid lines longer than 80 characters.
- If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.
#### Use expanded syntax
- Each line of JS on a new line, the opening brace of a block on the same line as its associated statement, and the closing brace on a new line. This maximizes readability.
#### JavaScript comments
- Use JS-style comments to comment code that isn't self-documenting:
`// This is a JavaScript-style comment`
- Also leave a space between the slashes and the comment.

#### Variables
- Avoid using global variables and function names as every JavaScript file included in the page runs in the same scope.
- Do not use `var`
- When declaring variables and constants, use the `let` and `const` keywords, not `var`.
- If a variable will not be reassigned, prefer `const`otherwise use `let`.
- Local variables should be declared close to the point they are first used (within reason), to minimize their scope

#### Control statements

- While checking conditions, use strict equality (`===`) and inequality(`!==`) as these operators always consider operands of different types to be different.
- There should be no space between a control statement keyword and its opening parenthesis.
- There should be a space between the parentheses and the opening curly brace.

    if(x) {
      alert('Woo hoo!');
    }

- Use shortcuts for boolean tests. Use `x` and `!x`, not `x === true` and `x === false`.
- Ternary operators should be put on a single line as shown below and not nested.

    let status = (variable >= value) ? 'value1' : 'value2';

#### Use `textContent`, not `innerHTML`
- When inserting strings into DOM nodes, use `Node.textContent` as `textContent` is more efficient and less error prone.

    let text = 'Hello to all you good people';
    const para = document.createElement('p');
    para.textContent = text;

#### Looping

- When using `for/for...of` loops, make sure to define the initializer properly, with a let keyword as shown below

    let cats = ['Athena', 'Luna'];
    for(let i of cats) {
      console.log(i);
    }

- Optiize loops. Don't read the length attribute of an array at every iteration. Create a second variable in the pre-loop statement as shown below:

    var names = ['George','Ringo','Paul','John'];
    for(var i=0,j=names.length;i<j;i++){
      doSomeThingWith(names[i]);
    }

- Avoid DOM manipulation inside the loops. Can create the DOM nodes in the loop but avoid inserting them into the document.
#### Functions
- Where possible, use the function declaration to define functions over function expressions.

    // Good
    function sum(a, b) {
      return a + b;
    }

    // Not so good
    let sum = function(a, b) {
      return a + b;
    }

- When using anonymous functions inside a method that requires a function as a parameter, use an arrow function to make the code shorter and cleaner.
- There should be no space between a function name and its opening parenthesis.
- There should be a space between the parentheses and the opening curly brace.

#### Objects

- Use literals — not constructors — for creating general objects (when classes are not involved)

    let myObject = { };

    // Not

    let myObject = new Object();

- When defining an object class (as seen above), use UpperCamelCasing (also known as PascalCasing) for the class name, and lowerCamelCasing for the object property and method names.

    class Person {
      constructor(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
      }

      greeting() {
        console.log(`Hi! I'm ${this.name}`);
      };
    }

- When defining an object instance, either a literal or via a constructor, use lowerCamelCase for the instance name.

    let hanSolo = new Person('Han Solo', 25, 'male');

    let hanSolo = {
      name: 'Han Solo',
      age: 25,
      gender: 'male'
    }

#### Arrays

- Use literals — not constructors — for creating arrays.
- When adding items to an array, use push(), not direct assignment.

#### Circular Dependencies
- Do not create cycles between ES modules, even though the ECMAScript specification allows this.
- Note that it is possible to create cycles with both the import and export statements.

    // a.js
    import './b.js';
    // b.js
    import './a.js';

    // `export from` can cause circular dependencies too!
    export {x} from './c.js';
    // c.js
    import './b.js';

    export let x;

[Image Link](https://www.google.com)