Crisp Notes

On JavaScript
JavaScript Essentials: Quick Reference Guide! 🚀💡

Jimmy Ramani
@jimmyramani
 Index
Topics Page
Why you should learn JS ? 01
let , const , var 02
Operators 05
Data Types 10
Strings 12
Events 13
Event Listener & Event Handler 14
Functions 16
Objects 18

Jimmy Ramani
@jimmyramani
 Index
Topics Page
Arrays 19
Getter & Setter 20
For Loop 21
For in - For of Loop 21 / 22
While Loop 22
Do While Loop 22
Type Conversion 23
Callbacks 26
Promises 27

Jimmy Ramani
@jimmyramani
 Index
Topics Page
Async - Await 28
Clousers 29
Timers 30
Proto-Typing 31
Generators 32
UniCode 33
Inheritance 34
Regular Expression (RegEx) 35

Projects Idea 36

Jimmy Ramani
@jimmyramani
 1
Why you should learn
JavaScript ?

It Works in The Browser

Like most languages, you don’t need to setup anything. You can run
your code without any Environment.

Easy to Learn
A very beginner friendly languages in which you don’t need to learn
deal with complexities.

Versatile Programming Language

From Front-End to Back-End, JavaScript can be used for almost
anything. There’s nothing you can’t do with JavaScript.

Big Community Support

Doesn't matter what error you face while learning or else. Just
google it, and you’ll see tons of Solutions.

Jimmy Ramani
@jimmyramani
 2
Let , Const & Var

Let :
Variables declared with let are block-scoped. They are confined
to the block (curly braces) in which they are defined.
They are also hoisted, but not initialized, so you cannot use them
before they are declared.
let variables can be updated but not re-declared within their
scope.

Example :

Jimmy Ramani
@jimmyramani
 3
Let , Const & Var

Const :
Variables declared with const are block-scoped and cannot be
reassigned after they are initialized.
Like let, const variables are hoisted but not initialized.
const is commonly used for values that should remain constant
throughout the program.
If the value being assigned is an object or an array, the variable
itself cannot be reassigned to a new object or array, but the
properties or elements of the object or array can be modified.

Example :

Jimmy Ramani
@jimmyramani
 4
Let , Const & Var

Var :
Variables declared with var are function-scoped or globally
scoped, but they are not block-scoped.
They are hoisted to the top of their scope during execution, which
means you can use a variable before it's declared (though its
value will be undefined).
var variables can be re-declared and updated within their scope.
Since var doesn't have block scope, it can lead to unintended
issues when used in loops and conditionals.

Example :

Jimmy Ramani
@jimmyramani
 5
Operators
Arithmetic Operators :
Perform mathematical calculations on numbers.
Examples: + (addition), - (subtraction), * (multiplication), /
(division), % (modulus), ** (exponentiation).

Example :

Comparison Operators :
Compare two values and return a boolean result.
Examples: == (equal to), != (not equal to), === (strictly equal to),
!== (strictly not equal to), < (less than), > (greater than), <= (less
than or equal to), >= (greater than or equal to).

Example :

Jimmy Ramani
@jimmyramani
 6
Operators
Logical Operators :
Perform logical operations on boolean values.
Examples: && (logical AND), || (logical OR), ! (logical NOT).

Example :

Assignment Operators :
Assign values to variables.
Examples: = (assignment), += (addition assignment), -=
(subtraction assignment), *= (multiplication assignment), /=
(division assignment), %= (modulus assignment).

Example :

Jimmy Ramani
@jimmyramani
 7
Operators
Unary Operators :
Operate on a single value.
Examples: ++ (increment), -- (decrement), + (unary plus), -
(unary minus), ! (logical NOT).

Example :

Ternary Operators :
Determine the type of a value.
Example: typeof (returns a string representing the type of a
value), instanceof (checks if an object is an instance of a
particular class or constructor).

Example :

Jimmy Ramani
@jimmyramani
 8
Operators
Bitwise Operators :
Perform operations on binary representations of numbers.
Examples: & (bitwise AND), | (bitwise OR), ^ (bitwise XOR), ~
(bitwise NOT), << (left shift), >> (right shift), >>> (unsigned right
shift).

Example :

Type Operators :
Determine the type of a value.
Example: typeof (returns a string representing the type of a
value), instanceof (checks if an object is an instance of a
particular class or constructor).

Example :

Jimmy Ramani
@jimmyramani
 9
Operators
String Operators :
Concatenate strings.
Example: + (concatenation).

Example :

Jimmy Ramani
@jimmyramani
 10
Data Types
Number Represents both integer and floating-point numbers.

String Represents a sequence of characters (text).

Boolean Represents a logical value, either true or false.

Undefined Represents an uninitialized variable or a function that

doesn't return a value.

Null Represents the intentional absence of any value or object.

Object Represents a collection of key-value pairs or properties.

Array Represents an ordered collection of values.

