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 */
-
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`
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
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'
};
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';
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'); })();
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
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'); }
comparison operators
-
Always use
===
instead of==
and!==
instead of!=
-
Difference is that
===
and!==
will also check the type of the variable, See below examplevar 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)
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