[go: up one dir, main page]
Scribd
Upload
7 views49 pages

JS

The document provides an overview of JavaScript concepts including client-side and server-side applications, functions, scope, hoisting, closures, and object-oriented programming. It includes challenges and questions to test understanding of these concepts, as well as examples of function expressions, method calls, and object inheritance. Additionally, it touches on modern JavaScript tools and frameworks.

Uploaded by

jwyxhwzbqz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views49 pages

JS

The document provides an overview of JavaScript concepts including client-side and server-side applications, functions, scope, hoisting, closures, and object-oriented programming. It includes challenges and questions to test understanding of these concepts, as well as examples of function expressions, method calls, and object inheritance. Additionally, it touches on modern JavaScript tools and frameworks.

Uploaded by

jwyxhwzbqz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

JS

console.log(“Hello World”);

Vedant Seta
JS Everything

● Client Side
● Server Side
● Desktop/Mobile Apps
● Task Runners
Challenge #1

a = 2;
var a;
console.log( a );

A. 2 B. null C. undefined D. throw Error


Callbacks

● Executable code passed as an argument to a function


● Is invoked within that function
Challenge #2

setTimeout(function(){
console.log('When will this run?');
}, 0);
console.log('Here');
Challenge #3

function test(a) {
console.log(a, b);
}

b=2;
test(1);

A)1,2 B)1,undefined C)error D)1,null


Scope

● Well defined rules to store & find variables


● Compiler declares a variable in Scope
● Engine looks up for variable in Scope
● Each Function invocation creates a new Scope
● Function Based Scope ..Not block scope (ES5)

What if not found in Scope???


Nested Scope

● If a variable isn’t found in current scope, it will look at parent till global
scope is reached.
JS is
● Single Threaded
● Non Blocking APIs
● Asynchronous

● Call Stack
● Web APIs
● Callback queue
● Event Loop
Hoisting

● Declaration are Moved to the top of respective scope


● Function expressions aren’t hoisted
● Function statements are hoisted
● It doesn’t look at return statements
Hoisting

● Declare all functions before you call


● Declare all variables on top
Question : Hoisting
var a = 1;
function b() {
a = 10;
return;
function a(){
}
}
b(); console.log(a);
A. 1 B. 10 C. undefined D. throw
Lunch Break.
Functions

● are First Class Objects


● Can be passed returned
● Assigned to variable
● Stored in array & object
● Objects with callable property
Functions as

● expression
● statement
● method
● Constructor
● closures
Function Expression
function fnName (parameters) {
// statements
return; or return expression;
}

// Call
fnName(params);
Question : Functions

function test() {
Var a = 10;
return
a;
}
console.log(test());
Function Statement
function fnName (parameters) {
var fnName = function(){
// statements
};
}
Expands to
var fnName = undefined;
// Call
fnName = function fnName() {
fnName(params);

}
Challenge

function foo(){ function foo(){


function bar() { var bar = function() {
return 3; return 3;
} };
return bar(); return bar();
function bar() { var bar = function() {
return 8; return 8;
} };
} }
alert(foo()); alert(foo());
Challenge

alert(foo()); alert(foo());
function foo(){
function foo(){ return bar();
function bar() { var bar = function() {
return 3; return 3;
} };
return bar(); var bar = function() {
function bar() { return 8;
return 8; };
} }
}
Functions as Object

● They are objects


● Can save name/value pairs
● Simply call foo();
function Car(name) {
return name;
};
Car.noOfWheels = 4;
Car(“honda”) // honda
Car.noOfWheels // 4
Function as method

● Since functions are values they can be stored in objects


● A function in object is called method

var site = {};


site.test = function (string) {
console.log("Hello World! " + string);
site.string = string;
}
site.test("WoW!");
Function as constructor

● new Object is returned


● It sets constructor property to point to that function
●

function Employee(name) {
this.name = name;
}
var emp1 = new Employee(‘vedant’);
Closure

● Scope which inner function enjoys even after the parent function has
returned
● Permanent link between function and its scope
● Holds scope chain preventing garbage collection
Question : Closures

var a = {};
for(var i = 0; i < 3; i++) {
a[i] = function(){
console.log(i);
}
}
a[0]();
a[1]();
a[2]();
Functions call / invocation

● If called with many arguments, then extra arguments are ignored


● If called with missing arguments, then missing arguments are undefined
● There is no implicit type checking on the arguments
Functions call / invocation
Can be called 4 ways :

● Function form - funcName(args)


● Method form -
obj.methodName(args);
obj[‘methodName’](args);
● Constructor Form - new funcName(args)
● Apply Form : funcName.apply(thisObj, [args]);
this

● Not itself
● Not author time binding
● Not how it is declared

This is runtime binding.


Depends on how and from where
it is called (callsite) from call stack
this

Invocation form this

function callsite (Default Binding)

method the object (Implicit Binding)

constructor the new object

apply arguments (Explicit Binding)


TODO App
Debugging

● Let’s DEBUG
Object Returns

● Javascript is class free


● Every object inherits Object
● var car = {
wheels : 4
}
● You can add methods here
● car.getWheels = function(){
return this.wheels;
}
Objects Linkage

● Objects can be created with simple link to other objects


● If access to member is failed, linked object is tried
● car = {
name:'automobile',
wheels:4,
getName: function(){return this.name}
}
honda = Object.create(car);
honda.name = ‘honda’
Objects - Linkage

honda car

name = ‘honda’ name = ‘automobile’

getName = function
Inheritance

● Class based inheritance


● Prototype based inheritance
Example
Example

Employee JAVA Employee JavaScript

public class Employee { function Employee(){


public String name = ‘’; this.name = ‘’;
public String dept = ‘’; this.dept = ‘’;
public Employee(){ }
this.name = ‘’;
this.dept = ‘’;
}
}
Example

Manager JAVA Manager JavaScript

public class Manager extends Employee { function Manager(){


public Employee[] reports; this.reports = [];
public Manager() { }
this.reports = new Employee[0]
} Manager.prototype = new Employee();
}
__proto__ vs prototype

● Function has Prototype member


● __proto__ points to Prototype member
● __proto__ chain leads to Object.prototype
● Constructor points to the Function
Everything at once
Array Functions

● Map
● Reduce
● Filter
Object Functions

● Assign
● Keys
● Values
● Freeze
● Create
JSON

● Used for Serializing objects


● Lighter than XML
● JSON.parse()
● JSON.stringify()
Some tools

● Frameworks : Angular, React


● Eslint
● Node.js
● Gulp
Weird JS
Modern JS
Thank you
More TODO

You might also like