js for (client side hacking)(learning daily)

ALL THE STUFF IS WRITTEN ARE MY NOTES . MY EXPERIMENTS ARE BEEN DONE HERE , AS A SOURCE CODE REVIEW , CLIENT SIDE REVIEW PERSON I HAVE TO CHECK THE CODE ANALYSE IT , UNDERSTAND IT !!

AIM BIG ( DO WORK DAILY , SURROUND PEOPLE WHO WORK DAILY GRIND DAILY !!! TRUST ME !!! )

THERE ARE MANY CODES PRESENT LIKE I WAS PRACTISING ONE CONEPT A LOT , ITS TODAY 27/09/2025 AND I STARTED AT 18 OR 19 SEPT , DAILY I AM DOING THIS STUFF , AND YEAH I HAVE ALL THIS STUFF PRESENT IN MY HANDWRITTEN NOTES (VAHI SE TOH THODA EASY ANALYSIS HUA HAI LIKE CONCEPTS KI)

the following was nice code must run \

const max = prompt("Enter the value"); // 1. Ask user for input (string)

const a = Number.parseInt(max); // 2. Convert input to number

const actual = a - 13; // 3. Subtract 13

const percentage = actual / a; // 4. Calculate percentage

alert(percentage); // 5. Show result in alert

https://www.codecademy.com/courses/learn-javascript-fundamentals/lessons/variables/exercises/string-interpolation-ii

<!DOCTYPE html>
<script>
"use strict";

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);
</script>

let sale = true;
if (sale) {
  console.log('Time to buy!')
}

let sale = true; sale && console.log("Time to buy!");

let sale = true;
sale =false;
if (sale) {
  console.log('Time to buy!')
}

Conditional Statements

Comparison Operators

7 min

When writing conditional statements, sometimes we need to use different types of operators to compare values. These operators are called comparison operators.

Here is a list of some handy comparison operators and their syntax:

less than: <
greater than: >
less than or equal to: <=
greater than or equal to: >=
is equal to: ===
is not equal to: !==

HERE IN THE BELOW CODE JUST CHANGE THE GREATER THEN SIGN THEN LIKE TRY OUT ALL THE SIGNS PRESENT THERE

let hungerLevel = 7 ;
if (hungerLevel !==7){
  console.log('Time to eat!')
}
else{
  console.log('We can eat later!')
}

if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

  let mood = 'sleepy';
let tirednessLevel = 6;
if (mood === 'sleepy' && tirednessLevel > 8){
  console.log('time to sleep')
}
else{
  console.log('not bedtime yet')
}

truthy and falsely && Truthy and Falsy Assignment

let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

Truthy and Falsy Assignment

Logical Operators

These operators combine multiple boolean expressions or values to provide a single boolean output:

&& (AND): Returns true if all operands evaluate to true.
|| (OR): Returns true if one or more operands evaluate to true.
! (NOT): Returns the logical opposite of an operand’s boolean value (i.e., !(true) returns false and !(false) returns true).

The following example showcases the usage of logical operators:

const walksLikeADuck = true;
const talksLikeADuck = true;

// AND Operator
let isDuck = walksLikeADuck && talksLikeADuck;

console.log(isDuck);
// Output: true

const isBird = true;
const isPlane = false;

// OR Operator
isDuck = isBird || isPlane;

console.log(isDuck);
// Output: true

// NOT Operator
const isPenguin = !isDuck;

console.log(isPenguin);
// Output: false

truithly and falsey Assignment

let tool = '';
tool = 'marker';

// Use short-circuit evaluation to assign  writingUtensil variable below:
let writingUtensil = tool || 'pen';

console.log(`The ${writingUtensil} is mightier than the sword.`);

let username = '';
let defaultName;

if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}

console.log(defaultName); // Prints: Stranger

Ternary Operator

here we are converting the code into the ternary , simple one !!!

let isLocked = false;
isLocked ? console.log('You will need a key to open the door.') : console.log('You will not need a key to open the door.');

let isCorrect = true;
isCorrect ? console.log('Correct!'):console.log('Incorrect!'); 

let favoritePhrase = 'Love That!';

if (favoritePhrase === 'Love That!') {
  console.log('I love that!');
} else {
  console.log("I don't love that!");
}

corrected command down here !!!!

let isLocked = false;
isLocked ? console.log('You will need a key to open the door.') : console.log('You will not need a key to open the door.');

let isCorrect = true;
isCorrect ? console.log('Correct!'):console.log('Incorrect!'); 

let favoritePhrase = 'Love That!';
favoritePhrase === 'Love That!' ? console.log('I love that!') : console.log("I don't love that!");

Else If Statements

10 min

We can add more conditions to our if...else with an else if statement. The else if statement allows for more than two possible outcomes. You can add as many else if

statements

Preview: Docs Loading link description

as you’d like, to make more complex conditionals!

The else if statement always comes after the if statement and before the else statement. The else if statement also takes a condition. Let’s take a look at the syntax:

let stopLight = 'yellow';

if (stopLight === 'red') {
  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
}

else if statements

let season = 'summer';

if (season === 'spring') {
  console.log('It\\'s spring! The trees are budding!');}
  else if (season==='winter'){
    console.log('It\\'s winter! Everything is covered in snow.')
  }
 else {
  console.log('Invalid season.');
}

let season = 'summer';

if (season === 'spring') {
  console.log('It\\'s spring! The trees are budding!');}
  else if (season==='winter'){
    console.log('It\\'s winter! Everything is covered in snow.')
  }
  else if (season==='fall'){
    console.log('It\\'s fall! Leaves are falling!')
  }
  else if ( season === 'summer'){
  console.log('It\\'s sunny and warm because it\\'s summer!')
  }
 else {
  console.log('Invalid season.');
}

the switech keyword

else if

statements

Preview: Docs In JavaScript, a statement is a unit of code that performs a specific action or task.

are a great tool if we need to check multiple conditions. In programming, we often find ourselves needing to check multiple values and handle each of them differently. For example:

let groceryItem = 'papaya';

if (groceryItem === 'tomato') {
  console.log('Tomatoes are $0.49');
} else if (groceryItem === 'papaya'){
  console.log('Papayas are $1.29');
} else {
  console.log('Invalid item');
}

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

// Prints 'Papayas are $1.29'

my own code

let athleteFinalPosition = 'first place';
switch (athleteFinalPosition){
  case 'first place':
  console.log('You get the gold medal!')
  break;
  case 'second place':
  console.log('You get the silver medal!')
  break;
  case 'third place':
  console.log('You get the bronze medal!')
  break;
default :
console.log('No medal awarded.')
break;
}

FUNCTIONS

What are Functions?

1 min

When first learning how to calculate the area of a rectangle, there’s a sequence of steps to calculate the correct answer:

Measure the width of the rectangle.
Measure the height of the rectangle.
Multiply the width and height of the rectangle.

With practice, you can calculate the area of the rectangle without being instructed with these three steps every time.

We can calculate the area of one rectangle with the following code:

const width = 10;
const height = 6;
const area =  width * height;
console.log(area); // Output: 60

Copy to Clipboard

Imagine being asked to calculate the area of three different rectangles:

// Area of the first rectangle
const width1 = 10;
const height1 = 6;
const area1 =  width1 * height1;

// Area of the second rectangle
const width2 = 4;
const height2 = 9;
const area2 =  width2 * height2;

// Area of the third rectangle
const width3 = 10;
const height3 = 10;
const area3 =  width3 * height3;

Copy to Clipboard

In programming, we often use code to perform a specific task multiple times. Instead of rewriting the same code, we can group a block of code together and associate it with one task, then we can reuse that block of code whenever we need to perform the task again. We achieve this by creating a function. A function is a reusable block of code that groups together a sequence of

statements

Preview: Docs Loading link description

to perform a specific task.

In this lesson, you will learn how to create and use

functions

Preview: Docs Loading link description

, and how they can be used to create clearer and more concise code.

function getReminder(){
  console.log('Water the plants.')
}
function greetInSpanish(){
  console.log('Buenas tardes')
}

Calling a Function

function sayThanks(){
  console.log('Thank you for your purchase! We appreciate your business.')
}
sayThanks();
sayThanks();
sayThanks(); // this is just for calling a function like without calling this we cant get typed our message present in the console.log

Parameters and Arguments

The sayThanks() function works well, but let’s add the customer’s name in the message.

Add a parameter called name to the function declaration for sayThanks().

function sayThanks(name) {
  console.log('Thank you for your purchase! We appreciate your business.');
}

function sayThanks(name ) {
  console.log('Thank you for your purchase, '+ name + '! We appreciate your business.'
);
}
sayThanks('Cole'); //we just have to call this  including the name i want like i used cole , otherwse i would use seomthjing like ashutohs or anuthing we can do this !!!

default paramaters !!

function makeShoppingList(item1 = 'milk', item2 = 'bread', item3 = 'eggs'){
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}
makeShoppingList()

RETURN

function monitorCount(rows, columns) {
  return rows * columns;
};
console.log(monitorCount(5, 4)); 

Yahaan function kuch value calculate karke return karta hai (rows * columns).
Phir hum us value ko console.log() me print karte hain.

important codes just read and understand it please !!

function monitorCount(rows, columns) {
  return rows * columns;
};
console.log(monitorCount(5, 4)); 
const numOfMonitors =monitorCount(5,4)
console.log(numOfMonitors);

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

hard code bellow try to understand

must try to understand please please

function monitorCount(rows, columns) {
  return rows * columns;
}
function costOfMonitors (rows , columns){
  return monitorCount(rows, columns) * 200;
}                                                 
const totalCost = costOfMonitors(5,4)
console.log(totalCost);

function expressing !!!

just keep grinding become js master atleas u should understand the code

const plantNeedsWater = function(day) {
if (day === 'Wednesday'){
  return true;
}
else{
  return false;
}
}

//console.log(plantNeedsWater('Tuesday')); // false

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

concise body arroy functions

const plantNeedsWater = (day) => {
  return day === 'Wednesday' ? true : false;
};

const squareNum = (num) => {
  return num * num;
};

We can refactor the function to:

const squareNum = num => num * num; //

const plantNeedsWater = (day) => day === 'Wednesday' ? true : false;

more easy to understand !!!

Memory Trick (yaad rakhne ke liye)

Normal function → function likhna padta hai

Arrow function → => lagta hai

Concise arrow function → ek line ka shortcut

below the code are my takeaywas and experiments on this !! high level experiments on my own !!!!

function ashutosh (a , n){
  console.log(`ashutosh`)
}
ashutosh()

function ashutosh(a, n){
  console.log(`${a*n}`)
}
ashutosh(5,4)

🔥 Question 1:

Ek function banao squareNumber jo ek number lega aur uska square (number × number) return karega.

👉 Example:

squareNumber(5) → 25
squareNumber(10) → 100

function squareNumber ( a, n=2){
    return a**n;
}
console.log(squareNumber(5))  // question by chatgpt solved 

/// new concept 
2. Function Expression (using const)
const squareNumber = function(a, n = 2) {
  return a ** n;
};
console.log(squareNumber(5));

BELOW IS THE CODE LIKE I WANT TO DO IN SHORT ARROW FUNCTION FORM ;) ||| BEST CONCEPT OF FUNCTIONS CONVERTING IS PRESENT HERE !!

const squareNumber = (a, n = 3) => {
  return a * n;
};
console.log(squareNumber(5)); // 15

const squareNumber = (a,n=3) =>  a**n ;
console.log(squareNumber(5)) // 125

TUFF QUESTOIN

WRITE A CODE FOR A PRIME NUMBER

function isPrime(num) {
  if (num <= 1) return false;
  if (num === 2) return true; // SO THESE ARE THE CONDITOINS OF PRIME NUMBER NOTHING HARD HERE !!

  let i = 2;
  while (i < num) { // num > i  i.e condition of the prime number 
    if (num % i === 0) { // another condition is if number is even(only 2 is even number else greater than 2 all are false ; its remainder is zero !!
      return false;
    } else {
      i = i + 1; // increment
    }
  }
  return true;
}

console.log(isPrime(7));  // true
console.log(isPrime(8));  // false

 2nd 
 
 const isPrime = function(num) {
  if (num <= 1) {
    return false;
  } else if (num === 2) {
    return true;
  } else {
    let i = 2;
    while (i < num) {
      if (num % i === 0) {
        return false;
      } else {
        i = i + 1;
      }
    }
    return true;
  }
};

console.log(isPrime(11)); // true
console.log(isPrime(15)); // false

3rd by mine one tried but wrong 

function isPrime(num , i =2){
    if (num <= 1){
        return false ;
    }
    else if (num ===2 ){
    return true;
    }
    else if (num % 2 ==0 ){
        return false;
    }
    else 
    i=i+1 ;
   
}
console.log(isPrime(45))

corrected version is here of mine ;)

function isPrime(num, i = 2) {
    if (num <= 1) return false;       // 1 or less → not prime
    if (num === 2) return true;       // 2 → prime
    if (num % i === 0) return false;  // divisible → not prime
    if (i * i > num) return true;     // optimization: √num check
    return isPrime(num, i + 1);       // increment i and check next
}

console.log(isPrime(45)); // false
console.log(isPrime(7));  // true
console.log(isPrime(11)); // true

const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // blue 
}
logSkyColor()

just read and understand the code use programizz to test the code by yourself

const city ='New York City'
function logCitySkyline(){
  let skyscraper ='Empire State Building'
  return 'The stars over the ' + skyscraper + ' in ' + city;
}
console.log(logCitySkyline())

https://www.codecademy.com/courses/introduction-to-javascript/lessons/scope/exercises/block-scope-iii

Blocks and Scope(codecadmey)

const city ='New York City'
function logCitySkyline(){
  let skyscraper ='Empire State Building'
  return 'The stars over the ' + skyscraper + ' in ' + city;
}
console.log(logCitySkyline())

some leetcode questions to be solved ( after learning js )

Global Scope

let satellite = 'The Moon'
let galaxy = 'The Milky Way'
let stars = 'North Star'
function callMyNightSky(){
  return 'Night Sky: ' + satellite + ', ' + stars + ', and ' + galaxy;
}
console.log(callMyNightSky())

Block Scope

monitorcount = (rows, coloms) => {
     return rows * coloms ;
 }
 console.log(monitorcount(5,4))

 monitorcount = (rows, coloms) => {
     return rows * coloms ;
 }
 console.log(monitorcount(5,4))
 const n = monitorcount(5 ,6 )
 console.log(n)

let logVisibleLightWaves = () => {  // soi the concept is 
    const lightWaves = 'Moonlight'
  console.log(lightWaves)
}                   
logVisibleLightWaves()

const greet = (name)=> {            // let greet = function(name){} // instead of this function ko hata do and => laga do !!!!
  return "Hello, " + name + "!";
};
console.log(greet('hello'))

let logVisibleLightWaves = () => {
    const lightWaves = 'Moonlight'
  console.log(lightWaves)
}                   
console.log(logVisibleLightWaves());

Scope Pollution

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius'
	return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};
console.log(callMyNightSky());
console.log(stars)

must try to find the bug below , just analyze the code see that let num = 500 is global one and geetin reassigned into the function

let num = 500; // global variable declared !!

const logNum = () => { 
  let num = 100; // Take note of this line of code , if i reassign it liek let num then it will take it as re declare 
  console.log(num);

};

logNum(); // Prints 100
console.log(num); // Prints 100

here we can return only one single return only so we tried to return both declared variables in a single reutrn ;)

const logVisibleLightWaves = () => {
  let lightWaves = 'Moonlight';
  let region = 'The Arctic';

  console.log(lightWaves);
  console.log(region);
  return { lightWaves, region };  // dono ek object ke andar
};

console.log(logVisibleLightWaves());

below is some correct and some wrong code ;) isske upper accha code hai !!!!!!!!!!!!!

const logVisibleLightWaves = () => {
  let lightWaves = 'Moonlight';
  let region = 'The Arctic';

  console.log(lightWaves);
  console.log(region);

  return { lightWaves, region };  // dono ek object ke andar
};

console.log(logVisibleLightWaves());

bug finding

revised once !! done !!! , if i came here back i will be writeing revised second time !! and below code has nice catches !!!!

const logVisibleLightWaves = () => {
  let lightWaves = 'Moonlight';
	let region = 'The Arctic';
  if (region === 'The Arctic'){
    let lightWaves = 'Northern Lights'; // if the console.log is not here then just re assign this variable instead of declearing 
    console.log() //// if declaring then use  console.log(lightWaves)
  }
  
  console.log(lightWaves);
};

logVisibleLightWaves();

const logVisibleLightWaves = () => {
  let lightWaves = 'Moonlight';
	let region = 'The Arctic';
  if (region === 'The Arctic'){
    let lightWaves = 'Northern Lights';
    console.log(lightWaves)
  }
  
  console.log(lightWaves);
};

logVisibleLightWaves();

Review: Scope

• Scope refers to where variables can be accessed throughout the program, and is determined by where and how they are declared.

Blocks are statements that exist within curly braces {}.
Preview: Docs In JavaScript, a statement is a unit of code that performs a specific action or task.
Global scope refers to the context within which variables are accessible to every part of the program.
Global variables are variables that exist within the global scope.
Block scope refers to the limited reach of variables that are only available within the specific code block where they are defined.
Local variables are variables that exist within the block scope.
Global namespace is the space in our code that contains globally scoped information.
Scope pollution is when too many variables exist in a namespace or variable names are reused.

Arrays

// An array containing numbers
const numberArray = [0, 1, 2, 3]; //just do console.log here and down !!

// An array containing different data types
const mixedArray = [1, 'chicken', false];

RUN BELOW CODE TO LEARN THE CONCEPT OR SIMPLY TRY TO UNDERSTAND HERE !!!!!!

Creating an Array

const musicGenres = ['Rock', 'Pop', 'Country'];

console.log(musicGenres);

Arrays can also be created with the Array class by using the new keyword and passing in the elements as comma-separated arguments:


const musicGenres = new Array('Rock', 'Pop', 'Country');

const musicGenres = new Array('Rock', 'Pop', 'Country');
console.log(musicGenres);

// [ 'Rock', 'Pop', 'Country' ]

=== Code Execution Successful ===

THE BEST CONCEPT (JUST KEEP IN MIND LAZY ONE)

An array can also be created as empty and have its values added later through the help of the .push() function:

const genreOne = 'Rock';
const genreTwo = 'Pop';
const genreThree = 'Country';

const musicGenres = [genreOne, genreTwo, genreThree];
console.log(musicGenres)

Accessing the Elements of an Array (this is all the theorey and practical did by the website , so i also have done some experiments inside , and if we move down the practicall continous !!

Array elements are ordered by index values, starting at 0:

Index 0 has the first element.
Index 1 has the second element.
Index 2 has the third element.
Index n-1 has the nth element.

Individual elements in the array can be accessed/changed using the array name and the element’s index surrounded by square brackets.

Run the code below to see how the element at index 0 in the musicGenres array can be accessed and have its value updated:

ANALYZE THE CODE PERFECTLY

const musicGenres = ['Rock', 'Pop', 'Country'];

// Accesses element at index zero
console.log(musicGenres[0]);

// Assigns new value to the element at index zero
musicGenres[0] = 'Soul';

console.log(musicGenres[0]);

ANALYZE THE CODE BELOW PERFECTLY !!! SOURCE CODE ANALYSIS (NEW CONCEPT )

const musicGenres = ['Rock', 'Pop', 'Country'];
index 0 , index 1 , index 2 , index 3 ............ index (n-1)
// Accesses element at index zero
console.log(musicGenres[0]); //rock

// Assigns new value to the element at index zero
musicGenres[2] = 'Soul';        // LOOK OUT TO A NEW CONCEPT HERE !!

console.log(musicGenres[2]);

const musicGenres = [
  ['Rock', 'Pop', 'Country'], 
  ['Soul', 'Hip Hop', 'Reggae'], 
  ['Folk', 'Classical', 'Electronic']
];

console.log(musicGenres[1][2]); // Reggae

musicGenres[0].push('nice'); // ✅ Correct way

console.log(musicGenres[0][3]); // Output: nice

const musicGenres = ['Rock', 'Pop', 'Country'];
musicGenres[4] ='hiphop'
musicGenres.push('hi')
// Accesses element at index zero
console.log(musicGenres[0]); //rock

// Assigns new value to the element at index 1
musicGenres[2] = 'Soul';

console.log(musicGenres[2]); 
console.log(musicGenres[3]); //undefined 
console.log(musicGenres[4]);

// Some code
const musicGenres = ['Rock', 'Pop', 'Country'];
musicGenres[4] ='hiphop'
musicGenres.push('hi')//arays ke end pe javega !!!
// Accesses element at index zero
console.log(musicGenres[0]); //rock

// Assigns new value to the element at index 1
musicGenres[2] = 'Soul';
console.log(musicGenres[1]);
console.log(musicGenres[2]); 
console.log(musicGenres[3]); //undefined 
console.log(musicGenres[4]);
console.log(musicGenres[5]);

CATCH HERE !!! NICE CONCEPT EXPERIMENT !! OF PREVIOUS ONE !!!

const musicGenres = ['Rock', 'Pop', 'Country'];
musicGenres[4] ='hiphop'
musicGenres.push('hi')//default at the end 
// Accesses element at index zero
console.log(musicGenres[0]); //rock

// Assigns new value to the element at index zero
musicGenres[2] = 'Soul';
INDEX 0 = ROCK , INDEX 1 = POP 
console.log(musicGenres[2]);//COUNTRY
console.log(musicGenres[3]); //UNDEFINED
console.log(musicGenres[4]);//HIPHOP
console.log(musicGenres[5]);//HI -----> SETED BY THE PUSH BUTTON

NESTED INDEX ARRAYS ( IMPORTANT AND EASY CONCEPT BUT LOOKS HARD)

ANALYSE THE BELOW CODE ;) —> AS I HAVE TO DO SOURCE CODE ANALYSIS IN FUTURE !!

// Create a nested array
const musicGenres = [
  ['Rock', 'Pop', 'Country'], //NESTED INDEX 0
  ['Soul', 'Hip Hop', 'Reggae'], //NESTED INDEX 1
  ['Folk', 'Classical', 'Electronic'], NESTED INDEX 2
];

// Retrieve the genre at index 2 of the array at index 1
**console.log(musicGenres[1][2]**); // YAHA PE NESTED INDEX 1 MAI JAKE THEN INDEX 2 KO SELECT KARNA HAI JO  KI Reggae HAI !!
// Output: Reggae

// Retrieve the genre at index 1 of the array at index 0
console.log(musicGenres[0][1]); // NESTED INDEX 0 AND THEN INDEX 1 PAKDO JO KI  POP HAI 
// Output: Pop
ISME NESTED INDEX KE ANDAR JANA HAI THEN APNEKO BAKI NORMAL INDEXES DEKHNE HAI

below is the whole practical things we will be learning , above were the theorey and live concepts written and i readed that practised them a lot seiously and its helping me here wihle writing the practical code here !!!!!!!!

acessing `elements`

const famousSayings = ['Fortune favors the brave.', 'A joke is a very serious thing.', 'Where there is love there is life.'];
const listItem = famousSayings[0];
console.log(listItem);
console.log(famousSayings[2])
console.log(famousSayings[3])

Update Elements && Arrays with let and const

let condiments = ['Ketchup', 'Mustard', 'Soy Sauce', 'Sriracha'];
const ut ensils = ['Fork', 'Knife', 'Chopsticks', 'Spork'];
condiments = ['Mayo']
utensils[3] ='Spoon'
console.log(utensils)
console.log(condiments)

The .length property

const objectives = ['Learn a new language', 'Read 52 books', 'Run a marathon'];
console.log(objectives.length)

The .push() Method

const itemTracker = ['item 0', 'item 1', 'item 2'];

itemTracker.push('item 3', 'item 4');

console.log(itemTracker) // Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];

const chores = ['wash dishes', 'do laundry', 'take out trash'];
chores.push('ashutosh','pratik')
console.log(chores)

The .pop() Method javascript.pop method

basic example

const newItemTracker = ['item 0', 'item 1', 'item 2'];

const removed = newItemTracker.pop();

console.log(newItemTracker); 
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2

const newItemTracker = ['item 0', 'item 1', 'item 2'];

newItemTracker.pop(2); // we can remove. the index we want 
console.log(newItemTracker);

above code defines that if i puted any index value inside the pop value , that element will be removed !!!

question practical solve

Use the .pop() method to remove the last element from chores.
Checkpoint 2 Passed
2.
In a line after you called chores.pop(), log chores to the console to make sure it worked.

const chores = ['wash dishes', 'do laundry', 'take out trash', 'cook dinner', 'mop floor'];
chores.pop(4)
console.log(chores)

More Array Methods

Some other array methods that are available to JavaScript developers include: .join()Preview: Docs Elements of an array are converted to strings and concatenated together, returning the resulting string., .slice(), .splice()Preview: Docs Loading link description, .shift()Preview: Docs Removes and returns the first element of the array. All subsequent elements will shift down one place., .unshift()Preview: Docs Adds one or more elements to beginning of array and returns new length., and .concat(). Using these built-in methods makes it easier to do some common tasks when working with arrays.

syntax ---> array.method --> array.shift()

below is the nice code do review it !!!

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];
groceryList.shift('orange juice')
console.log(groceryList)

