🔰 Javascript

Implementing Java script!!!

can be done in 3 ways:

<body>
<head>
External file.

<!DOCTYPE html>
<head>
  <title>Javascript cheatsheet</title>
  <script>
    alert('1. Hello, World!');
  </script> 
  <script src="script.js" [async/defer] ></script>
</head>
<body>

  ...
  <script>
    alert('2. Hello, World!');
  </script>
  <script src="script.js"></script> // best practice dont use this in head. cause it will block the rendering of the page. and if want to add use async or defer. eg. 
  /*
    <script src="script.js" async></script>
    <script src="script.js" defer></script>
  */
</body>
</html>

Simple program

  <button id="btn" onclick="welcome()">👋 Hi</button>
  <p id="welcomeId"></p>

 <script>
    function welcome() {
      document.getElementById("welcomeId").innerHTML = "Hello World!";
    }
  </script>

Variables types:

What is the difference between var, let, and const? var: Function-scoped, can be redeclared and updated, and is hoisted. let: Block-scoped, can be updated but not redeclared within the same scope. const: Block-scoped, cannot be updated or redeclared; must be initialized during declaration

block scope: { ... } // let, const
function scope: function() { ... } // var, let, const
global scope: window // var, let, const

// a complete short and crisp example

function myFunk() {
  var x = 10; // function scope
  let y = 20; // block scope
  const z = 30; // block scope

  if (true) {
    var a = 40; // function scope
    let b = 50; // block scope
    const c = 60; // block scope
    console.log(x, y, z, a, b, c); // prints all variables
  }

  console.log(x, y, z, a); // prints x, y, z and a only
  console.log(b); // ReferenceError: b is not defined
  console.log(c); // ReferenceError: c is not defined
}

Q: guess the output

var a = 10;
{
  var a = 20;
}
let b = a; 
{
  let b = -20;
}
console.log(b); // b = 20

Data Types:

let x = 10; // Number
let y = 3.14; // Number
let x = BigInt("123456789012345678901234567890"); // BigInt
let z = "Hello"; // String
let a = 'Hello'; // String
let b = true; // Boolean
let c = false; // Boolean
let d = null; // Null
let e; // Undefined
let f = [1, 2, 3, 4, 5]; <or> = new Array("Saab", "Volvo", "BMW");// Array
let g = {name: "John", age: 30}; // Object
const date = new Date("2022-03-25"); // Date
const letters = new Set(["a","b","c"]); // Set
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]); // Map
fruits.set("apples", 200);
fruits.get("apples");


const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  },
  salaryIncrement: function(percentage) {
    return this.salary + (this.salary * percentage / 100);
  }
}; // Object with Object Methods
person.age = 51; person["age"] = 52;
console.log(person.age);
console.log(person.fullName());

x = new String(); or y = new Number();
// Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.

Explain the difference between null and undefined.

null is an assignment value that represents no value or no object. It's often used to indicate that a variable should have no value.
undefined means a variable has been declared but has not yet been assigned a value.

Operators:

Link

// =, +, -, *, /, %, ++, --, +=, -=, *=, /=, %=, ==, ===, !=, !==, >, <, >=, <=, &&, ||, !, ?:
// ==	equal to
// ===	equal value and equal type
let x, y = 5, z = 12;
x = y + z; // 17
let sum = 4 + 7+ " "  + "Doe" + 7 + 9 + 0;
sum -> 11 Doe790

typeof(5) -> number // Returns the type of a variable

Differenct '==' and '==='

== (loose equality) checks for value equality but allows type coercion (i.e., it converts types if necessary).
=== (strict equality) checks for both value and type equality, without type conversion.

0 == false   // true
0 === false  // false, because they are of a different type
1 == "1"     // true, automatic type conversion for value only
1 == ["1"]   // true
1 === "1"    // false, because they are of a different type
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false

