Javascript Module 21

 

Javascript Module 21

If You want To Earn Certificate For My  All   Course Then Contact Me At My  Contact  Page   then I Will Take A Test And  Give You  certificate  . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page 

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

javascript Module 21

  Module 21 : Function Expressions and Arrow Functions 

🧠 1. Introduction to Function Expressions

🔹 What is a Function Expression?

A function expression is a way to define a function and assign it to a variable.

javascript code

const greet = function() { console.log("Hello from a function expression!"); }; greet(); // Output: Hello from a function expression!

🔍 Key Concepts:

Anonymous : Function expressions can be unnamed.

Assigned to Variables : They're stored in a variable.

Not Hoisted : Unlike function declarations, function expressions are not hoisted.

⚖️ 2. Function Declarations vs Function Expressions

Feature

Function Declaration

Function Expression

Syntax

function greet() {}

const greet = function() {}

Hoisting

Yes

No

Name

Required

Optional

Can be Immediately Invoked?

No

Yes (with IIFE)

💡 Example:

javascript code

// Function Declaration sayHello(); function sayHello() { console.log("Hello!"); } // Function Expression // greet(); // ❌ Error: Cannot access before initialization const greet = function() { console.log("Hi!"); }; greet(); // ✅

 3. Arrow Functions (ES6)

Arrow functions are a concise way to write function expressions.

✅ Syntax:

javascript code

const greet = () => { console.log("Hello from arrow function!"); };

🧪 Shorter versions:

javascript code

const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5

🔥 4. Arrow Function vs Function Expression

Feature

Arrow Function

Function Expression

Syntax

Shorter

Longer

this

Lexical this

Dynamic this

arguments object

Not available

Available

Usage in Classes

Not recommended for methods

Recommended

🎯 Lexical this Example:

javascript code

function Timer() { this.seconds = 0; setInterval(() => { this.seconds++; console.log(this.seconds); }, 1000); } new Timer(); // Works because arrow uses outer `this`

javascript code