JavaScript .slice()

so basically i had a nice doubt here like see , when i was using the conept of array.push and more like that i was getting the array changed , but in array.slice case iwasnt getting it changed ,

but jab mai .push , .pop aur like shift also i was just reassinging it brother ! and it was wokring but in slice its differnt why ?

Brilliant question bhai! 🔥 Ye bohot important concept hai!

Difference:

Mutating Methods (Original array ko change karte hain):

.push()
.pop()
.shift()
.unshift()
.splice()

Ye methods original array ko directly modify kar dete hain, isliye reassign karne ki zarurat nahi!

javascript

const arr = [1, 2, 3];
arr.push(4);        // arr ko modify kar diya
console.log(arr);   // [1, 2, 3, 4] ✅

arr.pop();          // arr ko modify kar diya
console.log(arr);   // [1, 2, 3] ✅

Non-Mutating Methods (Original array ko nahi change karte):

.slice()
.concat()
.map()
.filter()

Ye methods new array return karte hain, original ko nahi chhute!

javascript

const arr = [1, 2, 3];
arr.slice(0, 2);       // New array banaya, par store nahi kiya
console.log(arr);      // [1, 2, 3] - Original waise ka waise ❌

const newArr = arr.slice(0, 2);  // Ab result save kiya
console.log(newArr);   // [1, 2] ✅
console.log(arr);      // [1, 2, 3] - Original abhi bhi unchanged

Easy Yaad Rakhne Ka Tarika: (easy rembemring )

Rule: Jab method original array ko modify karta hai, toh reassign ki zarurat nahi. Jab new array return karta hai, toh variable mein store karo!

so here the catch is like non mutating array.methods!!

.slice()
.concat()
.map()
.filter()
.indexof()

so these are the arrays we have to declare the new functions nicely !!!

So below is the code for the nice and nice , we have to declare before using these exceptional array.methods !!!

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];
const nice = groceryList.slice(1,4)
console.log(nice)

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];
console.log(groceryList.slice(1,4))

so also review the below code and must type or paste into the online compiler and analyze calmly ---->>> lala bahut bada client side hacker bana hai brother !!!!

FUNCTIONS AND ARRAYS MIX (AT THIS TIME I AM SERIOUSLY HARD TO UNDERSTAND CALLING FUNCTIONS )

DO TRY TO UNDERSTAND THE CODE !! JUST PASTE THE CODE AND TRY TO EXPERIMENT AND ANALYSE IT PLEASE REVISE --->

const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr.push('lily');
}

addFlower(flowers);

console.log(flowers); // Output: ['peony', 'daffodil', 'marigold', 'lily']

some alternatives i practised !!!

const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr.unshift('lily');  // Pehle position mein add
}

addFlower(flowers);
console.log(flowers); 
// Output: ['lily', 'peony', 'daffodil', 'marigold']

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr[arr.length] = 'lily';  // Last position mein add (same as push)
}

addFlower(flowers);
console.log(flowers); 
// Output: ['peony', 'daffodil', 'marigold', 'lily']

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr.splice(1, 0, 'lily');  // Index 1 par add (beech mein)
}

addFlower(flowers);
console.log(flowers); 
// Output: ['peony', 'lily', 'daffodil', 'marigold']

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr.push('lily', 'rose', 'tulip');  // Multiple add kar sakte ho
}

addFlower(flowers);
console.log(flowers); 
// Output: ['peony', 'daffodil', 'marigold', 'lily', 'rose', 'tulip']

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  return [...arr, 'lily'];  // Spread operator se new array
}

const newFlowers = addFlower(flowers);
console.log(newFlowers); 
// Output: ['peony', 'daffodil', 'marigold', 'lily']
console.log(flowers);  // Original unchanged

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

const addFlower = (arr) => arr.push('lily');

addFlower(flowers);
console.log(flowers);

SOME CONCEPTUAL CONCEPT IS HERE , IF WE USE CONSOLE.LOG INSIDE THE FUNCTION THEN THERE IS NO NEED TO CALL A FUNCTION OUTSIDE 

const flowers = ['peony', 'daffodil', 'marigold'];

function addFlower(arr) {
  arr.push('lily');
  console.log(arr);  // Function ke andar hi log
}

addFlower(flowers);
// Output: ['peony', 'daffodil', 'marigold', 'lily']

below is the arrow function nicely done !!!

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

const addFlower = (arr) => {
  arr.push('lily');
  return arr;  // Array return karo
}

console.log(addFlower(flowers));
// Output: ['peony', 'daffodil', 'marigold', 'lily']

// Some code
const flowers = ['peony', 'daffodil', 'marigold'];

(function(arr) {
  arr.push('lily');
  console.log(arr);
})(flowers);
// Output: ['peony', 'daffodil', 'marigold', 'lily']




//explaination to this code 

const flowers = ['peony', 'daffodil', 'marigold'];

(function(arr) {           // ← Function definition
  arr.push('lily');
  console.log(arr);
})(flowers);               // ← Turant call ho gaya!

Arrays and Functions (nice concept one )

const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){ //we made our own private function here !!!
  arr[3] = 'MUTATED';// arr ko redefine kiya hai !!!
}

changeArr(concept);//function call kiya hai !!
console.log(concept)

below is the nice concept to dont confuse ;)

function removeElement (newArr) {
  newArr.pop();
}

const removeElement = (newArr)=>newArr.pop();

// if i want to add something like return then 

function removeElement(newArr) {
  return newArr.pop();  // jo element nikla wo return hoga
}

const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);
console.log(concept)
const removeElement =(newArr)=>newArr.pop();//function starts !!!
console.log(removeElement(concept))
console.log(concept)

NESTED ARRAYS S(PRACTICAL CODING WITH QUESTIONS )

so the notation below i did for the declared variable i.e , target , defining the proper number 6 so , just note that we have numberClusters[2][1] this is the type we have to do declare the concept!!!

// Some code
const numberClusters = [[1,2],[3,4],[5,6]]
const target = numberClusters[2][1]// note this concept of notating the numberClusters[2][1]
console.log(target)

javascript.entries() /noted this for myself to do learn this concept after my practical

JavaScript .entries()

// Some code

BELOW IS THE JAVASCRIPT.MAP CONCEPT

// Some code
let happyvalabirthdaybhai = true;
let message = [happyvalabirthdaybhai].map(isBirthday => 
  isBirthday ? "Happy Birthday! 🎂" : "Not today"
)[0];
console.log(message);

//

array.forEach() quite intresting (we can define the function here !!!;)

const cats = ['Peche', 'Moana', 'Pintassilga'];
cats.forEach((name, index) => { //the array in which we can define the function 
  console.log(`Cat #${index}: ${name}`);
})

javascript.every

synatx

array.every(callbackFn);

array.every(callbackFn , this Arg);

try the below code and analyse it in the online js compiler !!!!

// Some code
const words = ['apple', 'banana', 'date'];
const allLongWords = words.every(function(word) {
    return word.length > 3;  // 'return' is MUST here
});
console.log(allLongWords);




// below is the arrow function present here !!!

const words = ['apple', 'banana', 'date'];
const allLongWords = words.every((word) => word.length > 3);
console.log(allLongWords);

// below code is just easy to understand 
const words = ['apple', 'banana', 'date'];

function checkLength(word) { // we created a function here (our own function)
    return word.length > 3;
}

const allLongWords = words.every(checkLength);
console.log(allLongWords);

important concetp functions

// Some code
const double = (x) => x * 2;
// No {}, no return needed //here brackets are not present so no return 

/const double = (x) => {
    return x * 2;  // return MUST hai!
};///bracket hai matlab we have to use return 

const prices = [100, 200, 300];

const withTax = prices.map((price) => {
    const tax = price * 0.18;        // GST calculate kiya
    const total = price + tax;        // Total nikala
    return total;                     // Return karna zaroori!
});

console.log(withTax);  // [118, 236, 354]

// Some code

do visit functions page on notebook hand written notes !!!!

function ashu (nice) {
blah blah}

const something = function(){}
 
 const something = function(){}
 const something=()=>{}
 const something=()=>............
 
 //below is the new concept !!!! learned by me 
 (function(Arr){
 arr.push('lily');
 console.log(arr);
 })
const ashu =(nice)=>{}

// Some code
const words = ['apple', 'banana', 'date'];

function checkLength(word) {
    return word.length > 3;
}

const allLongWords = words.every(checkLength);
console.log(allLongWords);

// Some code
const prices = [100, 200, 300];

const withTax = prices.map((price) => {
    const tax = price * 0.18;        // GST calculate kiya
    const total = price + tax;        // Total nikala
    return total;                     // Return karna zaroori!
});

console.log(withTax);  // [118, 236, 354]

// Some code
// Create an array with different values
const numbers = [1, 2, 3, 4, 5];

// Fill all elements with the value 0
numbers.fill(0);

console.log(numbers);

[0,0,0,0,0] 

////////////////////

// Create an array to hold 3 user profiles
const userProfiles = new Array(3);

// Fill with default user profile objects
userProfiles.fill({
  name: 'New User',
  email: 'user@example.com',
  status: 'inactive',
});

// Update one user's information
userProfiles[0].name = 'John Doe';
userProfiles[0].email = 'john@example.com';

console.log(userProfiles);

javascript.filter method

const numbers = [1, 5, 8, 12, 15, 20];

// Filter numbers greater than 10
const largeNumbers = numbers.filter(function (number) {
  return number > 10;
});

console.log(largeNumbers);

// Some code
const users = [
  { name: 'Alice', age: 25, isActive: true },
  { name: 'Bob', age: 17, isActive: false },
  { name: 'Charlie', age: 30, isActive: true },
  { name: 'Diana', age: 16, isActive: true },
];

// Filter active users who are 18 or older
const eligibleUsers = users.filter(function (user) {
  return user.isActive && user.age >= 18;
});

console.log(eligibleUsers);

understand the below code and try to review the code !!

// Some code
const products = [
  { name: "Laptop", category: "Electronics", price: 999 },
  { name: "Coffee Maker", category: "Kitchen", price: 79 },
  { name: "Wireless Mouse", category: "Electronics", price: 25 },
  { name: "Blender", category: "Kitchen", price: 45 }
];

// Function to search products by name or category
function searchProducts(products, searchTerm) {
  return products.filter(function(product) {
    return product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
           product.category.toLowerCase().includes(searchTerm.toLowerCase());
  });
}

// Search for electronics
const electronicsResults = searchProducts(products, "electronics");
console.log(electronicsResults);

// Search for products with "coffee" in the name
const coffeeResults = searchProducts(products, "coffee");
console.log(coffeeResults);

javascript.fill() method

// Some code
// Create an array with different values
const numbers = [1, 2, 3, 4, 5];

// Fill all elements with the value 0
numbers.fill(0);

console.log(numbers);

understand the below code calmly !!! calm your mind with full focus !!!

// Some code
// Create an array to hold 3 user profiles
const userProfiles = new Array(3); //empty array created !!!!!

// Fill with default user profile objects
userProfiles.fill({
  name: 'New User',
  email: 'user@example.com',
  status: 'inactive',
});

// Update one user's information
userProfiles[0].name = 'John Doe';
userProfiles[0].email = 'john@example.com';

console.log(userProfiles);

// Some code
// Create a game board with 10 positions
const gameBoard = new Array(10).fill('empty');

// Fill positions 2-5 with player pieces
gameBoard.fill('player1', 2, 6);

// Fill positions 7-8 with obstacles
gameBoard.fill('obstacle', 7, 9);

console.log(gameBoard);
console.log(`Board length: ${gameBoard.length}`);

javascript.find() method

Finding the first temperature that’s over 90°:

// Some code
const temperature = [72, 87, 92, 90, 85, 88, 81];

const hot = temperature.find((element) => element >= 90);

console.log(hot);
// Output: 92

// Some code
const peopleInLine = [21, 22, 20, 24, 22];

const underAge = peopleInLine.find(element => element < 21);

console.log(underAge);

JavaScript .findIndex()

// Some code
const cats = ['Kiki', 'Leo', 'Milo', 'Cleo', 'Lily', 'Luna'];

const findLily = cats.findIndex((cat) => {
  return cat == 'Lily';
});

console.log(findLily);
// Output: 4

if nothing is satisfied than the result will be -1

// Some code
const cats = ['Kiki', 'Leo', 'Milo', 'Cleo', 'Luna'];

const findLily = cats.findIndex((cat) => {
  return cat == 'Lily';
});

console.log(findLily);
// Output: -1

