Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
370 views

JavaScript Notes

The document provides an overview of JavaScript syntax and concepts in 5 sections: 1) Syntax, 2) Data Types, 3) Variables, 4) Operators, and 5) Methods. It details JavaScript's case sensitivity, statements, comments, and code formatting. It also explains primitive data types like numbers, strings, Booleans; object data types; and common variable types. Operators like arithmetic, assignment, comparison, logical, and unary operators are outlined. Finally, it provides examples of common string and object methods.

Uploaded by

Madhan chowdary Kamma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
370 views

JavaScript Notes

The document provides an overview of JavaScript syntax and concepts in 5 sections: 1) Syntax, 2) Data Types, 3) Variables, 4) Operators, and 5) Methods. It details JavaScript's case sensitivity, statements, comments, and code formatting. It also explains primitive data types like numbers, strings, Booleans; object data types; and common variable types. Operators like arithmetic, assignment, comparison, logical, and unary operators are outlined. Finally, it provides examples of common string and object methods.

Uploaded by

Madhan chowdary Kamma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

JavaScript

Certainly! Let's dive into each of the topics in more


detail, providing comprehensive explanations and
examples.

1. Syntax
Case Sensitivity
JavaScript is a case-sensitive language, meaning that variables and function
names are distinguished by their capitalization. For example, myVariable and
myvariable would be treated as two separate identifiers.

Statements
Statements in JavaScript are terminated by a semicolon (;). However, JavaScript
has automatic semicolon insertion (ASI), which means that semicolons are often
optional. It is generally recommended to include them for better code
readability.

Comments
Comments in JavaScript can be single-line or multi-line. Single-line comments
start with //, while multi-line comments are enclosed between /* and */. Comments
are ignored by the JavaScript interpreter and are useful for adding explanations
or disabling code temporarily.

Code Formatting
JavaScript code can be included directly in an HTML file using <script>
tags, either in the <head> section or just before the closing </body>
tag. Alternatively, JavaScript code can be placed in an external file with a .js
extension and linked to the HTML file using the <script
src="filename.js"></script> tag.
2. Data Types
Primitive Data Types
JavaScript has several primitive data types:

● Number: Represents both integer and floating-point numbers. For


example, age = 25; or let pi = 3.14;.
●
● String: Represents a sequence of characters enclosed in single quotes ('')
or double quotes (""). For example, let name = ‘John’; or let message = “Hello,
world!”;.
●
● Boolean: Represents either true or false. It is commonly used for logical
operations and conditional statements. For example, let isTrue = true; or let
isFalse = false;.
●
● Null: Represents the intentional absence of any object value. It is often
used to indicate the absence of a meaningful value. For example, let data =
null;.
●
● Undefined: Represents a variable that has been declared but has not been
assigned a value. For example, let x; will result in x being undefined.
●
● Symbol: Represents a unique identifier. Symbols are often used as keys for
object properties to avoid naming collisions. Symbols are created using
the Symbol() function. For example, let id = Symbol();
●
● String Indices:
●
● String indices refer to the position of individual characters within a
string.
●
● In JavaScript, strings are zero-indexed, meaning the first character has
an index of 0.
●
● Accessing a specific character is done using square brackets [] with the
index value.
● Example:
●
● - `let str = "Hello";`
- `console.log(str[0]); // Output: "H"`

- `console.log(str[3]); // Output: "l"`

● Note: String indices are used to retrieve or manipulate specific characters


in a string using their respective positions.

Concatenation

Concatenation is the process of combining strings in JavaScript using the "+"


operator.

Example 1:

let name = "John";

let greeting = "Hello, " + name + "!";

Example 2:

let num1 = 5;

let num2 = 10;

let result = "The sum is: " + (num1 + num2);

Concatenation allows you to build dynamic strings by combining variables,


constants, or literals.

