import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

function Validation() {
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        password: "",
        habits: {
            cricket: false,
            coding: false,
            javascript: false,
        },
    });

    const [errors, setErrors] = useState({
        name: "",
        email: "",
        password: "",
        habits: "",
    });

    const handleInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        if (type === "checkbox") {
            setFormData({
                ...formData,
                habits: {
                    ...formData.habits,
                    [name]: checked,
                },
            });
        } else {
            setFormData({
                ...formData,
                [name]: value,
            });
        }
    };

    const validateForm = () => {
        let isValid = true;
        const newErrors = {
            name: "",
            email: "",
            password: "",
            habits: "",
        };

        if (formData.name.trim() === "") {
            newErrors.name = "Name is required";
            isValid = false;
        } else if (!/^[a-zA-Z]+$/.test(formData.name)) {
            newErrors.name = "Name should only contain alphabetic characters";
            isValid = false;
        }

        if (formData.email.trim() === "") {
            newErrors.email = "Email is required";
            isValid = false;
        } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.email)
        ) {
            newErrors.email = "Invalid email address";
            isValid = false;
        }

        if (formData.password.trim() === "") {
            newErrors.password = "Password is required";
            isValid = false;
        } else if (formData.password.length < 8) {
            newErrors.password = "Password should be at least 8 characters long";
            isValid = false;
        }

        if (!formData.habits.cricket && !formData.habits.coding && !formData.habits.javascript) {
            newErrors.habits = "At least one habit must be selected";
            isValid = false;
        }

        setErrors(newErrors);
        return isValid;
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        if (validateForm()) {
            console.log("Form submitted successfully:", formData);
        }
    };

    return (
        <div className="container mt-5">
            <div className="card p-4">
                <h2 className="text-center">Registration Form</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-3">
                        <label className="form-label">Name:</label>
                        <input
                            type="text"
                            className={`form-control ${errors.name ? "is-invalid" : ""}`}
                            name="name"
                            value={formData.name}
                            onChange={handleInputChange}
                        />
                        {errors.name && <div className="invalid-feedback">{errors.name}</div>}
                    </div>

                    <div className="mb-3">
                        <label className="form-label">Email:</label>
                        <input
                            type="email"
                            className={`form-control ${errors.email ? "is-invalid" : ""}`}
                            name="email"
                            value={formData.email}
                            onChange={handleInputChange}
                        />
                        {errors.email && <div className="invalid-feedback">{errors.email}</div>}
                    </div>

                    <div className="mb-3">
                        <label className="form-label">Password:</label>
                        <input
                            type="password"
                            className={`form-control ${errors.password ? "is-invalid" : ""}`}
                            name="password"
                            value={formData.password}
                            onChange={handleInputChange}
                        />
                        {errors.password && (
                            <div className="invalid-feedback">{errors.password}</div>
                        )}
                    </div>

                    <div className="mb-3">
                        <label className="form-label">Habits:</label>
                        <div className="form-check">
                            <input
                                type="checkbox"
                                className="form-check-input"
                                name="cricket"
                                checked={formData.habits.cricket}
                                onChange={handleInputChange}
                            />
                            <label className="form-check-label">Cricket</label>
                        </div>
                        <div className="form-check">
                            <input
                                type="checkbox"
                                className="form-check-input"
                                name="coding"
                                checked={formData.habits.coding}
                                onChange={handleInputChange}
                            />
                            <label className="form-check-label">Coding</label>
                        </div>
                        <div className="form-check">
                            <input
                                type="checkbox"
                                className="form-check-input"
                                name="javascript"
                                checked={formData.habits.javascript}
                                onChange={handleInputChange}
                            />
                            <label className="form-check-label">JavaScript</label>
                        </div>
                        {errors.habits && <div className="text-danger">{errors.habits}</div>}
                    </div>

                    <button type="submit" className="btn btn-primary w-100">
                        Register
                    </button>
                </form>
            </div>
        </div>
    );
}

export default Validation;

npm install bootstrap

import 'bootstrap-icons/font/bootstrap-icons.css';
import "bootstrap/dist/css/bootstrap.min.css";

import React, { useState } from "react";

