---
# System prepended metadata

title: Untitled

---

## 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.
   ```javascript=
    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.

    ```javascript=
    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.

    ```javascript=
    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
    
    ```javascript=
    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:
 
    ```javascript=
    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.
    ```javascript=
    // 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) 

    ```javascript=
    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.

    ```javascript=
    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.

    ```javascript=
    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.

    ```javascript=
    // 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)
