JavaScript Language Basics

● Introduction
● JavaScript(JS) &
ECMAScript(ES)
● Va r i a b l e
Declaration
● D y n a m i c Ty p i n g
● D a t a Ty p e s
● Functions
● Arrays
● Equality Operator
B r o w s e r U n d e r s t a n d o n l y 3 Te c h n o l o g i e s

HTML – For Content

CSS – For Style

Javascript – For Functionality

 J a v a S c r i p t B a s e d P o p u l a r Te c h n o l o g i e s
Angular ReactJS VueJS

and many
TypeScript Language
more...
● Javascript is the base for all the above technologies, you can only master them if you know plain
javascript.
● Knowing Plain Javascript gives you the confidence that you can easily learn any JS-based
technologies on-demand and in the fastest way.
 JavaScript Facts
First Appeared December 4, 1995
Designed By Brendan Eich
Developer ● Netscape Communications
● Mozilla Foundation
JavaScript (JS) ? Is Language based on ECMAScript Standard.
ECMAScript (ES) ? Standard, Which was initially created from JS Language in year 1997 by ECMA International.
Other Languages that implemented ECMAScript in ● Jscript from Microsoft for IE Browser.
the Past? ● ActionScript from MacroMedia / Later owned by Abode.
Latest Javascript/ECMAScript Version ES 2019. ES version changes every year.
Current Implementation of ECMAScript Standard It is implemented in JS Engines such as V8, SpiderMonkey, JavascriptCore, ChakraCore etc.
JS Engines converts JS code into machine code for execute on a computer system.
At present, who maintained ECMAScript Standard? TC39 commitee is responsible for ECMAScript as of year 2020.
TC39 commitee has members from browsers owners like (Google, Microsoft, Apple &
Mozilla).

https://en.wikipedia.org/wiki/JavaScript
https://medium.com/free-code-camp/a-fascinating-and-messy-history-of-the-web-and-javascript-video-8978dc7bda75

Web Specification/Standard documentation can be found here: https://whatwg.org/

Javascript Language is Dead!
● Original Javascript language last version is 1.8.5, released in
July 2010 by the Mozilla foundation.
● Technically, now only ECMAScript standard is available and it is
now implemented in JS Engines(interpreter/jit compilers) like V8,
SpiderMonkey, JavascriptNitro & ChakraCore. These JS
Engines are included in your browsers and other environments (like
NodeJS).
● Due to the widespread use of the word “JavaScript”, ECMA
Standard is referred to as “Javascript” in the web world.
Original JavaScript Versions
Version Release Date Browser Standard
JavaScript 1.0 Mar, 1996 ● Netscape Navigator 2.0 No Standard Available
● Internet Explorer(IE) 2.0 (Microsoft)
JavaScript 1.1 Aug, 1996 Netscape Navigator 3.0 No Standard Available
JavaScript 1.2 Jun, 1997 Netscape Navigator 4.0-4.05 No Standard Available
JavaScript 1.3 Oct, 1998 Netscape Navigator 4.06-4.7x ES 1 & ES 2
JavaScript 1.5 Nov, 2000 Netscape Navigator 6.0 and Firefox 1.0 ES 3
JavaScript 1.6 Nov, 2005 Firefox 1.5
JavaScript 1.7 Oct, 2006 Firefox 2
JavaScript 1.8 Jun, 2008 Firefox 3
JavaScript 1.8.1 Jun, 2009 Firefox 3.5
JavaScript 1.8.5 July, 2010 Firefox 4 ES 5
(This is the last Version of Original
JavaScript)

More Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript#JavaScript_versions

 ECMAScript (ES)
Version Release Time Notes
ES1 June 1997 First Release based on JS language.
ES2 June 1998
ES3 Dec 1999
ES4 Abondoned Abandoned due to political differences between browser companies like Microsoft, Apple & Mozilla.
ES5 Dec 2009 ● Major Update, Most of the OLD JS code that you encounter in JS file is written in this version.
ES5.1 June 2011
ES6 / ES2015 June 2015 ● Major update, and from this version onwards JavaScript is labelled as modern JS.
● Here onward ES release cycle is changed to yearly.
● As of the Year 2020 we typically write ES5(almost all JavaScript fundamental come from this) + ES6 (Powerful and
Modern JS) code for any new JS project as it is well supported in all modern browser.
● Some of the ES6 features that are missing in older browsers can be workaround by transpilling and polyfilling.
ES 2016 June 2016
ES 2017 June 2017
ES 2018 June 2018
ES 2019 June 2019 Latest Version
ESNext Next release version is always referred as ESNext.

More Info:
https://en.wikipedia.org/wiki/ECMAScript
https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
JavaScript Basics
Variable Declaration in Javascript

Var, Let & Const

 VAR Keyword
● Old way(used before ES6/2015) to
declare a variable in JS.
● VAR variables declared outside of any
function are stored in the global
object(in browser it is WINDOW object)
● Variable declared using VAR keyword
is visible/accessible only inside a
function.
● Note, you should avoid using VAR
keyword, better ways(LET & CONST)
are available.
 LET Keyword
● New way to declare a variable in
Javascript from ES6/2015 version
is LET keyword.
● When a variable is declared
outside of any function(i.e. in the
global area) using LET keyword
then it is not stored in the global
object. It becomes part of the
global function.
● Variable declared using LET
keyword is visible/accessible
only inside the { block }(curly
brackets) in which it is declared.
 CONST Keyword
● CONST keyword is also
introduced with LET keyword
in javascript ES6/2015 version.
● A Const variable contains a
value that do not change
once assigned. If you try to
reassign a value to CO NST
variable then JS will throw an
error.
● Const Value Example:
– Math PI value 3.14
– d at e o f b i r t h ( D O B) v a l u e .
 Dynamic Typing