Template Literals:
in JavaScript allow for embedded expressions and multiline strings, making
string interpolation more concise. They are enclosed in backticks (`) and can
contain placeholders (${expression}) for dynamic values.

- Syntax: `const message = `Hello, ${name}!`;`

- Expressions within `${}` are evaluated and inserted into the string.
- Multiline strings: `const text = `Line 1

Line 2`;`

- Use `+` concatenation for strings without expressions.

- Benefits: Readable, efficient, and maintainable code.

● Example:
const name = 'John';

const age = 25;

const message = `My name is ${name} and I'm ${age} years old.`;

console.log(message);

● .

Object Data Types


JavaScript also has several object data types, which are created using the
syntax. Object data types can contain properties and methods, which are
accessed using dot notation.

For example:
let person = {
name: ‘John Doe’;,
age: 30,
job: “Software Engineer”;
};

person.name; // "John Doe"


person.age; // 30
person.job; // "Software Engineer"

3. Variables
Variables are declared using the var, let, or const keyword.

● var was the original way to declare variables but has some quirks related
to scope. It is function-scoped, meaning that variables declared with var
are accessible throughout the entire function in which they are defined.
●
● let and const were introduced in ECMAScript 6 and provide block-scoping.
Variables declared with let are limited to the block they are defined in (e.g.,
within an if statement or loop). const creates a read-only variable with
block scope that cannot be reassigned.

Variables can store values of any data type, and their values can be
assigned and modified using the assignment operator (=).

For example:
let age = 25; // Declares a variable 'age' and assigns the value 25 to
it.
age = 30; // Modifies the value of 'age' to 30.

4. Operators
JavaScript supports a wide range of operators that perform various operations
on operands.

Arithmetic operators
Perform mathematical operations on numbers, such as addition (+), subtraction
(-), multiplication (*), division (/), modulus (%), increment (++), and decrement (--).

Assignment operators
Assign values to variables. The most common assignment operator is the equals
sign (=), but there are also compound assignment operators like +=, -=, *=, /=, and
more.

Comparison operators
Compare values and return a Boolean result. They include == (equal to), ===
(strictly equal to), != (not equal to), !== (strictly not equal to), >, <, >=, and <=.
Logical operators
Used to combine and manipulate Boolean values. The logical AND (&&), logical
OR (||), and logical NOT (!) operators are commonly used in conditional
statements and loops.

Unary Operators in JavaScript


Unary operators operate on a single operand and perform various operations.

Increment (++)
Increases the value by one.

let x = 5;

x++; // x is now 6

Decrement (--)
Decreases the value by one.

let y = 10;

y--; // y is now 9

Negation (-)
Changes the sign of the operand.

let z = -5;

z = -z; // z is now positive 5

Logical NOT (!)


Negates a Boolean value.

let isTrue = true;


let isFalse = !isTrue; // isFalse is now false

Typeof
Returns the type of the operand as a string.

let value = 10;

let type = typeof value; // type is &quot;number&quot;

Using these unary operators, you can perform specific operations on individual
operands to manipulate values and obtain desired results.

Examples
## Arithmetic Operators

* Addition: **`let x = 10 + 5;`**

* Subtraction: **`let y = 10 - 5;`**

* Multiplication: **`let z = 10 * 5;`**

* Division: **`let w = 10 / 5;`**

* Modulo (remainder of division): **`let remainder = 10 % 3;`**

* Post-increment: **`let increment = x++;`**

* Post-decrement: **`let decrement = y--;`**

## Assignment Operators

* Assigns the value 10 to `x`: **`let x = 10;`**

* Equivalent to `x = x + 5`: **`x += 5;`** (x is now 15)

* Equivalent to `x = x - 3`: **`x -= 3;`** (x is now 12)


* Equivalent to `x = x * 2`: **`x *= 2;`** (x is now 24)

* Equivalent to `x = x / 4`: **`x /= 4;`** (x is now 6)

* Equivalent to `x = x % 5`: **`x %= 5;`** (x is now 1)

## Comparison Operators

* Strict equality comparison (false): **`console.log(x === y);`**

* Strict inequality comparison (true): **`console.log(x !== y);`**

* Greater than (false): **`console.log(x &gt; y);`**

* Less than (true): **`console.log(x &lt; y);`**

* Greater than or equal to (false): **`console.log(x &gt;= y);`**

* Less than or equal to (true): **`console.log(x &lt;= y);`**

## Logical Operators

* Logical AND (false): **`console.log(x &amp;&amp; y);`**

* Logical OR (true): **`console.log(x || y);`**

* Logical NOT (false): **`console.log(!x);`**

There are many more operators in JavaScript, including bitwise, string


concatenation, ternary, and more. Understanding and utilizing operators is
fundamental for performing various computations and making logical decisions
in JavaScript.

Identifier Rules in JavaScript


● Identifiers (variable names, function names, etc.) must follow specific rules:
○ Must start with a letter, underscore (_), or dollar sign ($).
○ Can include letters, numbers, underscores, and dollar signs.
○ Should not use reserved keywords.
○ Case-sensitive.

Examples:

● Valid identifiers:
○ myVariable
○ _counter
○ $totalAmount
● Invalid identifiers:
○ 123abc
○ var
○ function()
○ my-variable

Note: Identifiers play a crucial role in JavaScript code and must adhere to these
rules to ensure proper syntax and avoid errors.

5. Methods in JavaScript
Methods in JavaScript are functions that are associated with objects or data
types. They allow you to perform actions, manipulate data, or retrieve
information associated with a specific object. Here are some commonly used
methods in JavaScript:

String Methods
String methods operate on string values and can be used to manipulate and
retrieve information from strings.

● .length Returns the length of a string.


● .toUpperCase Converts a string to uppercase.
● .toLowerCase Converts a string to lowercase.
● .concat Concatenates two or more strings.
● .repeat() method repeats a string a specified number of times.
● .replace() method replaces a pattern in a string with a new substring.
● .slice() Extracts a portion of a string without modifying it.

Array Methods
Array methods are used to manipulate and retrieve information from arrays.

● .push Adds one or more elements to the end of an array.


● .pop Removes the last element from an array.
● .join Joins all elements of an array into a string.
● .indexOf Returns the index of the first occurrence of a specified element in
an array.
● .splice() Modifies an array by adding/removing elements at specified index.

Math Methods
Math methods provide mathematical operations and functions in JavaScript.

● .random Returns a random number between 0 and 1.


● .floor Rounds a number down to the nearest integer.
● .ceil Rounds a number up to the nearest integer.
● .sqrt Returns the square root of a number.

Date Methods
Date methods allow you to work with dates and times.

● .getFullYear Returns the year of a Date object.


● .getMonth Returns the month (0-11) of a Date object.
● .getDate Returns the day of the month (1-31) of a Date object.
● .toISOString Converts a Date object to a string in ISO format.

Object Methods
Object methods are functions that are associated with objects and allow you to
perform operations on those objects.

● .toString Converts an object to a string representation.


● .hasOwnProperty Returns true if an object has a specified property.
● .keys Returns an array containing the property names of an object.

By using methods, you can perform various operations and retrieve information
from different data types in JavaScript. Understanding and utilising these
methods is essential for efficient coding and manipulating data effectively.

Please note that the code examples provided here are brief and simplified. For
detailed syntax and additional parameters of each method, it is recommended to
refer to the official JavaScript documentation or relevant resources.
6. Control Structures
Conditional statements

● The if statement is used to execute a block of code if a specified condition


evaluates to true.
●
● The else if statement can be used to specify additional conditions to check
if the preceding conditions are false.
●
● The switch statement allows the execution of different code blocks based
on different cases.

Loops

● The for loop is commonly used when the number of iterations is known or
determined in advance.
●
● The while loop executes a block of code as long as a specified condition is
true.
●
● The do-while loop is similar to the while loop but guarantees that the code
block is executed at least once, even if the condition is initially false.

Break and continue statements

● The break statement is used to exit the loop immediately, skipping any
remaining iterations.
●
● The continue statement is used to skip the current iteration and move to
the next iteration of the loop.

Control structures are essential for controlling the flow of execution in


JavaScript, making decisions, and performing iterative operations.

7. Arrays (Data Structure)


1. Introduction to Arrays
● Arrays are a fundamental data structure in JavaScript used to store
multiple values in a single variable.
● They are ordered collections of elements, and each element is
accessible by its index.
● Arrays can store different data types, including numbers, strings,
objects, and even other arrays.

2. Creating Arrays
● You can create an array using square brackets [] and
comma-separated values inside.
● Example:

javascript

const fruits = ['apple', 'banana', 'orange'];

3. Accessing Elements
● Elements in an array are accessed using their index, starting from 0.
● Use square brackets and the index to retrieve the element at that
position.
● Example:

javascript

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // Output: 'apple'

console.log(fruits[1]); // Output: 'banana'

4. Modifying Elements
● You can modify elements in an array by assigning new values to
specific indexes.
● Example:
javascript

const fruits = ['apple', 'banana', 'orange'];

fruits[1] = 'grape'; // Modify 'banana' to 'grape'

console.log(fruits); // Output: ['apple', 'grape', 'orange']

5. Array Length
● The length property of an array gives the number of elements it
contains.
● Example:

javascript

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.length); // Output: 3

