JavaScript.
md 2025-05-13
JavaScript
Why We Need JavaScript
1. Making Websites Interactive
Transforms static websites into dynamic, interactive ones
Enables real-time user interactions (e.g., button clicks, form submissions)
2. Client-Side Scripting
Runs directly in the browser
Improves performance and reduces server load
3. Asynchronous Programming
Supports callbacks, promises, async/await
Allows tasks (e.g., fetching data) to run in the background without blocking the page
4. Improved User Experience
Powers Single Page Applications (SPAs)
Enables real-time interactions via WebSockets and AJAX
5. Interaction with HTML/CSS
Manipulates the DOM (Document Object Model)
Dynamically changes content and styling based on user input
6. Integration with Web APIs
Interacts with APIs like Google Maps, Geolocation, and Fetch API
Enables advanced features like live search and real-time updates
7. Cross-Browser Compatibility
Supported by all major browsers
Ensures consistent functionality across different devices
8. Mobile and Desktop Applications
JavaScript used in React Native (mobile) and Electron (desktop) for cross-platform apps
9. Server-Side Development (Node.js)
Node.js enables JavaScript on the server-side
Facilitates full-stack JavaScript development
10. Wide Range of Frameworks and Libraries
1 / 10
JavaScript.md 2025-05-13
React, Angular, Vue.js, Express.js, jQuery, and more for faster development
11. Community and Ecosystem
Active developer community and vast resources
npm (Node Package Manager) provides millions of libraries
12. Universality
JavaScript is the only language supported across all browsers, both client and server-side
Used in web, mobile, desktop, and even IoT applications
What is JavaScript
Lightweight, interpreted programming language
Follows ECMAScript standard
Runs in browser and server (Node.js)
Event-driven and asynchronous
Environment Setup
Use browser console
Use code editors (VS Code, Sublime)
Node.js for backend JavaScript
Working with Identifiers
Names used for variables, functions, classes
Rules:
Must begin with letter, _, or $
Case-sensitive
Type of Identifiers
Variable Identifiers: Used for variables and constants.
Function Identifiers: Used to name functions.
Class Identifiers: Used for class names.
Object Identifiers: Used for objects and their properties.
Array Identifiers: Used for arrays and their elements.
Constant Identifiers: Used for constants that cannot be reassigned.
Module Identifiers: Used in modules for exporting and importing code.
Event Handler Identifiers: Used to reference functions that handle events.
Destructured Identifiers: Used in object and array destructuring.
2 / 10
JavaScript.md 2025-05-13
Property and Method Identifiers: Used to access properties and methods of objects.
Data Types
Primitive
String
Number
Boolean
Null
Undefined
Symbol
BigInt
Non-Primitive
Objects
Arrays
Functions
Date
Operators and Types of Operators
Arithmetic
Assignment
Comparison
Logical
Bitwise
Ternary
Type operators (typeof, instanceof)
Spread Operator
Rest Operator
Types of Statements
1. Non-Conditional Statements: Declare variables, express assignments, and return values.
2. Conditional Statements: Execute code based on conditions (e.g., if, switch).
3. Looping Statements: Repeat a block of code multiple times (e.g., for, while).
4. Exception Handling: Handle errors gracefully (e.g., try-catch).
5. Other Statements: Handle control flow (e.g., break, continue).
Non-Conditional Statements
Non-Conditional Statements in JavaScript are the basic building blocks of the program. They perform
actions without making any decisions or checking conditions.-
Declaration Statements: Declare variables and functions.
Expression Statements: Perform operations like assignments or function calls.
Return Statement: Returns a value from a function or exits early.
Break Statement: Exits a loop or switch statement prematurely.
3 / 10
JavaScript.md 2025-05-13
Continue Statement: Skips the current iteration of a loop and continues to the next one.-
Conditional Statements
if
else if
else
switch
Types of Loops
for
while
do...while
for...in - used for object iteration - not recommended for array elements
for...of - iterable objects like arrays, strings, and other iterable collections.
Types of Functions
1. Function Declaration: A named function defined using the function keyword.
2. Function Expression: A function without a name (anonymous), assigned to a variable.
3. Arrow Function: A concise syntax for functions, introduced in ES6, with lexical this.
4. Immediately Invoked Function Expression (IIFE): A function that is executed immediately after its
definition.
5. Constructor Function: A function used to create objects, typically used with the new keyword.
6. Generator Function: A function that can pause and resume its execution using the yield keyword.
7. Anonymous Function as a Parameter: A function without a name, often passed as an argument to
other functions (e.g., callbacks).
8. Recursive Function: A function that calls itself to solve a problem through repeated execution.
Declaring and Invoking Functions
1. Declaring a Function: Use the function keyword followed by the function name, parameters, and the
function body.
2. Invoking a Function: To invoke, use the function name followed by parentheses containing arguments
(if any).
3. Return Values: Functions can return a value, which can be stored or used in further expressions.
4. Anonymous Functions: Functions without a name that are often assigned to variables or used as
arguments.
5. Hoisting: Function declarations are hoisted and can be called before they appear in the code, while
function expressions are not hoisted.
6. Arrow Functions: A more concise way to declare functions introduced in ES6, with a shorter syntax and
different behavior for this.
7. Recursion: Functions can call themselves, useful for problems like factorials, traversing trees, etc.
Arrow Function
Arrow functions provide a concise syntax for writing functions.
4 / 10
JavaScript.md 2025-05-13
They do not have their own this, arguments, super, or new.target, making them suitable for simple
functions and scenarios where you want to maintain the lexical context of this.
Arrow functions are perfect for callbacks and array methods, but they should not be used as
constructors.
const add = (a, b) => a + b;
Function Parameters
1. Default Parameters: Parameters can have default values.
2. Rest Parameters: Represent an indefinite number of parameters as an array.
3. Destructuring Parameters: Unpack values from objects or arrays directly in the function signature.
4. Named vs. Anonymous Parameters: Named parameters are explicitly defined, whereas anonymous
ones are often used in callback functions.
5. Arrow Functions: Parameters in arrow functions follow the same rules as regular functions but with a
more concise syntax.
6. Variable Numbers of Parameters: Use rest parameters (...) or the arguments object to handle an
unknown number of arguments.
Nested Function
Nested functions are functions defined inside other functions.
They can access variables and parameters from the outer function, which is useful for encapsulating
behavior and creating closures.
Closures allow inner functions to "remember" the environment in which they were created, providing
powerful capabilities like data privacy and function factories.
Built-in Functions
String Methods
st.charAt(index)
st.concat(s1,s2,...)
st.includes(search)
st.indexOf(search)
st.slice(startInd, endInd)
st.toUpperCase()
st.toLowerCase()
Array Methods
arr.push(ele)
arr.pop()
arr.shift() - remove first
arr.unshift(ele) - add at first
arr.concat(brr)
arr.forEach(callback)
arr.map(callback)
arr.filter(callback)
5 / 10
JavaScript.md 2025-05-13
Math Methods
Math.abs(x)
Math.pow(base, exp)
Math.round(x)
Math.floor(x)
Math.ceil(x)
Math.max(...x)
Math.min(...x)
JSON Methods
JSON.stringify(obj)
JSON.parse(jsonString)
Variable Scope in Functions
Global scope: Variables declared outside of functions or blocks.
Local (function) scope: Variables declared inside functions.
Block scope: Variables declared using let or const inside blocks {}.
Scope chain: When a variable is accessed, JavaScript looks for it in the current scope, and if not found,
checks outer scopes.
Hoisting: Variable declarations are hoisted to the top of their scope, but only declarations are hoisted,
not initializations.
Closures: Functions that retain access to their lexical scope even after they are returned or executed
outside the scope.
Shadowing: Local variables can shadow variables from outer scopes, making them inaccessible in that
specific context.
Working With Classes
Classes in JavaScript allow for object creation, inheritance, and encapsulation.
Constructor functions are used to initialize the state of an object.
Inheritance allows classes to inherit from other classes.
Getters and setters provide controlled access to object properties.
Static methods allow operations that don't depend on object instances.
Class expressions offer flexibility in defining classes dynamically.
class Person {
constructor(name) {
this.name = name;
}
}
Creating and Inheriting Classes
Creating Classes: You define a class using the class keyword and specify the behavior (methods) and
properties of the class.
6 / 10
JavaScript.md 2025-05-13
Inheritance: Subclasses can extend base classes using the extends keyword. The subclass can then use
the super() method to call the parent class's constructor.
Method Overriding: Subclasses can override methods from the parent class to provide more specific
behavior.
In-built Events and Handlers
Mouse Events (click, mouseover)
Keyboard Events (keydown, keyup)
Form Events (submit, change)
element.addEventListener("click", handler);
Working with Objects
Types of Objects
JavaScript has plain objects, arrays, functions, and other built-in objects.
User-defined
Built-in (Array, Date, Math)
Creating Objects
Object literals
new Object()
Constructor functions
Object.create()
Combining and Cloning Objects
Spread operator ({...obj1, ...obj2})
It’s useful for cloning, merging, and manipulating objects.
Destructuring Objects
It allows you to extract properties from an object and assign them to variables with optional renaming
and default values.
const { name, age } = person;
Spread Operator
The spread operator is a powerful and concise tool in JavaScript that simplifies working with arrays and
objects. It allows you to:
Copy arrays or objects.
7 / 10
JavaScript.md 2025-05-13
Merge multiple arrays or objects.
Pass elements of an array as individual arguments to a function.
Convert strings into arrays of characters.
const newObj = { ...obj1, ...obj2 };
Browser and Document Object Model (DOM)
Window object
Document object
DOM tree structure
Selecting elements (getElementById, querySelector)
Manipulating content and styles
Event handling
Arrays
Creating Arrays
let arr = [1, 2, 3];
Destructuring Arrays
const [a, b] = arr;
Accessing Arrays
Indexing: arr[0]
Array Methods
push(), pop(), shift(), unshift()
map(), filter(), reduce()
forEach(), includes(), slice(), splice()
Asynchronous Programming
Helps handle time-based and delayed operations
Prevents blocking
Callbacks
Function passed as an argument
setTimeout(() => {
console.log("Hello");
8 / 10
JavaScript.md 2025-05-13
}, 1000);
When callbacks are nested within callbacks, the code becomes messy and hard to maintain. This is
called callback hell.
doTask1(() => {
doTask2(() => {
doTask3(() => {
console.log("All tasks done!");
});
});
});
Promises
Promises solve callback hell.
Provide a clean, chainable way to handle asynchronous operations.
Help with error handling in async flows.
fetch(url)
.then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.error(err));
Promise States
Pending – Initial state, neither fulfilled nor rejected.
Fulfilled – The operation completed successfully.
Rejected – The operation failed.
Async and Await
Avoids complex .then() chaining
Improves code readability
Simplifies error handling with try...catch
async function fetchData() {
const res = await fetch(url);
const data = await res.json();
}
9 / 10
JavaScript.md 2025-05-13
Fetch API
Used to make HTTP requests
fetch(url, {
method: "GET/POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
Creating and Consuming Modules
Promote reusability of code
Maintain cleaner project structure
Enable encapsulation (hide internal logic)
Load only what’s needed using import/export
Creating Module
export const greet = () => "Hello!";
Consuming Module
import { greet } from "./greet.js";
Use type="module" in HTML
Connect
GitHub omteja04
LinkedIn omteja
10 / 10