JavaScript .findLast()

array.findLast((element, index) => {expression});

read the syntaxx .....and then understand the code carefully with the source code analysis !!!!!!!

// Some code
const numbers = [10, 42, 53, 12, 200, 66, 33, 6, 10000, 200, 10];

numbers.findLast((value, index) => {
  if (value === 200) {
    console.log(`There is an instance of ${value} at index ${index}`);
  }
});//to understand this concept we can refer to the value to elements as presented in the syntax .........

JavaScript .findLastIndex()

array.findLastIndex((element, index) => {...});


//
// below is the find index method 

let age = [13, 20, 15, 45, 1, 44, 80];

console.log('findIndex() method: ');

let findIndex = age.find((value, index) => {
  console.log('Checking age index: ', index);
  return value === 80;
});


///

so here the callbackfunction is used in this method 
so basically the call backfunction is only for checking the values and indexes !!!

// Now .findLastIndex().
//so this is finding last index 
age = [13, 20, 15, 45, 1, 44, 80];

console.log('findLastIndex() method: ');

findIndex = age.findLastIndex((value, index) => {
  console.log('Checking age index: ', index);
  return value === 80;
});

JavaScript .flatMap()

array.flatMap(callbackFunc, thisArg);

read the below code and undestand it nicely !!!!!!.......

// Some code
const phrases = ['Hello world', 'JavaScript is awesome', 'flatMap is useful'];

const words = phrases.flatMap((phrase) => phrase.split(' '));

console.log(words);

//[
  'Hello',      'world',
  'JavaScript', 'is',
  'awesome',    'flatMap',
  'is',         'useful'
]

below is the best code to undestand perfectly and perfectly !!!!!!!

// Some code
const numbers = [
  [1, 2, 3],
  [4, 5],
  [6, 7, 8],
];

const result = numbers.flatMap((element, index, array) => {
  console.log(
    `Element: ${element}, Index: ${index}, Original Array: ${JSON.stringify(
      array
    )}`
  );
  return element;
});

console.log(''); //Line Break
console.log(result);


//fowloeing is the new undestanding method by chatgpt !!!!!!!

🔹 Step 2: .flatMap() callback function
(element, index, array) => { ... }


Yeh callback function hai jo har element of numbers pe run hota hai.

Iske 3 parameters (arguments) hain:

element → current element jo array ke andar hai

Pehle iteration me: [1,2,3]

Doosre iteration me: [4,5]

Teesre iteration me: [6,7,8]

index → current element ka index

Pehle iteration me: 0

Doosre iteration me: 1

Teesre iteration me: 2

array → original array jisme se element liya ja raha hai

Yeh har iteration me same rahega: [[1,2,3],[4,5],[6,7,8]]

Yeh teen cheezein hi arguments hain jo callback function ko automatically .flatMap() pass karta hai.

// Some code
const largeArray = Array.from({ length: 1000000 }, (value, index) => index);

console.time('flatMap');
const resultFlatMap = largeArray.flatMap((num) => [num, num * 2]);
console.timeEnd('flatMap');

console.time('map + flat');
const resultMapFlat = largeArray.map((num) => [num, num * 2]).flat();
console.timeEnd('map + flat');

before understanding the above code we have to understand array.form !!!!!

loops (understand the concept by reading and then writing on your own );)

for loop

// Some code
for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}

below is the quesation and i solved it myself ......

Now, let’s make our own loop! Create for loop that iterates from 5 to 10 and logs each number to the console, including both 5 and 10.

When writing/changing loops, there is a chance we will get a dreaded infinite loop, which essentially stops our programming from running anything else! This occurs when the loop’s stopping condition is never met, causing the loop to continue iterating, blocking the rest of the program from executing.

To exit an infinite loop in an exercise, refresh the page — then fix the code for your loop before running it again.

ans;

// Some code
for(let nice = 5; nice <= 10; nice++){
  console.log(nice)
}

question is

Update the for loop so that it loops backwards, printing 3 to 0 to the console, including both 3 and 0. Make sure to adjust all three expressions to achieve this, and be careful to avoid an infinite loop!

ans 👍

// Some code
// The loop below loops from 0 to 3. Edit it to loop backwards from 3 to 0
for (let counter = 3; counter > 0; counter--){
  console.log(counter);
}

Ab yeh .length ka reason samajh:

vacationSpots.length ka matlab hai array ke total elements kitne hain.
Yani agar:

const vacationSpots = ['Bali', 'Paris', 'Tulum'];


to vacationSpots.length = 3 (kyunki 3 items hain).

do solve the question below;

Write a for loop that iterates through our vacationSpots array using i as the iterator variable.

Inside the block of the for loop, use console.log() to log each element in the vacationSpots array after the string 'I would love to visit '. For example, the first round of the loop should print 'I would love to visit Bali' to the console.

When writing/changing loops, there is a chance that our stopping condition isn’t met and we get a dreaded infinite loop which essentially stops our programming from running anything else! To exit out of an infinite loop in an exercise, refresh the page - then fix the code for your loop.

const vacationSpots = ['Bali', 'Paris', 'Tulum']; 
 for (let i = 0; i < vacationSpots.length; i++){
   console.log('I would love to visit ' + vacationSpots[i]);
    }

nested loops [hard]

IT MAY BE HARD BUT SERIOUSLY I UNDESTOOD ALL THE CODE HERE , AND IT TOOK ME AMOST HOURS TO UNDERSTANT THIS CODES , JUST OPEN THE ONLINE JS COMPILER AND TRY TO DO UNDERSTAND IT , READ THE CODE MULTIPLE TIME UNDERSTAND EACH AND EVERY LINE PRESENT !!!!!!!!!! THATS THE KEY

below are the starting example code ;)

const arrayA = [6, 19, 20];
const arrayB = [19, 81, 2];
for (let i = 0; i < arrayA.length; i++) {
  for (let j = 0; j < arrayB.length; j++) {
    if (arrayA[i] === arrayB[j]) {
      console.log('Both arrays have the number: ' + arrayB[j]);
    }
  }
}

below is the mine code after reading the previous code , i understood the code and then writed the logic code by myself and if incorrect always do chatgpt or any ai , claude one too

just understand by reading(like a source code reviewer) and then write that code on yourself!!!!

const array1 =[1,2,3] //aray1
const array2 =[2,4,5] // aray2
for(let i=0; i< array1.length; i++){     //for loop creating i (Iterator)
    for(let j=0;j<array2.length; j++){   //same for j (Iterator)
        if(array1[i] === array2[j]){    //setting the condition if these both the i and j are running and this condition checks which condition is correctly matching .....
            console.log(`the equal numbers are ${array2[j]}`) //aray1[i] or array2[j] dono mai se koi bhi chalega
        }
    }
}

note: in above code i have given second for loop inside the first one , like call back function to check it

➤ Logic:

Pehla loop (i) — array1 ke har element ko ek-ek karke uthata hai
Dusra loop (j) — array2 ke har element ko check karta hai uske against
Yani:
1. i = 0 → array1[0] = 1
  - check against array2[0], array2[1], array2[2]
2. i = 1 → array1[1] = 2
  - check against array2[0], array2[1], array2[2]
3. i = 2 → array1[2] = 3
  - check against array2[0], array2[1], array2[2]
Har element of array1 compare hota hai har element of array2 se. 👉 Isliye nested loop (ek loop ke andar doosra loop) lagaya gaya hai.

alternative

key point is array.includes which is working like call back function inside the if statement !!!!!!!

const array1 = [1,2,3]; 
const array2 = [2,4,5];

for (let i = 0; i < array1.length; i++) { --> array length means the length of array1 is 3 so till 3 it will check 
  if (array2.includes(array1[i])) {
    console.log(`Equal number: ${array1[i]}`);
  }
}

const array1 = [1,2,3];
const array2 = [2,4,5];

const common = array1.filter(num => array2.includes(num));
console.log("Equal numbers:", common);

for (const a of array1) {
  for (const b of array2) {
    if (a === b) {
      console.log(`Equal number: ${a}`);
    }
  }
}

sed but too hard to understand the below code ..................

const array1 = [1, 2, 3];
const array2 = [2, 4, 5];

const set1 = new Set(array1);
const set2 = new Set(array2);
const common = [...set1].filter(x => set2.has(x));
console.log("Equal numbers:", common);

const arrayA = [6, 19, 20];
const arrayB = [19, 81, 2];

// Step 1: Process arrayA (store in Set)
const a = new Set(arrayA);

// Step 2: Process arrayB (simple loop)
for (let j = 0; j < arrayB.length; j++) {
  // Step 3: Compare using stored Set from arrayA
  if (a.has(arrayB[j])) {
    console.log('Both arrays have the number: ' + arrayB[j]);
  }
}

const vacationSpots =['as','ash','ashu']
console.log(vacationSpots[0])
console.log(vacationSpots[1])
console.log(vacationSpots[2])

BELOW CODE IS ALL ANALYSED AND MADE BY ME THROUGHT UNDERSTANDING

1.
Imagine you’re a big-wig programmer for a social media platform! You have been tasked with building a prototype for a mutual followers program. You’ll need two arrays of “friends” from two mock users so that you can extract the names of the followers who exist in both lists.
Make a variable called bobsFollowers and set it equal to an array with four strings representing the names of Bob’s friends. Each of the array elements should be unique
Checkpoint 2 Passed
2.
Make a variable called tinasFollowers and set it equal to an array with three strings representing the names of Tina’s friends. Make exactly two of these the same as two of the friends in the bobsFollowers array.
Checkpoint 3 Passed
3.
Create a third variable named mutualFollowers and set it to an empty array.
Checkpoint 4 Passed
4.
Create a nested loop that iterates through bobsFollowers as the array for the outer loop and tinasFollowers as the array for the inner loop. If the current element from the outer loop is the same as the current element from the inner loop, push that element into the mutualFollowers array.

const bobsFollowers =[ "ashutosh", "pratik", "jim","kerbot"]
const tinasFollowers =["ashutosh", "pratik", "nice"]
const mutualFollowers=[]
for(let i=0; i<bobsFollowers.length; i++){
  for(let j=0; j<tinasFollowers.length; j++){
    if (bobsFollowers[i] === tinasFollowers[j]){
      mutualFollowers.push(tinasFollowers[j]);
    }
  }
};
console.log(mutualFollowers)

const bobsFollowers =[ "ashutosh", "pratik", "jim","kerbot"]
const tinasFollowers =["ashutosh", "pratik", "nice"]
const mutualFollowers=[]
for(let i=0; i<bobsFollowers.length; i++){
  for(let j=0; j<tinasFollowers.length; j++){
    if (bobsFollowers[i] === tinasFollowers[j]){
      console.log(tinasFollowers[j]);
    }
  }
};

The While Loop

so below is the code and this is the starting of learing while loop and i just tried to understand it by pastying it in the compiler no running it , before running it , i understood (by understood meaning is i am totally focusing to understand the code what will be output (and for output you have to analyse the code in the compiler and try to understant it before running )

for (let counterOne = 1; counterOne < 4; counterOne++){
console.log(counterOne);
}

let counterTwo = 1;
while (counterTwo < 4) {
console.log(counterTwo);
counterTwo++;
}

sing Date.now() (time-based randomness)

sing Date.now() (time-based randomness)

Every millisecond time change hota hai, so we can use it to generate pseudo-random index.

const cards = ['diamond', 'spade', 'heart', 'club'];

const randomIndex = Date.now() % cards.length;
const currentCard = cards[randomIndex];

console.log(currentCard);

do while loop

so this is the do while loop section

below code is too nice to undestand just go on online compilers and try to read the code !!!

let countString = '';  --> is nothing but empty!!!
let i = 0;

do {
  countString = countString + i;
  i++;
} while (i < 5);

console.log(countString);
// Write your code below

logic behind the code is 

Iteration1
""+0=0
and i=1 i.e i++ => 1
this will check that i < 5 => i.e 1<5 so its true .... next

Iteration2
so counterstring=0 and i=1
loop body mai ;
0+1=01 and i++ = 2 i.e 1+1 ;
2<5 = true >>>its continues....

Iteration3 
before loop counter =01 and i=2
therfore inloop 
counter=counter+i 
01+2=012;
i++ = 2+1=3
3<5 true continue

Iteration 4
Before:
"012"
3
Body:
→ "012" + 3 = "0123"
i = 4
condition:
4 < 5 → true

Iteration 5
Before:
"0123"
4
Body:
→ "0123" + 4 = "01234"
i = 5
Condition:
5 < 5 → false → loop end

so the concept here is that if the code runs and do loop is matching the conditions as above code (one of the best examples here , ) if the condition is true than it will check the next , else (false) it will be stopped......

true ===true ==> true
false === false ==> true
true === false ==> false
false === true ==> false

in below code analyse that the after console.log first msg , there is a condition and in js the condition is false for true === false as stated above !!!! and the loop stops

so thats the concept buddy!!!

const firstMessage = 'I will print!';
const secondMessage = 'I will not print!'; 

// A do while with a stopping condition that evaluates to false
do {
 console.log(firstMessage)
} while (true === false);

// A while loop with a stopping condition that evaluates to false
while (true === false){
  console.log(secondMessage)
};

now here the condition is true ..............so therefore and the loop become recurring (just running .....)

const firstMessage = 'I will keep printing!';
const secondMessage = 'I will also keep printing!';

// do-while with TRUE condition
do {
  console.log(firstMessage);
} while (true === true);

// while loop with TRUE condition
while (true === true) { -->  agar yaha pe maine true === false diya toh loop stop ho jayega !!!
  console.log(secondMessage);
}

practise question

1.
We’d like a program to simulate part of the cake-baking process. Depending on the recipe, a different number of cups of sugar is required. Create the variable cupsOfSugarNeeded, and assign it a number value of your choosing.
The cups of sugar must be added to the batter one at a time. Declare the variable cupsAdded and assign it the value 0.
Checkpoint 2 Passed
2.
We have a sweet tooth, so we want to add at least one cup of sugar to the batter even if the value of cupsOfSugarNeeded is 0.
Create a do...while loop which increments cupsAdded by one while cupsAdded is less than cupsOfSugarNeeded.
In order to help us visualize the output on each iteration of the loop, add a console.log within the do...while block and log the value of cupsAdded after it is incremented.

let cupsOfSugarNeeded = 5;
let cupsAdded = 0;

do {
 cupsAdded++
 console.log(cupsAdded + ' cup was added') 
} while (cupsAdded < cupsOfSugarNeeded);

The break Keyword

for (let i = 0; i < 99; i++) { // --> so basically this means that i will go from 0 to 98 , i.e i++ is recurring so that it goes from 0 , 1 , 2 ,---99  
  if (i > 2 ) {    // here the condition is seted that i cant go greater than 2 so , i will be going like this 0,1,2 and after this will be breaked (after the i goes to 3 ) 
     break;
  }
  console.log('Banana.'); //so , it will be printing 3 times i.e 0, 1, 2
}
//the loop stoped and we got the message.............
console.log('Orange you glad I broke out the loop!');

condition 

3. console.log('Banana.') runs 3 times

Correct again!

i = 0 → print
i = 1 → print
i = 2 → print
i = 3 → break, so no print

practical

Log each element from rapperArray using a for loop.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];


for (let i = 0; i < rapperArray.length; i++) {
  console.log(rapperArray[i]);
}


or alternative 

for (let rapper of rapperArray) {
  console.log(rapper);
}

2> After the for loop, log the string "And if you don't know, now you know." to the console. Note that since there’s a single quote character, ', in our string, we can use double quotes around the string to make sure the character prints.

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

for (let i = 0; i < rapperArray.length; i++) {
  console.log(rapperArray[i]);
}
console.log("And if you don't know, now you know.")

3> Add a break inside your loop’s block that breaks out of the loop if the element at the current index in the rapperArray is 'Notorious B.I.G.'.

Log the element before breaking out of the loop.

for (let i = 0; i < rapperArray.length; i++) {
    if(rapperArray[i] === 'Notorious B.I.G.'){
    break;
}

so this is the final code present with us !!!!!

const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];

for (let i = 0; i < rapperArray.length; i++) {
    if(rapperArray[i] === 'Notorious B.I.G.'){
    break;
}
  console.log(rapperArray[i]);
}

console.log("And if you don't know, now you know.")

Functions as Data

const announceThatIAmDoingImportantWork = () => {
    console.log("I’m doing very important work!");
};

function announceThatIAmDoingImportantWork () { console.log("i'am doing very important work!"); } announceThatIAmDoingImportantWork()