function TimerBroken() { this.seconds = 0; setInterval(function() { this.seconds++; // `this` is undefined or global! console.log(this.seconds); }, 1000); } new TimerBroken(); // ❌

🛠️ 5. Methods and Use Cases

📌 Case 1: Filtering an Array

javascript code

const numbers = [1, 2, 3, 4, 5]; const even = numbers.filter(num => num % 2 === 0); console.log(even); // [2, 4]

📌 Case 2: Mapping to New Values

javascript code

const names = ['Alice', 'Bob', 'Charlie']; const nameLengths = names.map(name => name.length); console.log(nameLengths); // [5, 3, 7]

6. Explanation

 Build a calculator with function expressions and arrow functions

Objective: Implement basic calculator operations using both function expressions and arrow functions.

javascript code

// Function expressions const add = function(a, b) { return a + b; }; const subtract = function(a, b) { return a - b; }; // Arrow functions const multiply = (a, b) => a * b; const divide = (a, b) => (b !== 0 ? a / b : "Cannot divide by zero"); console.log(add(5, 3)); // 8 console.log(subtract(9, 4)); // 5 console.log(multiply(3, 7)); // 21 console.log(divide(10, 2)); // 5

Explanation:

Uses both styles to show their differences.

Demonstrates scope, return behavior, and usability.

🔬 7. Advanced Concepts & search for Understanding

📘 search Insight: Why Arrow Functions Don’t Have Their Own this

Arrow functions were introduced in ES6 to simplify function syntax. But more importantly:

Arrow functions capture the this value of the enclosing context.

This is crucial in callbacks (e.g., setTimeout, array methods).

Research Snippet:

According to MDN: “An arrow function does not have its own bindings to this or super, and should not be used as methods.”

🧠 Use in React:

React developers often use arrow functions for inline handlers:

jsx code

<button onClick={() => this.handleClick()}>Click</button>

This avoids binding this manually in the constructor.

🧑‍🏫 8. Exercises with Explanation

✅ Exercise 1: Convert function declaration to arrow function

javascript code

// Original function greet(name) { return "Hello " + name; } // Convert to arrow const greet = name => "Hello " + name;

✅ Exercise 2: Write a function that returns square of a number

javascript code

const square = n => n * n; console.log(square(4)); // 16

✅ Exercise 3: Create a custom map function using function expression

javascript code

const customMap = function(arr, fn) { const result = []; for (let i = 0; i < arr.length; i++) { result.push(fn(arr[i], i)); } return result; }; console.log(customMap([1, 2, 3], x => x * 10)); // [10, 20, 30]

 9. Summary

Function expressions assign functions to variables.

Arrow functions offer concise syntax and inherit this.

Arrow functions are excellent for short functions and callbacks.

Use function expressions or declarations when:

You need hoisting.

You need your own this or arguments object.

 10. Activity Summary

Create a program with:

           

Function expression for string manipulation.

Arrow function for numeric operations.

Callback usage with arrow functions in map, filter, etc.

📚 Resources

MDN: Function Expressions

MDN: Arrow Functions

JavaScript.info: Arrow functions

Javascript Module 20

 Javascript Module 20

If You want To Earn Certificate For My  All   Course Then Contact Me At My  Contact  Page   then I Will Take A Test And  Give You  certificate  . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page 

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 20

  Module 20 : Javascript Type Conversion and Coercion 

📘  1. Introduction to Types in JavaScript

JavaScript is a dynamically typed language, meaning variable types are determined at runtime.

🔹 JavaScript Data Types:

javascript

code

// Primitive types string, number, boolean, null, undefined, symbol, bigint // Object types Object, Array, Function, Date, RegExp, etc.

🔸 2. Type Conversion vs Type Coercion

Aspect

Type Conversion (Explicit)

Type Coercion (Implicit)

Who does it?

You, the programmer

JavaScript engine (automatically)

How?

Using functions like String(), Number()

Occurs during operations like +, ==

Predictable?

Yes

Sometimes confusing or unexpected

Example

Number("42") → 42

"5" * 2 → 10 (string coerced to number)

🔸 3. Explicit Type Conversion (Type Casting)

✅ To String

javascript

code

String(123) // "123" (123).toString() // "123" true + "" // "true"

✅ To Number

javascript

 code

Number("42") // 42 parseInt("42px") // 42 parseFloat("3.14") // 3.14 +"42" // 42

✅ To Boolean

javascript

code

Boolean("") // false Boolean("Hello") // true Boolean(0) // false !!"hi" // true

⚠️ Falsy Values

javascript

 code

false, 0, "", null, undefined, NaN

🔸 4. Implicit Type Coercion (Automatic)

JavaScript tries to help by converting types for you.

✅ String Coercion with +

javascript

code

"5" + 2 // "52" true + "yes" // "trueyes"

✅ Number Coercion with other operators

javascript

code

"5" * 2 // 10 "10" - 1 // 9 "5" / 2 // 2.5 null + 1 // 1

✅ Boolean Coercion in logical expressions

javascript

code

!!"hello" // true !!0 // false if ("0") console.log("truthy"); // prints

🔸 5. Equality Comparisons (== vs ===)

✅ == (loose equality): allows coercion

javascript

code

"5" == 5 // true 0 == false // true null == undefined // true

✅ === (strict equality): no coercion

javascript

code

"5" === 5 // false 0 === false // false

✅ Best Practice:

Always use === unless you intentionally want coercion.

🔸 6. Conversion Table (Quick Reference)

Value

To String

To Number

To Boolean

"123"

"123"

123

true

"abc"

"abc"

NaN

true

true

"true"

1

true

false

"false"

0

false

null

"null"

0

false

undefined

"undefined"

NaN

false

[]

""

0

true

{}

"[object Object]"

NaN

true

🔸 7. Practical Examples

Example 1: String concatenation vs arithmetic

javascript

code

console.log("10" + 1); // "101" console.log("10" - 1); // 9

Example 2: Boolean coercion

javascript

code

let x = "hello"; if (x) { console.log("Truthy"); // Output: Truthy }

Example 3: Equality confusion

javascript

 code

console.log(false == '0'); // true console.log(false === '0'); // false

🔸 8. Common Pitfalls

"42" > 5 → true (coerces string to number)

null == 0 → false but null >= 0 → true

[] == false → true, [] == ![] → true (confusing behavior)

🔸 9. Best Practices

Use strict equality (===) to avoid unexpected coercion.

Always explicitly convert types when needed.

Use helper functions: Number(), String(), Boolean() instead of relying on JS to guess.

Validate input before performing operations.

🔸 10. Exercises 

🔧 Exercise 1: Predict the Output

javascript

 code

console.log(5 + "5"); // ? console.log("5" - 2); // ? console.log(true + 1); // ? console.log(false == 0); // ? console.log(null + 5); // ?

💡 Expected Output:

"55", 3, 2, true, 5

🔧 Exercise 2: Type Conversion Practice

javascript

code

let a = "123"; let b = true; let c = "abc"; console.log(Number(a)); // ? console.log(Number(b)); // ? console.log(Number(c)); // ?

💡 Expected: 123, 1, NaN

Activity: Build a Type Checker

Create a small tool in JavaScript that accepts any input and logs:

Type of the input

Type after coercion using +, *, Boolean

Suggestions on what to use (=== or type conversion)

javascript

 code

function checkInput(input) { console.log("Original:", input); console.log("Type:", typeof input); console.log("To Number:", Number(input)); console.log("To Boolean:", Boolean(input)); console.log("Using == 5:", input == 5); console.log("Using === 5:", input === 5); } checkInput("5");

🔸 11. Strategy

Explain with visuals: Use diagrams to show how types flow and change during coercion.

Live code walkthroughs: Use the browser console to show changes.

Interactive tools: Use JS Tutor to step through code.

Debate == vs ===: Let  guess outputs before revealing coercion behavior.

Assign exercises focusing on type safety in code.

🔸12.Advanced Insights

JavaScript uses the ECMAScript ToPrimitive and ToNumber abstract operations under the hood.

Loose equality (==) uses a complex algorithm involving these steps:

Convert objects to primitives

Coerce types using rules

Compare

📚 Reference: ECMAScript Language Specification – Abstract Equality

🔚 Conclusion

Understanding JavaScript type conversion and coercion is crucial for writing robust, bug-free applications. While coercion can be useful, relying on explicit conversion improves code readability and predictability.

📁 Supplementary Resources

MDN: Type Conversion

JavaScript Equality Table: https://dorey.github.io/JavaScript-Equality-Table/

JS Visualizer: https://www.jsv9000.app/

Javascript Module 19

 Javascript Module 19

If You want To Earn Certificate For My  All   Course Then Contact Me At My  Contact  Page   then I Will Take A Test And  Give You  certificate  . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page 

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 19

  Module 19 : String Methods and Template Literals.

🧠 📘 1. Introduction to JavaScript Strings

A string is a sequence of characters used to represent text. In JavaScript, strings are immutable—once created, they cannot be changed directly.

Declaring Strings:

javascript

code

let name = "Reha"; let greeting = 'Hello'; let multiline = `This is a multiline string.`;

🔍 2. String Methods in JavaScript

JavaScript provides a rich set of built-in string methods. Below is a categorized breakdown.

🔤 A. Basic Methods

Method

Description

Example

length

Returns the number of characters

"Hello".length → 5

charAt(index)

Returns character at the specified index

"Hello".charAt(1) → 'e'

charCodeAt(i)

Returns UTF-16 code of character at index

"A".charCodeAt(0) → 65

🧱 B. Searching Methods

Method

Description

Example

indexOf(substr)

Returns the first index of a substring

"banana".indexOf("a") → 1

lastIndexOf(substr)

Returns last index

"banana".lastIndexOf("a") → 5

includes(substr)

Returns true if substring exists

"hello".includes("ell") → true

startsWith(substr)

Checks if string starts with a substring

"hello".startsWith("he") → true

endsWith(substr)

Checks if string ends with a substring

"hello".endsWith("lo") → true

🛠️ C. Manipulation Methods

            

Method

Description

Example

toUpperCase()

Converts string to uppercase

"abc".toUpperCase() → "ABC"

toLowerCase()

Converts string to lowercase

"ABC".toLowerCase() → "abc"

trim()

Removes whitespace from both ends

" hello ".trim() → "hello"

slice(start, end)

Extracts part of string

"abcdef".slice(2, 4) → "cd"

substring(start, end)

Similar to slice, doesn't accept negatives

"abcdef".substring(2, 4) → "cd"

substr(start, length)

Deprecated, but still in use

"abcdef".substr(2, 3) → "cde"

replace(old, new)

Replaces first occurrence

"dog".replace("d", "f") → "fog"

replaceAll(old, new)

Replaces all occurrences

"a-a-a".replaceAll("a", "b") → "b-b-b"

repeat(n)

Repeats string n times

"ha".repeat(3) → "hahaha"

split(separator)

Splits string into array

"a,b,c".split(",") → ["a","b","c"]

concat(str)

Concatenates strings

"hi".concat(" there") → "hi there"

🧩 3. Template Literals

Template literals are a modern ES6 feature using backticks (`). They allow:

Multiline strings

String interpolation

Expression embedding

📌 Syntax:

javascript

 code

let name = "Rehana"; let message = `Hello, ${name}! Welcome to JavaScript.`; console.log(message);

🔍 Template Literals Features:

Multiline:

javascript

code

let poem = `Roses are red, Violets are blue.`;

Embedded Expressions:

javascript

 code

let a = 5, b = 10; console.log(`Sum is: ${a + b}`);

🧪 4.  Exercises

✅ Exercise 1: Capitalize the First Letter of a String

javascript

code

function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); } console.log(capitalize("javascript")); // Output: Javascript

✅ Exercise 2: Count Occurrences of a Character

             

javascript

 code

function countChar(str, char) { return str.split(char).length - 1; } console.log(countChar("banana", "a")); // Output: 3

✅ Exercise 3: Create a Dynamic Message Using Template Literals

javascript

code

let username = "Rehana"; let tasks = 5; let msg = `Hello ${username}, you have ${tasks} pending tasks today.`; console.log(msg);

🧪 5.🔬  Build a String Formatter Utility

Create a utility that accepts a user input string and provides the following:

Total characters (excluding spaces).

Number of words.

First and last characters.

Sentence capitalized.

Reformat using template literals.

🧑‍💻 Sample Code:

javascript

 code

function stringStats(input) { let cleaned = input.trim(); let words = cleaned.split(" "); let wordCount = words.length; let charCount = cleaned.replace(/\s/g, '').length; return ` Input Summary: ---------------------- Original: "${input}" Characters (no spaces): ${charCount} Words: ${wordCount} First Character: ${cleaned.charAt(0)} Last Character: ${cleaned.charAt(cleaned.length - 1)} Capitalized: ${cleaned.charAt(0).toUpperCase() + cleaned.slice(1)} `; } console.log(stringStats(" hello world from JavaScript "));

🔬 6. Based Insights for Understanding

            

📌 1: Why Strings Are Immutable in JavaScript

JavaScript strings are immutable for performance and security reasons. Instead of modifying strings directly, a new string is created, reducing memory management issues and bugs due to unintended side effects.

📌 2: String Interning in JavaScript Engines

Modern JS engines like V8 (Chrome) or SpiderMonkey (Firefox) optimize string usage by interning—storing identical strings in memory only once—saving performance.

📌 Insight 3: Template Literals vs. Traditional Concatenation

Studies show that template literals:

Improve code readability

Reduce syntax errors

Perform comparably to concatenation in most cases

Example:

javascript

code

// Traditional Concatenation let result = "Hello " + name + ", your score is " + score + "."; // Template Literal let result = `Hello ${name}, your score is ${score}.`;

🧠 7. Review Questions

What is the difference between slice() and substring()?

How would you extract the last 3 characters of a string?

Write a function to reverse a string using built-in methods.

What are the benefits of template literals over string concatenation?

🧑‍🏫 8. Assignment

Build a string-based data parser that:

Accepts a user bio string input.

Extracts first name, last name, and age.

Formats the data using a template literal for a profile card.

✅ 9. Summary

Explored core and advanced string methods.

           

Mastered template literals for clean, modern syntax.

Completed exercises.

Gained insight into JavaScript engine optimizations and best practices.

 10. Further

MDN String Reference

JavaScript Info: Strings

V8 Engine Optimization Tips