25
JAVASCRIPT - GOOD PARTS Manohar Shetty || Supriya Anand

Javascript good parts - for novice programmers

Embed Size (px)

Citation preview

JAVASCRIPT - GOOD PARTSManohar Shetty || Supriya Anand

SESSION-1

Efforts put in to make a robot called Javascript

SESSION-2

Play with javascipt - alerts, console.logs and what not.

SESSION-2

Frustated! Why somethings work and somethings don't?

I am bad... very very bad.

GLOBAL VARIABLESNo linker. Global namespace. Variable collisions!

//Your code function foo() { if (false) { var x = 1; } return; var y = 1;}

//How Javascript interprets it function foo() { var x, y; if (false) { x = 1; } return; y = 1;}

'+'Adds and concatenates.

Un-predictable and error prone

0 + "1"

// returns "01"

"3" + 1

// returns "31"

"3" - "2"

// returns 1

SEMICOLON INSERTIONSemi-colons are INSERTED by the parserOptional semi-colons are not a “language feature”You are not warned!! .... 'Uh oh..'

“JavaScript: where forgetting the occasionalsemicolon isn't necessarily the end of the

world.”

NOT WHAT YOU EXPECTTYPEOF()

typeof('abc’) -> string -> Nice

typeof(1) -> number -> Good

typeof({}) -> object -> Great

typeof([1,2,3]) -> object -> Ooops

typeof(null) -> object -> WTH

AGAIN..== AND !=

‘ ’ == 0 -> false

0 == ‘ ‘ -> true

false == ‘false’ -> false

false == ‘0’ -> true

false == undefined -> false

undefined == null -> true

FLOATING POINTS0.1 + 0.2 = 0.3 //Nope, back to grade 1 you go!

> 0.1 + 0.2 == 0.3false> 0.1 + 0.2 = 0.30000000000000004

WHAT?!

STYLE IS NOT SUBJECTIVE return {status: ‘OK’}

return{status: ‘OK’}

return;{status: ‘OK’;}

OKAY, ENOUGH OF THE BAD!

Show me the good!!

FINALLY, LETS TALK ABOUT THE GOOD.

OBJECT LITERALS var obj = { name: 'manohar', age: 23 }

Pass as options to functionsJSON for communication, remember API's anyone?

DYNAMIC OBJECTS

Members can be added to any object, any timeHelpful to attach attributes

var obj = { count: 2, getCount: function(){ return this.count; } } obj.incrementCount = function(){ this.count++; } obj.incrementCount(); alert(obj.getCount()); // 3

LOOSELY TYPED /* JavaScript Example (loose typing) */var a = 13; // Number declarationvar b = "thirteen"; // String declarationb=a // b = 13

/* Java Example (strong typing) */int a = 13; // int declarationString b = "thirteen"; // String declaration

FUNCTIONS ARE OBJECTS

can be passed, returned var fibonacci = function(number) { number < 2 ? number : fibonacci(number -1 ) + fibonacci(number - 2) }

LAMBDA / CLOSURES

a closure is a reference to the local vars for a function -local vars kept alive after the function has returned

a closure is a stack-frame which is not deallocated whenthe function returns. (as if a 'stack-frame' were malloc'ed

instead of being on the stack!)

function, inner function, outer function, function insidefunction, this function, that function

CONFUSED?

CLOSURES, IN ACTION var wishPeople = function(){ var names = ['manohar', 'supriya', 'hari', 'DP']; var wish = function(){ for(i=0, n=names.length; i < n;i++) { console.log("Hello!" + names[i] + ". Welcome to Women Who Code meetup" } }; return wish;}();

wishPeople();

Prototypal InheritanceMemoizationCallbacksscope

AND MORE!

www.mavenhive.in