function checkThatTwoPlusTwoEqualsFourAMillionTimes  () {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) { //2+2 is 4 so it dosent print anything...
      console.log('Something has gone very wrong :( ');
    }
  }
};
checkThatTwoPlusTwoEqualsFourAMillionTimes()

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for (let i = 1; i <= 1000000; i++) {
    if ((2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

// Write your code below
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;

isTwoPlusTwo();                // invoking the function
console.log(isTwoPlusTwo.name);  // using the .name property to get original function name

🟦 Step 1 — Long Function Definition

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for (let i = 1; i <= 1000000; i++) {
    if ((2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

Explanation

A long-named function is defined.
It checks 2 + 2 = 4 a million times.
If the calculation ever fails, it logs an error.
This function is slow to type because of its long name.

🟦 Step 2 — Create a Shorter Variable with `const`

const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;

Explanation

We make a shorter name: isTwoPlusTwo
We assign the long function to this shorter variable.
We are not calling the function — just referencing it.

🟦 Step 3 — Invoke the Short-Named Function

isTwoPlusTwo();

Explanation

Here we execute the function using the new short name.
Parentheses () means: call the function.

🟦 Step 4 — Print the Original Name Using `.name`

console.log(isTwoPlusTwo.name);

Explanation

Every function in JavaScript has a built-in .name property.
.name returns the original function name, even if assigned to a new variable.
Output will be:

checkThatTwoPlusTwoEqualsFourAMillionTimes

Anonymous Functions

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function () {
  return 'BOOM!';
};

functions as Parameters

hard concept present here !!!!!

param(); inside the function present here .............

const higherOrderFunc = param => {
  param();
  return `I just invoked ${param.name} as a callback function!`
}
 
const anotherFunc = () => {
  return 'I\'m being invoked by the higher-order function!';
}

higherOrderFunc(anotherFunc);

must understand the below code perfectly again and again !!!! note it down ....

const addTwo = num => {
  return num + 2;
}

const checkConsistentOutput = (func, val) => {
const checkA = val +2 ;
const checkB = func(val);
if(checkA === checkB){
  return func(val);
}else{
  return'inconsistent results'
}
}

console.log(checkConsistentOutput(addTwo , 10));

PART 1 — func aur val BAS ARGUMENT HAIN

Tu bilkul sahi soch raha hai:

“I can write func or val as ashu or pratik”

Correct.

Ye sirf variable names hain.

You can write:

const checkConsistentOutput = (ashu, pratik) => {
    const checkA = pratik + 2;
    const checkB = ashu(pratik);
}

best example from the reddit

function sum(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

// this is a higher-order function
// the third parameter, operation, expects a function here
function performOperation(a, b, operation) {
    return operation(a, b);
}

console.log(performOperation(4, 5, sum));
// 9
console.log(performOperation(10, 3, subtract));
// 7

below i understood the concept mannuall took whole day but worth ........

preety nice concept of high order function ...

do understand the below code perfectly !!!!!!

const addTwo = num => {
  return num + 2;
}
const checkConsistentOutput = (func, val) => { //these both are parameters  like ashutosh and pratik .......
const checkA = val +2 ; //val will check val +2 
const checkB = func(val); //callbackfunc to check wether its taking + true or not like just ensuring that as a call back functino work is to check and validate !!
if(checkA === checkB){ //condition ! 
  return func(val);
}else{
  return'inconsistent results'
}
}

console.log(checkConsistentOutput(addTwo , 10));

// so basically the function does the work of beauty here , like 
// i a made the function addtwo and then what i think is like 
//mujhe yeh checkConsistentOutput print karni hai so i will make a func and a val param with a callback funcition present 
//  so that check = val +2 and check b = func(val) 
//simple stp means  (func,val)  where func = addtwo and val is our own value ..... 
// console.log(checkConsistentOutput(addTwo , 10)); so, yaha se pata chala ki addTwo ki jagah func hai toh func(val) ka matlab hai ki yeh func(val) matlab addTwo ke andar val jayegi suppose 10 diya toh phir yeh 10 addTWo mai jaeyga and then process hoke 12 hoga then phir condition aayegi jo bhi hogi like agar dono equal hue like check a = val +2 jiska pahele first addTwo se koi panga nhi hai , so yeh aur check b jiska direct sambhand hai addTwo se toh yeh both check karengeif its equal then boom we got ans but not then  else one .......

Introduction to Iterators

Example iterator methods:

.forEach() → sirf loop karo

.map() → har element ko change karke naya array banata hai

.filter() → condition match karo aur selected elements ka new array do

.find() → pehla matching element return karta hai

.some() → agar koi ek condition match kare toh true

.every() → sab match karte hain toh true

.reduce() → array ko ek single value me convert karta hai

Yeh methods array par call hotey hain aur automatically har item ke upar loop chalate hain.

below code analyze karte hai ..........

const artists = ['Picasso', 'Kahlo', 'Matisse', 'Utamaro'];

artists.forEach(artist => {
  console.log(artist + ' is one of my favorite artists.');
});

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

const squareNumbers = numbers.map(number => {
  return number * number;
});

console.log(squareNumbers);

const things = ['desk', 'chair', 5, 'backpack', 3.14, 100];

const onlyNumbers = things.filter(thing => {
  return typeof thing === 'number';
});

console.log(onlyNumbers);

const artists = ['Picasso', 'Kahlo', 'Matisse', 'Utamaro'];

artists.forEach(artist => {
  console.log(artist + ' is one of my favorite artists.');
});

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

const squareNumbers = numbers.map(number => {
  return number * number;
});

console.log(squareNumbers);

const things = ['desk', 'chair', 5, 'backpack', 3.14, 100];

const onlyNumbers = things.filter(thing => {
  return typeof thing === 'number';
});

console.log(onlyNumbers);

array methoda revision plus basic logic behind the code

const artists = ['Picasso', 'Kahlo', 'Matisse', 'Utamaro'];

artists.forEach(artist => {
  console.log(artist + ' is one of my favorite artists.');
});

so basically it is going through each and every array present there ...........

array.forEach

and the output will be

Picasso is one of my favorite artists.
Kahlo is one of my favorite artists.
Matisse is one of my favorite artists.
Utamaro is one of my favorite artists.

below one !!

array.map so basically , numbers.map is going through each and every array elements and made a call backfunction like a function that will go with each and every element in the present array

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

const squareNumbers = numbers.map(number => {
  return number * number;
});

console.log(squareNumbers);

[ 1, 4, 9, 16, 25 ]

so below method does the work of the filtering the numbers, [ 5, 3.14, 100 ]

array.filter(newfunction) or callbackfunction

const things = ['desk', 'chair', 5, 'backpack', 3.14, 100];

const onlyNumbers = things.filter(thing => {
  return typeof thing === 'number';
});

console.log(onlyNumbers);

output [ 5, 3.14, 100 ]


const artists = ['Picasso', 'Kahlo', 'Matisse', 'Utamaro'];

artists.forEach(artist => {
  console.log(artist + ' is one of my favorite artists.');
});

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

const squareNumbers = numbers.map(number => {
  return number * number;
});

console.log(squareNumbers);

const things = ['desk', 'chair', 5, 'backpack', 3.14, 100];

const onlyNumbers = things.filter(thing => {
  return typeof thing === 'number';
});

console.log(onlyNumbers);

METHODS(important concept present here!!)

Syntax

objectName.methodName();

const car = {
  make: 'Honda',
  model: 'Civic',
  year: 2019,
  printOut: function () {
    console.log(this.year + ' ' + this.make + ' ' + this.model);
  },
};

car.printOut();

// Referenced as a property
var method = car.printOut;

car.year = 2020;

method();
// 'this' is being referenced outside an object context
// can be fixed by explicitly setting the object context with 'bind()'

method = car.printOut.bind(car);

method();

The .forEach() Method Iterators

syntax

array.forEach(function(currentValue, index, arr), thisValue);

['a', 'b', 'c'].forEach((letter) => console.log(letter));

listen a, b,c is present there then the call backfucntion is that goes with in the each of the elements of the array and then it passes !!

callback function --> <--

Callback function wo hota hai jise hum kisi doosre function ke andar pass karte hain, taaki woh function us callback ko har element ke liye ya proper time par execute kar sake.

some important notes !!!

groceries.forEach() calls the forEach method on the groceries array.
.forEach() takes a callback function as an argument. Remember, a callback function is a function passed as an argument to another function.
.forEach() 
loops
Preview: Docs Loading link description
 through the array and executes the callback function for each element. During each execution, the current element is passed as the argument for the callback function.
The return value for .forEach() will always be undefined.

Another way to pass a callback for .forEach() is to use arrow function syntax.

groceries.forEach(groceryItem => console.log(groceryItem));

We can also define a function beforehand to be used as the callback function.

function printGrocery(element){  console.log(element);}groceries.forEach(printGrocery);

example is here

const groceries = [1,2,3,4]
function printGrocery(element){
  console.log(element);
}

groceries.forEach(printGrocery);

another high order function

high order function !!!!!

const groceries = [1, 2, 3, 4];

function printGrocery(element) {
  console.log(element);
}

function myForEach(array, callback) {
  for (let i = 0; i < array.length; i++) {
    callback(array[i]);
  }
}

myForEach(groceries, printGrocery);

function .(...) => ... JavaScript me function keyword + arrow function kabhi saath nahi aate.

The .forEach() Method

Iterate over the fruits array to log I want to eat a plus the name of each fruit to the console. For example, I want to eat a mango.

You may use any form of callback you prefer.

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

// Iterate over fruits below
fruits.forEach(nice => console.log("I want to eat a "+ nice))

🔥 Example With forEach() this concept is much needed to understand !!!

✔️ One parameter

fruits.forEach(fruit => console.log(fruit));

✔️ Two parameters

fruits.forEach((fruit, index) => {
  console.log(index + ": " + fruit);
});

✔️ Three parameters

fruits.forEach((fruit, index, array) => {
  console.log(fruit, index, array);
});

The .map() Method

Iterator KYA hota hai?

Iterator = ek aisa object jo values ko ek-ek karke deta hai, jab tak sab values khatam na ho jaye.

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

const bigNumbers = numbers.map(number => {
  return number * 10;
});
bigNumbers();
//console.log(numbers); // Output: [1, 2, 3, 4, 5]
//console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]

numbers is an array of numbers.
bigNumbers will store the return value of calling .map() on numbers.
numbers.map will iterate through each element in the numbers array and pass the element into the callback function.
return number * 10 is the code we wish to execute upon each element in the array. This will save each value from the numbers array, multiplied by 10, to a new array.

below screenshot just shows the best concept within the function and call backfunction !!!!!!!!!!

question ;->

Add your code under the animals array and before the line console.log(secretMessage.join(''));

Use .map() to create a new array that contains the first character of each string in the animals array. Save the new array to a const variable named secretMessage.

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below

const secretMessage = animals.map(animal => animal[0])
console.log(secretMessage.join(''));

questions

Use .map() to divide all the numbers in bigNumbers by 100. Save the returned values to a variable declared with const called smallNumbers.

const bigNumbers = [100, 200, 300, 400, 500];

// Create the smallNumbers array below
const smallNumbers = bigNumbers.map(num => { //used bracket for returning 
    return num / 100
});
console.log(smallNumbers);

const bigNumbers = [100, 200, 300, 400, 500];

// Create the smallNumbers array below
const smallNumbers = bigNumbers.map(num => num / 100); //shortcut for divide , this dosent require the damnnn  return it automatically returns the value !!!!!!

the final code is here !!!

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

// Create the secretMessage array below

const secretMessage = animals.map(animal => animal[0])
console.log(secretMessage.join(''));

const bigNumbers = [100, 200, 300, 400, 500];

// Create the smallNumbers array below
const  smallNumbers = bigNumbers.map(jim => jim / 100)
console.log(smallNumbers)

The .filter() Method

Another useful iterator method is

.filter()Preview: Docs Creates a new array containing the elements from the original array that pass a test implemented by a provided function.. Like .map()Preview: Docs Loading link description, .filter() returns a new array. However, .filter() returns an array of elements after filtering out certain elements from the original array. The callback function for the .filter() method should return true or false depending on the element that is passed to it. The elements that cause the callback function to return true are added to the new array. Take a look at the following example:

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; const shortWords = words.filter(word => {  return word.length < 6;});

as i readed the above para i can see that this means , the result will be either true or false ........

so basically it does the work of the filtering out something or like filters out the condition as the user wants and dosent affect the original array!!!!!!!

words is an array that contains string elements.
const shortWords = declares a new variable that will store the returned array from invoking .filter().
The callback function is an arrow function that takes a single parameter, word. Each element in the words array will be passed to this function as an argument.
word.length < 6; is the condition in the callback function. Any word from the words array that has fewer than 6 characters will be added to the shortWords array.

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 

const shortWords = words.filter(word => {
  return word.length < 6;
});

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']

practise question

Call the .filter() method on randomNumbers to return values that are less than 250. Save them to a new array called smallNumbers, declared with const.

const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(nice => nice < 250 )
console.log(smallNumbers);

const randomNumbers = [375, 200, 3.14, 7, 13, 852];

// Call .filter() on randomNumbers below
const smallNumbers = randomNumbers.filter(nice => {
    return nice < 250;
})
console.log(smallNumbers);

nd question

Now let’s work with an array of strings. Invoke .filter() on the favoriteWords array to return elements that have more than 7 characters. Save the returned array to a const variable named longFavoriteWords.

just to knoe i had a nice struggle at this making my own ideology ,

most longer version but i did it myself ..........

const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];


// Call .filter() on favoriteWords below
const longFavoriteWords = favoriteWords.filter(nice => {
    const man = nice.length > 7 ; // .length which i learned in for iterator one !!!!!
    return man ; returning it !!! 
})
console.log(longFavoriteWords)

medium version not making it complicated !!! just using the return keyword nicely !!!!

const longFavoriteWords = favoriteWords.filter(nice => {
    return nice.length > 7 ; 
})
console.log(longFavoriteWords)

shorter version

const longFavoriteWords = favoriteWords.filter(nice => nice.length > 7)
console.log(longFavoriteWords)

const jumbledNums = [123, 25, 78, 5, 9]; 

const lessThanTen = jumbledNums.filter(num => {
  return num < 10;
});

console.log(lessThanTen)

The .findIndex() Method

We sometimes want to find the location of an element in an array. That’s where the .findIndex() method comes in! Calling

.findIndex()Preview: Docs Loading link description on an array will return the index of the first element that evaluates to true in the callback function.

const jumbledNums = [123, 25, 78, 5, 9]; const lessThanTen = jumbledNums.findIndex(num => {  return num < 10;});Copy to Clipboard

jumbledNums is an array that contains elements that are numbers.
const lessThanTen = declares a new variable that stores the returned index number from invoking .findIndex().
The callback function is an arrow function that has a single parameter, num. Each element in the jumbledNums array will be passed to this function as an argument.
num < 10; is the condition that elements are checked against. .findIndex() will return the index of the first element that evaluates to true for that condition.

after reading this , actually this means that this method is used to get that particular location of the element present in the array !!!!!!!!!

key concept ;

so basically , this means that i "" jo number pahele less than 10 rahega vohi , call hoga !!!!!!

in this below case , we can see the first number to be less than 10 is 5 and its index number is 3 .

so yeah , its 3 !!

const jumbledNums = [123, 25, 78, 5, 9]; 

const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});

console.log(lessThanTen)

If there isn’t a single element in the array that satisfies the condition in the callback, then .findIndex() will return -1.

const greaterThan1000 = jumbledNums.findIndex(num => {
  return num > 1000;
});

console.log(greaterThan1000); // Output: -1

practise set

Invoke .findIndex() on the animals array to find the index of the element that has the value 'elephant' and save the returned value to a const variable named foundAnimal.

code no.1

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];
const foundAnimal = animals.findIndex(nice => {
 return nice === 'elephant';
})

console.log(foundAnimal)

code no.2

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(nice => {
  const jim = (nice === 'elephant');  // yaha assign ho raha hai
  return jim;
});

console.log(foundAnimal);

Let’s see if we can find the index of the first animal that starts with the letter 's'.

Call .findIndex() on the animals array and return the index of the first element that starts with 's'. Assign the returned value to a const variable named startsWithS.

important concept , findIndex() , anything[] , charAt()

below i used nice[0] this , this means that like it goes from each letter , i am saying each letter , like each word mai first letter check karega

nice[0] = h t l s m

nice[1] = i i i e e o1

so basically , if i put something on the the second letter , like suppose there is hsppo , so here second letter is s in the hippo

if i type " return nice[1] " so basically it will be doing that s , i i e e o

so the ans will be , 0 yeah 0 , like index zero

if nice [0] then it will go for first letter present in the array that starts with the letter "s"

but the condition is this will lookout for just first letter triggered here , like that seal word , not the next one and printing the ans as 3 !!

so thats all the cocept

and yeah same as we can also use that nice.charAt(0) exactly working same as that !!

nice[0] and last if its not present there it will be -1 .......

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(nice => {
  return nice === 'elephant';
});

const startsWithS = animals.findIndex(nice => {
  return nice[0] === 's'; 
});

console.log(foundAnimal);
console.log(startsWithS);

charAt(0)

const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(nice => {
  return nice === 'elephant';
});

const startsWithS = animals.findIndex(nice => {
  return nice.charAt(0) === 's';
});

console.log(foundAnimal);
console.log(startsWithS);

in below code i wrote a hsppo for a purpose , so that if i do nice.charAt(1)

so the ans will be index 0

const animals = ['hsppo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(nice => {
  return nice === 'elephant';
});

const startsWithS = animals.findIndex(nice => {
  return nice.charAt(1) === 's'; // or nice[1] 
});

console.log(foundAnimal);
console.log(startsWithS);

startsWith little example !!!!

here , array.startsWith method use kiya hai

const startsWithS = animals.findIndex(nice => nice.startsWith('s'));

here i am using the lowercase and also startsWith combination !!

const startsWithS = animals.findIndex(nice => nice.toLowerCase().startsWith('s'));

The .reduce() Method

so basically , accumulator and current value are the main functions of this reduce method ,

so acc ad current will be like this for stage one ,

1> (1,2) which return like in addition as per the call backfunc!!

2> (3,4) = 7

3> (7,10) jiks aaddition 17 and thats final !!!!!

so bascially , array.reduce(accumulator , currentvalue) ⇒ important concept here !!!!

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})

console.log(summedNums) // Output: 17

Here are the values of accumulator and currentValue as we iterate through the numbers array:

Iteration

accumulator

currentValue

return value

First

Second

Third

second case

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 100)  // <- Second argument for .reduce()

console.log(summedNums); // Output: 117

so yaha pe 100 as a sceond arguement diya hua hai for .reduce so that ,

Iteration #

accumulator

currentValue

return value

First

100

101

Second

101

103

Third

103

107

Fourth

107

117

second question

Provide .reduce with an argument of a callback function. The callback function should have two parameters, accumulator and currentValue, in that order. Use either a function expression or an arrow function.

const newNumbers = [1, 3, 5, 7];
const newSum = newNumbers.reduce((accumulator , currentValue)=> {
  return accumulator + currentValue;
})
console.log(newSum)

third question

To check the value being used as we iterate through the array, add 2 logging statements to the body of the callback function:

console.log('The value of accumulator: ', accumulator);console.log('The value of currentValue: ', currentValue);Copy to Clipboard

Then, add a return statement that adds accumulator to currentValue.

const newNumbers = [1, 3, 5, 7];

const newSum = newNumbers.reduce((accumulator, currentValue) => {
console.log('The value of accumulator: ', accumulator);
console.log('The value of currentValue: ', currentValue);
return accumulator + currentValue;
})

console.log(newSum) // Output: 17

4.
Log the value of newSum to the console to see the return value of calling .reduce() on newNumbers.
Checkpoint 5 Enabled
5.
While we have this code set up, let’s also check what happens if you add a second argument to .reduce(). The second argument acts as an initial value for the accumulator.
Add a second argument of 10 to .reduce().

const newNumbers = [1, 3, 5, 7];

const newSum = newNumbers.reduce((accumulator, currentValue) => {
console.log('The value of accumulator: ', accumulator);
console.log('The value of currentValue: ', currentValue);
return accumulator + currentValue;
},10)

console.log(newSum) // Output: 17

noticable thing or the best concept here is that !! here is that , to add the thing , 10 , we hvae to use that ,10 to add second arguement !!

Iterator Documentation --> array.some method

iterator methods !!!! --> mdn docs reference

Array - JavaScript | MDNMDN Web Docs

very important , understanding the below code will be best !!! , i have to just try myself a lot at least 1 hrs!!

const car = {
  make: 'Honda',
  model: 'Civic',
  year: 2019,
  printOut: function () {
    console.log(this.year + ' ' + this.make + ' ' + this.model);
  },
};

car.printOut();

// Referenced as a property
var method = car.printOut;

car.year = 2020;

method();
// 'this' is being referenced outside an object context
// can be fixed by explicitly setting the object context with 'bind()'

method = car.printOut.bind(car);

method();

const car = {
  make: 'Honda',
  model: 'Civic',
  year: 2019,
  printOut: function () {
    console.log(this.year + ' ' + this.make + ' ' + this.model);
  },// this printout will print year , space, make , space , model
};