function SignUpUi() {
  const [display, setDisplay] = useState(false);

  return (
    <div className="container mt-4">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="text-center mb-4">
            <button
              className="btn btn-primary me-2"
              onClick={() => setDisplay(true)}
            >
              Sign Up
            </button>
            <button
              className="btn btn-secondary"
              onClick={() => setDisplay(false)}
            >
              Sign In
            </button>
          </div>

          {display ? (
            <div>
              <h1 className="text-center mb-4">Sign Up</h1>
              <form>
                <div className="mb-3">
                  <input
                    placeholder="First Name"
                    className="form-control"
                    autoComplete='off'
                  />
                </div>
                <div className="mb-3">
                  <input
                    placeholder="Last Name"
                    className="form-control"
                  />
                </div>
                <div className="mb-3">
                  <input
                    type="email"
                    placeholder="Email"
                    className="form-control"
                  />
                </div>
                <div className="mb-3">
                  <input
                    type="password"
                    placeholder="Password"
                    className="form-control"
                  />
                </div>
                <button className="btn btn-success w-100">Sign Up</button>
              </form>
            </div>
          ) : (
            <div>
              <h1 className="text-center mb-4">Sign In</h1>
              <form>
                <div className="mb-3">
                  <input
                    type="email"
                    placeholder="Email"
                    className="form-control"
                  />
                </div>
                <div className="mb-3">
                  <input
                    type="password"
                    placeholder="Password"
                    className="form-control"
                  />
                </div>
                <button className="btn btn-primary w-100">Sign In</button>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default SignUpUi;

npm install bootstrap

import 'bootstrap-icons/font/bootstrap-icons.css';
import "bootstrap/dist/css/bootstrap.min.css";

import React, { useState } from "react";

function InputWithSearch() {
  const [val, setVal] = useState('');
  const data = [
    "Java",
    "JavaScript",
    "React js",
    "Python",
    "C",
    "C++",
  ];

  return (
    <div className="container mt-4">
      <div className="row">
        <div className="col-md-6">
          <input
            list="data"
            className="form-control"
            onChange={(e) => setVal(e.target.value)}
            placeholder="Search"
          />
          <datalist id="data">
            {data.map((op, index) => <option key={index}>{op}</option>)}
          </datalist>
        </div>
      </div>
      <div className="row mt-3">
        <div className="col-md-6">
          <h1>{val}</h1>
        </div>
      </div>
    </div>
  );
}

export default InputWithSearch;

npm install bootstrap

import 'bootstrap-icons/font/bootstrap-icons.css';
import "bootstrap/dist/css/bootstrap.min.css";

import React, { useState } from "react";

function DynamicSelectOption() {
  const [val, setVal] = useState('');
  const data = ["Prabhas", "Surya", "NTR"];

  return (
    <div>
      <select
        className="form-select mt-3 ms-2 w-25"
        aria-label="Default select example"
        value={val}
        onChange={e => setVal(e.target.value)}
      >
        {
          data.map((da, i) => (
            <option key={i} value={da}>{da}</option> // Added the return here
          ))
        }
      </select>
      <h2 className="mt-3 ms-2">{val}</h2>
    </div>
    
  );
}

export default DynamicSelectOption;

import React, { useState } from 'react';

const CopyText = () => {
  const [copy, setCopy] = useState('');

  const handleCopy = () => {
    navigator.clipboard.writeText(copy);
    alert('Copied..');
  };

  return (
  <>
    <div className="d-flex align-items-center mt-5">
      <input
        type="text"
        className="form-control w-25 me-2 ms-2"
        placeholder="Username"
        aria-label="Username"
        value={copy}
        onChange={(e) => setCopy(e.target.value)}
      />
      <button type="button" className="btn btn-success" onClick={handleCopy}>
        CopyText
      </button>
      
    </div>
    <div className="input-group mt-3 w-25 ms-2">
    <textarea className="form-control " aria-label="With textarea"></textarea>
  </div>
  </>
  );
};

export default CopyText;

import React, { useEffect } from "react";

function GoogleMap(){
    useEffect(()=>{
        const ifameData=document.getElementById("iframeId")
        const lat=17.4375;
        const lon=78.4482;

        ifameData.src=`https://maps.google.com/maps?q=${lat},${lon}&hl=es;&output=embed`
    })
    return(
        <div>
            <iframe id="iframeId" height="500px" width="100%"></iframe>
        </div>
    );
}
export default GoogleMap;

npm install bootstrap

import 'bootstrap-icons/font/bootstrap-icons.css';
import "bootstrap/dist/css/bootstrap.min.css";

import React, { useState } from "react";

function PasswordShowHide() {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow(!show);
  };

  return (
    <div className="container">
      <input type={show ? "text" : "password"} />
      <i
        className={`bi ${show ? "bi-eye" : "bi-eye-slash"}`} 
        style={{ cursor: "pointer", marginLeft: "10px" }}
        onClick={handleShow}
      ></i>
    </div>
  );
}

export default PasswordShowHide;

npm install bootstrap

import 'bootstrap-icons/font/bootstrap-icons.css';
import "bootstrap/dist/css/bootstrap.min.css";

import React, { useEffect, useState } from 'react';

const Popup = () => {
  const [popup, setPopup] = useState(false);

  const openPopup = () => {
    setPopup(true); 
  };

  const closePopup = () => {
    setPopup(false);
  };

  useEffect(()=>{
    document.addEventListener("keyup",(e)=>{
        console.log(e.code,"key")
        if(e.code==="Enter"){
            setPopup(true)
        }
        else if(e.code==="ShiftLeft"){
            setPopup(false)
        }
    })
})

  return (
    <div>
      <button type="button" className="btn btn-primary" onClick={openPopup}>
        Model Popup
      </button>

      {popup && (
        <div className="modal show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Sai Kiran Manchala</h5>
                <button type="button" className="btn-close" onClick={closePopup} aria-label="Close"></button>
              </div>
              <div className="modal-body">Associate Software Engineer..</div>
              <div className="modal-footer">
                <button type="button" className="btn btn-secondary" onClick={closePopup}>
                  Close
                </button>
                <button type="button" className="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Popup;

1.What are the different datatypes in JavaScript ?

**Primitive Data Types:
=>Primitive data types are immutable (cannot be altered after creation) and are stored directly in the memory stack.

1.Number: Represents numeric values (integers and floating-point numbers).

let age = 25;         // Integer
let price = 19.99;    // Floating-point number
console.log(age);     // Output: 25
console.log(price);   // Output: 19.99

2.String: Represents a sequence of characters, used for textual data.

let name = "sai";      // Double quotes
let greeting = 'Hello';  // Single quotes
console.log(name);       // Output: sai
console.log(greeting);   // Output: Hello

3.Boolean: Represents a logical entity with two possible values: true or false.

let isStudent = true;
let hasGraduated = false;
console.log(isStudent);     // Output: true
console.log(hasGraduated);  // Output: false

4.Undefined: Means the variable has been declared but not assigned any value yet.

let score;
console.log(score);  // Output: undefined

5.Null: If we assign null to a variable, it means it will not have any value.

let user = null;
console.log(user);  // Output: null

6.Symbol(Introduced in ES6) :Symbols are often used to create unique object keys.

let symbol1 = Symbol('id');
let symbol2 = Symbol('id');
console.log(symbol1 === symbol2);  // Output: false (each symbol is unique)

7.BigInt (introduced in ES2020): It Allows you to represent numbers larger than the Number type can handle (which has a maximum limit).

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber);  // Output: 123456789012345678901234567890n

**Non-Primitive (Reference) Data Types:
=>Non-primitive data types are mutable and are stored in the heap(memory where dynamically allocated objects are stored.).
=>Variables that refer to non-primitive types do not store the actual value but a reference to the location in memory where the value is stored.

1.Object: Used to store collections of data in key-value pairs.

let person = {
  name: "Sai",
  age: 24,
  isEmployed: true
};
console.log(person.name);   // Output: Sai
console.log(person.age);    // Output: 24

2.Array: A special type of object that holds an ordered collection of values (which can be of any type).

let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]);  // Output: Apple
console.log(fruits[2]);  // Output: Orange

2. What is Hoisting in JavaScript?

=>In other scripting/server side languages, variables or functions must be declared before using it.
=>In JavaScript, variables and functions can be used before declaring it. =>The JavaScript compiler moves all the declarations of variables and functions on top. so there will not be any error. This is called hoisting.

console.log(x);  // Output: undefined
var x = 5;
console.log(x);  // Output: 5

=>In this example, JavaScript hoists the declaration of var x to the top of the scope. So, internally, the code is interpreted like this:

var x;  // Declaration is hoisted
console.log(x);  // Output: undefined (x is declared but not initialized yet)
x = 5;  // Initialization happens here
console.log(x);  // Output: 5

=>Variables defined with let and const are hoisted to the top of the block, but not initialized.
=>Let and const are also hoisted but we cant access them until they are assigned because they are in Temporal dead zone.

var a;    // Declaring a variable using `var`
let b;    // Declaring a variable using `let`
const c;  // Declaring a constant variable using `const` (must be initialized at the time of declaration)

x = 10;   // Assigning the value 10 to variable `x`
y = 20;   // Assigning the value 20 to variable `y`

var a = 10;    // Declaration and assignment in a single step
let b = 20;    // Declaration and assignment using `let`
const c = 30;  // Declaration and assignment using `const`

Various things hoisted in JavaScript:

Function declarations: Fully hoisted.
var - Hoisted
Arrow functions: Not hoisted
Anonymous Function expressions: Not hoisted
let and const - Hoisted but not initialized. (Temporal dead zo
class declarations - Hoisted but not initialized.

reference: https://stackabuse.com/hoisting-in-javascript/

3.What is temporal dead zone?

=>It is a specific time period in the execution of JavaScript code where the variables declared with let and const exists but cannot be accessed until the value is assigned.
=>Any attempt to access them result in reference errors.

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 10;
console.log(x);  // Output: 10

4.What are the differences let, var and const ?

**Scope:
=>Variables declared with var are function scoped.( available through out the function where its declared ) or global scoped( if defined outside the function ).
=> Variables declared with let and const are block scoped.
**Reassignment:
=>var and let can be reassigned.
=>const cannot be reassigned.
**Hoisting:
=>var gets hoisted and initialized with undefined.
=>let and const — gets hoisted to the top of the scope but does not get assigned any value.(temporal dead zone).

5.What is the Diff b/w Function Scope & Block-Scope & Global Scope?

**Function Scope:
=>Function scope means that a variable declared inside a function is only accessible within that function.
=> It cannot be accessed from outside the function.
=>Variables declared with var are function-scoped.
=>This means they are available throughout the entire function in which they are declared, regardless of block boundaries within the function.

function exampleFunction() {
    var message = "Hello, World!";
    console.log(message);  // Output: Hello, World!
}

exampleFunction();

console.log(message);  // Error: message is not defined

Var inside a block:

function testVarScope() {
    if (true) {
        var insideIf = "I'm inside if-block";
    }
    console.log(insideIf);  // Output: I'm inside if-block
}

testVarScope();

**Block Scope:
=>Block scope means that a variable declared inside a block (a pair of {} braces) is only accessible within that block and is not accessible outside of it.
=>Variables declared with let and const are block-scoped.

{
    let blockScopedVariable = "I'm block-scoped!";
    console.log(blockScopedVariable);  // Output: I'm block-scoped!
}

console.log(blockScopedVariable);  // Error: blockScopedVariable is not defined

let and const in an if block:

function testLetScope() {
    if (true) {
        let insideIf = "I'm inside if-block";
        const pi = 3.14;
        console.log(insideIf);  // Output: I'm inside if-block
        console.log(pi);  // Output: 3.14
    }
    console.log(insideIf);  // Error: insideIf is not defined
    console.log(pi);  // Error: pi is not defined
}

testLetScope();

**Global Scope:
=>The global scope is the outermost scope in JavaScript, where variables and functions that are declared outside of any function or block can be accessed from anywhere in the code.
=>Variables declared in the global scope are available throughout the entire program, including within functions and blocks.

var globalVar = "I am a global variable";

function accessGlobalVar() {
    console.log(globalVar);  // Output: I am a global variable
}

accessGlobalVar();
console.log(globalVar);  // Output: I am a global variable

6.List out some key features of ES6 ?

1.Arrow functions
2. Let and Const declarations.
3. Destructuring assignment
4. Default parameters
5. Template literals
6. Spread and Rest operators
7. Promises
8. Classes
9. Modules
10. Map, Set, Weakmap, Weakset

7.What is arrow functions in JavaScript and Limitations?

=>Arrow functions are introduced in ES6.
=>They are simple and shorter way to write functions in JavaScript.
1.Arrow functions cannot be accessed before initialization
2. Arrow function does not have access to arguments object
3. Arrow functions cannot be used as constructors. Using them with the new keyword to create instances throws a Type Error.
4. Arrow functions cannot be used as generator functions.

function square(a) {
    return a * a;
}

let square = (a) => { return a * a; }

 **if the function body has only one statement that it returns, we can skip curly braces {} and the return statement:
let square = (a) => a * a

Reference: https://stackabuse.com/arrow-functions-in-javascript/
Arrow functions + this combination questions will be asked here. Please explore on this combinations.

function Person() {
    this.age = 0;  // Initializing the age property of the Person instance

    setInterval(() => {
        this.age++; // Incrementing the age property
        console.log(this.age); // Logging the current age
    }, 1000); // The function runs every 1000 milliseconds (1 second)
}

const person = new Person(); // Creating a new Person instance

8.What’s the spread operator in JavaScript?

=>Spread operator is used to spread or expand the elements of an iterable like array or string into individual elements.

const names=["devaiah","malleshwari","shiva","ravali","sai"]
console.log(names)
console.log(...names)
console.log([...names])

O/P: 
["devaiah", "malleshwari", "shiva", "ravali", "sai"]
"devaiah", "malleshwari", "shiva", "ravali", "sai"
["devaiah", "malleshwari", "shiva", "ravali", "sai"]

Combining Array:

let spread1 = ['Devaiah', 'Malleshwari'];
let spread2 = ['shiva', 'ravalika', 'saikiran'];
let spread = [...spread1, ...spread2];
console.log(spread);

O/P: ["Devaiah", "Malleshwari", "shiva", "ravalika", "saikiran"]

**We can also use the spread operator inside the Array.push() method to push the contents of one array into another

let arr1 = ['Devaiah', 'Malleshwari'];
let arr2 = ['shiva', 'ravalika', 'saikiran'];
arr1.push(...arr2);
console.log(arr1);

O/P: ["Devaiah", "Malleshwari", "shiva", "ravalika", "saikiran"]

Copying Array and Object:

let spread1 = ['Devaiah', 'Malleshwari'];
console.log(spread1)
spread1.push("shiva","raalika","saikiran");
console.log(spread1)

O/P: 
["Devaiah", "Malleshwari"]
["Devaiah", "Malleshwari", "shiva", "raalika", "saikiran"]

or

let arr1 = ['Ravalika', 'SaiKiran', 'Shiva'];
let arr2 = [...arr1, 'Malleshwari', 'Devaiah'];
console.log(arr2);

O/P:
['Ravalika', 'SaiKiran', 'Shiva', 'Malleshwari', 'Devaiah']

*With Objects*

let o1 = { name: "saikiran",age: 24 };
let o2 = { village: "potharam", designation: "Full stack Developer", ...o1 };
console.log(o2);

O/P:
{
  age: 24,
  designation: "Full stack Developer",
  name: "saikiran",
  village: "potharam"
}


const billing = { billingContact: '0987654321', billingAddress: 'street no 123, xyz city' };
const shipping = { shippingContact: '123456789', shippingAddress: 'street no 999, abc city' };
const custInfo = { ...billing, ...shipping };
console.log(custInfo);

O/P:
{
  billingContact: '0987654321',
  billingAddress: 'street no 123, xyz city',
  shippingContact: '123456789',
  shippingAddress: 'street no 999, abc city'
}

Passing array of values as individual arguments to a function:

function doSum(times, ...items) {
    let sum = 0;
    for (let item of items){
        sum += item*times;
    }
    return sum;
}

console.log(doSum(1, 1));
console.log(doSum(2, 1, 2));

10.What is rest operator in JavaScript ?

=>Rest operator is used to multiple elements into single array or object.
=> This is useful when we don’t know how many parameters a function may receive and you want to capture all of them as an array.

var student ={
  name: "Sai",
  age : 24,
  hobbies : ["Vollyball", "Cricket"]
}

const age = student.age; //earlier we like this
console.log(age) //10

const {age, ...rest} = student; //using destructuring
console.log(age, rest) //100 {"name": "Sai", "hobbies":["Vollyball", "Cricket"]}

const {...rest} = student;
console.log(rest) //{"name": "Sai", "age": 24, "hobbies":["Vollyball", "Cricket"]}

*Functions*

function Example(...args){
console.log(args)
}
Example(1,2,3,4);

O/P: [1, 2, 3, 4]

11.What is destructuring ?

=>It is introduced in Es6.
=> It allows us to assign the object properties and array values into variables.

let Technology={
techName:"react js",
version:19,
developedBy:"Google"
}

const destruct = Technology.techName;
console.log(destruct)

O/P:"react js"


let Technology={
techName:"react js",
version:19,
developedBy:"Google"
}

const {techName,version,developedBy} =Technology 

******************************************************
 

const {name, technologys} = {
    name: 'sAI',
    technologys: {
        charged: ['React ', 'Node','GraphQl'],
        yearsToServe: 2
    }
};

console.log(technologys.yearsToServe);    //2  
console.log(technologys.charged[1]);    //"Node"

 
const person = {
    name: 'sAI',
    personObj: {
        technologys: ['React', 'Node'],
        yearsToServe: 2
    }
};

const { yearsToServe } = person.personObj;

console.log(yearsToServe);             //2          
console.log(person.personObj.technologys[1]);     //"Node"


const person = {
    name: 'sAI',
    personDetails: {
        Technology: ['React', 'Node'],
        yearsToServe: 25
    }
};

const { yearsToServe ,Technology} = person.personDetails;

console.log(yearsToServe);       //25      
console.log(Technology[1]);      //"Node"

12.What is the difference between ‘Pass by Value’ and ‘Pass by Reference’?
=>In JavaScript, whenever a function is called, the arguments can be passed in two ways, either pass by value or pass by reference.
=> Primitive datatypes such as string, number, boolean, null and undefined are passed by value.
=>Non -primitive datatypes such as object, arrays or functions are passed by reference.
=>In Pass by value, parameters passed as an arguments creates their own copy.
=>So any changes made inside the function are made to the copied value so it will not affect the original value.

let x = 10;

function changeValue(val) {
    val = 20;
    console.log("Inside function:", val);  // 20
}

changeValue(x);
console.log("Outside function:", x);  // 10 (original value remains unchanged)

=>In Pass by reference, parameters passed as an arguments does not creates their own copy.
=>so any changes made inside the function will affect the original value.

// Pass by reference example
let arr = [1, 2, 3];
174 Interview questions & Answers 9
function addToArr(value) {
 value.push(4);
 console.log(value); // Output: [1, 2, 3, 4]
}
addToArr(arr);
console.log(arr); // Output: [1, 2, 3, 4]

13.What is Map?

=>Map transforms each element of an array and creates a new array which contains the transformed elements.

**Syntax**

const newArray = oldArray.map((currentValue, index, array)=>{
    // Do stuff with currentValue
})

========Best One=====
const mathScores = [39, 50, 45, 41, 50];
  
mathScores.map((currentValue, index, array) => {
    console.log('Current value:' + currentValue);
    console.log('Index:' + index);
    console.log('Array:' + array);
    return currentValue;
})

O/P:
"Current value:39"
"Index:0"
"Array:39,50,45,41,50"
...
"Current value:50"
"Index:4"
"Array:39,50,45,41,50"


//for loop

const mathScores = [39, 50, 45, 41, 50]; 
let newScores = [];
  
for (let i = 0; i < mathScores.length; i++) {
    newScores.push(mathScores[i] + 5);
}

console.log(newScores); // [44,55,50,46,55]


const codes = [101, 201, 301, 303, 202]; 
let mathCodes = codes.map((code)=>{
    return `mth${code}`;
});
  
console.log(mathCodes); //["mth101","mth201","mth301","mth303","mth202"]

const names = ["Bilbo", "Gandalf", "Nazgul"];
let lengths = names.map((name) => name.length);
console.log(lengths); // [5,7,6]

//With array of Object
const students = [
    {firstName : "SaiKiran", lastName: "Manchala"},
    {firstName : "Shiva", lastName: "Manchala"},
    {firstName : "Ravali", lastName: "Manchala"}
];
  
let studentsNames = students.map(student => {
      return `${student.firstName} ${student.lastName}`;
})
  
console.log(studentsNames); 

O/P: ["SaiKiran Manchala", "Shiva Manchala", "Ravali Manchala"]

Map with Filter:

const mathStudents = [
  {
    name: "Sai",
    score: 60,
    enrollmentYear: 2019,
  },
  {
    name: "Shiva",
    score: 40,
    enrollmentYear: 2020,
  },
  {
    name: "Malleshwari",
    score: 43,
    enrollmentYear: 2019,
  },
  {
    name: "Devaiah",
    score: 20,
    enrollmentYear: 2019,
  },
  {
    name: "Ravalika",
    score: 80,
    enrollmentYear: 2017,
  },
]

const data = mathStudents
  .filter((student) => student.enrollmentYear < 2020)
  .map((student) => {
    if (student.score > 40) {
      return student.name + ": Passing"
    } else return student.name + ": not passing"
  })

console.log(data)

O/P:
 ["Sai: Passing", "Malleshwari: Passing", "Devaiah: not passing", "Ravalika: Passing"]

14.What is Filter?

=>Filter will creates a new array with only those elements which satisfies the specified condition.

*Syntax*
const filteredArray = oldArray.filter(callbackFn(element, index, array), context)


const numbers = [20, 40, 17, 99, 59, 77];
const filteredNumbers = numbers.filter((number) => {
    return number > 20;
});
  
console.log(filteredNumbers); // [40,99,59,77]

*Array Parameters*

const competitors = ["John", "Doe", "Stephen", "Matt", "Abigail", "Susu"];
  
function selectWinners(name, index, array) {
   
    if (array.length > 3 && name.includes('a')) {
        return true;
    } else {
      return false;
    }
}
  
let lselectLoosers = competitors.filter((name, index, array) =>
    selectWinners(name, index, array)
);

console.log(lselectLoosers); // ["Matt", "Abigail", "Susu"]

//Object with filter()

const menu = [
    {
        name: "buttermilk pancakes",
        price: 15.99
    },
    {
        name: "diner double",
        price: 13.99
    },
    {
        name: "godzilla milkshake",
        price: 6.99
    },
    {
        name: "country delight",
        price: 20.99
    },
    {
        name: "egg attack",
        price: 22.99
    }
];
  
let priceRange = {
    lower: 15,
    upper: 25
};

let filteredMenu = menu.filter(function (menu) {
    return menu.price >= this.lower && menu.price <= this.upper;
}, priceRange);
  
console.log(filteredMenu);

O/P: 
[{
  name: "buttermilk pancakes",
  price: 15.99
}, {
  name: "country delight",
  price: 20.99
}, {
  name: "egg attack",
  price: 22.99
}]

*Array of Objects by Value*

const students = [
    { firstName: "John", lastName: "Doe", graduationYear : 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear : 2023 },
    { firstName: "Abigail", lastName: "Susu", graduationYear : 2022 }
];

const currentYear = new Date().getFullYear();

let graduatingStudents = students.filter((element) => {
    if (element.graduationYear === currentYear) {
        return element;
    }
});
  
console.log(graduatingStudents);

O/P:
[
    {
        firstName:"John",
        lastName:"Doe",
        graduationYear:2022
    },
    {
        firstName:"Abigail",
        lastName:"Susu",
        graduationYear:2022
    }
]

Filtering Prime Numbers Using Array Filter In JavaScript:

const myArray = [-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97];
      
const primeNumbers = myArray.filter((element) => {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
});
  
console.log(primeNumbers); // [2, 3, 13, 17, 97]

OR

const numbers = [-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97];

function findPrimeNumbers(element) {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
}

console.log(numbers.filter(findPrimeNumbers)); // [2, 3, 13, 17, 97] 

 const menu = [
    {
      name: "buttermilk pancakes",
      category: "breakfast",
      price: 15.99,
      status: "available"
    },
    {
      name: "diner double",
      category: "lunch",
      price: 13.99,
      status: "available"
    },
    {
      name: "godzilla milkshake",
      category: "shakes",
      price: 6.99,
      status: "available"
    },
    {
      name: "country delight",
      category: "breakfast",
      price: 20.99,
      status: "86"
    },
    {
      name: "egg attack",
      category: "lunch",
      price: 22.99,
      status: "available"
    }
  ];

const delight = menu.find((menu) => menu.name === "country delight");

if (!delight.status === "86") {
    console.log('Available!');
} else {
    console.log('Sorry, the item is not available :(');
}

O/P: "Sorry, the item is not available :("


FILTER WITH INDEXOF

let sciCourses = ["Mth101", "Chm201", "Bio301", "Mth203", "Mth205"];
function checkCourses(courseArray, searchText) {
    return courseArray.filter(function (item) {
        return item.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
    });
}
console.log(checkCourses(sciCourses, "mth")); // ["Mth101", "Mth203", "Mth205"]

15.what is for-in and for-of and ForEach, Reduce?

**for-in:
=>The for-of statement executes a loop that operates on a sequence of Keys
**for-of:
=>The for-of statement executes a loop that operates on a sequence of values
=>Examples of iterable objects are array, string, nodelists etc. (for of on object returns error)

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
} 

O/P:
"a"
"b"
"c"

 const array1 = ['a', 'b', 'c'];

for (const element in array1) {
  console.log(element);
} 
O/P:
"0"
"1"
"2"


with object:

var person = {
    firstName: 'John',
    lastName: 'Doe',
    ssn: '299-24-2351'
};

for(var prop in person) {
    console.log(prop);
}
O/P:
"firstName"
"lastName"
"ssn"

ForEach:
=>The forEach() method calls a function and iterates over the elements of an array. The forEach() method can also be used on Maps and Sets.
=>forEach method does not return a new array.

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(function (age) {
    newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

Reduce:
=>reduce() method is used to process and accumulate values in an array, ultimately reducing them to a single value.
=> It is used for a variety of tasks, such as calculating sums, finding maximum or minimum values, concatenating strings, and more.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

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

const foodItems = [
  { id: 1, name: 'Pizza', price: 10, selected: true },
  { id: 2, name: 'Burger', price: 5, selected: true },
  { id: 3, name: 'Salad', price: 8, selected: false },
  { id: 4, name: 'Pasta', price: 10, selected: true },
  { id: 5, name: 'Sushi', price: 8, selected: false }
];

const selectedFoods = foodItems.filter(item => item.selected);
const totalCost = selectedFoods.reduce((sum, item) => {
  return sum + item.price;
}, 0);

console.log(selectedFoods);
console.log(`Total Cost of Selected Products: $${totalCost}`);

// Output:
// [
//   { id: 1, name: 'Pizza', price: 10, selected: true },
//   { id: 2, name: 'Burger', price: 5, selected: true },
//   { id: 4, name: 'Pasta', price: 10, selected: true }
// ]
// Total Cost of Selected Products: $25

1.What is Node.js and why is it used?

=>Node.js is a powerful, open-source, server-side runtime environment built on Chrome’s V8 JavaScript engine.
=>It enables developers to use JavaScript to write server-side code.
=>Node.js allows developers to use JavaScript both on the client-side and server-side , Providing unified Language and ecosystem.
=>Node.js is particularly known for its non-blocking, event-driven(means that the system responds to events (like user actions or network requests) and processes them asynchronously, allowing the application to handle multiple tasks concurrently without blocking other operations) architecture.
=>This makes Node.js highly efficient and suitable for building scalable network applications, such as real-time chat applications, online gaming, and APIs that need to handle many connections simultaneously.
=>One of the standout features of Node.js is its package manager, npm.
which provides access to a vast ecosystem of libraries and packages that can significantly accelerate development.
=>Its asynchronous nature and event loop model make it ideal for I/O-heavy tasks, such as reading files, querying databases, or making network requests, as it can handle these operations without blocking other tasks.

2.What are the main features of Node.js?

1.Non-blocking, Asynchronous I/O:
=>One of the core strengths of Node.js is its non-blocking, asynchronous nature.
=>This means it can handle multiple tasks at once without waiting for one to complete before moving on to the next.
=>If it makes a database request, it won’t just sit idle until the response comes back.
=> Instead, it’ll keep working on other tasks, and once the data is ready, it’ll come back to process it.
2.Single-threaded Event Loop:
=>Node.js runs on a single thread, unlike many other platforms that use multiple threads to handle tasks.
=>It achieves high performance by using an event loop.
The event loop constantly checks for tasks in the queue and processes them efficiently, making it highly scalable for I/O-heavy applications.
3.V8 Engine:
=>Node.js runs on Google’s V8 JavaScript engine, the same engine used in Chrome.
=>V8 is known for its speed and efficiency in executing JavaScript.
It takes JavaScript code and compiles it into machine code that your computer understands, leading to fast performance.
**NPM (Node Package Manager):
=>Node.js comes with NPM, a huge library of packages and modules.
These packages are reusable pieces of code that other developers have created.
=>It saves you a lot of time by allowing you to quickly integrate pre-built functionalities into your project.
**Cross-platform Compatibility:
=>Node.js works on various platforms like Windows, Linux, and macOS, allowing developers to build cross-platform applications without worrying about different operating systems.

3.Explain the concept of Promises in Node.js.

=>In Node.js, a Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
=>Promises provide a more powerful and flexible way to handle asynchronous operations compared to traditional callbacks.
=>We can write asynchronous code in a more synchronous manner, improving readability and maintainability.
=>A Promise has three states:

1. Pending: The initial state of the Promise, before the asynchronous operation has completed.

2. Fulfilled: The state when the asynchronous operation completes successfully, and the Promise is resolved with a value.

3. Rejected: The state when the asynchronous operation fails, and the Promise is rejected with a reason (error).
**Promises offer two main methods to handle the results of the asynchronous operation:
.then(): Used to define what should happen when the Promise is fulfilled.
.catch(): Used to define what should happen when the Promise is rejected.

4.What is the difference between synchronous and asynchronous functions in Node.js?
=>In Node.js, synchronous functions are executed in a strict sequence, meaning each task must complete before the next one begins.
=>If a function, like reading a large file, takes a long time to process, it blocks the entire application, causing other operations to wait and potentially slowing down performance.

console.log("Task 1: Start");

// This loop takes time and blocks the code execution
for (let i = 0; i < 5; i++) {
    console.log("Task 2: Processing " + i);
}

console.log("Task 3: End");

O/P:
Task 1: Start
Task 2: Processing 0
Task 2: Processing 1
Task 2: Processing 2
Task 2: Processing 3
Task 2: Processing 4
Task 3: End

=>Asynchronous functions allow multiple operations to run at the same time without waiting for each one to finish.
=>This approach uses callbacks, promises, or async/await to handle long-running tasks (such as network requests or database queries) without freezing the application.
=>Asynchronous programming is essential in Node.js to utilize its non-blocking, event-driven architecture, which helps manage many concurrent operations efficiently.

console.log("Task 1: Start");

setTimeout(() => {
    console.log("Task 2: Asynchronous Operation");
}, 2000);  // Simulate async operation with a 2 second delay

console.log("Task 3: End");

O/P:
Task 1: Start
Task 3: End
Task 2: Asynchronous Operation  (After 2 seconds)

5.What is the purpose of the `async` and `await` keywords in Node.js?

=>The async and await keywords in Node.js are used to simplify working with asynchronous operations.
=>In JavaScript, many functions like network requests or file operations are asynchronous, meaning they don’t block the main thread while waiting for a response.
=>This was handled using callbacks or promises, which could sometimes result in complex and less readable code, especially when dealing with multiple asynchronous actions.
**The async keyword is used to declare a function that returns a promise.
**Inside an async function, the await keyword can be used to pause the execution of the code until the promise is resolved or rejected.
=>If the promise resolves, the result is returned; if it rejects, the error can be caught using a try-catch block.

async function fetchData() {
 try {
  const data = await getDataFromAPI();
  console.log(data);
 } catch (error) {
  console.error(error);
 }
}
In this example, the await keyword ensures that the code execution waits for the getDataFromAPI() function to complete before moving forward.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched from server!");
        }, 2000);  // 2-second delay
    });
}

// Async function
async function getData() {
    console.log("Fetching data...");

    // Await pauses the execution until fetchData() resolves
    let result = await fetchData();

    // Code below await runs after fetchData() completes
    console.log(result);  
    console.log("Done");
}

// Call the async function
getData();

console.log("This runs while waiting for data...");  // Executes immediately

O/P:
Fetching data...
This runs while waiting for data...
Data fetched from server!   (after 2 seconds)
Done

Reference: https://medium.com/@saikiranmanchala2000/api-fetching-in-react-913e2980ccef

6.What is a callback function in Node.js?

=>A callback function in Node.js is a function passed as an argument to another function, which is then executed after the completion of the task.
=>This approach is fundamental in handling asynchronous operations, such as reading files, making API requests, or interacting with databases.
=>In Node.js, callbacks are a key part of non-blocking I/O, allowing the system to move on to other tasks while waiting for the completion of an operation.

// Function that accepts a callback function as an argument
function greet(name, callback) {
    console.log("Hello, " + name);
    
    // Execute the callback function
    callback();
}

// Callback function to be passed
function sayGoodbye() {
    console.log("Goodbye!");
}

// Call the greet function and pass sayGoodbye as a callback
greet("Sai", sayGoodbye);

O/P:
Hello, Sai
Goodbye!

**Why Call callback() in greet() ?
=>We want to perform another task. That task is not defined in greet() but is passed as a callback function (sayGoodbye in this case).
=> By calling callback(), we're allowing the greet() function to execute the extra task defined in the callback.

7.What is the purpose of the `require` function in Node.js?

=>The require function is used to include external modules in your Node.js application.

**These modules can be:
=>Built-in modules like fs (file system) or http
=>Third-party modules that are installed via npm (Node Package Manager)
=>Custom modules that you create within your project.

=>When you use require, Node.js will search for the module, load it, and return its exports, making its functionality available for use in the file that required it.

// Requiring a built-in module
const fs = require('fs'); // file system module

// Requiring a third-party module
const express = require('express'); // express framework

// Requiring a custom module
const myModule = require('./myModule'); // relative path to custom module

8.What is the Difference between require and import?

**require:
=>This is part of Node.js CommonJS module system.
=>It loads modules synchronously, and it is available in all versions of Node.js.

**import:
=>This is part of ECMAScript (ES6) modules, which is a newer module system.
=> It allows for asynchronous loading of modules, and you need to enable it in Node.js by setting “type”: “module” in your package.json file or by using .mjs file extensions.

const fs = require('fs'); // CommonJS style
import fs from 'fs'; // ES6 style

Key Differences:

1. Syntax: require uses a function syntax (`const module = require(‘module’)`), while import uses a declarative syntax (`import module from ‘module’`).

2. Loading: require loads modules synchronously (blocking), whereas import can be used to load modules asynchronously (non-blocking).

3. Usage: require is the default in Node.js (CommonJS), while import follows the ES6 specification and is becoming more widely adopted in modern applications.

When to Use require vs. import:
=>If you’re working on legacy(old) Node.js projects or modules, you’ll typically use require.
=>For modern applications that use ES6 and later, you may prefer import due to its cleaner syntax and potential for asynchronous loading.

9.Explain the concept of middleware in Express.js?

=>Middleware in Express.js refers to functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle.
=>These functions can execute code, modify the request and response objects, end the request-response cycle, or call the next middleware in the stack.
=> Middleware is like the backbone of any Express.js application, as it helps in handling tasks such as logging, authentication, error handling, or serving static files.

const express = require('express'); 
const app = express();

// A middleware that logs request details
app.use((req, res, next) => { 
    console.log(`Request Method: ${req.method}, Request URL: ${req.url}`); 
    next(); // Pass the request to the next middleware or route handler
});

// A middleware that checks if user is authenticated
app.use((req, res, next) => { 
    const isAuthenticated = true; // Dummy authentication logic
    if (isAuthenticated) {
        next(); // Proceed if authenticated
    } else {
        res.status(401).send('Unauthorized'); 
    }
});

// Route handler
app.get('/', (req, res) => { 
    res.send('Welcome to the home page!');
});

// Start the server
app.listen(3000, () => { 
    console.log('Server is running on port 3000');
});

10.What is the difference B/W package.json and package-lock.json?

=>