Forem: Iszyk

Asynchronous Javascript

Iszyk — Thu, 02 Apr 2026 09:21:38 +0000

Asynchronous JavaScript is a way of writing code that allows tasks to run without blocking the rest of your program.

In simple terms: instead of waiting for a code to finish executing like fetching data from an API, JavaScript continues executing other code and comes back to the result later.

We basically have two types of operations in javascript, synchronous and asynchronous. The primary difference is that synchronous operations occur sequentially, requiring one task to finish before the next begins, while asynchronous operations allow multiple tasks to run concurrently without waiting, improving efficiency and responsiveness. Synchronous is "blocking" (wait-for-result), while asynchronous is "non-blocking" (continue-to-other-tasks).

Example of synchronous operation;-


let data = fetchData(); // waits here until done

console.log(data);
console.log("End");

The app pauses until fetchData() finishes.

Example of asynchronous operation;-

console.log("Start");

fetchData().then(data => {
  console.log(data);
});

console.log("End");

plaintext
The Output;-

Start
End
(data comes later)

plaintext

🔹 Common Asynchronous Techniques

Callbacks

A callback is a function passed as an argument to another function, which is then executed (or "called back") inside that outer function to complete a specific task, because functions in JavaScript are First-class Objects, they can be treated like any other variable and passed between functions.
For example,

A Simple Synchronous Callback

function greet(name, callback) {
  console.log("Hello, " + name);
  callback(); // Executing the callback function
}

function sayGoodbye() {
  console.log("Goodbye!");
}

// Pass 'sayGoodbye' as a callback to 'greet'
greet("Alice", sayGoodbye);

plaintext

In this example, the greet function takes a callback as a parameter and executes it immediately after performing its own logic.

Asynchronous Callback
Callbacks are essential for asynchronous programming, where a task needs time to complete (like a timer or data fetch) without blocking the rest of the code.

console.log("Start");

// setTimeout takes an anonymous function as a callback
setTimeout(() => {
  console.log("This appears after 2 seconds");
}, 2000);

console.log("End");

plaintext

Promises

In JavaScript, a Promise is an object representing the eventual completion or failure of an asynchronous operation and its resulting value. It serves as a placeholder for a result that is not yet available, allowing you to handle asynchronous code in a cleaner way than traditional callbacks.
Promises exist in one of three states: pending (ongoing), fulfilled (successful), or rejected (failed). Once fulfilled or rejected, a promise is settled and cannot change state.

You create a Promise using the new Promise() constructor, which takes an executor function. This function runs immediately and receives two callback arguments provided by the JavaScript engine: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  const success = true; 
  if (success) {
    resolve("Operation Successful!"); // Moves state to Fulfilled
  } else {
    reject("Operation Failed.");      // Moves state to Rejected
  }
});

plaintext
To handle the result of a Promise, you attach handlers using these methods:
.then(): Runs when the promise is fulfilled. It can also take a second argument for rejection.
.catch(): A shorthand for handling errors. It runs if the promise is rejected at any point in the chain.
.finally(): Runs after the promise settles, regardless of whether it succeeded or failed. It is often used for cleanup.

const myPromise = new Promise((resolve, reject) => {
  const success = true; 
  if (success) {
    resolve("Operation successful!"); // Marks as fulfilled
  } else {
    reject("Something went wrong.");  // Marks as rejected
  }
});

// Consuming the promise
myPromise
  .then((data) => console.log(data))    // Runs if resolved
  .catch((err) => console.error(err))   // Runs if rejected
  .finally(() => console.log("Done"));  // Always runs

plaintext

Async/Await (Modern & Cleaner)

In JavaScript, async and await are keywords used to write asynchronous code that looks and behaves like synchronous code. They are "syntactic sugar" built on top of JavaScript Promises, making complex asynchronous flows easier to read and maintain.

The Concept

async Keyword: Placed before a function declaration to define an asynchronous function.
An async function always returns a Promise.
If the function returns a value, that value is automatically wrapped in a resolved Promise.

await Keyword: Can only be used inside an async function (or at the top level of a module).
It pauses the execution of the async function until the Promise settles (resolves or rejects).
Once the Promise resolves, it returns the result. If it rejects, it throws an error.
While the function is paused, the JavaScript engine can perform other tasks, making it non-blocking.

async function fetchData() {
  try {
    // Execution pauses here until the fetch promise resolves
    const response = await fetch('https://example.com');

    // Execution pauses again for the .json() promise
    const data = await response.json();

    console.log(data);
  } catch (error) {
    // Standard try/catch handles any errors in the async flow
    console.error("Fetch error:", error);
  }
}

fetchData();

To fetch data from an API using the Fetch API, the async/await pattern is commonly used.

Building a Simple JavaScript Slider: A Code Walkthrough

Iszyk — Tue, 17 Feb 2026 11:40:15 +0000

