Dasturchilar, olg'aaaa 🔥️️️️🤣️️️️️️

Yesterday, I was working on a task given by my brother. And when I was complaining about a bug in the platform, spelling mistake of one word changed the whole meaning 😂

What did you notice?😁

@code_insights

Output nima bo’ladi deb o’ylaysiz?

console.log("First");
setTimeout(() => {
  console.log("Second");
}, 0);
console.log("Third");

Haa Sarvar komentda to’g’ri aytdilar
Shu tartibda chiqadi -> 1, 3, 2
Lekin nega?

Sabab: Top-to-bottom execution (Call Stack):

console.log("First") -> darhol ishlaydi -> First chiqadi.

setTimeout(..., 0) -> JavaScript uni Web APIs ga yuboradi va “callback”ni tayyorlab qo‘yadi, lekin darhol ishlamaydi., threadni bo’shatib qo’yadi.
Keyin
console.log("Third") -> darhol ishlaydi -> Third chiqadi.

Endi main thread’da ishlar tugagach, call stack bo‘shaydi.
Shunda callback queue ichidagi console.log("Second") call stack’ga qaytariladi. va execute bo’ladi

Shuning uchun: first, third, second bo’lib chiqadi

Endi buni O’zbek tilida tushuntiraman😅

Kutubxonada:
‘First’ kitob so’raydi, va kutubxonachi o’rnida topib beradi
Navbatda ‘Second’ turibti, uni kitobini qidirish kerak ekan, kutubxonachi unga: “Kutib tur navbat tugasin keyin” dedi.
Shu paytda ‘Third’ ishini bitirib oladi. Endi navbatda hech kim qolmagach, kutubxonachi(Event loop) ‘Second’ni buyurtmasini ham topib beradi

Osonlashdimi?
O’zim uchun haa😅😁

JS dagi method larni eslab qolishni eng yaxshi yo’li qaysi?

Functions

Declaration vs Expression

Function Declaration has the following syntax
they use the function keyword to define functions

function myFunction(a, b){
//code
}

Function Expression is the way of defining a function using variable. Later variable can be used to call the function. This type of functions are called anonymous functions, meaning they don’t need a function name to invoke. They are always called using the variable

const fun = function(a, b) {
//code
}

Difference?
Coming

Function Declaration is fully hoisted, meaning they can be called defore it’s declared in the code

sayHello()

function sayHello() {
console.log(“Hello”)
}

Functions expressions are not hoisted, meaning they can’t be invoked before their declaration

sayHello()

const sayHello = function() { console.log(“Hello”)}

What’s Hoisting actually?

In JS, declarations are moved to the top of the code before the execution

So, in the case of Function Declaration, below code works

sayHello(); 

function sayHello() {
  console.log("Hello!");
}

Because under the hood, JS treats/reads the code like this

function sayHello() {
console.log(“Hello!”)
}

sayHello()

As you saw, JS moved up the declaration of the function(function + its body) to the top before code execution. So that we can invoke this function even before defining it

Here we said that Function expressions are anonymous(nameless function)
But you can still give function name, it will help during the debuggin process

const func = function sayHi() {
//code
}

This works too

Arrow Functions

My Favourite

Arrow function is shorter syntax of function expressions
They are always expression, not declaration, meaing they are not hoisted either

const sum = (a, b) => a + b

In arrow functions => means return, so it uses implicit return. That means, after => the keyword return is not required. But if you add curly braces { } after =>, then you need to explicitly return the value

const sum = (a, b) => {return a + b}

Or also, if we want to return an object, we can wrap it up inside ( ) to implicitly return it (with => )

const sum = (age, gender) => ({age, gender})

Promise?

Promise in JS is an object that represents an eventual completion of an async operation.
To put it simply, we can say it’s a literal ‘promise’ that there will be a result of your request(be it successful, or rejection)

It’s like saying:

I don’t have the data now, but I Promise, I will give it to you

Promise has 3 states: Pending, Fulfilled, Rejected

How does it relate to async/await?
In the next post) soon

Tired of ‘.then’s???

fetchData()
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Here’s a easier, and readable syntax

async function getData() {
  try {
    const response = await fetch(“blah blah com”);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

So, generaly async and await makes Promises easier to write
— async keyword is making it asynchronous operation
— await keyword is pausing the code untill the response comes from Promises

Closure

Closure is when an inner function remembers the variable from an outer(parent) function

How is it different from scope?

- In scope, once the parent function is done, the variables declared there will also be gone. No memory of variables stays.
Sooo, but in closure, the inner function can still remember the variable

- Closures work only if parent function is returned, or passed somewhere

Cloning?

Cloning is usefull when we want to keep the original object safe and create a copy to modify. So, our modifications will only affect our new cloned object. There are two ways of cloning

1) Shallow Cloning - is used when object is plain and simple data, not like nested-type.

let original = {name: “Javohir”, age: 22}
let shallow = {…original}

shallow.name = “Behruz”

console.log(original.name) 
//Output: Javohir

So, here we can see that cloning an object and changing one key property have not changed the original one.

When we shallow clone, we create a new object with different memory locations. and it will create new locations for only primitive data types in the object(like strings, numbers…). If the object includes nested objects, then it will copy only the reference to that memory.

2) Deep Cloning — is used when object includes nested data, non-primitive type, like object, or arrays

let original = {name: “Javohir”, info: {year: 2003}}
let deepClone = structuredClone(original)

deepClone.info.year = 2002

console.log(original.info.year)
//Output: 2003

Deep Cloning creates a totally independent new object in new memory location, even if object has nested object inside.

In the exampe, it can be seen that nested object’s value hasn’t changed even after different value has been assigned to it with cloning. If it were shallow cloning, original value would have been modified.