6. Adding Elements
● Use the .push() method to add elements to the end of an array.
● Use the .unshift() method to add elements to the beginning of an
array.
● Example:

javascript

const fruits = ['apple', 'banana'];

fruits.push('orange'); // Add 'orange' to the end

fruits.unshift('grape'); // Add 'grape' to the beginning

console.log(fruits); // Output: ['grape', 'apple', 'banana', 'orange']


7. Removing Elements
● Use the .pop() method to remove the last element from an array and
return it.
● Use the .shift() method to remove the first element from an array and
return it.
● Example:

javascript

const fruits = ['apple', 'banana', 'orange'];

const removedLast = fruits.pop(); // Remove 'orange'

const removedFirst = fruits.shift(); // Remove 'apple'

console.log(fruits); // Output: ['banana']

console.log(removedLast); // Output: 'orange'

console.log(removedFirst); // Output: 'apple'

8. Slicing Arrays
● The .slice() method extracts a portion of an array into a new array
without modifying the original.
● Example:

javascript

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

const slicedFruits = fruits.slice(1, 4); // Extract from index 1 to index 3 (not


inclusive)

console.log(slicedFruits); // Output: ['banana', 'orange', 'grape']

9. Combining Arrays
● You can combine arrays using the .concat() method or the spread
operator (...).
● Example:

javascript

const fruits1 = ['apple', 'banana'];

const fruits2 = ['orange', 'grape'];

const combined1 = fruits1.concat(fruits2);

const combined2 = [...fruits1, ...fruits2];

console.log(combined1); // Output: ['apple', 'banana', 'orange', 'grape']

console.log(combined2); // Output: ['apple', 'banana', 'orange', 'grape']

10. Iterating Over Arrays


● You can use loops like for, for...of, or forEach to iterate over the
elements of an array.
● Example with forEach:

javascript

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {

console.log(`Index ${index}: ${fruit}`);

});

/* Output:

Index 0: apple

Index 1: banana

Index 2: orange

*/
Conclusion
Arrays are versatile data structures in JavaScript, offering powerful
capabilities to store and manipulate collections of data. With arrays, you
can easily access, modify, add, and remove elements as needed. By
understanding array methods and iterating techniques, you can
efficiently work with arrays in your JavaScript programs and build
complex data-driven applications.

8. Objects

What are objects?


Objects are collections of key-value pairs. They are used to represent more
complex data structures than primitive data types like strings, numbers, and
booleans.

How to create objects?


Objects can be created using object literal notation (enclosed in curly braces) or
the new keyword.

For example:
let person = {

name: “John”;,

age: 30,

city: “New York”;

};

Or:
let person = new Object( );

person.name = “John”;

person.age = 30;

person.city = “New York”;

How to access object properties and methods?


