Wednesday, October 23, 2024

UW JS 310 Aut 24 Class 3 notes 22-OCT-2024

Functions are loosely typed in javascript, we are able to pass different types of parameters, too few args, too many argos etc. Keep function simple and make do only 1 thing which might be not feasible in real life. Function can have parameters or default values. Functions can return a value or not. 

Function expression : this type of function can be called only after being defined, generally preferred


const areaBuilder= function () { //function expression

console.log(‘area builder’)

};


areaBuilder(); // call the above function


const areaBuilder= function (h,w) { //function expression

console.log(w);

console.log(h);

console.log(‘area builder’ + (w*h));

};


areaBuilder(2,10);


const areaBuilder= function (h,w) { //function expression

return (w*h); // return the value

};


const area = areaBuilder(2,10);

console.log(area);


Recursion : a function calling itself


const adder = function(num1,num2){

 return num1+num2;

}


adder(2,’9’); // 29

adder(2,9) // 11


const adder = function(num1,num2){ // maybe this works?

 return Number(num1)+Number(num2)

}


const areaBuilder= function (h,w= 9) { //function expression with default value

return (w*h); // return the value

};


areaBuilder(3); // 27


Probably nothing will happen if you pass more arguments than needed


Function Declaration : this function can be called before being defined


console.log(minuser(3,4));


function minuser (num1,num2){ // this can be called before getting defined

return num1-num2;

}


Hoisting : order the javascript reads the file, which is top to bottom


Arrow functions shorthand in ES6, have to be careful with ‘this’ object

Example 

const areaBuilder = (h,w= 9)=> { //function expression with default value

return (w*h); // return the value

};


Why Undefined coming in chrome console?

the value of expression which is void/undefined is returned


Variable scope : to avoid unintended consequences, use const and let, do not use var   

a var can only be called in current code block, function has access to outer item/variable


IIFE ->immediately invoked function expressions. An IIFE is a function that is defined and immediately executed. The defining characteristic of an IIFE is that the function is invoked immediately after it is created.

Arguments : variable is an array like but not an array. itwill create an array inside the function and use it with for each.


const arr = [1,2,4,3]

arr.forEach(num=>{

console.log(num);

})


Rest parameters : … to spread them out in an array-like structure, is it like “the ellipsis (...)” in c??

 const myFunc = (...args) => {  

// this will take arguments from a function call and spread it to an array

return args; 

}

 const myFunc = (fristName,...args) => {  

// this will take arguments from a function call and spread it to an array

console.log(firstName);

return args; 

}

console.log(myFunc(4,6,8));


Methods inside the objects 

const car = {

make:”toyota”,

model : “Rav4”,

drive:function(){

console.log(‘VRoom’);

}

getSpecs(){

console.log(`Make:${this.make}`) // toyota

}

}

console.log(Car);

car.drive();


‘This’ object : keyword refers to the object that is currently executing the code. Its value depends on the context in which it is used.


Call : 

You can use call() to "borrow" methods from one object and use them on another.

call() gives you explicit control over the ‘this’ keyword, which is crucial in object-oriented JS.

Const teacher = {

Says:”hello”,

Talk : function(punct){

console.log(this.says + punct);

}

}


Const student = {

Says: ‘wait’

}


teacher.talk.call(student, “!!!!”);  // wait !!!!


Apply:

Key Differences between apply() and call():

  • call(): Takes individual arguments, separated by commas.

  • apply(): Takes an array of arguments.

When to use apply():

  • When you have an array of arguments that you want to pass to a function.

  • When you need to dynamically set the this value of a function.

  • For method borrowing (using a method from one object on another object).


Bind:

Maintaining context:

  • When passing object methods as callbacks, this can often be lost, leading to unexpected behavior. bind() helps you ensure that the correct this value is used.

Partial application:

  • bind() allows you to create new functions with some arguments already set, which can be helpful for creating reusable functions.


Classes : template for an object

Class Hero {

 constructor (name, ability){

this.name = name;

this.ability = ability;

}

useAbility(){

Const {name,ability} = this;

}

}



