Javascript Fundamentals

Varma Bhupatiraju
Today’s Agenda
● Why JavaScript?
● History
● Initial Setup (Demo)
● Debugging & Comments
● Language Basics
○ Variables
○ Data Types
○ Basic Operators
○ Operator Precedence
○ Objects
○ Functions
○ Controlling flow
● Resources
○ https://developer.mozilla.org/en-US/docs/Web/JavaScript
Why Javascript?
● Fun
Why Javascript?
● Fun
● Easy to learn
Why Javascript?
● Fun
● Easy to learn
● Popular
Why Javascript?
● Fun
● Easy to learn
● Popular
● Enterprise Adoption
○ Uber
○ Facebook
○ Instagram
○ Google
○ Paypal

and many more..

History
● Created in 1995
History
● Created in 1995
● By Brendan Eich at Netscape
History
● Created in 1995
● By Brendan Eich at Netscape
● Originally dismissed as gimmick & unstable
History
● Created in 1995
● By Brendan Eich at Netscape
● Originally dismissed as gimmick & unstable
● By 2000, People began to realize its power
History
● Created in 1995
● By Brendan Eich at Netscape
● Originally dismissed as gimmick & unstable
● By 2000, People began to realize its power
● Later standardized and more browsers starting to support
● Standard is named as Ecmascript, implementation of Ecmascript in browser is
JavaScript
● Currently ES5 is running, but ES6 released in 2015. Brower companies almost
completed implementation of ES6 at 99%.
● We will start with ES5, but will learn ES6 later classes.
History
● Created in 1995
● By Brendan Eich at Netscape
● Originally dismissed as gimmick & unstable
● By 2000, People began to realize its power
● Later standardized and more browsers starting to support
● Continues to grow as client side and server side
History
More open source frameworks & libraries developed using JS

● jQuery (2006)
● Backbone (2010)
● Ember.js (2013)
● Node.js (2009)
● Angular.JS (Google) (2010)
● React.js (Facebook) (2013)
Initial Setup
DEMO
Debugging
● Browser Console (Most popular)
Debugging
● Browser Console (Most popular)
● Use console.log(‘Hello’)
Debugging
● Browser Console (Most popular)
● Use console.log(‘Hello’)
● Use javascript alert function
Comments
● Single Line Comments
● Multi Line Comments
Comments
● Single Line Comments

// My single line comment

Comments
● Single Line Comments

// My single line comment

● Multie Line Comments

/* My

Multiline

Comments*/
Language Basics
Variables

● A container for a value

Language Basics
Variables

● A container for a value

● Javascript is weakly/dynamically typed
Language Basics
Variables

● A container for a value

● Javascript is weakly/dynamically typed
● No need to specify variable types
Language Basics
Variables

● A container for a value

● Javascript is weakly/dynamically typed
● No need to specify variable types
● Variable types can change
Language Basics
Variables

● A container for a value

● Javascript is weakly/dynamically typed
● No need to specify variable types
● Variable types can change
● Sometimes we don’t know a variable’s type
Language Basics
Variables

var persons=10;

typeof(persons); //??

persons=[“Ram”,”Ravi”,”Rani”];

typeof(persons); //??
Data Types
● Loosely typed language
● Few types
Data Types
● Loosely typed language
● Few types
○ Primitives
Primitives
● Number
● String
● Boolean
Primitives
Number

● Any positive or negative integer or decimal

● Greater than 5e-324
● Less than 1.7976931348623157e+308
● NaN (Not a number) when you treat number outside of its range.
● Nothing equal to NaN
● isNaN to check if number is NaN
Primitives
String

● Sequence of characters within quotes

● Quotes can be single or double quotes
Primitives
Boolean

● Only two values true or false

● Falsy values
○ false
○ 0
○ ‘‘
○ Null
○ NaN
○ Undefined
● All other values are truthy
Special Data Types
● Undefined
● Null
Composite Data Types
● [Array]
● {Object}
Composite Data Types
[Array]

● Container for multiple values

Composite Data Types
[Array]

● Container for multiple values

● Fixed numerical indices
Composite Data Types
[Array]

● Container for multiple values

● Fixed numerical indices
● Indices are zero-based
Composite Data Types
{Object}

● Container for Key value pairs

● Pairs are separated by comma
● Key and values separated by colon
Composite Data Types
[Object]

var person = {

name: “Varma”,

city: “Vizag”,

age: 20

}
Composite Data Types
[Object]

You can access properties of person object using either dot or bracket notation

?person.name (Dot Notation)

?person[“name”] (Bracket Notation)

Basic Operators
Arithmetic Operators

● Add +
● Substract -
● Devide /
● Multiply *
● Modulus %
● Increment ++
● Decrement --
Basic Operators
Assignment Operators

● +=
● -=
● %=
● /=
Basic Operators
Comparison Operators