Function Represents a block of code that can be invoked or called.

Symbol Represents a unique and immutable value, often used as

object property keys.

BigInt Represents arbitrarily large integers.

Jimmy Ramani
@jimmyramani
 11
Data Types

Jimmy Ramani
@jimmyramani
 12
Strings
Single Quotes (' ')
Strings created with single quotes are enclosed within single quotes.

Double Quotes (” ”)
Strings created with double quotes are enclosed within double quotes.

Backticks (``)
Backticks are used to create template literals, which offer more
advanced string features, such as string interpolation and multiline
strings.

Jimmy Ramani
@jimmyramani
 13
Events

Events are actions or occurrences that happen in the browser, such as a

user clicking a button, resizing the window, or pressing a key. JavaScript
allows you to capture and handle these events to create interactive and
responsive web applications. Events enable you to execute specific code
when something happens on a web page.

Types
User interactions: click, double-click, mouseover, mouseout, keydown,
keyup, etc.
HTML form events: submit, change, input, focus, blur, etc.
Window events: load, unload, resize, scroll, etc.
Network events: XMLHttpRequest events (readystatechange, load,
error), WebSocket events, etc.

Jimmy Ramani
@jimmyramani
 14
Event Listener

An Event Listener in JavaScript is a function that "listens" for a specific

event to occur on an HTML element and then executes a specified block
of code in response to that event. Event listeners are used to make web
pages interactive and respond to user actions or other events.

the code sets up an event listener for the

'click' event on the button element with the ID
'myButton'. When the button is clicked, the
function provided to the addEventListener
method is executed, which shows an alert
with the message "Button clicked!".
Jimmy Ramani
@jimmyramani
@jimmyramani
Jimmy Ramani
Event Handler

invoked when the associated event takes place.

The HTML file includes a button element with

the ID 'myButton'. The onclick attribute is added
to the button element, which specifies the name
of the function (handleButtonClick) that should
be executed when the button is clicked. The
JavaScript code within the <script> section
defines the handleButtonClick function. This
An Event Handler in JavaScript is a function that gets executed in

handlers are assigned directly as attributes of HTML elements and are

response to a specific event occurring on an HTML element. Event

function displays an alert when the button is

15

clicked.
 16
Function

A function is a block of code that performs a specific task or a set of

tasks. Functions allow you to encapsulate code into reusable units,
making your code more organized, modular, and easier to maintain.

Basic Syntax

Example :

Jimmy Ramani
@jimmyramani
 17

You can also use arrow functions, which are a more concise way to
define functions:

Arrow functions are particularly useful for short and simple functions.

Functions are a foundational concept in JavaScript and are crucial for

building modular and maintainable code. They allow you to encapsulate
logic, promote code reuse, and improve overall code readability.

More about Function Methods :

https://www.linkedin.com/feed/update/urn:li:activity:7093226017141506048?
utm_source=share&utm_medium=member_desktop Go Through
QR
Jimmy Ramani
@jimmyramani
 18
Objects
An Object is a complex data type that allows you to store and organize
related data and functions as properties and methods. Objects provide
a way to model real-world entities and their behaviors in your code.
Objects consist of key-value pairs, where each key (property) is
associated with a value (data) or a function (method).

Jimmy Ramani
@jimmyramani
 19
Array
An Array is a data structure that allows you to store and manage a
collection of values. Arrays can contain elements of various data types,
such as numbers, strings, objects, and even other arrays. Arrays are
widely used to organize and manipulate data in a structured manner.

https://www.linkedin.com/feed/update/urn:li:activity:7094369342
129139712?utm_source=share&utm_medium=member_desktop

Go Through
QR
More about Arrays Methods :

Jimmy Ramani
@jimmyramani
 20
Getter & Setter
Getters and Setters are special methods that allow you to define how
the properties of an object are accessed and assigned. Getters are used
to retrieve the value of a property, while setters are used to set or modify
the value of a property. They provide a way to control the behavior of
accessing and modifying object properties.

Jimmy Ramani
@jimmyramani
 21
Loops
For Loop

For-in Loop

Jimmy Ramani
@jimmyramani
 22
Loops
For-of Loop

While Loop

Do While Loop

Jimmy Ramani
@jimmyramani
 23
Type Conversion

Type conversion, also known as type coercion, refers to the process of

converting a value from one data type to another in JavaScript.
JavaScript performs automatic type conversion in many situations, but
you can also explicitly convert values using various methods and
functions

Implicit Type Conversion :

Jimmy Ramani
@jimmyramani
 24

Explicit Type Conversion :

Jimmy Ramani
@jimmyramani
 25

Using Boolean() for Truthy/Falsy Conversion :

Using String() for Explicit String Conversion :

Jimmy Ramani
@jimmyramani
 26