console.log(0 || 1); console.log("" || "a"); console.log(NaN || 1);
// 1				 "a"					 1
console.log(0 ?? 1); console.log("" ?? "a"); console.log(Nan ?? 1);
// 0				 ""						 Nan
console.log(undefined || 1);
// 1
console.log(undefined ?? 1);
// 1

JavaScript Identifiers / Names:

A letter (A-Z or a-z)
A dollar sign ($)
Or an underscore (_)

JavaScript Display Possibilities

console.log("Hello, World!"); // Console
window.alert("Hello, World!"); // Alert
window.print(); // Print in pdf or any other format
document.write("Hello, World!"); // Document
.innerHTML = "Hello, World!"; // Inner HTML

JavaScript Syntax

// Conditional Statements
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

// Switch
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

Arrays

// Arrays
let cars = ["Saab", "Volvo", "BMW"];
let cars = new Array("Saab", "Volvo", "BMW");
cars.push("Audi"); or cars[cars.length] = "Audi";
cars.push[100] = "OOOO"; // ["Saab", "Volvo", "BMW", undefined, undefined, ...., "OOOO"]
cars[0] = "Toyota";
cars.length;
cars.sort();

// iteration display
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
} text += "</ul>";
let text = "<ul>";

// forEach() method
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

// Objects: If you use named indexes, JavaScript will redefine the array to an object.
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 

console.log(person["firstName"]); // John
console.log(person[0]); // undefined

[1, 2, 3].push(4); // [1, 2, 3, 4]
[1, 2, 3].pop(); // [1, 2]
[1, 2, 3].shift(); // [2, 3]
[1, 2, 3].unshift(0); // [0, 1, 2, 3]
['a', 'b'].concat(['c']); // ['a', 'b', 'c']
['a', 'b', 'c'].join('-'); // a-b-c
['a', 'b', 'c'].slice(1, 3); // ['a','b']
['a', 'b', 'c'].indexOf('b'); // 1
['a', 'b', 'c'].lastindexOf('c'); // 0
['a', 'b', 'c','d','e'].splice(2, 0, "lol", "gg");// ['a', 'b','lol','gg', 'c','d','e']   0 - dont remove 1- to remov 
['a', 'b', 'c'].includes('c'); // true
[3, 5, 6, 8].find((n) => n % 2 === 0); // 6
[2, 4, 3, 5].findIndex((n) => n % 2 !== 0); // 2
[3, 4, 8, 6].map((n) => n * 2); // [6, 8, 16, 12]
[1, 4, 7, 8].filter((n) => n % 2 === 0); // [4, 8]
[2, 4, 3, 7].reduce((acc, cur) => acc + cur); // 16
[2, 3, 4, 5].every((x) => x < 6); // true
[3, 5, 6, 8].some((n) => n > 6); // true
[1, 2, 3, 4].reverse(); // [4, 3, 2, 1]
[3, 5, 7, 8].at(-2); // 7
[].valueOf()
[].toString() element becoms string

Functions

// Functions
function name(parameter1, parameter2, parameter3) {
  // code to be executed
}


// auto call (funk reference)();
(function () {
  let x = "Hello!!";  // I will invoke myself
})();

// Arrow Functions
const x = (x, y) => x * y;


// Function Arguments Object
x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

Classes

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";




// Inheritance
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Error

Error in JavaScript

syntax errors
runtime errors
logical errors

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

DOM(Document Object Model)

Link: PPT search: HTML DOM many more

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

document.getElementById("demo").innerHTML = "My First JavaScript";
document.getElementById("demo").style.fontSize = "35px";
document.getElementById("demo").style.display = "none";



// Adding and Deleting Elements
document.createElement(element)	Create an HTML element
document.removeChild(element)	Remove an HTML element
document.appendChild(element)	Add an HTML element
document.replaceChild(new, old)	Replace an HTML element
document.write(text)	Write into the HTML output stream

document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event