car.printOut(); /// so here calling a function

so BIND METHOD is present here , like that call backfunction !!


method();
// 'this' is being referenced outside an object context
// can be fixed by explicitly setting the object context with 'bind()'

method = car.printOut.bind(car);

method();

In the code editor, there is an array called words. We want to create a new array of interesting words. The first thing we want to do is check if there are words that are fewer than 6 characters long. There is something missing in the words.some() method call. Fix this method so that true is printed to the console.

For more information browse MDN’s documentation on .some() .

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

// Something is missing in the method call below


console.log(words.some((word) => {
  return word.length < 6;
}));

must read all the methods !!!!

Array.prototype.some() - JavaScript | MDNMDN Web Docs

uunderstand the below code very nicely like there is few methods concepts present there !!!!!

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

// Something is missing in the method call below


console.log(words.some((word) => {
  return word.length < 6;
}));

// Use filter to create a new array

const interestingWords = words.filter(nice =>{
  return nice.length > 5;
})  

// Make sure to uncomment the code below and fix the incorrect code before running it

console.log(interestingWords.every((word) => {
  return word.length > 5;
 } ));

array.every method

Array.prototype.every() - JavaScript | MDNMDN Web Docs

Choose the Right Iterator

task to read it more and more times and analyse it more and more !!!

jsut on js compiler put this in front on the js compiler , just source code review please!!

const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir', 'Medellin', 'Yokohama'];

const nums = [1, 50, 75, 200, 350, 525, 1000];

//  Choose a method that will return undefined
cities.method(city => console.log('Have you visited ' + city + '?'));

// Choose a method that will return a new array
const longCities = cities.method(city => city.length > 7);

// Choose a method that will return a single value
const word = cities.method((acc, currVal) => {
  return acc + currVal[0]
}, "C");

console.log(word)

// Choose a method that will return a new array
const smallerNums = nums.method(num => num - 5);

// Choose a method that will return a boolean value
nums.method(num => num < 0);

const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir', 'Medellin', 'Yokohama'];

const nums = [1, 50, 75, 200, 350, 525, 1000];

//  Choose a method that will return undefined
cities.forEach(city => console.log('Have you visited ' + city + '?'));

// Choose a method that will return a new array
const longCities = cities.filter(city => city.length > 7);

// Choose a method that will return a single value
const word = cities.reduce((acc, currVal) => {
  return acc + currVal[0]
}, "C");

console.log(word)

// Choose a method that will return a new array
const smallerNums = nums.map(num => num - 5);

// Choose a method that will return a boolean value
nums.every(num => num < 0);

for map !!!

for every !!!

Array.prototype.every()

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// Expected output: true

array.every() and array.includes() mdn docs !!

Check if one array is a subset of another array

const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

!!!!!!!!!!! Using the third argument of callbackFn !!!!!!!!!!

const numbers = [-2, 4, -8, 16, -32];
const isIncreasing = numbers
  .filter((num) => num > 0)
  .every((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    if (idx === 0) return true;
    return num > arr[idx - 1];
  });
console.log(isIncreasing); // true

const numbers = [-2, 4, -8, 16, -32];

const isIncreasing = numbers
  .filter(function (num) {
    return num > 0;   // sirf positive numbers
  })
  .every(function (num, idx, arr) {
    // pehla element hamesha true
    if (idx === 0) {
      return true;
    }

    // current number > previous number ?
    return num > arr[idx - 1];
  });

console.log(isIncreasing); // true

1> so below code ka matlab hai ki positive numbers lega , num >0

const isIncreasing = numbers
  .filter(function (num) {
    return num > 0;   // sirf positive numbers
  })

2> so here now , num = 4, 16 , idx=0,1 , [4,16] aur idx === 0 toh true !! , so array is of [4,16] that is , index 0 and index 1 , so there will be two indexs only !!!!!!

num= 4, 16 --> two elements

and idx is only 2 here , i.e 0,1

.every(function (num, idx, arr) {
    // pehla element hamesha true
    if (idx === 0) {
      return true;
    }

3> now round 2 , jab

num = 16 , idx = 1 , array=[4,16]

idx is equal to 1 not 0 , because in round 1 , idx was equal to 0 and we got it true !!

now in second round idx = 1 , and aage jaake voh , idx-1 will go in the idx-1 condition so that it will be zero again and the ans will remain true !!

 // current number > previous number ?
    return num > arr[idx - 1];
  });

console.log(isIncreasing); // true

16> array[1-1] i.e 16> array[0] i.e 16>4 i.e because array[index0] is 4 and index 1 is 16

so its true again like 16 is greater than 4 , so at the end its true in the both cases !!!!

above one is best best explanation , took 2 hours to understand , so basically as a source code review i just putted this code infront of my took notebook and understanding the concept it really took very long just to understand this concept !!! , so basically , also a online js compiler to test each line !!

🔹 JavaScript me iterator ka simple example

const arr = ["apple", "banana", "mango"];

Jab tum likhte ho:

for (const item of arr) {
  console.log(item);
}

Yahan kya ho raha hai?

JS khud ek iterator banata hai
iterator bolta hai:
- “lo pehla item”
- “lo doosra item”
- “lo teesra item”
- “bas khatam”

Tumhe kuch bhi manually nahi karna padta

Creating Object Literals

A JavaScript object is a non-primitive data type that can assume the properties and behaviors required for a given programming need

const person = {
  firstName: 'Elizabeth',
  lastName: 'Harmon',
  age: 22,
  eyeColor: 'Hazel',
};

Spaces and line breaks are not important. An object definition can span multiple lines:

const person = {
  firstName: 'Elizabeth',
  lastName: 'Harmon',
  age: 22,
  eyeColor: 'Hazel',
};

objects

The spaceship we have so far looks good (see the code block in the narrative text), but unfortunately, it is not very fast at hyperspace travel due to having an inferior fuel source. Make a new spaceship object named fasterShip with the same color as spaceship but with a Fuel Type equal to 'Turbo Fuel'

important code here

// Write your fasterShip object literal below
let fasterShip = {
  color:'silver',
  'Fuel Type':'Turbo Fuel'
}

Accessing Properties

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth'
spaceship.color; // Returns 'silver'

We’ve used dot notation to access the properties and

methodsPreview: Docs Methods are object properties that contain functions. of built-in objectsPreview: Docs A data type for organizing a set of custom properties and behaviors. and data instances:

'hello'.length; // Returns 5

seeing down image for my referance !!

spaceship.favoriteIcecream; // Returns undefined

Q1> 1.

Let’s use the dot operator to access the value of numCrew from the spaceship object in the code editor. Create a variable crewCount and assign the spaceship object’s numCrew property to it.

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver',
  'Fuel Type': 'Turbo Fuel',
  numCrew: 5,
  flightPath: ['Venus', 'Mars', 'Saturn']
};

// Write your code below
let crewCount = spaceship.numCrew

Again, using the dot operator, create a variable planetArray and assign the spaceship object’s flightPath property to it.

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver',
  'Fuel Type': 'Turbo Fuel',
  numCrew: 5,
  flightPath: ['Venus', 'Mars', 'Saturn']
};

// Write your code below
let crewCount = spaceship.numCrew
let planetArray = spaceship.flightPath

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver',
  'Fuel Type': 'Turbo Fuel',
  numCrew: 5,
  flightPath: ['Venus', 'Mars', 'Saturn']
};

// Write your code below
let crewCount = spaceship.numCrew;
let planetArray = spaceship.flightPath;

Bracket Notation

We’ve used bracket notation when indexing an array:

['A', 'B', 'C'][0]; // Returns 'A'Copy to Clipboard

Let’s use bracket notation to access the value of 'Active Mission' from the spaceship object in the code editor. Create a variable isActive and assign the spaceship object’s 'Active Mission' property to it.

spaceship['object name ']

let spaceship = {
  'Fuel Type': 'Turbo Fuel', //string
  'Active Duty': true, //boolean
  homePlanet: 'Earth',
  numCrew: 5 //number
};
spaceship['Active Duty'];   // Returns true
spaceship['Fuel Type'];   // Returns 'Turbo Fuel'
spaceship['numCrew'];   // Returns 5
spaceship['!!!!!!!!!!!!!!!'];   // Returns undefined

Using bracket notation and the propName variable provided, console.log() the value of the 'Active Mission' property.

🔹 Ye kaam kaise kar raha hai?

Step-by-step:

1️⃣ propName ki value hai

'Active Mission'

2️⃣ Bracket notation me variable pass kiya:

spaceship[propName]

➡️ JavaScript internally isko aise padhta hai:

spaceship['Active Mission']

3️⃣ Value milti hai:

true

4️⃣ console.log() usko print kar deta hai

IMPORTANT CONCEPT OF CALLLING BRACKETS

2> Using bracket notation and the propName variable provided, console.log() the value of the 'Active Mission' property.

console.log(spaceship[propName])

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  'Active Mission' : true,
  homePlanet : 'Earth', 
  numCrew: 5
 };

let propName =  'Active Mission';

// Write your code below
spaceship['Active Mission']
let isActive = spaceship['Active Mission'];
console.log(spaceship[propName])

so basically the catch was that , propName=active mission kiya hai

so that if agar mai consolemai console.log(spaceship[propName]) karu toh js will read it as

spaceship['Active Mission']

Property Assignment

It’s important to know that although we can’t reassign an object declared with const, we can still mutate it, meaning we can add new properties and change the properties that are there.

const spaceship = {type: 'shuttle'};
spaceship = {type: 'alien'}; // TypeError: Assignment to constant variable.
spaceship.type = 'alien'; // Changes the value of the type property
spaceship.speed = 'Mach 5'; // Creates a new key of 'speed' with a value of 'Mach 5'

We can delete a property from an object with the delete operator.

const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};
 
delete spaceship.mission;  // Removes the mission property

q1>

Reassign the color property of the spaceship object to have a value of 'glorious gold'

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};

// Write your code below
//reassign 
spaceship.color = 'glorious gold' // here we assigned a new object named as color and its value 
by just using dot operator i.e spaceship.color

important

q2> Without changing lines 1 - 6, add a numEngines property with a numeric value between 1 and 10 to the spaceship object.

spaceship['numEngines'] = 6; --> we can also make assign new object inside already present object , instead of dot operator !

using the dot operator !! , spaceship.color='glorious gold'

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};

// Write your code below
//reassign 
spaceship.color = 'glorious gold'
spaceship.numEngines = 5;
console.log(spaceship)

i did this using bracket this time !! spaceship['numEngines'] = 6;

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};

// Write your code below
//reassign 
spaceship.color = 'glorious gold'
spaceship['numEngines'] = 6;
console.log(spaceship)

q3> 3.

Use the delete operator to remove the 'Secret Mission' property from the spaceship object.

delete spaceship['Secret Mission']

so BASICALLY BRACKET OPERATOR IS SO EASY TO UNDERSTAND AND DO IT !!,

HERE I JUST USED THAT delete spaceship['Secret Mission']

i was using my brain like this like using spaceship.Secret Mission or like Secret_Mission

but all were wrong !!

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};

// Write your code below
//reassign 
spaceship.color = 'glorious gold'
spaceship.numEngines = 5;
delete spaceship.SecretMission; //using the dot operator !!
delete spaceship['Secret Mission'] // using the bracket operators , so basically in this is pretty to understand !!

as i have to be a source code review i have to keep my code in editor and understand the code by reading it more and more times till i understand it !! if error comes i have to analyse myself first !!

Methods

method defination Method → object ke andar function , Callback → function jo argument ke roop me kisi aur function ko diya jata hai

When the data stored on an object is a function, we call that a methodPreview: Docs Methods are object properties that contain functions..

with function

With the new method syntax introduced in ES6, we can omit the colon and the function keyword.

alienShip

call back functions difference , jus tunderstand it !!

so basically we are learning to create a new function in the object !! (object)

1> Below the retreatMessage variable in the code editor, create an alienShip object. It should contain a method .retreat(), which should console.log() the retreatMessage.

Add another method to the alienShip object literal. This method, .takeOff(), should console.log() the string 'Spim... Borp... Glix... Blastoff!'

Invoke the two methods: first .retreat(), then .takeOff().

Nested Objects

nest objects ka same meaning rehta hai jaise nested arrays tha ,

so nested means ek ke andar ek chije defined !!

just like this happened !!! please !!!

1> Create a variable capFave and assign the favorite food of captain (the element in the “0th” index of 'favorite foods' array) to it. Make sure to use bracket and dot notation to get the value of the food through nested access (don’t just copy the value into the variable!)

Right now, the passengers property has a value of null. Instead, assign as its value an array of objects. These objects should represent the spaceship object’s passengers as individual objects. Make at least one passenger object in the array that has at least one key-value pair.

| CodecademyCodecademy

see this section concept might be easy but we have to just keep focus on source code review !!

just keeping in code editor and trying to build logic by reading the code again and again !!

Pass By Reference (important one for source code review !!)

below code is too important to see and review by just analysing the code !!

part code !

this code is basically based on the function and then inside the object is introduced there !!

so basically there is a arrow function ,

obj ⇒ {} which is function (obj) {}

so instead od thsi we have to do that !! , obj parameter introduce kiya toh uske andar ek object mai store karr rahe hai !!!!

function ke andar function hi hai its like we are creating our own function !!

so basically here the happening word is like spaceship is on going to the obj!!

Write a function greenEnergy() that has an object as a parameter and sets that object’s 'Fuel Type' property to 'avocado oil'.

Write a function remotelyDisable() that has an object as a parameter and sets (or reassigns) that object’s disabled property to true.

3>.

Call your two functions with the spaceship object in the code editor, then console.log() the spaceship object to confirm those properties were changed/added.

Looping Through Objects important one !!

LoopsPreview: Docs A loop is a programming tool that is used to repeat a set of instructions. are programming tools that repeat a block of code until a condition is met. We learned how to iterate through arraysPreview: Docs Arrays are lists of ordered, stored data that can be of any data type. using their numerical indexing, but the key-value pairs in objectsPreview: Docs A data type for organizing a set of custom properties and behaviors. aren’t ordered! JavaScript has given us an alternative solution for iterating through objects with for…in syntax.

analyse the code below and trry to understand the code perfectly !! as this is just a learning phase but as i have to be a best source code reviewer !! i have to do it !

reviewing the below code was hard but i understood it ! by makeing changes to the code and writing !

below understanding is very important !! very very important as this is for in concept !!!

as i can see this //code

so understanding it carefully i get that , its creating the new variable

let crewMember --> creating a new variable inside for loop

then using " in " inside the for loop ,

crewMember in spaceship.crew --> which means a nested object reference , like spaceship and then crew !! yeah there are more inside that like captain liek that !!

so as i can see the above string means that as we have defined a variable crewMember in spaceship.crew so basically it means it will print all the crews !! as we can see in the below screenshot !!

so crew = captain chief officer medic translator etc !!

and what we told about is for there names as i can see below !! , crew roles and there names in particular given format !!

for (let crewMember in spaceship.crew) { console.log(${crewMember}:${spaceship.crew.name}) }

if i used above for loop i was getting something as undefined !! as we can see below !!

so basically , we have to add that crewMember that is spaceship.crew i,e equal to captain , translator and more like all the crew name , so here we have to present all the crew roles and there names , and for names we have to include the spaceship.crew[crewMember].name !!

spaceship.crew[crewMember].name

and finally thats the yep moment for me !!