● >
● <
● >=
● <=
Basic Operators
Equality & Not operators

● ==
● !=
● ===
● !==
Basic Operators
Logical Operators

● && (Logical AND)

● | | (Logics OR)
● ! (Logical NOT)
Basic Operators
Equality Operators

● == Just values need to be equal

● === Both value and data type of value must be equal
Conditionals
● if
● if .. else
○ if block executes when expression to true
○ else block executes when expression is false
● if .. else if
○ Multiple if .. else if .. else are allowed when needed
● ternary operator
○ Short form of if-else
● Switch
○ Similar to if-else
○ Can switch any value, not just boolean
Loops
● while
● do .. while
● for
Math Object
Math is a built-in object in JavaScript that has properties and methods for doing
mathematical operations

● Math.ceil
● Math.floor
● Math.round
● Math.max
● Math.min
● Math.abs
● Math.sqrt
● Math.pow
● Math.random
Functions
● A logical group of one or more expressions
● Invoked arbitrarily to execute expressions
● Declaring new function
● Function Expressions
● Function Declarations vs Function Expressions
● Arrow Functions (ES6)
Arrays
● Composite Data Type
● Container for multiple values
Working with Arrays
● Composite Data Type
● Container for multiple values
● Arrays have properties and methods useful to working with Arrays
Arrays
● Only one useful property - length
Arrays
● Only one useful property - length

var myNumbers=[“one”,”two”,”three”];

console.log(myNumbers.length); ??
Arrays
Mutator Methods

● Add new item to array

Arrays
Mutator Methods

● Add new item to array

myNumbers.push(“four”);

what will be our array now look like?

Arrays
Mutator Methods

● Add new item to array

myNumbers.push(“four”);

what will be our array now look like?

● Add new item to beginning of array

??
Arrays
Mutator Methods

● Add new item to end of array

myNumbers.push(“four”);

what will be our array now look like?

● Add new item to beginning of array

myNumbers.unshift(“zero”);
Arrays
Mutator Methods

● Remove item from end of array

myNumbers.pop();

what will be our array now look like?

Arrays
Mutator Methods

● Remove item from end of array

myNumbers.pop();

what will be our array now look like?

● Remove item from beginning of array

myNumbers.shift();
Arrays
Mutator Methods

● Add/remove items from anywhere in the array

Arrays
Mutator Methods

● Add/remove items from anywhere in the array

array.splice(index, howmanytoremove, newitem1,.....,newitemN);

var myFruits=[“orange”,”apple”,”mango”,”banana”];

myFruits.splice(2,0,”grape”,”strawberry”);

myFruits.splice(2,1,”grape”,”strawberry”);
Arrays
Accessor Methods

● Join the elements of array in to string

var myLetters=[“a”,”b”,”c”];

myLetters.join(); ?? a,b,c

myLetters.join(‘ ‘); ?? a b c

myLetters.join(‘|’); ?? a|b|c
Arrays
Accessor Methods

● Find indices of items with indexOf/lastIndexOf

var fruits = ["Banana", "Orange", "Apple", "Mango","Apple"];

var a = fruits.indexOf("Apple");

a?

a=fruits.lastIndexOf(“Apple”)

a?
Arrays
Accessor Methods

● Use slice to return a subset of the array

var fruits = ["Banana", "Orange", "Apple", "Mango","Apple"];

var citrus = fruits.slice(1, 3);

citrus?
Arrays
Iterator Methods

● forEach
● every
● some
● filter
● map
● reduce
Arrays
Iterator Methods

● forEach

calls a provided function once for each element in an array

myNumbers.forEach(function(item,index) {

console.log(“Item “ item + “ with index “ + index);

});
Arrays
Iterator Methods

● For loop

for(var i=0;i<myFruits.length;i++){

console.log("Item " + myFruits[i] + " at postion " + i);

}
Arrays
Iterator Methods

● every

checks if all elements in an array pass a test

var ages=[32,25,18,10];

var isAllAdults = ages.every(function(age){

return age >= 18;

});

isAllAdults??
Arrays
Iterator Methods

● some

checks if atleast one element of an array pass a test

var ages=[3,12,18,10];

var isAnyAdult = ages.some(function(age){

return age >= 18;

});

isAnyAdult??
Arrays
Iterator Methods

● filter

creates an array filled with all array elements that pass a test

var ages=[3,12,18,22,10];

var adultsOnly = ages.filter(function(age){

return age >= 18;

});

adultsOnly??
Arrays
Iterator Methods

● map

creates a new array with the results of calling a function for every array
element

var myMarks=[50,62,90];

var myNewMarks=myMarks.map(function(mark){

return mark+10;

});
Arrays
Iterator Methods

● reduce

reduces the array to a single value

var numbers=[1,2,3];

var total = numbers.reduce(function(total,number) { return total+number; });

total??
Arrays
Other Methods

● concat
● reverse
● sort