JavaScript Çorbası: Haziran 2021

25 Haziran 2021 Cuma

Loose Equality Comparison - 2 Tane Eşittir

Giriş

Açıklaması şöyle. Farklı tiplerdeki nesnelerin eşitliğini kontrol etmek için kullanılır

The JavaScript operator == means equal after type juggling.

Nasıl Çalışır
Mantıksal olarak şuna benzer. Her iki nesneyi de string'e çevirip karşılaştırmak gibidir.

static boolean compareData(Object v1, Object v2)
{
  if(v1 != null && v2 != null)
    return (v1.getClass() == v2.getClass() && (v1.toString().equals(v2.toString())));
  else
  {
    return (v1 == null ? v2 == null : v1.equals(v2));
  }
}

Açıklaması şöyle. Eğer her iki tip de aynı ise == yavaş değildir.

== is exactly as fast as === when both operands have the same type, and there's nothing wrong with using it when you know that both operands have the same type. You only got a problem when you don't know what types the operands have.

Örnek

Şu kod true döner

'0e111' == 0

Örnek - Number ve BigInt Karşılaştırma

Şöyle yaparızz

42 == 42n  // true!

18 Haziran 2021 Cuma

Typescript Record Tipi

Giriş

Tanımı şöyle. K olarak verilen tipini - örneğin bir enum olsun - tüm değerlerinin kullanılmasını mecburi yapar.

type Record<K extends string, T> = {
    [P in K]: T;
}

Örnek

Şöyle yaparız

const SERVICES: Record<string, string> = { 
    doorToDoor: "delivery at door",
    airDelivery: "flying in",
    specialDelivery: "special delivery",
    inStore: "in-store pickup",
};

Örnek

Şöyle yaparız

type CatNames = "miffy" | "boris" | "mordred";

type CatList = Record<CatNames, {age: number}>

const cats:CatList = {
  miffy: { age:99 },
  boris: { age:16 },
  mordred: { age:600 }
}

14 Haziran 2021 Pazartesi

EventSource Sınıfı

Giriş

Tarayıcı tarafında EventSource nesnesi kullanılır. constructor(), close(), onopen (), onerror(), onmessage(), addEventListener() metodları vardır

addEventListener metodu

Örnek
Şöyle yaparız

// Handler for events of type 'eventType' only
eventSource.addEventListener('eventType', (e) => {
   // Do something - event data will be in e.data,
   // message will be of type 'eventType'
});

onerror metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

onmessage metodu

Örnek
Şöyle yaparız

// Declare an EventSource
const eventSource = new EventSource('http://some.url');

// Handler for events without an event type specified
eventSource.onmessage = (e) => {
   // Do something - event data etc will be in e.data
};

Örnek

Şöyle yaparız

<body>
  <script type="application/javascript">
    var subscribeEvents = function() {
      var key = $("#key").val();
      var eventSource = new EventSource('/sse/receive');
      eventSource.onmessage = function(e) {
        var notification = JSON.parse(e.data);
        if(key == notification.key){
          ...
        }
      };
    }
    window.onload = subscribeEvents;
    window.onbeforeunload = function() {
      eventSource.close();
    }
  </script>
</body>

onopen metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onopen = () => {
  console.info("SSE : Connection OPEN");
  ...
};

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};