Lecture 3
Closure in Javascript
Closure is retaining the scope of a variable even after the function
has returned.
function makeWorker() {
var name = "Pete";
return function() {
alert(name);
};
}
var name = "John";
// create a function
var work = makeWorker();
// call it
work();
function makeCounter() {
var count = 0;
return function() {
return count++; / / has access to the outer "count"
};
}
var counter = makeCounter();
alert( counter() )
; / / 0
alert( counter() ) ; / / 1
alert( counter() ); // 2
function makeCounter() {
var count = 0;
return function() {
return count++;
};
}
var counter1 = makeCounter();
var counter2 = makeCounter();
alert( counter1() )
; / / 0
alert( counter1() ) ; / / 1
alert( counter2() ); // 0 (independent)
Closure inside loops
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 10);
}
for(var i = 0; i < 10; i++) {
setTimeout((function(i) {
console.log(i);
})(i), 10)
}
for(var i = 0; i < 10; i++) {
setTimeout(console.log.bind(console, i), 10);
}
In other words, a closure gives you access to an outer function's scope from an inner
function. In JavaScript, closures are created every time a function is created, at
function creation time. To use a closure, define a function inside another function and
expose it.
Self invoking functions in js
(function(){
console.log(1)
})()
Usage to create scopes
Currying
function add(x,y){
if(arguments.length > 1) {
return x+y;
}else if(arguments.length == 1){
return function (y){
return x+y;
}
}
}
add(2,3);
add(2)(3);
var obj = { // every method returns obj---------v
first: function() { console.log('first'); return obj; },
second: function() { console.log('second'); return obj; },
third: function() { console.log('third'); return obj; }
}
obj.first().second().third();
Inheritance in es6
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
incrementAge() {
return ++this.age;
}
var u = new User('sid', 25);
alert(u.incrementAge());
alert(u.incrementAge());
class Admin extends User {
constructor(name, age, role) {
super(name, 25);
this.role = role;
}
var a= new Admin('sid', 25, 'admin');
alert(a.incrementAge());
alert(a.incrementAge());
===============================================
===============================================
Lecture 2
function abc() {
console.log(a);
}
function abc() {
var a = 10;
console.log(a);
}
Hoisting
var z = 2;
function check() {
console.log(z);
var z = 10;
}
check();
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
}
log('my message',’hello’);
log('my message', 'your message'); //(app) my message your message
var animal = {
eats: true,
walk: function() {
alert("Animal walk");
}
};
var rabbit = {
jumps: true,
__proto__: animal
};
console.log(rabbit);
var longEar = {
earLength: 10,
__proto__: rabbit
};
console.log(longEar);
rabbit.walk();
var animal = {
eats: true,
walk() {
alert("Animal walk");
}
};
var rabbit = {
__proto__: animal
};
rabbit.walk = function() {
alert("Rabbit! Bounce-bounce!");
};
rabbit.walk();
var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z;
}
};
var b = {
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80
// a constructor function
function Foo(y) {
// which may create objects
// by specified pattern: they have after
// creation own "y" property
this.y = y;
}
// also "Foo.prototype" stores reference
// to the prototype of newly created objects,
// so we may use it to define shared/inherited
// properties or methods, so the same as in
// previous example we have:
// inherited property "x"
Foo.prototype.x = 10;
// and inherited method "calculate"
Foo.prototype.calculate = function (z) {
return this.x + this.y + z;
};
// now create our "b" and "c"
// objects using "pattern" Foo
var b = new Foo(20);
var c = new Foo(30);
// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80
// let's show that we reference
// properties we expect
console.log(
b.__proto__ === Foo.prototype, // true
c.__proto__ === Foo.prototype, // true
// also "Foo.prototype" automatically creates
// a special property "constructor", which is a
// reference to the constructor function itself;
// instances "b" and "c" may found it via
// delegation and use to check their constructor
b.constructor === Foo, // true
c.constructor === Foo, // true
Foo.prototype.constructor === Foo, // true
b.calculate === b.__proto__.calculate, // true
b.__proto__.calculate === Foo.prototype.calculate // true
);
function Mammal(name){
this.name=name;
this.offspring=[];
Mammal.prototype.haveABaby=function(name){
var newBaby=new Mammal(name +" "+this.name);
this.offspring.push(newBaby);
return newBaby;
function Cat(name){
this.name=name;
Cat.prototype = new Mammal(); // Here's where the inheritance occurs
Cat.prototype.constructor=Cat; // Otherwise instances of Cat would have a constructor
of Mammal
var someAnimal = new Mammal('Mr. Biggles');
var myPet = new Cat('Felix');
console.log('someAnimal is '+someAnimal.name); // results in
console.log('myPet is '+myPet.name); // results in
myPet.haveABaby('Big'); // calls a method inherited from Mammal
myPet.haveABaby('Small'); // calls a method inherited from Mammal
console.log(myPet.offspring.length); // shows that the cat has one baby now
console.log(myPet.offspring); // results in '[Mammal "Baby Felix"]'
What is an Argument array is it array or array like and what can we do with it?
Loosely typed
var a = ‘2’
var b = 2
if(b == a)
Conversion
Function in function
var a = function
function try(fn) {
console.log(fn());
}
try(function(){return 8});
Var try = Function(){
Return 8;
}
try();
Javascript everything is an object
Var obj ={a:1, b:2};
Accessing the values of an object
Obj.a
obj[‘a’]
Why we do this ?
This is because we would want to get data where we know the name of the property then it
would be possible with
Var z= ‘a’;
Obj[z];
Ways to create an object
Var obj = {};
Var obj = new Object();
Object is a constructor function
Array
String
Each constructor function has methods inside it.
Var dog = {
“Name”: “golu”,
“Bread”: “pom”
}
Object inside object to create JSON
Var dog = {
“Name”: “golu”,
“Bread”: “pom”,
Owner: {
“Name”: “Siddharth”
}
}
Function inside an object
Var dog = {
“Name”: “golu”,
“Bread”: “pom”,
Bark: function() {
console.log(‘Dog barks’);
}
}
Dog.bark
Var dog = {
“Name”: “golu”,
“Bread”: “pom”,
Bark: function() {
console.log(this.name+” ”+“ barks’);
}
}
This and concatination
Function Dog() {
console.log(a);
console.log(arguments);
}
Dog(1);
Arguments is an array like structure
What is an array like structure
Function Dog(name, breed) {
This.name = name;
This.breed = breed;
}
Var d = new Dog(‘golu’, ‘pom’);
Default constructor function that we created
What is prototype
hasOwnProperty false as it is borrowed method.
Dog.prototype.barks = function() {
console.log(‘barks’);
}
d.barks();
__proto__
Very powerful used exactly for inheritence
Array
Var a = [ ];
Var a = new Array();
Var a = [1,2,3];
A.length
Var a = [1, 2 , 3 , “hello world”];
It works because array internally is an object so in object you can have any key value pair.
Var a = [1, 2 , 3 , “hello world”, function(){console.log()}];
a[3]() works
Array of functions;
Empty an array
A = [1,2,3];
B = A;
A = [];
Makes array empty
Problem is a and b are reffering to same memory b would still point to memory even when a
points to empty it wont be garbage collected.
A.lentgth = 0
Memory refernece is gone;
Everything is loosely typed
So for that typeof
typeof (‘1’) string
typeof (1) number
null means empty or non-existent value which is used by programmers to indicate “no
value”. null is a primitive value and you can assign null to any variable. null is not an object,
it is a primitive value. For example, you cannot add properties to it. Sometimes people
wrongly assume that it is an object, because typeof null returns "object".
undefined means, value of the variable is not defined. JavaScript has a global variable
undefined whose value is "undefined" and typeof undefined is also "undefined".
Remember, undefined is not a constant or a keyword. undefined is a type with exactly one
value: undefined. Assigning a new value to it does not change the value of the type
undefined.
typeof(null) “object”
typeof(undefined) “undefined”
Null == undefined
NaN == NaN false check for NaN
typeof(NaN) is number
+’abc’
NaN
Difference between == and ===
Type conversion in ==
Type check in ===
Null == undefined true
Null === undefined false
1 == ‘1’ true
1 === ‘1’ false