Using for...in, iterate through the spaceship.crew object in the code editor and console.log() a list of crew roles and names in the following format: '[crew member's role]: [crew member's name]', e.g.,'chief officer: Dan'.

Using for...in, iterate through the spaceship.crew object in the code editor and console.log() a list of crew names and degrees in the following format: '[crew member's name]: [crew member's degree]', e.g.,'Lily: Computer Engineering'.

this was pretty again confusable i tried different methods there !!

{spaceship.crew[crewMember].name

so the above string means that spaceship then crew and then go in spaceship.crew(that is crewMember!!).name so it prints the name of all the crew members , if i want the particular name like lily : than degree , then i have to do spaceship.crew.captain.name

so basically as we can see that , if i add particualr crew member and there name its the output !! or else if i want to do more better , like printing each one crew member ! that i have to use

spaceship.crew[crewMember].name --> this will print all the crew member names and there degrees !!

Array Destructuring (funny and easy and important too )

Array destructuring extracts values from arrays in order, assigning them to variables in a single statement:

The output for this is:

so basically just do that , const nice =[ashu , nicey] then in second line we can do is [ first, second, third] = nice;

its pretty nice a lot nice funny way !! and easy !!

Object Destructuring

so here , its same as the array destruction !!

Variables can also be renamed or assigned default values:

as this is also nice like , we can make a new variable like color = white and editing the model to the carmodel !!

Nested Destructuring

The output of this code is:

codebyte example !!

above example is best and best example !! just read and analyse the code , i can see that , firstHobby which automatically considered as the first as reading !!

below code is experiment !!

so here , we just tried to have that hobbies a new reassign , so that i can have that new variable present there !

const { hobbies } = user; <=>const hobbies = user.hobbies;

hobbies === user.hobbies // true

hobbies.push('gaming');

in above we can push the gaming into the arrya dirctly !!

if i do like this const { hobbies: heythere } = user; then it wil be sucessfully changed !!

const { hobbies: heythere } = user; console.log(heythere); // ['reading', 'cycling', 'coding'] as this is renamed perfectly !!!

The this Keyword

below code is for totally error !

below is corrected code of above !!!!!!!!

Let’s create a new object to practice using this.

In main.js, there is an object called robot. Add a property called model and assign to it a value of '1E78V2'. Add another property, energyLevel, and assign to it a value of 100.

With the robot object, add a method named provideInfo() that returns the following string using interpolation:

Replace <MODEL> and <ENERGYLEVEL> with the calling object’s model and energyLevel properties, respectively. Remember, to get access to the calling object’s properties inside a method, you have to use the this keyword!

i was getting continiously errors here !!!

so basically issue was , i just have to return the statement instead of console.log!!

3> Now, check that .provideInfo() has access to the internal properties of robot. Log the result of calling the .provideInfo() method on robot to the console.

Arrow Functions and this

practise question !! --> for understanding the code !!

1.
Currently, the .checkEnergy() method is not producing the correct output because it is using arrow function syntax (it prints undefined instead of the correct energyLevel value).
Refactor, or change, the method to use a function expression. You can write the function using either longhand or shorthand format.
After refactoring the method, notice that .checkEnergy() has access to the other internal properties of the robot object.

below is the shorthand method like just checkEnergy(){}

Option 2: Function expression (also correct)

Privacy

so here , energyLevel is too 100 and i can see that this.energyLevel is +- 30 i.e this is the compact way to update a variable by adding a value to its existing value !!!

Getters

Getters are methodsPreview: Docs Methods are object properties that contain functions. that get and return the internal properties of an object. But they can do more than just retrieve the value of a property! Let’s take a look at a getter method:

analyse the above code in online js compiler !! try to under stand

analysing the above code to make sure i understand it !!

Inside the getter method, add an if statement to check if this._energyLevel is a number using the typeof operator. If that condition is truthy, return 'My current energy level is <ENERGYLEVEL>'. Replace <ENERGYLEVEL> with the value of this._energyLevel.

Make sure you return the string instead of logging it to the console.

3> If this._energyLevel isn’t a number, it could be that the _energyLevel property was altered. Let’s add a default return statement for when such a scenario arises.

Add an else statement that returns 'System malfunction: cannot retrieve energy level'.

4> Log the result of calling the getter method energyLevel on robot to the console.

Notice that the method will return a formatted response rather than just accessing a property!

dont have to put () bracktes after that energyLevel !!! in getter function !!

Setters

setter methods, which reassign values of existing properties within an object. Let’s see an example of a setter method:

below code is hard to understand please do keep calm and understand

so basically there is a object and then there is something called set function which basically sets a function to a specific or particular value !! , then setting robot.numOfSensors = num which is equal to 100;

factory functions

https://www.codecademy.com/courses/introduction-to-javascript/lessons/advanced-objects/exercises/factory-functions ---> very helpfull and like easy to understand and in big code this will help a lot !!

const monsterFactory =(name , age, energySource,catchPhrase

its just a beautifull code ,just keep understanding !!, variable and inside there is a function and then there is parameters present inside like name age energySource catchPhrase introduced these variables !! , then returned all the parameters in a particular object !!

here in this code i have added , so basically here the issue is like catchphrase is present in the function scare but in that place there is another one present like BOO and if i call like ghost.scare so it will call "BOO"

const monsterFactory = (name, age, energySource, catchPhrase) => { return { name: name, age: age, energySource: energySource, scare() { console.log(catchPhrase); } } };

so the above code is just a private my own function for the purpose of the particular object selection easily later !!

then i added below code !!

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!'); ghost.scare(); // 'BOO!'

so thsi makes the perfect sense like there is a

Instead of making individual robots like we’ve been doing, let’s make a factory function to make robots as we please!

Create a factory function named robotFactory that has two parameters, model and mobile (in that order). Make the function return an object. In the object, add a key of model with the value of the model parameter. Add another property that has a key of mobile with a value of the mobile parameter.

Then add a method named beep that takes no parameters and logs 'Beep Boop' to the console.

here i understood the code properly and then tried to analyse the code !!

Use your factory function by declaring a const variable named tinCan. Assign to tinCan the value of calling robotFactory() with 'P-500' as the first argument and true as the second.

Let’s now check what tinCan can do! Call .beep() on tinCan.

You should see 'Beep Boop' printed to the console, which means the factory function produced a robot object! Play around with tinCan to check the other properties!

Property Value Shorthand

Use the property value shorthand to refactor the factory function in main.js.

instead of using model:model i used model , mobile , then something !!

Destructured Assignment

const { functionality } = robot;

const functionality = robot.functionality;

Since functionality is referencing robot.functionality we can call the methods available to robot.functionality simply through functionality.

Take advantage of this shortcut and call the .beep() method on functionality.

Built-in Object Methods

Object.keys()

In main.js, there is an object, robot. We’d like to grab the property names, otherwise known as keys, and save them in an array assigned to robotKeys. However, there’s something missing in the method call.

Find out what we have to include by reading MDN’s Object.keys() documentation.

Object.entries() will also return an array, but the array will contain more arrays that have both the key and value of the properties in an object.

Declare a const variable named robotEntries and assign to it the entries of robot by calling Object.entries().

To learn more about Object.entries(), read the documentation at MDN.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

this was about object.entries()

Now, what if we want another object that has the properties of robot but with a few additional properties? Object.assign() sounds like a great method to use, but like the previous examples, we should check Object.assign() documentation at MDN.

Declare a const variable named newRobot. newRobot will be a new object that has all the properties of robot and the properties in the following object:

object.create , object.entries , object.keys

| CodecademyCodecademy

introduction to classes

Constructor

Create an empty class named Surgeon.

Inside the Surgeon class, create a constructor method that accepts two parameters, name and department, in that order.

Inside the Surgeon constructor, create name and department properties and set them equal to your input parameters.

Instance

We create a new variable named halley that will store an instance of our Dog class.
We use the new keyword to generate a new instance of the Dog class. The new keyword calls the constructor, executes the code inside of it, and then returns the new instance.
We pass the 'Halley' string to the Dog constructor, which setsPreview: Docs Loading link description the name property to 'Halley'.
Finally, we log the value saved to the name key in our halley object, which logs 'Halley' to the console.

Create an instance of the Surgeon class — set the name to 'Francisco Romero' and department to 'Cardiovascular'.

Save the instance to a variable called surgeonRomero.

Checkpoint 2 Enabled

Create another instance of the Surgeon class — set the name to 'Ruth Jackson' and department to 'Orthopedics'.

Save the instance to a variable called surgeonJackson.

Methods

In the Surgeon constructor, prepend the name and department properties with an underscore (_) to indicate they should not be accessed directly.

Inside the constructor, add a property named _remainingVacationDays and set it equal to 20.

Under the constructor, create a getter called name that returns the value saved to _name.

Under the .name() getter, create a getter called department that returns the value saved to _department.

Under the .department() getter, create a getter called remainingVacationDays that returns the value saved to _remainingVacationDays.

Under the .remainingVacationDays() getter, create a method called takeVacationDays that accepts one argument named daysOff.

Inside the method, subtract daysOff from the number saved to _remainingVacationDays. Set _remainingVacationDays to the result.

Method Calls

At the bottom of main.js, use console.log() and the .name getter to print the value saved to the _name property of the surgeonRomero object.

Call .takeVacationDays() on surgeonRomero, with an input of 3.

After the call to .takeVacationDays(), use console.log() and the .remainingVacationDays getter to print the value saved to the _remainingVacationDays property of the surgeonRomero instance.

understand the above code nicely !!! i took time and then i got to understand this nicely !!!

understand the code nice so nicely , our goal is like a massive source code hacker !!!analyser !!

Inheritance I

Inheritance II

1.
In the next few exercises, you will create two subclasses (Doctor and Nurse) from a parent class named HospitalEmployee. Below, we have listed the properties and methods you will find in the Doctor and Nurse classes.
Doctor
- Properties: _name, _remainingVacationDays, _insurance
- Methods: .takeVacationDays()
Nurse
- Properties: _name, _remainingVacationDays, _certifications
- Methods: .takeVacationDays(), .addCertification()
In main.js, create a parent class named HospitalEmployee based on the shared properties and methods. Add a constructor method with name as a parameter.
Checkpoint 2 Passed
2.
Within the constructor, set the instance’s _name to name and _remainingVacationDays to 20.

3.
Under the constructor, create getters for your _name and _remainingVacationDays properties, called name and remainingVacationDays respectively.
Within each getter, return the respective property’s value.
Checkpoint 4 Passed
4.
Under the getters, add a method called takeVacationDays.
This method should accept one argument, called daysOff.
Inside the method, subtract daysOff from _remainingVacationDays. Save the result to _remainingVacationDays.

| CodecademyCodecademy

Inheritance III

In this exercise, you will begin to create the Nurse class as a child of the HospitalEmployee class. The Nurse class has the following properties and methods:

Nurse

Properties: _name, _remainingVacationDays, _certifications
Methods: .takeVacationDays(), .addCertification()

Under HospitalEmployee, create an empty class named Nurse that extends HospitalEmployee.

we have to add following !!! under means new !!

Inside the Nurse class, create a constructor that accepts two parameters. Use the list of properties from the previous step to name these arguments. Order the parameters in the same way they are listed.

In the Nurse constructor, call the parent’s constructor method and pass the appropriate value(s).

Use the super() method to call the parent’s constructor(). Since the HospitalEmployee class also expects a name, pass this argument into super().

Inside the Nurse constructor, under the call to super(), set _certifications based on the corresponding argument.

Checkpoint 5 Passed
5.
Under the Nurse class, create a new instance of Nurse and save it to a constant variable named nurseOlynyk. Pass in the following values for each property:
- name: 'Olynyk'
- certifications: ['Trauma', 'Pediatrics']

Inheritance IV and extend method

Inheritance V

Parent class = Father 👨‍🦱
Child class = Son 👦

super() parent class ke constructor ko call karta hai.

Real-life analogy 🧠

Soch:

Parent class = Father 👨‍🦱
Child class = Son 👦

Father ke paas kuch common cheezein hoti hain (name, salary, house). Son bhi wahi cheezein inherit karta hai.

👉 Lekin jab son ka constructor chalta hai, usko pehle father ka constructor chalana padta hai. Wahi kaam super() karta hai.

Example (step by step)

Parent class

Child class (Doctor)

getter ka kaam value RETURN karna hota ha

Use the properties and methods below to help you complete the tasks that follow.

Nurse

Properties: _name, _remainingVacationDays, _certifications
Methods: .takeVacationDays(), .addCertification()

Under the Nurse constructor, add a .certifications() getter that returns the value saved to the Nurse instance’s _certifications property.

2.
Add a method called addCertification under the .certifications() getter.
This method should accept one input, newCertification. Inside the method, use the push() method to add the newCertification value to the nurse’s _certifications array.
Checkpoint 3 Passed
3.
At the bottom of main.js, call .addCertification() on nurseOlynyk with an argument of 'Genetics'.
Checkpoint 4 Passed
4.
Using the .certifications() getter, log the value saved to the _certifications property of nurseOlynyk to the console.

Static Methods

Within the HospitalEmployee class, create a static method called generatePassword. When it’s called, this method should return a random integer between 0 and 10000.

The following code will compute a random integer between 0 and 10000:

Introduction to JavaScript Runtime Environments

What is a Runtime Environment?

A runtime environment is where your program will be executed. It determines what global objects your program can access and it can also impact how it runs. This article covers the two JavaScript runtime environments:

the runtime environment of a browser (like Chrome, or Firefox)
the Node runtime environment

file:///C:/Users/OMEN/OneDrive/Desktop/jav/index.html

i saw this vedio and started and made this

i added a folder jav and in that i created a fiel named index.html and in that above code is present and i learned to make a alert () and also having a <img src="whatever image link"

The window.alert() method is built into this environment and any program executed in a browser has access to this method. In fact, the window object provides access to a huge amount of data and functionality relating to the open browser window beyond just .alert().

Try replacing window.alert() with window.prompt() or window.confirm()

in above ss we can see that there is that windwos,alert present as the js file isnt present there !!!

Implementing CommonJS Modules

Consider the following diagram of an imaginary program written in a file my_app.js:

Instead of having the entire program written within my_app.js, its components are broken up into separate modules that each handle a particular task. For example, the database_logic.js module may contain code for storing and retrieving data from a database. Meanwhile, the date_formatting.js module may contain functions designed to easily convert date values from one format to another (a common headache among programmers!).

the above learning or advice is best !!!

Think of a few ideas before expanding to reveal the reasons:

By isolating code into separate files, called modules, you can:

find, fix, and debug code more easily
reuse and recycle defined logic in different parts of your application
keep information private and protected from other modules
prevent pollution of the global namespace and potential naming collisions, by cautiously selecting variables and behavior we load into a program.

require() (do give a read this )

`require()`

The require() function accepts a string as an argument. That string provides the file path to the module you would like to import, generally using the relative path based on the file where require() is being called.

Let’s update water-limits.js so that it uses require() to import the .celsiusToFahrenheit() method from the module.exports object within converters.js:

In this case, ./ is a relative path indicating that converters.js is stored in the same directory as water-limits.js. When you use require(), the entire module.exports object is returned and stored in the variable converters. This means that both the .celsiusToFahrenheit() and .fahrenheitToCelsius() methods can be used in this program!

below is the coding challenge !!!

so from below code i understood and tried to get myself understood everything nicely !!!

after looking into the code and had a revise at the concept i got the backend is nodejs on the codecadmey!!

1️⃣ ES6 Modules (Modern JS, React, Browser)

✔️ React ✔️ Frontend ✔️ New projects

2️⃣ CommonJS (Node.js, Codecademy backend)

Complete the program in app.js:

First, import the shape-area.js module using the require() function (shape-area.js is in the same directory as app.js). Choose one of the two options below for storing the returned module.exports object:
- A) Store the entire module.exports object in the variable areaFunctions.
- B) Use object destructuring to extract the .circleArea() and .squareArea() methods into their own variables, circleArea and squareArea.
Next, call the circleArea() function with the provided variable radius as an input. Assign the returned value to the variable areaOfCircle.
Then, call the squareArea() function with the provided variable sideLength as an input. Assign the returned value to the variable areaOfSquare.

You may print the values of areaOfCircle and areaOfSquare to the console to see your code work!

Hint

To import a module in the same folder, use the following syntax:

Code

123456789101112131415Previous Line 7 had errorOutput:

RunLoading CompleteAnswer Check Complete👏You got it!

Review

In this article, you have learned the following:

the benefits of implementing modular programs
how to use the CommonJS module.exports object to export code from a file, meaning its functions and/or data can be used by other files/modules
how to use the CommonJS require() function to import functions and/or data from another module
how to use object destructuring to only import the desired components of a module.

Congratulations on reaching this milestone! With a little more practice, you will soon be able to handle CommonJS modules with ease. For a more comprehensive resource on CommonJS modules, check out the Node.js modules documentation.

BackNext...data: any[], , , hint

DOM AND MAKING WEBSITE WITH HIDDEN BUTTON ELEMENT !!

To create this website, you could create two files, secret-messages.html and secret-messages.js, and store them together in a folder called secret-messages:

Let’s take a look at the HTML file first:

secret-messages.html renders a <button> element and a hidden (from display: none) paragraph element.
It then loads the script secret-messages.js using the relative file path, "./secret-messages.js". The ./ before the file name is how you indicate that the file being referenced (secret-messages.js) is in the same folder as the file referencing it (secret-messages.html).

Speaking of which, let’s take a look at the JavaScript file:

In secret-messages.js, DOM (Document Object Model) objects are created to reference the button and paragraph elements using the DOM API, via document. These objects are stored in buttonElement and pElement, respectively.
The function toggleHiddenElement is declared. It can accept a DOM element as an input called domElement and will either show or hide that element depending on its current style.display value.
An event listener is added to buttonElement to listen for 'click' events and respond by calling toggleHiddenElement() with pElement as the argument.

so basically there is document.getElementById -=? so this means that there is a "id" present in the html and we are getting that particular " id " document.getElementById('secret-button')

About This Series | Beyond XSSaszx87410.github.io

style="display: none" → page load hote hi invisible

document = poori HTML page

getElementById() = “bhai mujhe yeh id wala element de”

buttonElement → button ka JS object

pElement → paragraph ka JS object

5️⃣ 🔥 sabse confusing line (main explain karta hoon)

Break karte hain 👇

`domElement`

➡️ actual HTML element (jaise <p>)

`.style`

➡️ inline CSS access

`.display`

➡️ CSS ka display property

🧠 Matlab:

= 👉 current display value (none ya block)

Condition ka real-life logic

👉 Agar element abhi hidden hai

THEN 👇

block = dikh ja // important one !!
Paragraph screen pe aa jayega
ELSE 👇
- Already visible hai
- Ab chhupa do

7️⃣ 🔁 TOGGLE ka matlab

Current State

Click ke baad

none ❌

block ✅

none ❌

Isliye function ka naam: 👉 toggleHiddenElement

ddEventListener

Matlab:

“Bhai, jab yeh button click ho, tab yeh kaam karna”

🔹 `'click'`

Event ka naam (mouse click)

🔹 `() => { ... }`

YES bhai 💯 👉 yeh callback function hai

🧠 Matlab:

“Abhi mat chalao jab click hoga tab chalaana”

Reading below to create my own live server for website !!!

Spinning Up A Local Server | CodecademyCodecademy

| CodecademyCodecademy

In this module you will find two functions which have been declared for you, changeText() and changeToFunkyColor() but currently, they aren’t being exported.

Using the named export syntax, export changeText() and changeToFunkyColor() from this module.

Code

Answer Choices

👏You got it!

so below the fucntions js !!! , in which i stated the changetext and change to fdunky color and exported the functions so that i can do work on the another file with this functions !!!

ES6 Modules Challenge #3

Multiple choice

Questions

The <script> element below loads a JavaScript file, which makes use of ES6 import/export syntax. Which of the following changes must be made in order to properly load this module and avoid errors in the browser console?

so basically there is the code below and we have an example like there are two functions present here and both are almost same at all i.e greet and another one greet

so basically if we try to import this in the main.js

we will get encounter by this !!!

The code above will throw an error on line 2 due to the fact that the identifier greet has already been defined on line 1. Thankfully, ES6 includes syntax for renaming imported resources using the as keyword. Here’s an example:

Let’s apply this syntax within main.js to avoid a naming collision:

/* main.js */ import { greet as greetEspanol } from 'greeterEspanol.js';

import { greet as greetFrancais } from 'greeterFrancais.js';

greetEspanol(); // Prints: hola greetFrancais(); // Prints: bonjour

so basically we have to do is like we have to change that greet as greetEspanol and another function greet as greetFrancais from file name whatever

following is the best example i tested on the vs code !!

my main.js

if its a module i have to present it in the type ( its the attribute !!) i.e type attribute and present it like

in body section of the html !!, so that we can understand that !! , main.js

so now i have two files

another file is like this circlearea.js

above is my area-calculator.js

then i created the area.html

The syntax for exporting a default object looks like this:

below is the best link for understanding the concept of website !!

| CodecademyCodecademy

You may also see this shorthand syntax, where the value following export default is the default value to be exported:

Importing default values.

The syntax for importing default exports is written like this:

Let’s return to the prior example. The dom-functions.js module from before could be rewritten to use a default export like so:

| CodecademyCodecademy

What is a Promise? ( please do read the following all by speaking it all with mouth so that it does fit in our mind !! )

Pending: The initial state — the operation has not completed yet.
Fulfilled: The operation has completed successfully, and the promise now has a resolved value. For example, a request’s promise might resolve with a JSONPreview: Docs Loading link description object as its value.
Rejected: The operation has failed, and the promise has a reason for the failure. This reason is usually an Error of some kind.

We refer to a promise as settled if it is no longer pending — it is either fulfilled or rejected. Let’s think of a dishwasher as having the states of a promise:

Pending: The dishwasher is running but has not completed the washing cycle.
Fulfilled: The dishwasher has completed the washing cycle and is full of clean dishes.
Rejected: The dishwasher encountered a problem (it didn’t receive soap!) and returns unclean dishes

If our dishwashing promise is fulfilled, we’ll be able to perform related tasks, such as unloading the clean dishes from the dishwasher. If it’s rejected, we can take alternate steps, such as running it again with soap or washing the dishes by hand.

All promises eventually settle, enabling us to write logic for what to do if the promise is fulfilled or if it is rejected.

summary of the concept

Free courseLearn JavaScript: Asynchronous ProgrammingCreate efficient asynchronous programs using Promises and the async/await syntax.
- Beginner Friendly.Beginner Friendly3 hours3 hours
In progress...Learn Intermediate JavaScriptTake your JavaScript knowledge to the next level by learning how to use advanced functions to create more efficient programs.
- Intermediate.Intermediate11 hours11 hours

States of a JavaScript Promise

A JavaScript Promise object can be in one of three states: pending, resolved, or rejected.

While the value is not yet available, the Promise stays in the pending state. Afterwards, it transitions to one of the two states: resolved or rejected.

A resolved promise stands for a successful completion. Due to errors, the promise may go in the rejected state.

In the example code block, if the Promise is on resolved state, the first parameter holding a callback function of the .then() method will print the resolved value. Otherwise, an alert will be shown.

.then() → success handle karta hai

so baiscally this is the perfect exampole by the chatgpt and this is the sucess handle so that when we are fetching something we will be getting some error handlings !!! , r

do read the following code nicely a lot nicely !!!

Constructing a Promise Object

JavaScript | Promise | CodecademyCodecademy

the following code is the best way to understand !!!

so now the following code is corrected !!

following is the best practise !!!

You’ll be writing your code in the code editor, but we won’t be running it until the final step. To check your code for a step, you can press the “Check Work” button.

We’re going to create a promise representing ordering sunglasses from an online store. First, create the function, myExecutor(). Later on, you’ll pass this function into the Promise constructor.

myExecutor() should:

Have two parameters: resolve and reject
Check if the sunglasses property on the inventory object has a value greater than zero
If it does, myExecutor() should invoke resolve() with the string 'Sunglasses order processed.'
If it does not, myExecutor() should invoke reject() with the string 'That item is sold out.'

When you’re ready, press the “Check Work” button.

Create a function, orderSunglasses(), that takes no parameters. It should return a new promise constructed by passing your myExecutor function into the Promise constructor.

Create a variable orderPromise assigned to the returned value of your orderSunglasses() function.

const orderPromise = orderSunglasses();

At the bottom of app.js, log orderPromise to the console.

| CodecademyCodecademy

Constructing a Promise Object

the above code is the best code for understanding the core concept of the "".then"" and ""catch""

JavaScript .finally()

Syntax

JavaScript .race()

Syntax

JavaScript .reject()

Syntax

Example

A new Promise, myPromise, is rejected with an Error message by default. Lastly, the error message, err.message, is logged to the console through the catch-block.

JavaScript .resolve()

Syntax

The value can be most data types, including:

numbers
strings
objects (even other Promise objects)

Example #1

With non-Promise values:

Example #2

With Promise values:

JavaScript .all()

JavaScript `Promise.all()` Syntax

Parameters:

iterableObject: An iterable (such as an array) of promises or values.

Return value:

Returns a new Promise object that can be accessed as an array of resolved values of fulfilled promises.

Example 2: Using `Promise.all()` with Asynchronous Tasks

the following is the best asynchronous function code writtern here!!! do please read it !!!

function myPromise() { return new Promise((resolve) => { resolve('Successful promise!'); }); } function mySecondPromise() { return new Promise((resolve) => { resolve('Second successful promise!'); }); }

async function someAsyncAwaitFunction() { try { const promise = await myPromise(); const promiseTwo = await mySecondPromise(); console.log(promise); console.log(promiseTwo); } catch (error) { console.log(Error from async function: ${error}); } } someAsyncAwaitFunction();

JavaScript .any()

Syntax

Example 1

If the iterable object is empty or all the Promises within are rejected, an AggregateError is thrown.

Example #2

Below is an array of promises contains 3 Promise objects.

2 of them, promiseA and promiseB, will be rejected.
The other one, promiseC, will fulfill and resolve with a message.

Using Promise.all, the value of the first successfully resolved Promise will be logged to the console.

The Node setTimeout() Function

so the aboce code will be printing the result after 3 sec !!

Example 1: Basic Timeout

The output produced by this after two seconds will be:

Example 2: Cancelable Countdown Timer

below code must be seen and read once to understand the code nicely reading line by line is the best !!

The output produced by this code is:

If cancelled after 2.5 seconds, the output of this code will be:

Example 3: Debouncing User Input

Create a function, usingSTO(), that takes no parameters. Inside the function body, it should print a string to the console. This can be any string you want (as long as it’s not either “This is the first line of code in app.js.” or “This is the last line of code in app.js.”).

Check your work to move on to the next step.

Now, let’s invoke the setTimeout() function. Remember, setTimeout() has two parameters. Invoke setTimeout() with your usingSTO() function as the first argument and a number between 0 and 3000 as the second argument.

3. How do I pass parameters to the timeout function? most important one

There are two ways to pass parameters:

Add parameters after the delay argument: setTimeout(myFunction, 1000, param1, param2)
Use an arrow function or closure: setTimeout(() => myFunction(param1, param2), 1000)

Consuming Promises

Success and Failure Callback Functions

so basically below code represents the setTimeout here so that it works out !!!

Take a look at the provided code in app.js. We use require() to include the function checkInventory() from library.js. It builds on the logic of the orderSunglasses() function you wrote in a previous exercise.

checkInventory() takes in an array representing an order and returns a promise.
If every item in the order is in stock, that promise resolves with the value "Thank you. Your order was successful."
Otherwise, the promise rejects with the value "We're sorry. Your order could not be completed because some items are sold out".

We used setTimeout() to ensure that the checkInventory() promise settles asynchronously.

If you’d like, check out the library.js file to see how it works. Press “Check Work” when you’re ready to move on.

Write a function, handleSuccess(). You’ll use this function later on as your success handler. handleSuccess() should take one parameter, representing a resolved value. Inside the body of handleSuccess(), log the parameter to the console.

Invoke checkInventory() with order. This will return a promise. Attach a .then() function to this. Pass into .then() the two handlers you wrote as callback functions.

Type node app.js in the terminal and hit enter.

Be sure to click “Check Work” after running the command to pass this checkpoint and move on to the next exercise.

Using catch() with Promises

1.
We’re going to refactor the functionality of the previous exercise but this time we’ll use .catch()! First invoke the checkInventory() function with the order. Remember, this function will return a promise.
Checkpoint 2 Passed
2.
Add a .then() to the returned promise and pass in the success handler, handleSuccess.

Add a .catch() to the returned promise. Pass in the failure handler handleFailure().

We set our inventory of sunglasses to 0, so the order shouldn’t go through. Let’s make sure our code has the expected results. Type node app.js in the terminal and hit enter.

Be sure to click “Check Work” after running the command to pass this checkpoint and move on to the next exercise.

Chaining Multiple Promises

Let’s break down what’s happening in the example:

We invoke a function firstPromiseFunction() which returns a promise.
We invoke .then()Preview: Docs Returns a new Promise object. with an anonymous function as the success handler.
Inside the success handler we return a new promise — the result of invoking a second function, secondPromiseFunction() with the first promise’s resolved value.
We invoke a second .then() to handle the logic for the second promise settling.
Inside that .then(), we have a success handler, which will log the second promise’s resolved value to the console

We set up a promise chain, but it’s missing a couple of important lines of code to make it function properly.

We invoked checkInventory() with order and chained a .then() function to it. This .then() has an anonymous function as its success handler, but it’s missing a return statement.

The success handler should return a promise that results from calling processPayment() with the resolved value of checkInventory(order).

return processPayment(resolvedValueArray); })