Image sliders are one of the most widely used UI components in modern web development. From product showcases and portfolio galleries to testimonials and hero banners, sliders allow multiple pieces of content to occupy the same space while keeping the interface clean and interactive. First of all, what is a slider? A slider is a UI component that displays one slide at a time, it allows navigation between slides, it moves content horizontally (most common) or vertically and lastly it uses animation for smooth transitions. A slider typically displays one item at a time and lets users navigate between items using arrows, dots, or swipe gestures.
The images are placed horizontally inside a fixed-width container but only one slide is visible because the container hides the overflow as shown below.
+----------------------------------+
| Viewport Window |
| [ Slide 1 ] |
+----------------------------------+
When we click "Next", we shift the entire row left, likewise when we click "Previous", we shift the entire right. By this way, we allow the next image that was hidden to be displayed while the previous goes hidden.
When we want to build an image slider, we start with the HTML document by creating the div container first with a class of slider, the left and right arrows are enclosed in a button element with a class of slider_btn slider_btn--left in the HTML. Then we create the img element with the images we want, and also with a class of slides as it is shown below.

<div class="slider">
                    <img src="../images/image-product-1.jpg" alt="Slide 1" class="slide">
                    <img src="../images/image-product-2.jpg" alt="Slide 2" class="slide">
                    <img src="../images/image-product-3.jpg" alt="Slide 3" class="slide">
                    <img src="../images/image-product-4.jpg" alt="Slide 4" class="slide">
                    <button class="slider__btn slider__btn--left">&larr;</button>
                    <button class="slider__btn slider__btn--right">&rarr;</button>
            </div>

The next step is the styling which is done in the css file section. The styling shown below is in 375px, it is shown in mobile view. It gives basic layout, the hiding and showing behavior for slides.

.slider{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.slides {
    display: flex;
    width: 100%;
    height: auto;
}

.slider__btn--left {
    left: 5px;
}

.slider__btn--right {
    right: 5px;
}

.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: hsl(26, 100%, 55%);
    font-weight: 700;
    z-index: 10;
}

The last step is implementing the javascript logic. The logic is to make sure that when the button is clicked, it performs a function which is showing the correct slide in this context.

let currentMobileSlide = 0;
const mobileSlides = document.querySelectorAll('.slider .slide');
const mobileLeftBtn = document.querySelector('.slider__btn--left');
const mobileRightBtn = document.querySelector('.slider__btn--right');

unction showMobileSlide(index) {
    if (!mobileSlides || mobileSlides.length === 0) return;
    mobileSlides.forEach((slide, i) => {
        slide.style.display = (i === index) ? 'block' : 'none';
        slide.classList.toggle('active', i === index);
    });
}

if (mobileLeftBtn) {
    mobileLeftBtn.addEventListener('click', () => {
        currentMobileSlide = (currentMobileSlide === 0) ? mobileSlides.length - 1 : currentMobileSlide - 1;
        showMobileSlide(currentMobileSlide);
    });
}

if (mobileRightBtn) {
    mobileRightBtn.addEventListener('click', () => {
        currentMobileSlide = (currentMobileSlide === mobileSlides.length - 1) ? 0 : currentMobileSlide + 1;
        showMobileSlide(currentMobileSlide);
    });
}

// Initialize mobile slider
showMobileSlide(currentMobileSlide);

In conclusion, slider is simple and lightweight, ideal for portfolios or landing pages. It can also be enhanced by adding autoplay, swipe gestures and/or transition effects.

JavaScript and Event listeners

Iszyk — Mon, 22 Dec 2025 11:06:50 +0000

This is my first article and I want to use the medium to talk about event listeners in JavaScript. Event listeners is like the heart of JavaScript, without event listeners, most web pages will be static and non-interactive. Event listeners is one of the most important features that JavaScript uses to create interactivity in a web page.
Let’s work through what event listener is, how they work, their importance and how to use them respectively.
An event is any action that happens in the web page like clicking a button, typing in a given space, dragging and dropping a file or an item, submitting a form, etc …. when these actions occur, JavaScript can detect and react to them.
An event listener is a JavaScript function that waits and listen for an event to occur and then run the functions is that event. The most common way to handle events in JavaScript is through the addEventListener () method.
Types of events in JavaScript are:-

The click event
Change
Input
Mousemove
Keypress like the esc key
Double click and so on Another key point to note in event listener is the event.preventDefault(). The preventDefault() method is most useful in situations where the default behavior of an HTML element interferes with the desired user experience. For example when we are trying to submit an empty form using HTML, the whole page refreshes, but the preventDefault() method is used to stop pages from refreshing. In conclusion, mastering event listeners is essential for any JavaScript developer —and as you continue building projects, you’ll see them everywhere and how important they are in building web pages.

In summary, events are the reason why you find a website or an application interesting to use. Events are the interactivity that occurs on a website when you click a button, press a keyboard, or mouse over code and the state changes when you use the window object to resize your browser; Events are everything and more in JavaScript. Events are the major reason between a static website and a dynamic one. A static website or application is one just as the name implies, static, uneventful and dry. Static websites are just there to display information about a product, organization, expertise etc. A dynamic application on the other hand shows more than just display information. They collect data from users, and allow users to send information about their requests to the organization or give a review about a product; they are dynamic.