Object properties and methods can be accessed using dot notation
(object.property) or bracket notation (object.property').

For example:
console.log(person.name); // Output: John

console.log(person.age); // Output: 30

What kind of data can objects contain?


Objects can contain properties of any data type, including primitive types,
arrays, and even other objects.

For example:
let person = {

name: “John”,

age: 30,

hobbies: “reading”, “painting”,

address: {

Street: “123 Main St”,

City: ”New York”,

}
};

Can objects have methods?


Yes, objects can also have methods, which are functions associated with the
object.

For example:
let person = {

name: “John”,

age: 30,

greet: function() {

console.log(“Hello, my name is" + this.name + &quot;.&quot;);

};

person.greet(); // Output: Hello, my name is John.

Math Object
The Math object is a global object that contains properties and methods for
performing mathematical operations. Some of the properties of the Math object
include:

● PI: The mathematical constant pi, which is approximately equal to 3.14159.


● E: The mathematical constant e, which is approximately equal to 2.71828.
● LN2: The natural logarithm of 2.
● LN10: The natural logarithm of 10.
● LOG2: The base-2 logarithm of a number.
● LOG10: The base-10 logarithm of a number.
● SQRT: The square root of a number.
● ABS: The absolute value of a number.
● SIN: The sine of a number.
● COS: The cosine of a number.
● TAN: The tangent of a number.
● ASIN: The inverse sine of a number.
● ACOS: The inverse cosine of a number.
● ATAN: The inverse tangent of a number.
● POW: The power of a number to a given exponent.
● EXP: The exponential function.
● ROUND: The function that rounds a number to a given number of decimal
places.
● FLOOR: The function that rounds a number down to the nearest integer.
● CEILING: The function that rounds a number up to the nearest integer.
● RANDOM: The function that returns a random number between 0 and 1.

Some of the methods of the Math object include:

● abs(): The absolute value of a number.


● acos(): The inverse cosine of a number.
● asin(): The inverse sine of a number.
● atan(): The inverse tangent of a number.
● ceil(): The ceiling of a number.
● cos(): The cosine of a number.
● exp(): The exponential function.
● floor(): The floor of a number.
● log(): The logarithm of a number.
● max(): The maximum of two numbers.
● min(): The minimum of two numbers.
● pow(): The power of a number to a given exponent.
● random(): A random number between 0 and 1.
● round(): The rounded value of a number.
● sin(): The sine of a number.
● sqrt(): The square root of a number.
● tan(): The tangent of a number.

Objects are fundamental in JavaScript


Objects are a fundamental concept in JavaScript and are widely used to
represent and manipulate complex data structures.
9. Functions (Most IMP)
What is a function?
A function is a reusable block of code that performs a specific task.

How to define a function


Functions can be defined using the function keyword followed by a name, a set of
parentheses, and a block of code enclosed in curly braces. For example:

function greet() {
console.log(“Hello!”);
}

Parameters
Parameters can be passed into functions to provide inputs for the function's
logic. Parameters are listed inside the parentheses when defining the function.
For example:

function greet(name) {
console.log(“Hello”, + name + “!”);
}

Return value
Functions can return a value using the return statement. The return value can be
assigned to a variable or used directly. For example:

function add(a, b) {
return a + b;
}
let sum = add(3, 5);
console.log(sum); // Output: 8

Function expressions

Functions can also be assigned to variables. These are known as function


expressions. For example:

let greet = function() {


console.log(“Hello!”);
};
greet(); // Output: Hello!

Anonymous functions

JavaScript supports anonymous functions, which are functions without a


specified name. They are often used as callback functions or immediately
invoked function expressions (IIFE). For example:

setTimeout(function() {
console.log(“Delayed message”);
}, 2000);

Conclusion

Functions are a fundamental building block in JavaScript. They allow


encapsulation of logic, reuse of code, and the creation of more complex
programs.

10. Arrow Function & this

1. Arrow Function
● Arrow functions are a concise and convenient way to define functions in
JavaScript.
● They were introduced in ES6 (ECMAScript 2015) and provide a shorter
syntax compared to regular function expressions.

1.1 Syntax
javascript

// Regular function expression

const add = function (a, b) {

return a + b;

};
// Arrow function

const add = (a, b) => a + b;

1.2 Key Features


● Arrow functions don't have their own `this`, `arguments`, `super`, or
`new.target` bindings. Instead, they inherit these values from the
surrounding lexical context.
● They automatically bind the value of `this` based on the surrounding
context, which makes them useful for certain use cases.

2. Timeout Function
● The `setTimeout` function is used to schedule the execution of a function
after a specified delay (in milliseconds).

2.1 Syntax
javascript

setTimeout(callbackFunction, delay);

2.2 Usage
javascript

// Example: Display a message after 2 seconds

function showMessage() {

console.log("Timeout function executed.");

setTimeout(showMessage, 2000);
3. Interval Function

● The `setInterval` function is used to repeatedly execute a function at a


specified time interval until it is stopped.

3.1 Syntax
javascript

setInterval(callbackFunction, interval);

3.2 Usage
javascript

// Example: Display a message every 3 seconds

function showMessage() {

console.log("Interval function executed.");

setInterval(showMessage, 3000);

3.3 Stopping Interval


●
To stop the interval execution, use the clearInterval function and pass the
interval ID returned by setInterval.
javascript

const intervalId = setInterval(callbackFunction, interval);

// To stop the interval

clearInterval(intervalId);
4. "this" with Arrow Function
● Arrow functions handle the this keyword differently than regular functions.
● In arrow functions, this is lexically (statically) scoped, meaning it retains the
value of this from its surrounding context.

4.1 Example
javascript

const person = {

name: "John",

sayHello: function () {

console.log(`Hello, my name is ${this.name}.`);

},

sayHelloArrow: () => {

console.log(`Hello, my name is ${this.name}.`);

},

};

person.sayHello(); // Output: Hello, my name is John.

person.sayHelloArrow(); // Output: Hello, my name is undefined.

4.2 Explanation

● In the sayHello method (regular function), this refers to the person object,
so this.name correctly accesses the name property within the object.
● In the sayHelloArrow method (arrow function), this is lexically bound to the
surrounding context, which is the global context in this case (unless
person was defined in the global context). As a result, this.name returns
undefined.
Remember that arrow functions are not suitable for methods that require
dynamic this binding, such as object methods, event handlers, and prototype
methods. In such cases, use regular functions to ensure proper this context.

11. Scopes, Higher-Order Functions,


Try-Catch
1. Scopes in JavaScript
1.1 Global Scope

● The global scope refers to the outermost scope in a JavaScript program.


● Variables declared outside any function or block have global scope.
● Global variables are accessible from any part of the code, including
functions and nested scopes.

1.2 Local Scope

● Local scope refers to the scope within a function or a block.


● Variables declared inside a function or block have local scope and are
only accessible within that function or block.
● Local scope takes precedence over global scope, meaning if a variable is
declared both locally and globally, the local one will be used inside the
function.

1.3 Lexical Scope

● JavaScript uses lexical scoping, also known as static scoping.


● Lexical scope determines variable visibility based on the code's physical
structure.
● Inner functions have access to variables declared in their outer (parent)
functions.

1.4 Closures

● Closures are functions that "remember" the environment in which they were
created.
● They have access to variables from their outer (enclosing) scope even after
that scope has finished executing.
● Closures are powerful and often used to create private variables and data
encapsulation.

2. Higher-Order Functions
2.1 What are Higher-Order Functions?

● Higher-order functions are functions that take functions as arguments or


return functions as results.
● They are a powerful tool that can be used to create modular and reusable
code.

2.2 Common Higher-Order Functions

● map: Transforms each element of an array using a provided function and


returns a new array.
● filter: Creates a new array containing elements that pass a test
implemented by the provided function.
● reduce: Reduces the elements of an array to a single value using a
provided function.
● forEach: Executes a provided function once for each array element.
● sort: Sorts the elements of an array based on a provided comparison
function.
● every and some: Check if all or some elements of an array satisfy a
condition, respectively.

1. map:
javascript

// Transforms each element of an array using a provided function and returns a new array.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

2. filter:
javascript
// Creates a new array containing elements that pass a test implemented by the provided
function.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

3. reduce:
javascript

// Reduces the elements of an array to a single value using a provided function.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // Output: 15

4. forEach:
javascript

// Executes a provided function once for each array element.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
console.log(num * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

5. sort:
javascript

// Sorts the elements of an array based on a provided comparison function.


const fruits = ["banana", "apple", "orange", "grape"];

fruits.sort((a, b) => a.localeCompare(b));

console.log(fruits); // Output: ["apple", "banana", "grape", "orange"]

6. every and some:


javascript

// Check if all or some elements of an array satisfy a condition, respectively.

const numbers = [1, 2, 3, 4, 5];

const allEven = numbers.every((num) => num % 2 === 0);


const someEven = numbers.some((num) => num % 2 === 0);

console.log(allEven); // Output: false (not all numbers are even)


console.log(someEven); // Output: true (some numbers are even)

These examples demonstrate the basic usage of each higher-order function.


Understanding these functions and incorporating them into your code can make
your JavaScript code more expressive and efficient.

2.3 Benefits of Higher-Order Functions

● Code reusability: Higher-order functions allow you to encapsulate common


functionality in functions that can be reused with different callback
functions.

● Abstraction: They enable you to abstract away implementation details and


focus on what needs to be done rather than how it's done.

● More concise and readable code: Higher-order functions often lead to


cleaner and more expressive code.

3. Try-Catch in JavaScript

3.1 Error Handling


● JavaScript provides error handling using the try-catch statement.
● It allows you to catch and handle errors that occur during the execution of
code.

3.2 The try Block

● The try block contains the code that might throw an exception (error).
● If an error occurs in the try block, the control is immediately transferred to
the catch block.

3.3 The catch Block

● The catch block is executed when an exception is thrown in the


corresponding try block.
● It receives an error object as a parameter, which contains information
about the error (e.g., error message, stack trace).

3.4 The finally Block

● The finally block, if provided, is executed regardless of whether an


exception is thrown or not.
● It is typically used to perform cleanup operations that should occur no
matter what, such as closing resources.

3.5 Example:
javascript

try {
// Code that may throw an exception
const result = someFunction();
console.log(result);
} catch (error) {
// Handle the error
console.error("An error occurred:", error.message);
} finally {
// Cleanup operations (optional)
console.log("This will be executed regardless of errors.");
}

3.6 Throwing Custom Errors

● You can also throw custom errors using the throw keyword.
● Custom errors can be useful for better error handling and conveying
specific error conditions.

javascript

function divide(a, b) {
if (b === 0) {
throw new Error("Division by zero is not allowed.");
}
return a / b;
}

try {
const result = divide(10, 0);
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
}

Remember that the best practice is to use specific error types that inherit from
the Error object for custom errors.
These are the essential concepts related to scopes, higher-order functions, and
try-catch in JavaScript. Understanding these topics will help you write more
robust and maintainable code.

12. Spread and Rest

1. Spread Operator (...)

1.1 Definition
● The spread operator (...) is a powerful feature introduced in ES6 (ECMAScript
2015) for working with arrays and objects in a more concise and flexible way.

1.2 Usage with Arrays

1.2.1 Copying Arrays


javascript
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // Output: [1, 2, 3]

1.2.2 Concatenating Arrays


javascript

const array1 = [1, 2, 3];


const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];
console.log(concatenatedArray); // Output: [1, 2, 3, 4, 5, 6]

1.2.3 Spreading Array Elements as Function Arguments


javascript

const numbers = [1, 2, 3];


const sum = (a, b, c) => a + b + c;
const result = sum(...numbers);
console.log(result); // Output: 6

1.3 Usage with Objects

1.3.1 Copying Objects


javascript

const originalObj = { name: "John", age: 30 };


const copiedObj = { ...originalObj };
console.log(copiedObj); // Output: { name: "John", age: 30 }

1.3.2 Merging Objects


javascript
const obj1 = { name: "John" };
const obj2 = { age: 30 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // Output: { name: "John", age: 30 }

1.4 Note
● The spread operator performs a shallow copy, meaning nested objects or
arrays are still referenced and not cloned.

2. Rest Parameter

2.1 Definition
● The rest parameter is also denoted by the three dots (...) but used in function
definitions to handle an arbitrary number of function arguments as an array.

2.2 Usage
javascript

function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15


console.log(sum(10, 20)); // Output: 30
console.log(sum()); // Output: 0

2.3 Note
● The rest parameter must be the last parameter in the function declaration, as
it collects all remaining arguments into an array.

3. Spread and Rest: A Dual Role


The spread operator and rest parameter share the same syntax but serve different
purposes:

● Spread Operator: Used to split array elements or object properties.


● Rest Parameter: Used to collect multiple function arguments into an array.

javascript

// Spread Operator (Splitting)


const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // Output: 1 2 3

// Rest Parameter (Collecting)


function printArgs(...args) {
console.log(args);
}

printArgs(1, 2, 3); // Output: [1, 2, 3]

Understanding the spread and rest concepts allows you to manipulate arrays and
function arguments more efficiently and elegantly in JavaScript.

13. DOM (Document Object Model)


The Document Object Model (DOM) is a programming interface for HTML and
XML documents. It represents the structure of a document and allows scripts to
access and manipulate its content. The DOM provides a way to interact with web
pages dynamically, making it a powerful tool for creating interactive web
applications.
1. Selecting Elements in the DOM:

1.1. Selecting by ID:


● Use getElementById to select an element by its unique ID attribute.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<div id="myDiv">This is a div element with ID.</div>

<script>

const myElement = document.getElementById('myDiv');

console.log(myElement.textContent); // Output: "This is a div element with ID."

</script>

</body>

</html>

1.2. Selecting by Class Name:


● Use getElementsByClassName to select elements by their class name.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<p class="myClass">This is a paragraph with class.</p>

<script>

const elements = document.getElementsByClassName('myClass');

console.log(elements[0].textContent); // Output: "This is a paragraph with class."

</script>

</body>

</html>

1.3. Selecting by Tag Name:


● Use getElementsByTagName to select elements by their HTML tag
name.

● Example:
html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<p>This is paragraph 1.</p>

<p>This is paragraph 2.</p>

<script>

const paragraphs = document.getElementsByTagName('p');

console.log(paragraphs[1].textContent); // Output: "This is paragraph 2."

</script>

</body>

</html>

1.4. Query Selectors:


● Use querySelector to select the first element that matches a CSS
selector.

● Use querySelectorAll to select all elements that match a CSS selector.

● Example:
html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<p class="myClass">This is paragraph 1.</p>

<p class="myClass">This is paragraph 2.</p>

<script>

const element = document.querySelector('.myClass');

console.log(element.textContent); // Output: "This is paragraph 1."

const elements = document.querySelectorAll('.myClass');

console.log(elements[1].textContent); // Output: "This is paragraph 2."

</script>

</body>

</html>

2. Modifying Elements in the DOM:


2.1. Setting Contents in Objects:
● Use the textContent property to set or get the text content of an
element.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<div id="myDiv">Initial text content.</div>

<button onclick="changeText()">Change Text</button>

<script>

function changeText() {

const myElement = document.getElementById('myDiv');

myElement.textContent = "Text content changed!";

</script>

</body>
</html>

2.2. Manipulating Attributes:


● Use the setAttribute and getAttribute methods to manipulate element
attributes.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<img id="myImage" src="image.jpg">

<button onclick="changeImage()">Change Image Source</button>

<script>

function changeImage() {

const myImage = document.getElementById('myImage');

myImage.setAttribute('src', 'new_image.jpg');

}
</script>

</body>

</html>

2.3. Manipulating Style:


● Use the style property to modify the inline CSS style of an element.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<div id="myDiv" style="color: blue;">This is a div element.</div>

<button onclick="changeStyle()">Change Style</button>

<script>

function changeStyle() {

const myDiv = document.getElementById('myDiv');

myDiv.style.backgroundColor = "yellow";
myDiv.style.fontSize = "24px";

</script>

</body>

</html>

2.4. Classlist Property:


● Use the classList property to add, remove, or toggle CSS classes on
an element.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<div id="myDiv">This is a div element.</div>

<button onclick="addClass()">Add Class</button>

<button onclick="removeClass()">Remove Class</button>


<script>

function addClass() {

const myDiv = document.getElementById('myDiv');

myDiv.classList.add('highlight');

function removeClass() {

const myDiv = document.getElementById('myDiv');

myDiv.classList.remove('highlight');

</script>

<style>

.highlight {

background-color: yellow;

font-weight: bold;

</style>

</body>

</html>
3. Navigation on Page:

3.1. Parent and Child Elements:


● Use the parentNode property to access an element's parent node.

● Use the childNodes or children properties to access an element's child


nodes.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<ul id="myList">

<li>Item 1</li>

<li>Item 2</li>

</ul>

<script>

const myList = document.getElementById('myList');

console.log(myList.parentNode.tagName); // Output: "BODY"


console.log(myList.children[0].textContent); // Output: "Item 1"

</script>

</body>

</html>

3.2. Siblings:
● Use the previousSibling and nextSibling properties to access an
element's siblings.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<script>

const paragraph1 = document.getElementsByTagName('p')[0];


console.log(paragraph1.nextSibling.textContent); // Output: "Paragraph 2"

</script>

</body>

</html>

4. Adding and Removing Elements:

4.1. Adding Elements on Page:


● Use createElement to create a new element.

● Use appendChild to add a new element as a child of another element.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<div id="myDiv">This is a div element.</div>

<button onclick="addNewElement()">Add New Element</button>

<script>
function addNewElement() {

const newElement = document.createElement('p');

newElement.textContent = "This is a new paragraph.";

const myDiv = document.getElementById('myDiv');

myDiv.appendChild(newElement);

</script>

</body>

</html>

4.2. Removing Elements from Page:


● Use removeChild to remove a child element from its parent.

● Example:

html

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>
<ul id="myList">

<li>Item 1</li>

<li>Item 2</li>

</ul>

<button onclick="removeListItem()">Remove List Item</button>

<script>

function removeListItem() {

const myList = document.getElementById('myList');

const listItemToRemove = myList.children[0];

myList.removeChild(listItemToRemove);

</script>

</body>

</html>

These are some fundamental concepts for interacting with the DOM using
JavaScript. Understanding and utilizing these methods and properties
will allow you to create dynamic and engaging web applications.

14. DOM Events and Event Listeners


1. Introduction to DOM Events
DOM events are interactions and occurrences that happen in the
Document Object Model (DOM) of a web page. These events can be
triggered by user actions, like clicks or key presses, or by other actions
like loading the page or resizing the window.

2. Mouse and Pointer Events


Mouse and pointer events are triggered by user interactions with the
mouse or pointer device.

● click: Occurs when a mouse button is pressed and released on an


element. It is commonly used for buttons and links.

javascript

document.getElementById('myButton').addEventListener('click', function(event) {

// Your click event handling code here

});

● mouseover: Fired when the mouse pointer enters the area of an


element. Useful for creating hover effects.

javascript

document.getElementById('myElement').addEventListener('mouseover', function(event) {

// Your mouseover event handling code here


});

● mouseout: Triggered when the mouse pointer leaves the area of an


element.

javascript

document.getElementById('myElement').addEventListener('mouseout', function(event) {

// Your mouseout event handling code here

});

● mousemove: Fired when the mouse pointer moves over an element.


Useful for tracking mouse movements.

javascript

document.getElementById('myElement').addEventListener('mousemove', function(event) {

// Your mousemove event handling code here

});

3. Event Listeners for Elements


Event listeners are functions that wait for a specific event to occur on an
element.
● addEventListener(): Attaches an event listener to an element.
Multiple listeners can be added to the same event on the same
element.

javascript

document.getElementById('myElement').addEventListener('click', function(event) {

// Your event handling code here

});

● removeEventListener(): Removes a previously attached event listener


from an element.

javascript

function clickHandler(event) {

// Your click event handling code here

document.getElementById('myButton').addEventListener('click', clickHandler);

document.getElementById('myButton').removeEventListener('click', clickHandler);
4. The 'this' Keyword in Event Listeners
The 'this' keyword in an event listener refers to the element to which the
event listener is attached. It allows you to access and manipulate
properties and attributes of the current element.

javascript

document.querySelectorAll('.myClass').forEach(function(element) {

element.addEventListener('click', function(event) {

// 'this' refers to the current element that was clicked

this.classList.toggle('active');

});

});

5. Keyboard Events
Keyboard events are triggered by user interactions with the keyboard.

● keydown: Occurs when a key is pressed down. Useful for detecting


continuous key presses (e.g., for games or keyboard shortcuts).

javascript

document.addEventListener('keydown', function(event) {
// Your keydown event handling code here

});

● keyup: Fired when a key is released. Useful for detecting when a user
releases a key after pressing it down.

javascript

document.addEventListener('keyup', function(event) {

// Your keyup event handling code here

});

● keypress: Similar to keydown, but this event is not fired for all keys. It
is only triggered for keys that produce a character value
(alphanumeric keys).

javascript

document.addEventListener('keypress', function(event) {

// Your keypress event handling code here

});
6. Form Events
Form events are triggered by interactions with HTML forms.

● submit: Occurs when a form is submitted, usually by clicking a


submit button. Useful for form validation and data submission.

javascript

document.getElementById('myForm').addEventListener('submit', function(event) {

// Your form submission handling code here

event.preventDefault(); // Prevents the default form submission

});

● change: Fired when the value of a form element changes, such as


input fields or select options.

javascript

document.getElementById('myInput').addEventListener('change', function(event) {

// Your change event handling code here

});

7. Other Events
There are many other events available, such as:

● load: Fired when the page finishes loading. Useful for triggering
actions after the page has loaded completely.

javascript

window.addEventListener('load', function(event) {

// Your load event handling code here

});

● resize: Occurs when the window is resized. Useful for handling


responsive design and layout changes.

javascript

window.addEventListener('resize', function(event) {

// Your resize event handling code here

});

● scroll: Fired when an element's scrollbar is scrolled. Useful for


creating custom scroll animations or tracking scroll positions.

javascript
document.getElementById('myElement').addEventListener('scroll', function(event) {

// Your scroll event handling code here

});

Conclusion
Understanding DOM events, event listeners, and handling various types
of events is crucial for building interactive and responsive web
applications. By leveraging these concepts, you can create engaging user
experiences that respond to user actions and inputs effectively.

15. Call Stack and Visualizing Call


Stack
1. Introduction to Call Stack
● The call stack is a fundamental concept in JavaScript's runtime
environment.

● It keeps track of the execution context of functions, enabling the


interpreter to know where to return after function calls.

● Functions are added to the call stack when they are called and
removed when they complete execution.

2. Visualizing the Call Stack


● Imagine the call stack as a stack of function calls, where the
topmost function is the one currently being executed.

● When a new function is called, it is pushed onto the top of the stack.

● When a function completes execution, it is popped off the stack, and


the interpreter moves to the next function.

3. Breakpoints in JavaScript
● Breakpoints are markers set in the source code to pause the
execution of a script at a specific line.

● Developers use breakpoints to inspect the state of variables and


step through code during debugging.

● Modern browsers' developer tools allow setting breakpoints in the


"Sources" tab.

4. JavaScript is Single-Threaded
● JavaScript is a single-threaded language, meaning it executes one
operation at a time.

● As a result, long-running tasks can block the main thread, causing


UI freeze or unresponsiveness.

● To mitigate this, use asynchronous programming techniques, like


callbacks and promises.

5. Callback Hell
● Callback hell refers to deeply nested callbacks, leading to
unreadable and hard-to-maintain code.

● It occurs when multiple asynchronous operations depend on each


other's results.
● Example of callback hell:

javascript

getData(function(data) {

getMoreData(data, function(moreData) {

getEvenMoreData(moreData, function(evenMoreData) {

// and so on...

});

});

});

16. Promises

6. Setting Up Promises
● Promises are a way to handle asynchronous operations more
elegantly and avoid callback hell.

● A promise represents a value that may not be available yet but will
resolve or reject in the future.

● Example of creating a simple promise:

javascript
const fetchData = new Promise((resolve, reject) => {

// Asynchronous operation

setTimeout(() => {

const data = { name: 'John', age: 30 };

resolve(data); // Success: Resolve the promise with data

// reject(new Error('Data not found')); // Error: Reject the promise with an error

}, 2000);

});

7. Refactoring with Promises


● To refactor callback-based code with promises, encapsulate the
asynchronous operation in a promise.

● Use the resolve function to handle successful completion and the


reject function for errors.

javascript

function fetchData() {

return new Promise((resolve, reject) => {

// Asynchronous operation

setTimeout(() => {
const data = { name: 'John', age: 30 };

resolve(data); // Success: Resolve the promise with data

// reject(new Error('Data not found')); // Error: Reject the promise with an error

}, 2000);

});

8. .then() and .catch() Methods


● The .then() method is used to handle the resolved value of a promise.

● The .catch() method is used to handle any errors that occurred


during the promise execution.

javascript

fetchData()

.then((data) => {

// Handle the resolved data here

console.log(data);

})

.catch((error) => {

// Handle errors here


console.error(error);

});

9. Promise Chaining
● Promise chaining allows multiple asynchronous operations to be
executed in sequence.

● Each .then() returns a new promise, enabling the chaining of


asynchronous tasks.

javascript

fetchData()

.then((data) => {

// First operation

console.log(data);

return getAdditionalData(); // Return another promise

})

.then((additionalData) => {

// Second operation

console.log(additionalData);

return processFinalData(additionalData); // Return yet another promise


})

.then((finalData) => {

// Third operation

console.log(finalData);

})

.catch((error) => {

// Handle any errors that occurred during the promise chain

console.error(error);

});

10. Handling Results and Errors in Promises


● The resolve() function is used to handle successful results, passing
the resolved data.

● The reject() function is used to handle errors, passing an error object


or message.

● Use .then() to handle the resolved data and .catch() to handle errors in
promises.

Conclusion
Understanding the call stack, using breakpoints, and adopting promises
can greatly improve your JavaScript coding experience. Promises provide
a cleaner and more maintainable way to handle asynchronous operations,
reducing the likelihood of callback hell. With promises, you can efficiently
manage both successful results and error handling in your asynchronous
code. By visualizing the call stack and effectively utilizing promises, you
can write more reliable and readable JavaScript applications.

You might also like