Anonymous functions are functions that are not bound to an identifier (i.e., they do not have a name). They are often used as arguments to other functions or as immediately invoked function expressions (IIFE).

In your example:

(args) => {

  // do something

}

This is an anonymous function (also known as an arrow function) that takes a single parameter args and performs some operations within its body.

Here's a more complete example to illustrate its usage:

const myFunction = (args) => {

  console.log(args);

};


myFunction("Hello, world!"); // Outputs: Hello, world!

In this case, myFunction is assigned an anonymous arrow function that logs the args parameter to the console. While the function itself is anonymous, it is assigned to the variable myFunction, which can then be used to call it.


Tuesday, October 15, 2024

UW JS 310 Aut 24 Class 2 notes 15-OCT-2024

Objects are complex data type

Const myObj = {};

console.log(myObj);


const person = {

firstName : ‘S’,

lastName: ‘Man’,

Age: 4

}


person.lastName = ‘Johnson’;

person.numberOfGuitars = 3;

console.log(person);


Objects destructuring : assigning properties of an object to individual variables 

const {firstName, age} = person;

console.log(“ghost emoji”, firstName, age);


Consider this example

const person = {

‘First Name’ : ‘S’,

lastName: ‘Man’,

Age: 40

}


To get the ‘First Name’ we have to do this:

person.[‘First Name’]

Also object keys should be strings, the values can be anything


Q) why does the index start with zero in javascript?

A: This one’s rooted in the history of computer science. Zero-based indexing traces

back to the C programming language, created in the early '70s. Arrays in C are

designed to start at the beginning of a memory block, and indexing from zero

simplifies the computation of an element’s address. JavaScript inherits many conventions

from C, including zero-based indexing. Once this became standard, many languages

that came afterward stuck with it to keep things consistent and predictable.

It's a nod to the past that still makes sense in today's coding world. 


array.pop() - removes the last value and 

array.push() - adds a value at the end of an array

array.concat() - takes 2 arrays and merge it to 1 array

array.slice()


Destructuring an array

const arr = [‘apple’,’orange’,’banana’];

const [first,second,third] = arr;

console.log(first); // apple


Array can be multi dimensional, can be array of arrays

const arr=[[1,2,3], [4,5,6], [7,8,9]];

console.log(arr[1][2]); // 6


const arr=[[1,2,3], [4,[‘a’,’b’,’v’],6], [7,8,9]];


Reference vs primitive data types :

Reference types are like class and arrays, when copies are made reference are copied

Primitives are like string, numbers, booleans, when copies are made values are copied

const name = ‘james’;

const firstName = name;

console.log(firstName);


Easy way to know is if we make a copy and cannot change the value then it is primitives

type when we precede with ‘const’

Eg of reference type variables

const arr=[1,2,3]

const narr = arr

arr[1] = 5

console.log(arr) // [1,5,3]

console.log(narr) // [1,5,3]




Spread operators (...) are incredibly handy in JavaScript! They allow you to easily expand elements of an array or object. 

When it comes to arrays, you can use them to create a new array that includes elements from an existing array. For example:


const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5, 6];

const arr3 = [...arr2] // copy by value

const arr4 = arr3 // copy by reference

console.log(arr2); // Output: [1, 2, 3, 4, 5, 6]


const arr2 = [ 4, 5, 6,...arr1];

const arr2 = [ 4, 5,...arr1,6];


You can also use them for copying arrays, combining arrays, and even spreading elements as function arguments. 


object copy by value, using spread operator

const billRodgersIV={...willRodgersIII} 


const russell = {

touchdowns:2,

yards:1123,

sacks:4

}


copy other values as is but changed the touchdowns value to 5

const russellWeek17 = {

...russell,

touchdowns:5,

interceptions : 1234 // and adding new properties like this

}


RegEx : way of validation of input from user 


Quiz notes :


In JavaScript, null and undefined don't have properties. Here's why:

Null: Represents the intentional absence of any object value. It's like a placeholder to say
"there's no value here." Since it signifies the absence of an object, it naturally doesn't have
properties or methods.
Undefined: Indicates a variable that hasn't been assigned a value yet.
It's the default value for uninitialized variables, and since it means "no value yet,"

it doesn't have properties either.

On the other hand, numbers, strings, and arrays do have properties and methods. Numbers and strings have

built-in methods (like .toFixed() for numbers or .length for strings), and arrays are objects in JavaScript,

so they come packed with a host of properties and methods.


 dot notation and bracket notation are the right ways to access properties in JavaScript objects.

Dot notation is simple and straightforward: object.property

Bracket notation allows for dynamic property access, where the property name is specified as a
string: object["property"]

Arrow notation isn’t a thing when accessing object properties. It’s actually used for functions and doesn’t

relate to property access.


Saturday, May 16, 2020

Node.JS rest api Tutorials


Install appropriate node version from here : 
https://nodejs.org/en/download/

All these commands must be run on command prompt after npm package 
installation.
generate an empty npm project without going through an interactive 
process.
npm init -y

install required (driver) packages
npm i express mysql body-parser cors 

install nodemon, it is a tool that helps by automatically restarting 
the node 
application when file changes in the directory are detected
npm i -g nodemon




//First create a folder (lers say "nodejs-rest-api")
// and then create a file in that folder called "app.js" 
//and you should add this code :

var express = require("express");
var app = express();
// mysql driver
var mysql = require("mysql");
// parser to parse POST body content
var bodyParser = require("body-parser");
// this is the port where your application will run (eg: localhost:9800)
var port = 9800;

// create connection object for database
let connection = mysql.createConnection({
    host: "localhost",
    user: "user",
    password: "password",
    database: "somedatabase",
});

app.use(bodyParser.json()); // so it can support JSON-encoded bodies
app.use(
    bodyParser.urlencoded({
        // so it can support URL-encoded bodies
        extended: true,
    })
);

// this will connect MySQL
connection.connect();

// this will create a get request with route "localhost:9800/"
// req -> request
// res -> response
app.get("/", (req, res) => {
    res.send("Application started");
});

// this will create a get request with route "localhost:9800/coaches"
app.get("/coaches", (req, res) => {
    connection.query("SELECT * FROM coachmain;", (err, result) => {
        if (err) {
            console.log(err);
            res.json({ error: true });
        } else {
            console.log(result);
            res.json(result);
        }
    });
});

// this will create a delete request with route "localhost:9800/deleteCoach"
/*
delete body should be something like this :
    {
        "coachId": 1
    }
*/
app.delete("/deleteCoach", function (req, res) {
    // get data from forms and add to the table called coachmain
    var coachId = parseInt(req.body.coachId);
    var queryString =
        `DELETE FROM  coachmain 
           where coachId =
                '` +
        coachId +
        `'`;
    connection.query(queryString, function (err, result) {
        if (err) {
            // handle error and notify user
            res.status(400).send(err);
        } else {
            // success message here. if you forget this, 
            // the request will wait till timeout
            res.status(201).send(req.body);
        }
    });
});

// this will create a post request with route "localhost:9800/deleteCoach"
/*
post body should be something like this :
    {
        "name": "full name",
        "coachId": 1,
        "season": 2
    }
*/
app.post("/newCoach", function (req, res) {
    // get data from forms and add to the table called user..
    var name = req.body.name;
    var coachId = parseInt(req.body.coachId);
    var season = parseInt(req.body.season);
    var queryString =
        `INSERT INTO coachmain 
            (
                name, coachId, season
            )
            VALUES
            (
                '` +
        name +
        `','` +
        coachId +
        `','` +
        season +
        `'
            )`;
    connection.query(queryString, function (err, result) {
        if (err) {
            // handle error and notify user
            res.status(400).send(err);
        } else {
            // success message here. if you forget this, 
            // the request will wait till timeout
            res.status(201).send(req.body);
        }
    });
});

// application will listen to this port
app.listen(port, (err) => {
    console.log("running on :" + port);
});