● A variable in JavaScript can contain any data i.e. a
variable can at one moment be a string and at
another be a number.
● This behavior is known as dynamic typing and is
both good and bad.
● Good because it allows the developer to reuse a
variable for several different purposes. It is good
for faster writing of small apps for demo purposes.
● However, it is also a bad thing not to bind single
datatype with a variable for medium to large
applications management.
● One important reason for Typescript language
popularity for writing medium to large scale
application is static typing(single and explicit data
type for a variable).
Data Types in Javascript
 Data Types
● Primitives Types (7) ● Object (Reference Type)
– String – Array
– Number – Function
– Boolean – Built-In Types
– Undefined ● Math
– Null ● Date
– BigInt (New Type) – and anything that is not
– Symbol (New Type) covered in Primitive Type.
More Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
 Primitive Types
(Simple and Basic Types Needed for Programming)
 Number
● The number type represents both integer and floating
point numbers.
● In JS we also have some special values associated
with number such as NaN, +Infinity, -Infinity.
– NaN(Not a Number): Represents a computational error. It is
a result of an incorrect number value in a mathematical
operation like, "not a number" / 2 === NaN
– Infinity: Represents the mathematical Infinity ∞. It is a
special value that’s greater than(Infinity) or smaller than(-
Infinity) any number:
● 1 / 0 = Infinity
● Math.max() = -Infinity
 String
● A string in JavaScript must be surrounded
by quotes. There are 3 types of quotes:
– Double quotes: "Hello".
– Single quotes: 'Hello'.
– Backticks: `Hello`. // New in ES6
● Each element/character in the String occupies
a position in the String. The first character is
at index 0, the next at index 1, and so on:
'JavaScript'[0] === 'j'.
● The length of a String is the number of
characters: 'JavaScript'.length === 10
 Boolean, Null & Undefined
● Boolean: The boolean type has
only two values: true and false
● Null: The Null type has exactly one
value: null
● Undefined:
– JS assign undefined value to a
variable that does not have any
value.
– Function with no explicit return will
implicitly return the undefined value.
Object Type in Javascript
 Object
● Is a type that store information as a
collection of properties in the form of
{ key: value }.
● Property key name can be...
– a String.
– a Symbol Datatype.
– a variable using [squareBracket] syntax
(ES6 Feature).
● Property value can be values of any
type, including other objects and
functions(known as method inside an
object).
 Access Object { }
● DOT (.) Notation:
– Syntax: object.property
– This is used when the property name
does not contain any blank space.
– Example: User.name, User.age or
method property like User.Register()
● Square Bracket [ ] Array syntax:
– Syntax: object[“property”]
– This is used when an object property
name is separated by blank space.
– Example: User[“first name”] or
User[“last name”]
Functions
 Functions in JS
● In JS a function is an Object. It
means a function can have properties.
– Name & Length are the inbuilt property a
function.
– We can also add properties to a function
although it is less in practice.
● JavaScript is also known as functional
language since we can write our entire
JS app based on functions only.
● Functions are considered as the
first-class citizen in JS.
 Function – First Class Citizen
● We can store function in a variable and then
use that variable like any other type of variable.
●
We can pass function as an input/parameter
to a function.
●
We can return a function as an output of a
function.
●
We can create Immediately Invoked Function
Expression(IIFE) for immediate execution.
●
We can create anonymous/unnamed
functions.
● We can create useful compact functions in JS
known as arrow function () =>.
●
We can create closure functions in JS.
Array
 Array [ ]
● A Data structure that
stored Ordered Collection.
We can get data back from
an array using the order
number called an index.
● An Array is an Object in
JS which means it has
properties associated with it.
 Array [ ]
● We can create an Array using:
[ ] square brakets notation (Most Used)
or by using Array Object Class like new
Array()
●
We typically access values from an
array using the syntax like [index
value]:
– For Example, if we have a number
array [100, 350, 500, 600] then..
[0] : will give us value 100
[1] : will give us value 350
 Methods: Push, Slice & Splice
Method Description
.push(item) Add item at the end of an
array
.slice(start,end Create a new array with
) elements from position start
till end (not inclusive) from
existing array.
.splice(pos, Modifies an existing array
deleteCount, by removing items using
items) pos & deleteCount
parameters and also capable
of adding new items.
 Array Search Methods
f o r P r i m i t i v e / B a s i c Ty p e

Method Description
.indexOf ● Return the index number of
(item,?pos) the first occurance of an item
in an array.
● Return -1 if it do not found
the item in an array.
● Only works for simple types
like string & number array. Do
not work on object type
values in an array.
.includes Return true if it finds the
(value) item/value else return false.
 A r r a y S e a r c h M e t h o d s : F o r O b j e c t Ty p e

Method Description
.findIndex ● Expect predicate function as input and
(function) based on that function, return the index
number of the first occurrence of the
matched item.
● Return -1 if it do not found the item in an
array.
.find Expect predicate function as input and based
(function) on that function, return the value of the first
occurance of the matched item.

.filter Expect predicate function as input and

(function) based on that function logic return ALL
the matched items.

Note: A predicate function is a function that returns a boolean value i.e. true or false.
Equality Comparison Operators
●
Strict (=== AND !==): In strict comparison
no datatype conversion is done before
comparison.
● Type-Conversion (== AND !=): Converts
the value to the same type before making
the comparison. This is also known as
abstract equality comparison.
● NOTE: You should avoid Type-Conversion (== AND !=)
operator as it is rarely required to convert the type before
equality operation.

More Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Thank You