CallBack
a callback is a function that is passed as an argument to another
function and is intended to be executed later, often after an
asynchronous operation or a certain event occurs. Callbacks are a
fundamental concept in JavaScript and are commonly used to handle
asynchronous operations, such as AJAX requests, timers, and event
handling.

to callback hell (also known as the "pyramid of

Callbacks are used extensively in JavaScript for
scenarios involving asynchronous operations,
event handling, and more. However, as JavaScript
codebases grow, using callbacks alone can lead

doom"), where code becomes hard to read and

maintain due to deeply nested callbacks.
Jimmy Ramani
@jimmyramani
 27
Promises
Promises are a more structured way of handling asynchronous
operations in JavaScript. They provide a cleaner and more
maintainable alternative to using callbacks for managing
asynchronous code. Promises represent a value that might be available
now, or in the future, or never.

Go Through
https://www.linkedin.com/feed/update/urn:li:activity:710231080144
8853505?utm_source=share&utm_medium=member_desktop

QR
More about Promises :

Jimmy Ramani
@jimmyramani
 28
Async - Await
async/await is a modern JavaScript feature that provides a cleaner
and more concise way to work with asynchronous code compared to
using callbacks or Promises directly. It makes asynchronous code look
more like synchronous code, improving readability and maintainability.

https://www.linkedin.com/feed/update/urn:li:activity:71027261374
57344512?utm_source=share&utm_medium=member_desktop

Go Through
QR
More about Promises :

Jimmy Ramani
@jimmyramani
 29
Clousure
A closure in JavaScript is a function that "remembers" its lexical scope
even when it's executed outside that scope. In simpler terms, a closure
allows a function to access variables from its outer (enclosing) function
even after that outer function has finished executing.

Jimmy Ramani
@jimmyramani
 30
Timer
Timers in JavaScript are used to schedule the execution of a function or
a piece of code after a certain amount of time has passed. There are
three main timer functions available in JavaScript: setTimeout,
setInterval, and clearTimeout.

setTimeout : The setTimeout function is used to execute a function or code

block after a specified delay (in milliseconds).

setInterval & ClearTimeout :

The setInterval function repeatedly
executes a function or code block
at a specified interval

The clearTimeout function is used

to cancel a timeout that was
previously set using setTimeout.

Jimmy Ramani
@jimmyramani
 30
Proto-Typing
prototyping is a mechanism that allows objects to inherit properties
and methods from other objects. Objects in JavaScript have a
prototype chain that defines their inheritance hierarchy. Every object is
linked to a prototype object, and this chain continues until the base
object, which has null as its prototype.

Jimmy Ramani
@jimmyramani
 31

When you access a property or method on an object, JavaScript

checks if that property or method is directly available on the object. If
not, it looks up the prototype chain to find it on the prototype object. If
it's not found on the prototype, it continues up the chain until it reaches
the base object, where the prototype is null.

This prototypical inheritance allows for efficient sharing of common

properties and methods among objects, and it's a fundamental part of
JavaScript's object-oriented programming paradigm. However,
modern JavaScript also provides classes and extends for a more
class-like syntax for creating and inheriting from objects, making
prototyping less common in newer codebases.

Jimmy Ramani
@jimmyramani
 32
Generators
Generators are a unique feature introduced in ECMAScript 6 (ES6) that
allow you to pause and resume the execution of a function. They are
created using a special kind of function called a generator function.
Generator functions are defined using an asterisk (*) after the function
keyword, and they contain one or more yield expressions that indicate
where the function can be paused and resumed.

An infinite sequence of Fibonacci numbers

Try Generators for
Jimmy Ramani
@jimmyramani
 33
Unicodes
Unicode is a character encoding standard that aims to provide a
unique code point (an integer) for every character, symbol, and emoji
used in human writing systems. JavaScript fully supports Unicode,
allowing you to work with a wide range of characters in your
applications.

Jimmy Ramani
@jimmyramani
 34
Inheritance
Inheritance is a fundamental concept in object-oriented programming
that allows you to create new classes (subclasses or child classes)
based on existing classes (superclasses or parent classes). In
JavaScript, inheritance is implemented using prototypes and
constructor functions.

Go Through
QR

For other OOP concepts

like
Abstraction ,
Encapsulation ...

Jimmy Ramani
@jimmyramani
 35
Regular Expressions
Regular Expressions, often referred to as RegEx or RegExp, are powerful
patterns used for matching character combinations in strings.
JavaScript provides built-in support for regular expressions through the
RegExp object and regular expression literals.

Using Regular
Expression
Literals

Using the RegExp Object:

Jimmy Ramani
@jimmyramani
 36
Projects

Form Validation Modal & Overlay

Carousel Tabs Component
Accoridan Mobile Navbar
Pagination Tabs Component
Expense Tracker App
Quiz App

Try With Your Scan & find all

Self Projects Here

Jimmy Ramani
@jimmyramani
 WAS THIS
HELPFUL?
Share with a friend who needs it!

Jimmy Ramani
@jimmyramani