A deeper look

into

Presentation By :Ashutosh MahtoMindfire Solutions

Javascript

Basics

“The world's most misunderstood programming language”

- Douglas Crockford

A Deeper Look Into Javascript Basics

Agenda to Discuss

Hoisting in javascript

Scopes In javascript

Objects

Functions

Closures

Prototype

Drawing some basic practices

A Deeper Look Into Javascript Basics

Hoisting in Javascript

A Deeper Look Into Javascript Basics

Every declaration, variable declaration or function declaration is hoisted to the top of its declaration context.

/* Hoisiting */var name = "ramesh";function showName() { if (!name) {

var name = "Suresh";

}

console.log(name);

}

showName(); // output - Suresh

Defining Scopes in Javascript

- Everything defined without var is global

- Every global variable or object can be accessed through window.<variablename>

- Unlike C, Javascript doesn't have Block Level Scope

- Javascript has Function Level Scope

A Deeper Look Into Javascript Basics

Defining Scopes in Javascript

A Deeper Look Into Javascript Basics

#include <stdio.h>int main() {

int x = 1;printf("%d, ", x); // 1if (1) {

int x = 2;printf("%d, ", x); // 2

}printf("%d\n", x); // 1

}

var x = 1;console.log(x); // 1if (true) { var x = 2; console.log(x); // 2}console.log(x); ???

Output – 2, which should be 1 as in C

Scope in C Scope in Javascript

Object In Javascript

- Everything except Number, String, Boolean, null and undefined are objects.

- Can be created using object literals or through Object constructor.

- Objects are usually key value pairs.

- Objects can be used as Associative Arrays, but are not actually any type of array.

- Objects can link to another objects through -

var newObject = Object(oldObject);

This will create a new object and keep a link to the Old Object.

If any property is not available in newObject it will be looked into oldObject

A Deeper Look Into Javascript Basics

Functions In Javascript

- Executable piece of code, in any programming language.

- In javascript, functions are INVOKABLE objects.

- Like objects functions can carry Properties & Methods, can be copied, deleted and augmented

- Functions can be passed as parameter to other functions and can be returned also

- Functions are First Class Citizens in javascript.

- Every function returns a value, if not, returns undefined.

A Deeper Look Into Javascript Basics

Functions in Javascript

- Function declaration

function sayHello() { console.log('Hello!');}

- Function expression

var sayHello = function() { console.log('Hello!');}

- Anonymous Functions

- Self executing functions

(function() { console.log('Hello!');})();

A Deeper Look Into Javascript Basics

Closures in Javascript

Local variables for a function are kept alive after the function has returned

A closure is a stack-frame which is not deallocated when the function returns (as if a 'stack-frame' were malloc'ed instead of being on the stack!)

A Deeper Look Into Javascript Basics

var greet = function(time) { var good = "Good"; return function(name){ console.log(good+ " "+ time+ " "+ name); }}var sayGoodMorning = greet("Morning");sayGoodMorning("Suresh");

// Good Morning Suresh

Prototype in Javascript

Prototype is the base of Object Oriented Programming in javascript

Every function contains a prototype object that can be chained through its constructor.

A Deeper Look Into Javascript Basics

var Person= function(name) {this.name = name;

}Person.prototype.getName = function() {

return this.name;}var student = new Person("Satish");

Drawing some best practices

Start using JSLint

Start using “strict”

Always use var while declaring variables to avoid unnecessary globals

Declare all the variables at the top of its function scope

Maximize the use of function expressions

Always use ; as delimiter

Never think of Objects as a kind of array, and never declare an object as an array.

A Deeper Look Into Javascript Basics

Any Question ???

A Deeper Look Into Javascript Basics

References and Recommendations Books

Javascript The Good Parts, Douglas Crockford

Javascript: The Definitive Guide, David Flanagan

Professional Javascript For Developers, Nicholas Zakas

Blogs

Articles

Stack Overflow

A Deeper Look Into Javascript Basics

Thank You !!!

A Deeper Look Into Javascript Basics