We have a second .then() function on the chain. This .then() also has an anonymous function as its success handler and is missing a return statement.

following code is from library.js and the best thing about code is it make a proper real website type orders !!

project based code practise

folder name --> modules

library.js and app.js two files present

app.js

library.js

last one order.html

Avoiding Common Mistakes

Refactor, or rewrite, the code to avoid the two common mistakes: nesting and forgetting to return properly.

so below was the previous code !!

Mistake 1: Nesting promises instead of chaining them.

do understand the below code nicely !! like the promise thing is very very important !!

suppose there are two functions so i can literally state that , nice (resolve, reject){

if (blah){

resolve (nice)}

else ,reject("wow")

}

p.then((msg) ⇒ {

console.log("this is our"+ msg)

}

.catch((err)=>{console.log("this is the err" + err}

}

so the above one is the best example present here !!! i can state , promise is the best best thing i learned !!!

Using Promise.all()

Invoke Promise.all() with an array containing checkSunglasses, checkPants, and checkBags.

Chain a .then() to the promise returned from Promise.all(). You should pass in onFulfill to serve as the success handler.

Add a .catch() to the chain. You should pass in onReject to serve as the failure handler.

library.js

aboce code is very important to understand as the set timeout is defined there inside the promise

Getting Started

XMLHttpRequest can be used in two modes: synchronous and asynchronous.

1. Asynchronous Method

There are 4 steps to do this:

1.Create XMLHttpRequest:

The constructor has no arguments.

2.Initialize it:

This method specifies the main parameters of the request:

method: HTTP-method. Usually "GET" or "POST".
URL: The URL to request, a string, can be URL object.
async: If explicitly set to false, then the request is synchronous.
user, password: login and password for basic HTTP auth (if required).

3.Send it out.

This method opens up the connection and sends the request to server. The optional body parameter contains the request body.

Some request methods like GET do not have a body. And some of them like POST use body to send the data to the server.

4.Listen to xhr events for response.

These three events are the most widely used:

load: When the request is complete and the response is fully downloaded.
error: When the request couldn’t be made successfully, For example, network down or invalid URL.
progress: Triggers periodically while the response is being downloaded, reports how much has been downloaded.

so basically its , on error , on load , on progress

onload, onerror , onprogress

xhr.onload = function () { alert(Progress: ${xhr.status} ${xhr.response}); };

xhr.onerror = function () { alert(Network Error Occurred); };

xhr.onprogress = function (event) { // Triggers periodically // event.loaded - how many bytes downloaded // event.lengthComputable = true if the server sent Content-Length header // event.total - total number of bytes (if lengthComputable) alert(Received ${event.loaded} of ${event.total}); };

2. Synchronous Method

Response Type

xhr.responseType property can be used to set the response format:

"" (default): get as string,
"text": get as string,
"arraybuffer": get as ArrayBuffer
"blob": get as Blob,
"document": get as XML document (can use XPath and other XML methods) or HTML document (based on the MIME type of the received data),
"json": get as JSON (parsed automatically).https://www.youtube.com/watch?v=PZIvYmj_Rls&t=51s

JavaScript | Requests | CodecademyCodecademy

Introduction to ASYNC AND AWAIT MOST IMPORTANT !!

In this lesson, you’ll be given a code editor to write your code and a bash terminal to execute your code. To execute your program, you’ll type node app.js in the terminal and hit enter (or return). You’ll press the “Check Work” button to submit your code for evaluation.

Check out the code we provided. It shows three ways of accomplishing the same task: reading and printing from two files in a specified order:

The first version uses callback functions.
The second version uses native promise syntax.
The third version uses async...await.

Don’t worry about understanding the async...await syntax — that’s what you’ll learn in this lesson! If you haven’t already, type node app.js into the terminal and press enter. Then, press “Check Work”.

utf8 meaning

'utf-8' = bytes → readable text (string)

The async Keyword

we can also create async function expressions:

Write an async function, withAsync(), that reproduces the functionality of withConstructor(). Though your function will return a promise, it should not construct the promise using the new keyword. Instead, it should rely on the fact that an async function automatically returns a promise.

When you’re ready, check your work to move on to the next step.

The await Operator

Within our async function, asyncFuncExample(), we use await to halt our execution until myPromise() is resolved and assign its resolved value to the variable resolvedValue. Then we log resolvedValue to the console. We’re able to handle the logic for a promise in a way that reads like synchronous code.

NEW CONCEPT !!! FOR CLIENT SIDE HACKING !!

SO BASICALLY THERE ARE TWO FILES PRESENT IN THE BELOW SCREENSHOT , AND ONE OF THEM IS LIBRARY.JS

LIBRARY .JS

SO ABOVE CODE IS INCOMPLETE SO BASICALLY ITS A PROMISE CONCEPT AS THERE IS RESOLVE PARAM PRESENT SO WE HAVE TO USE PROMISE ALSO AT THE LAST ITS NOT ASYNC , SO

THIS WAS THE FUNCTION AND IT WILL PRINT EACH AFTER ONE SECOND !!! , JUST LIKE A BELOW SCREENSHOT !!!

BUT BUT THIS I HAD TO UNDERSTOOD BY RUNNING THE CODE !! ,ELSE you can see in the below screenshot that its totally confusing abot the code of the file library.js

so the main aim was to understand what is app.js saying i was condused unitl i tried this code in the online js compiler ,

this much was written in the app .js and i was confused as the promisses are too different as i can use any name at the parameter of the error handling like catch and then methods !!

as we can see above i called the function above nicely

otherwise the aboce is the best way to learn !!

so below is the key how i would add the async

down code is another example of async

JUST LOOK AT THE CODE AND JUST JUST JUST DO ONLINE JS COMPILER AND DO TRY EVERYTHING PLEASE !!

| CodecademyCodecademy

just read the whole code of the library.js and run it !!! with calling a function

Writing async Functions

Now we’ll write two async

functionsPreview: Docs Loading link description which invoke myPromise():

Uh oh, getBeans() is logging '3. Great! I'm making [object Promise] beans for dinner tonight!' to the console. Take a moment to understand why this is happening, and then refactor getBeans() so it works as intended. Check your work when you’re ready to move on to the next step.

Handling Dependent Promises

In the following checkpoints, you’ll create an async function that handles the three dependent promises we just walked through. It will simulate shopping for, soaking, and then cooking the beans. To get started, declare an async function, makeBeans(). You can leave the function body blank for now.

Check your work to move on to the next step.

Inside your function, declare a variable, type, assigned to the resolved value of shopForBeans(). This must be accomplished in one statement.

here we have to declare a variable only!!!

Next, still in makeBeans, declare a variable, isSoft, assigned to the resolved value of soakTheBeans(). Don’t forget: the soakTheBeans() function expects an argument. Make sure to pass the expected value into soakTheBeans().

Next inside your function, declare a variable, dinner, assigned to the resolved of cookTheBeans(). Don’t forget: the cookTheBeans() function also expects an argument. Make sure to pass the expected value into cookTheBeans().

Handling Errors

Declare an async function, hostDinnerParty(). Inside your function, create a try...catch statement. The catch statement should specify an identifier, error. You can leave both the try and catch blocks empty.

Inside your try block, log a string in the following format: '[resolved value of cookBeanSouffle() promise] is served!' ie. 'Bean Souffle is served!'. Make sure to await the cookBeanSouffle() promise. For more guidance, check out the hint.

Now let’s fill in the catch block! First log the error to the console, and then log the string: 'Ordering a pizza!' to the console.

Handling Independent Promises

Declare an async function, serveDinner(). Within the function body, create four variables:

vegetablePromise, which should be assigned the return value of steamBroccoli()
starchPromise, which should be assigned the return value of cookRice()
proteinPromise, which should be assigned the return value of bakeChicken()
sidePromise, which should be assigned the return value of cookBeans()

These variables should be assigned the promise objects themselves, not their resolved values.

Next, console.log() a string in the following format:

Dinner is served. We’re having [resolved value of the vegetablePromise], [resolved value of the starchPromise], [resolved value of the proteinPromise], and [resolved value of the sidePromise].

i.e., “Dinner is served. We’re having broccoli, rice, chicken, and beans.”

You’ll need to await each promise, but there are a few different ways you can accomplish the desired functionality. Check out the hint if you want some guidance.

4.
Awesome! Let’s see your function in action. Beneath your function declaration, invoke serveDinner().
Checkpoint 5 Passed
5.
In the terminal type node app.js and press enter to run the code.
Be sure to click “Check Work” after running the command to pass this checkpoint and move on to the next exercise.

https://www.codecademy.com/courses/learn-intermediate-javascript/lessons/async-await/exercises/concurrency

Next, console.log() a string in the following format:

Dinner is served. We’re having [first item in foodArray], [second item in foodArray], [third item in foodArray], and [fourth item in foodArray].

i.e., ‘Dinner is served. We’re having broccoli, rice, chicken, and beans.’

There are a few different ways you can accomplish the desired functionality. Check out the hint if you want some guidance.

Ok great! Now let’s see your function in action. Beneath your function declaration, invoke serveDinnerAgain().

Intro to GET Requests using Fetch (client side deep understanding !!)

| CodecademyCodecademy

The fetch() function:

Creates a request object that contains relevant information that an API needs.
Sends that request object to the API endpoint provided.
Returns a promise that ultimately resolves to a response object, which contains the status of the promise with information the API sent back.

First, call the fetch() function and pass it a URL as a string for the first argument, determining the endpoint of the request.

making a GET REQUEST (CLIENT SIDE )

At the top of main.js, create a const variable called url. Assign url to the following URL as a string:

The ?sl= portion of the string will be the start of your query string, which will be used to pass parameters to the Datamuse API. The query string will be used by the engine to narrow the search to words that sound like your word.

Within main.js, we have provided an empty getSuggestions() function. In the function body, create a const variable called wordQuery and assign it inputField.value.

We’ll need wordQuery to store the value of what is being typed into the input field.

Create another const variable called endpoint and assign it the value of a string that is url, and wordQuery concatenated in that order.

We will be working inside getSuggestions() function for the remainder of this exercise.

Inside the getSuggestions() function, call the fetch() function and pass in endpoint as an argument. For this API to work within the Codecademy browser, add { cache: 'no-cache' } as the second argument.

fetch(endpoint, { cache: 'no-cache' });

Inside the success callback function, create a conditional statement that checks if the ok property of the response object evaluates to a truthy value.

If so, return response.json().

By returning response.json(), the next .then() method chained to it will receive a Promise with JSON data.

🔍 Ab Ye Line Dekh:

Break karte hain:

🔹 document

Ye pura webpage hai.

🔹 querySelector()

Ye ek function hai jo HTML me se koi element dhoondta hai.

🔹 '#input'

Ye CSS selector hai.

# ka matlab → id

Matlab:

HTML me jiska id="input" hai, mujhe woh element de do.
so basically # means id its css !!

we can also use document.getElementById('input')

document.getElementById() title.inner.HTML title.innerText title.textContent

documentr.getElementById('title').getAttribute('id')

title.style.backgroundcolor = "green"

title.style.padding='15px'

Handling a GET Request

After the existing .then() method, chain another .then() method.

As the first argument of our second .then() method, pass an anonymous arrow callback function that takes jsonResponse as its single parameter.

Inside the callback function we just created, call the renderRawResponse() function and pass in jsonResponse as its argument. Run the code.

In the input field, type in a word and click the submit button.

If all went well, we should see an array of words that the Datamuse API responded with!

Note that you can find the renderRawResponse() function declaration in public/helperFunctions.js. In this context, the function is available in main.js without any import statement.

Let’s format our response from the Datamuse API to look presentable on the webpage. To do this, we will use the renderResponse() function that’s been defined in public/helperFunctions.js.

Comment out renderRawResponse(jsonResponse). Then, call renderResponse(jsonResponse) instead.

Run your code.

Try the webpage again with another word!

Intro to POST Requests using Fetch

We will make our POST request inside the shortenUrl() function. Inside the code block of shortenUrl(), create a const variable named urlToShorten and assign it inputField.value. urlToShorten will keep the value of what is being typed into the input field.

Note that we will be working inside shortenUrl() for the remainder of this exercise.

Underneath the urlToShorten declaration, create another const variable named data and assign it to the stringified version of {destination: urlToShorten}. We can use the JSON.stringify() method to do this.

The data variable will be used to send the information, which needs to be in string format, to the request body.

Below our data variable declaration, call the fetch() function. Pass url as its first argument and an empty object as its second argument.

Now it’s time to add some properties to the empty object that you just created. Add a property with the key method and the value 'POST'.

In the same object, add another property. The key for this property is headers, and the value will be the following object:

below code is so nice to understand !!!

Handling a POST Request

As the second argument of the .then() method, add another arrow callback function that takes networkError as a single parameter.

Log the networkError.message inside of the callback function.

By adding this second callback, you’re safeguarding yourself in the rare event that the network returns an error!

Chain another .then() method to the end of the previous .then() method.

Pass in an anonymous arrow function as an argument for our second .then(). This callback function will take jsonResponse as its single parameter.

Inside the callback function, call renderResponse() and pass in jsonResponse.

The renderResponse() helper function can be viewed at public/helperFunctions.js.

Run the code.

Put in any URL in the text field, and then click the shorten button on the webpage. Make sure you include the entire link, including 'http://' or 'https://'.

Pass in an anonymous arrow function as an argument for our second .then(). This callback function will take jsonResponse as its single parameter.

Inside the callback function, call renderResponse() and pass in jsonResponse.

The renderResponse() helper function can be viewed at public/helperFunctions.js.

Run the code.

Put in any URL in the text field, and then click the shorten button on the webpage. Make sure you include the entire link, including 'http://' or 'https://'.

json stringify()

this is how we can stringify !!

intro to async GET Rquests !!

Intro to POST Requests using Fetch

The async keyword is used to declare an async function that returns a promisePreview: Docs Loading link description.
The await keyword can only be used within an async function. await suspends the program while waiting for a promise to resolve.
In a try...catch statement, code in the try block will be run and in the event of an exception, the code in the catch statement will run.

Study the async getData() function to the right to see how the request can be written using async and await.

Under the comment “Asynchronous function”, create a const variable called getSuggestions and set it to a new arrow function using the async keyword.

You’ll be coding inside the getSuggestions() function for the remainder of this exercise.

Making an async GET Request

Under the comment “Asynchronous function”, create a const variable called getSuggestions and set it to a new arrow function using the async keyword.

You’ll be coding inside the getSuggestions() function for the remainder of this exercise.

Inside the getSuggestions() function, create a const variable named wordQuery and assign it inputField.value.

Create another const variable called endpoint and assign it the value of a string that is url, queryParams, and wordQuery concatenated in that order.

Add a try statement with an empty code block. Outside the code block for try, add a catch(error) statement with a code block that logs error to the console.

try { // code goes here } catch (error) { console.log(error); }

Inside the try code block, create a const variable named response and assign it to await the result of calling fetch() with endpoint as the first argument. For this API to work within the Codecademy browser, add {cache: 'no-cache'} as the second argument.

Below the response variable declaration from the previous step, create a conditional statement that checks if the ok property of the response evaluates to a truthy value.

Inside the code block of the conditional statement, await response.json() and save it to a new const variable called jsonResponse.

Still inside the conditional statement, call the function renderResponse() and pass in jsonResponse. Then, run the code.

In the input field, type in a word and click the submit button on the web page.

Great, now we have an organized list of words from the GET request!

The declaration of the renderResponse() function can be found at public/helperFunctions.js.

renderResponse(jsonResponse);

Intro to async POST Requests

Review

1 min

In this lesson, we learned how to make GET and POST

requestsPreview: Docs Loading link description using the Fetch API and async/await keywords. Let’s recap on the concepts covered in the previous exercises:

GET and POST requests can be created in a variety of ways.
We can use fetch() and async/await to asynchronously request data from APIs.
Promises are a type of JavaScript object that represents data that will eventually be returned from a request.
The fetch() function can be used to create requests and will return promises.
We can chain .then()Preview: Docs Loading link description methodsPreview: Docs Loading link description to handle promises returned by the fetch() function.
The async keyword is used to create asynchronous functionsPreview: Docs Loading link description that will return promises.
The await keyword can only be used with functions declared with the async keyword.
The await keyword suspends the program while waiting for a promise to resolve.

Congratulations on learning all about asynchronous requests using fetch(), async, and await! These concepts are fundamental to helping you develop more robust web apps!

witten some nice notes on the async await POST !!

| CodecademyCodecademy

bug bounty links present inside this !

Error Stack Traces

sovle the below code on my own next time i revise !

JavaScript Error Types

4 min

Now that you can identify the type of error from an error stack trace, you might be wondering what the different types of

errorsPreview: Docs Loading link description mean.

Here are three common error types:

SyntaxError: This error will be thrown when a typo creates invalid code — code that cannot be interpreted by the compiler. When this error is thrown, scan your code to make sure you properly opened and closed all brackets, braces, and parentheses and that you didn’t include any invalid semicolons.
ReferenceError: This error will be thrown if you try to use a variable that does not exist. When this error is thrown, make sure all variablesPreview: Docs Variables are used to store a piece of data at a named location in memory. are properly declared.
TypeError: This error will be thrown if you attempt to perform an operation on a value of the wrong type. For example, if we tried to use a string method on a number, it would throw a TypeError.

find the bug !!! and fix it !!!

| CodecademyCodecademy

Locating Silent Bugs

In the code editor, we’ve given you a function that is supposed to take a string containing a single word as an argument and return the capitalized version of that word. If the string contains multiple words (contains a space character, ' '), it should return null.
Currently, this code is not working as expected. Take a look at our tests on lines 16-19. We expect the first function call to return 'Hey' and the second function call to return null. Run the code to see that it is not working as expected but also not throwing any errors.
Checkpoint 2 Passed
2.
Let’s use console.log() to debug this code! Start by adding a console.log() statement to line 2 and printing out the word being passed into the function. This will help us ensure our function is being called properly and the word variable is set as we expect at the start of the function.
Checkpoint 3 Passed
3.
Looking at the console output, both 'hey' and 'hey ho' are being printed as we expected. No bugs yet.
Comment out the console.log() statement from the beginning of the function. Then add the following console.log() statement inside the if statement to see if it is working properly:
The behavior we want is for 'hey ho' to enter the if block and return null and for 'hey' to skip the if block and get capitalized.
Checkpoint 4 Passed
4.
Look at the console output. 'hey' is being printed from inside the if statement block and 'hey ho' is not. This is the opposite behavior we expected. We found a bug!
Looking at our if statement, we accidentally included a ! that is negating our condition. It is saying that if a word does not have multiple words, go into the if block, and if it does, move past it.
Delete the ! character from the beginning of the if statement condition to fix the bug, then re-run our code.
Our function now appears to be working as expected, so there is no need to continue stepping through the rest of the function.

Debugging with console.log()

below code is incorrect try to fix the bugs !!

| CodecademyCodecademy

this was so nice !!!

Finding Documentation

https://www.codecademy.com/courses/learn-intermediate-javascript/lessons/debugging-code/exercises/documentation-ii

In the code editor, we’ve included a function that is supposed to take a string and return a version of that string repeated twice. For example, you can see in the test case at the bottom of the file, we expect doubleString('echo') to return 'echoecho'.

However currently, when we run our file, nothing happens. Clearly we are using the .repeat() method incorrectly. Let’s find the MDN documentation for String.repeat().

Find the link to the documentation for String.repeat() and paste it to the end of the comment on line 1.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat#Parameters

Introduction to Error Handling

Runtime Errors

Constructing an Error

The throw Keyword

Use the throw keyword to throw an error with the message 'Username or password does not match'

After you clear this checkpoint, try adding some code after your throw statement. Also, try to throw a new error and other data types to see what happens!

The try...catch Statement

Create a try...catch statement that doesn’t have any code in the try block or the catch block. Make sure to use e as the error object.

In the try block, throw an error using the Error() function and pass into Error() a string containing a message of your choice!

Inside the catch block, log the error to the console

Handling with try...catch

1.
In main.js, there is a function called capAllElements() that takes an array of elements and capitalizes each element.
Currently, it’s written in such a way that the function will execute regardless of what argument is passed in, but what if the argument isn’t an array? As written, an error would be thrown, and our program would stop running.
Run the code as it is to see what error shows up in the console.
Let’s handle that error:
- Put the existing arr.forEach(...) code in a try block.
- Add a catch statement after the try block and inside the catch block, log the error to the console.

Error Handling Review

<1 min

Great job with handling errors!

In this lesson, we went over:

How mistakes in programming lead to errorsPreview: Docs Loading link description.
Why errors are useful for developers.
Errors will prevent a program from executing unless it is handled.
How to create an error using the Error() function.
How to throw an error object using the throw keyword.
How to use the try...catch statement to handle thrown errors.
Evaluating code in a try block to anticipate errors.
Catching the error in a catch block to allow our program to continue running.
Why the try...catch statement would be useful in a program.

Currying in JavaScript

Concurrency Model and Event Loop in JavaScript

The Event Loop in Action

Now that we know all of the pieces of the event loop, let’s walk through some code to understand the event loop in action.

console.log("This is the first line of code in app.js."); is added to the stack, executes, then pops off of the stack.
setTimeout() is added to the stack.
setTimeout()’s callback is passed to be executed by a web API. The timer will run for 3 seconds. After 3 seconds elapse, the callback function, usingsetTimeout() is pushed to the Event Queue.
The Event Loop, meanwhile, will check periodically if the stack is cleared to handle any messages in the Event Queue.
console.log("This is the last line of code in app.js."); is added to the stack, executes, then pops off of the stack.
The stack is now empty, so the event loop pushes usingsetTimeout onto the stack.
console.log("I'm going to be queued in the Event Loop."); is added to the stack, executes, gets popped
usingsetTimeout pops off of the stack.

The Heap

Memory in JavaScript

JavaScript has two data structures for memory:

The heap
The stack

The stack is used for static storage, where the size of an object is known when the code is compiled. Since the size is known, a fixed amount of data is reserved for the object, and the stack remains ordered. The stack has a finite amount of space provided by the operating system, which you typically only exceed when you have problems in your code, like infinite recursion or memory leaks.

Primitive values, references to non-primitive values, and function call frames are stored in the stack. You can think of references as a parking space number in a massive (but disordered) parking garage telling JavaScript where to find objects and functions.

The Heap

The heap provides dynamic memory allocation at runtime for data types that don’t have a fixed size, like objects and functions. These are reference values and we keep track of where to find them in the unstructured heap using a fixed-size reference in the stack. If you modify an object, you are modifying a reference to the object and not the object itself.

In the example, cat is stored in the heap, a reference to cat is stored in the stack, and the property name is stored in the stack. The pets array is stored in the heap, while a reference to it is stored in the stack.

In the example, object and object2 are pointing to the same object in memory in the heap, but with different variables that are saved in the stack.

design patterns !!

What an Anti-Pattern Looks Like

In the example below of what not to do, Customer objects are all-knowing and have too much responsibility–this code follows the “God Object” anti-pattern.

Let’s look at what is going on in the Customer class that is not working well. This class creates a Customer object with properties about a customer and their transactions.

Learn Intermediate JavaScript: Next Steps

You’ve completed the Learn Intermediate JavaScript course! What’s next?

Congratulations, you’ve successfully completed the Learn Intermediate JavaScript course! You got an introduction to intermediate programming topics in JavaScript. More specifically, you learned to:

create classes and use inheritance to minimize redundancy
use JavaScript modules to define reusable logic
identify the ways currying and hoisting contribute to how JavaScript works under the hood
write asynchronous JavaScript with promises and async/await
create calls to various APIs using requests
identify and handle errors
understand the concurrency module and event loop in JavaScript

Your learning journey into JavaScript isn’t over yet! There are plenty of other topics that you can dive into to continue learning. Here are our recommendations for the next steps:

PreviousWELCOME TO REAL GAME (CLIENT SIDE HACKING)Nextclient side hacking writeupps (very imp)

Last updated 1 month ago

Was this helpful?

Good evening

hashtagComparison Operators

hashtagLogical Operators

hashtagTernary Operator

hashtagElse If Statements

hashtagelse if statements

hashtagthe switech keyword

hashtagFUNCTIONS

hashtagWhat are Functions?

hashtagCalling a Function

hashtagdefault paramaters !!

hashtagRETURN

hashtagfunction expressing !!!

hashtag🔥 Question 1:

hashtagBlocks and Scope(codecadmey)

hashtagGlobal Scope

hashtagBlock Scope

hashtagScope Pollution

hashtagbug finding

hashtagReview: Scope

hashtagArrays

hashtagTHE BEST CONCEPT (JUST KEEP IN MIND LAZY ONE)

hashtagAccessing the Elements of an Array (this is all the theorey and practical did by the website , so i also have done some experiments inside , and if we move down the practicall continous !!

hashtagANALYZE THE CODE BELOW PERFECTLY !!! SOURCE CODE ANALYSIS (NEW CONCEPT )

hashtagCATCH HERE !!! NICE CONCEPT EXPERIMENT !! OF PREVIOUS ONE !!!

hashtagNESTED INDEX ARRAYS ( IMPORTANT AND EASY CONCEPT BUT LOOKS HARD)

hashtagbelow is the whole practical things we will be learning , above were the theorey and live concepts written and i readed that practised them a lot seiously and its helping me here wihle writing the practical code here !!!!!!!!

hashtagacessing elements

hashtagUpdate Elements && Arrays with let and const

hashtagThe .length property

hashtagThe .push() Method

hashtagThe .pop() Method javascript.pop method

hashtagMore Array Methods

hashtagJavaScript .slice()

hashtagDifference:

hashtagMutating Methods (Original array ko change karte hain):

hashtagNon-Mutating Methods (Original array ko nahi change karte):

hashtagEasy Yaad Rakhne Ka Tarika: (easy rembemring )

hashtagArrays and Functions (nice concept one )

hashtagNESTED ARRAYS S(PRACTICAL CODING WITH QUESTIONS )

hashtagJavaScript .entries()

hashtagBELOW IS THE JAVASCRIPT.MAP CONCEPT

hashtagarray.forEach() quite intresting (we can define the function here !!!;)

hashtagjavascript.every

hashtagimportant concetp functions

hashtagjavascript.filter method

hashtagjavascript.fill() method

hashtagjavascript.find() method

hashtagJavaScript .findIndex()

hashtagJavaScript .findLast()

hashtagJavaScript .findLastIndex()

hashtagJavaScript .flatMap()

hashtagloops (understand the concept by reading and then writing on your own );)

hashtagnested loops [hard]

hashtag➤ Logic:

hashtagalternative

hashtagThe While Loop

hashtagdo while loop

hashtagThe break Keyword

hashtagFunctions as Data

hashtag🟦 Step 1 — Long Function Definition

hashtagExplanation

hashtag🟦 Step 2 — Create a Shorter Variable with const

hashtagExplanation

hashtag🟦 Step 3 — Invoke the Short-Named Function

hashtagExplanation

hashtag🟦 Step 4 — Print the Original Name Using .name

hashtagExplanation

hashtagAnonymous Functions

hashtagfunctions as Parameters

hashtagPART 1 — func aur val BAS ARGUMENT HAIN

hashtagIntroduction to Iterators

hashtagMETHODS(important concept present here!!)

hashtagSyntax

hashtagThe .forEach() Method Iterators

hashtaganother high order function

hashtagThe .forEach() Method

hashtag🔥 Example With forEach() this concept is much needed to understand !!!

hashtag✔️ One parameter

hashtag✔️ Two parameters

Comparison Operators

Logical Operators

Ternary Operator

Else If Statements

else if statements

the switech keyword

FUNCTIONS

What are Functions?

Calling a Function

default paramaters !!

RETURN

function expressing !!!

🔥 Question 1:

Blocks and Scope(codecadmey)

Global Scope

Block Scope

Scope Pollution

bug finding

Review: Scope

Arrays

THE BEST CONCEPT (JUST KEEP IN MIND LAZY ONE)

Accessing the Elements of an Array (this is all the theorey and practical did by the website , so i also have done some experiments inside , and if we move down the practicall continous !!

ANALYZE THE CODE BELOW PERFECTLY !!! SOURCE CODE ANALYSIS (NEW CONCEPT )

CATCH HERE !!! NICE CONCEPT EXPERIMENT !! OF PREVIOUS ONE !!!

NESTED INDEX ARRAYS ( IMPORTANT AND EASY CONCEPT BUT LOOKS HARD)

below is the whole practical things we will be learning , above were the theorey and live concepts written and i readed that practised them a lot seiously and its helping me here wihle writing the practical code here !!!!!!!!

acessing `elements`

Update Elements && Arrays with let and const

The .length property

The .push() Method

The .pop() Method javascript.pop method

More Array Methods

JavaScript .slice()

Difference:

Mutating Methods (Original array ko change karte hain):

Non-Mutating Methods (Original array ko nahi change karte):

Easy Yaad Rakhne Ka Tarika: (easy rembemring )

Arrays and Functions (nice concept one )

NESTED ARRAYS S(PRACTICAL CODING WITH QUESTIONS )

JavaScript .entries()

BELOW IS THE JAVASCRIPT.MAP CONCEPT

array.forEach() quite intresting (we can define the function here !!!;)

javascript.every

important concetp functions

javascript.filter method

javascript.fill() method

javascript.find() method

JavaScript .findIndex()

JavaScript .findLast()

JavaScript .findLastIndex()

JavaScript .flatMap()

loops (understand the concept by reading and then writing on your own );)

nested loops [hard]

➤ Logic:

alternative

The While Loop

do while loop

The break Keyword

Functions as Data

🟦 Step 1 — Long Function Definition

Explanation

🟦 Step 2 — Create a Shorter Variable with `const`

Explanation

🟦 Step 3 — Invoke the Short-Named Function

Explanation

🟦 Step 4 — Print the Original Name Using `.name`

Explanation

Anonymous Functions

functions as Parameters

PART 1 — func aur val BAS ARGUMENT HAIN

Introduction to Iterators

METHODS(important concept present here!!)

Syntax

The .forEach() Method Iterators

another high order function

The .forEach() Method

🔥 Example With forEach() this concept is much needed to understand !!!

✔️ One parameter

✔️ Two parameters

✔️ Three parameters