// Finding HTML Objects
document.anchors	Returns all <a> elements that have a name attribute	1
document.applets	Deprecated	1
document.baseURI	Returns the absolute base URI of the document	3
document.body	Returns the <body> element	1
document.cookie	Returns the document's cookie	1
document.doctype	Returns the document's doctype	3
document.documentElement	Returns the <html> element	3
document.documentMode	Returns the mode used by the browser	3
document.documentURI	Returns the URI of the document	3
document.domain	Returns the domain name of the document server	1
document.domConfig	Obsolete.	3
document.embeds	Returns all <embed> elements	3
document.forms	Returns all <form> elements	1
document.head	Returns the <head> element	3
document.images	Returns all <img> elements	1
document.implementation	Returns the DOM implementation	3
document.inputEncoding	Returns the document's encoding (character set)	3
document.lastModified	Returns the date and time the document was updated	3
document.links	Returns all <area> and <a> elements that have a href attribute	1
document.readyState	Returns the (loading) status of the document	3
document.referrer	Returns the URI of the referrer (the linking document)	1
document.scripts	Returns all <script> elements	3
document.strictErrorChecking	Returns if error checking is enforced	3
document.title	Returns the <title> element	1
document.URL	Returns the complete URL of the document	1


// JavaScript HTML DOM Elements
document.getElementById("intro");
document.getElementsByTagName("p");
document.getElementsByClassName("intro");
document.querySelectorAll("p.intro"); // list of all p elements with class="intro"
const radioButtons = document.querySelectorAll('input[type="radio"]');
document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World!";
}); // 'https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_addeventlistener'
-<or>-
let button = document.getElementById('btn');
button.addEventListener('click', function() {
  document.getElementById('welcomeId').textContent = 'Hello, World!';
});

button.addEventListener('change', function() {
      // Check which radio button is selected
      radioButtons.forEach(function(radio) {if (radio.checked) {selectedLanguage.textContent = "Selected language: " + radio.value;}});
    });


const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

JavaScript Hoisting

the built-in behavior of the language through which declarations of functions, variables, and classes are moved to the top of their scope – all before code execution
Variables (var, let, const)

var is hoisted but initialized as undefined until the code is executed

console.log(a); // undefined (hoisted, but not initialized) Output: undefined
var a = 10;

console.log(b); // ReferenceError (temporal dead zone) err. Output: Cannot access 'b' before initialization
let b = 20;

Function Declarations:
- Fully hoisted (both declaration and body).
- Can be called before their definition
```
greet(); // Works, logs "Hello"
function greet() {
    console.log("Hello");
}
```
Classes:
- Hoisted but remain in a temporal dead zone (similar to let and const).
```
const obj = new MyClass(); // ReferenceError
class MyClass {}
```

Function Expressions and Arrow Functions:

Treated like variables; only the variable declaration is hoisted, not the function itself.

console.log(add); // undefined
var add = function () {
    console.log("Add");
};

console.log(subtract); // ReferenceError
let subtract = () => console.log("Subtract");

Lexical scope

Lexical scope (also known as static scope) means that the accessibility of variables is determined by the location where they are declared in the source code. In JavaScript, this implies:

Inner functions have access to variables defined in their outer functions.
The scope is determined at the time of writing code, not during execution.

📦 Think of It Like Nested Boxes Imagine your code as a set of boxes within boxes:

Each function is a box.

A box can access variables in its own box and in any box it’s nested within.

But it cannot access variables in boxes nested inside it.

JavaScript Closures

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope.

function outerFunction() {
  let outerVariable = "I am outside!";
  
  function innerFunction() {
    console.log(outerVariable); // Accessing outerVariable from the outer scope
  }
  
  return innerFunction; // Returning the inner function
}

const closure = outerFunction(); // closure is now a reference to innerFunction

JS Async

Callbacks, Promises, Async/Await

Callback Hell:

fetch(url, (result) => {
  result.json((result) => {
    let id = result.id;
    fetch(url + id, (result) => {
      result.json((result) => {
        console.log(result);
      });
    });
  });
});

states:

Pending -> success -> .then( callback )
pending -> error -> .catch( callback )

promise in javascript:

promise YT short: it's like promiseing that definetly you will get the response. may take time but you will get the response. Promise:

fetch(url)
  .then((res) => res.json())
  .then((data) => {
    let id = data.id;
    return fetch(url + id);
  })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

YT short

function authDetails(){...}

const res = authDetails();
console.log(res); // undefined, authDetails() is takes time to return the res. so res should wait untill it get the authDetails() response.

// with async
1. callbacks
2. promises
3. async/await

url = 'https://api.github.com/users';
// callbacks
fetch(url, (result) => {
  result.json((data) => {
    console.log(data);
  });
});


// promises: without async/await
fetch(url)
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
// -<or>-
fetch(url)
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
    return data[0];
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => console.log(err));

this.setState(prevState => ({
            message: 'Thank you for subscribing' + msd + '!',
            count: prevState.count + 1
        }), () => { console.log('callback value', this.state.count) });

// async/await
async function myFunction() {
  const r = await fetch(url);
  const d = await r.json();
  const d0 = d[0];
  console.log(d0);
}

myFunction();

Pure functions and impure functions

Pure functions: Always returns the same output for the same input. | Has no side effects (it doesn’t modify anything outside of its scope: no DOM changes, no global variables, no file writes, etc.).

function add(x, y) {
  return x + y; // pure function
} // add(2, 3) will always return 5

Impure Functions: Might return different outputs for the same input. | contains one or more side effects (it might modify external variables, interact with the DOM, make API calls, log to console, etc.).

// Example of an impure function modifying a global variable
let counter = 0;

function incrementCounter() {
  counter++; // Modifies the global counter variable
  return counter;
}

console.log(incrementCounter()); // Output: 1
console.log(incrementCounter()); // Output: 2 (different from the previous output)

// Example of an impure function depending on external input
function generateRandomNumber() {
  return Math.random(); // Depends on the current state of the random number generator
}

console.log(generateRandomNumber()); // Output: (some random number)
console.log(generateRandomNumber()); // Output: (another random number)

// Example of an impure function performing I/O
function logMessage(message) {
  console.log(message); // Performs an I/O operation (writing to the console)
}

logMessage("Hello, world!"); // Output: Hello, world! (printed to the console)

Currying YT short

when we convert f(a, b) to f(a)(b) is called currying. It allows us to create a function that takes multiple arguments one at a time.

const rectArea = function(l, b, h) {
  return l * b * h;
}
// currying
const curriedRectArea = function(l) {
  return function(b) {
    return function(h) {
      return l * b * h;
    };
  };
};
const area = curriedRectArea(2)(3)(4); // 24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript.md

javascript.md

🔰 Javascript

Implementing Java script!!!

Simple program

Variables types:

Data Types:

Explain the difference between null and undefined.

Operators:

JavaScript Identifiers / Names:

JavaScript Display Possibilities

JavaScript Syntax

Arrays

Functions

Classes

Error

DOM(Document Object Model)

JavaScript Hoisting

Lexical scope

JavaScript Closures

JS Async

Callback Hell:

promise in javascript:

Pure functions and impure functions

Currying YT short

Files

javascript.md

Latest commit

History

javascript.md

File metadata and controls

🔰 Javascript

Implementing Java script!!!

Simple program

Variables types:

Data Types:

Explain the difference between null and undefined.

Operators:

JavaScript Identifiers / Names:

JavaScript Display Possibilities

JavaScript Syntax

Arrays

Functions

Classes

Error

DOM(Document Object Model)

JavaScript Hoisting

Lexical scope

JavaScript Closures

JS Async

Callback Hell:

promise in javascript:

Pure functions and impure functions

Currying YT short