JavaScript Basics and Guidelines
GitHub - gokulkrishh/Javascript-Guidelines: Javascript Basics and Guidelines
Javascript Basics & Guidelines
A simple approach to follow while writing javascript
Table of contents

[Comments] (#comments)
[Types (Primitives)] (#datatypes)
[Arrays] (#arrays)
[Objects] (#objects)
[Strings] (#strings)
[Functions] (#functions)
[Variables] (#variables)
[Conditional Statements] (#conditional-statements)
[Comparison Operators] (#comparison-operators)
[Loops] (#loops)
[Prototypes] (#prototypes)

comments


comments: In javascript there are 2 types of comments


Single line comment


Multi line comment


//this is a single line comment

/*
  this is a multi line comment
*/


⬆ back to top
datatypes


Primitive data types:


number


string


boolean (true or false)


undefined


null


  var foo = 1; //number
  var bar = 'Hello World'; //string


Above primitive data type values are accessed directly without any reference.


Other datatypes: such as object, array are accessed by its reference


object


array


  var foo = [1, 'hello']; //array
  
  foo[0] = 1; //accessing array value by its reference
  
  var bar = {
    name: 'Hello World' 
  }; //object

  bar.name = 'Hello World'; //accessing object by its reference


An example for String
  function stringFunz(str) {
    str = 'bar';
  }

  var string = 'foo';
  console.log(string); // "foo"

  stringFunz(string);
  console.log(string); // "foo"

  //Above string still remains as `foo`


Now let's try it with a reference in object
function objectFunz(obj) {
  obj.name = 'bar';
}

var obj = {}; //New object

obj.name = 'foo';
console.log(obj.name); // "foo"

objectFunz(object);
console.log(obj.name); // "bar"

//See now the obj.name is changed to `bar` 


⬆ back to top
arrays


Array creation using literal syntax
//Bad
var foo = New Array();

//Good
var foo = []; //array literal


Array starts at index 0
var bar = [1]; // array starts at index 0

console.log(bar[0]); //print 1


Add a new item to an array
var bar = [1];
bar.push(2); //adds 2 at the end of an array

console.log(bar); //print [1, 2]

Add a new item at start of an array


var bar = [1];
bar.unshift(2); //adds 2 before 1

console.log(bar); //print [2, 1]


Remove an item at start of an array
var bar = [4, 1, 2];
bar.shift(); //removes 4 from the start

console.log(bar); //print [1, 2]


Remove an item at the end of an array
var bar = [2, 1, 5];
bar.pop(); //removes 5 from the end

console.log(bar); //print [2, 1]


Get the length of an array


  var bar = [1, 2, 'hello'];

  console.log(bar.length); //print 3
⬆ back to top
objects

Object creation using literal syntax

  //bad
  var obj = new Object();
  
  //good
  var obj = {}; //empty object literal

Accessing an object

  var obj = {
    name: 'ABC',
    type: 'Alphabet',
    id: 123
  };

  console.log(obj.name); //print ABC

  console.log(obj['name']); //print ABC

Use better naming convension and don't use reserved keywords such as private, class etc.

  //bad
  var obj = {
    class: 'car'
  };

  //good
  var obj = {
    type: 'car'
  };
⬆ back to top
strings

Using single quote '' for strings

  //bad
  var bar = "Hello world";

  //good
  var bar = 'Hello world';

Using + to concatenate strings

  var bar = 'Hi I am ' + 'gokul';
⬆ back to top
functions

Function declarations

  function funz(name) {
    alert('My name is ' + name); //will alert my name is gokul
  }

  funz('gokul'); //call's the above function with argument

  var newFunz = new funz(); //creates an instance of the function funz

Function expressions

  //anonymous function
  var funz = function() {
    alert('I am a function too');
  };

  funz();
  
  //Named function expression
  var namedFunz = function funz() {
    alert('I am a function too');
  };

  namedFunz();


Immediately invoked function express (IIFE)

below function is called automatically


(function () {
  alert('I am a function which is invoked automatically');
})();


⬆ back to top
variables

Variable creation

//bad
foo = 1; //Stores 1 as global variable

//good
var foo = 1; //assigns number 1 to the variable foo

Local and Global variables

//global
var foo = 1; 

alert(foo); //will alert 1

function funz() {
  var bar = 10; //local variable
  console.log(bar); //print 10
  foo = 10; //changing the global variable value 1 to 10
}

funz(); //calling the function

alert(foo); //will alert 10
⬆ back to top
conditional statements


If, Else if, Else Statement
var a = false;
var b = true;

//If the below condition is true, call alert()
if (a) {
  alert('I am a if statement');
}
else if (b) {
  alert('I am else if statement'); //Will alert because b == true
}
else {
  alert('I am else statement');
}


⬆ back to top
comparison operators


Always use === instead of == and !== instead of !=


Difference is that === and !== will also check the type of the variable, See below example
var foo = 1;
var bar = '1';

console.log(foo == 1); //True, because `==` will do automatic type conversion

console.log(bar === 1); //False, because 1 !== '1'

console.log(bar === '1'); //True

console.log(bar !== 1); //True , '1' is not equal value as well as type


loops

for, for/in, while, do/while loop

-- for loop
for (statement 1; statement 2; statement 3) {
  
}

//statement 1 - Executes before the loop
//statement 2 - Condition to run the loop
//statement 3 - Executes each time after the loop

//See below for example

for (var i = 0; i < 10; i++) {
  console.log(i); //Will print from 0 to 9
}
-- for/in loop to loop through an array or object
for (var x in array or object)  {

}

//Looping through an array
var foo = [1, 2, 3, 4, 5];

for (var i in foo) {
  console.log(foo[i]); //Will loop the array and prints 1 to 5
}

//Looping through an object
var obj = { fname : 'gokul', lname : 'krishh'};

for (var name in obj) { 

  //To check property belongs to object, not to prototype object
  //hasOwnProperty is only to check objects
  
  if (obj.hasOwnProperty(name)) {
    console.log(obj[name]); //Will print "gokul" and "krishh"
  }

}
-- while loop
while (statement 1) {
  
}

//statement 1 - Condition to run the loop
//See below for example

var i = 0;

while (i < 10) {
  i++; //Increment i
  console.log(i); //Will print from 1 to 10
}
-- do/while loop will execute once, before checking the condition in while
do {
  //Execute once before checking while condition
} while(statement 1)

//statement 1 - Condition to run the loop
//See below for example

var i = 0;

do {
  console.log(i); //Will print from 0 to 10
  i++; //Increment i
} while (i < 10) 
⬆ back to top
prototypes


In javascript function, array, objects are considered as objects


All objects in js inherit, properties and methods from the prototype


function person(name, age) {
  this.name = name;
  this.age  = age;
}

person.prototype.model = 'Car';

//model `car` is added to the person() from its prototype

var newPerson = new person('Gokul', 23); //calling the person()

console.log(newPerson); //Will print {name: "Gokul", age: 23, model: "Car"}
More contents are coming soon...
Contribution
If the contents above need to be improved or if you want to add more content to it. Feel free to fork and give me pull request.
Thanks!!
Author

Follow me
   
License
MIT
