Forem: Jangya satapathy

JavaScript - What's the Big Deal with Functional Programming?

Jangya satapathy — Sun, 04 Aug 2024 20:02:54 +0000

JavaScript is a versatile language that supports multiple programming paradigms. Understanding these paradigms can help developers choose the best approach for solving different problems. The major programming paradigms include:

Imperative: Focuses on how to perform tasks (step by step).
Procedural: Like imperative, but with reusable procedures.
Object-Oriented: Organizing code into reusable objects.
Declarative: Focuses on what the program should accomplish.
Functional: Treating computation like mathematical functions (our star of the show today!).

In this article, we'll explore functional programming in JavaScript, a powerful paradigm that emphasizes pure functions, higher-order functions, and immutability.

1. Pure Functions

A pure function is a function where the output value is determined only by its input values, without observable side effects.

Deterministic: For the same input, the function always produces the same output.
No Side Effects: The function does not modify any external state (e.g., global variables, input parameters).

Example:

// Pure function
function add(a, b) {
  return a + b;
}

// Impure function
let count = 0;
function increment() {
  count += 1;
  return count;
}

In the example above, add is a pure function because it always returns the same result for the same inputs and does not modify any external state. In contrast, increment is an impure function because it modifies the external variable count.

2. Higher-Order Functions

A higher-order function is a function that can take other functions as arguments and/or return functions as its result.

Function as Arguments: Can accept functions as input parameters.
Function as Return Values: Can return a function as an output.

Example:

// Higher-order function
function applyOperation(a, b, operation) {
  return operation(a, b);
}

// Function to be used as an argument
function multiply(x, y) {
  return x * y;
}

// Using the higher-order function
const result = applyOperation(5, 3, multiply); // Output: 15

In this example, applyOperation is a higher-order function because it takes a function (operation) as an argument.

3. Immutability

Immutability refers to the concept where data cannot be changed once created. Instead of modifying existing data structures, new ones are created.

No Mutation: Data structures are not altered after creation.
Copy and Modify: Operations create new data structures with the desired changes.

Example:

// Mutable object
let user = { name: 'Alice', age: 25 };
user.age = 26; // Mutation

// Immutable object using Object.assign
const newUser = Object.assign({}, user, { age: 26 });
console.log(newUser); // Output: { name: 'Alice', age: 26 }

In this example, instead of modifying the user object directly, a new object newUser is created with the updated age.

What's the Big Deal with Functional Programming?

Now, imagine you're cooking up some code (bear with me, we're going full metaphor here). Imperative programming is like cooking a meal by giving step-by-step instructions: "Chop the onions, then saute them, then add the garlic..." Functional programming, on the other hand, is like having a team of specialist chefs, each perfecting one part of the dish. You just tell them what you want, and voila! Culinary magic happens.

Ever felt like your code is a tangled mess of for-loops and if-statements? Well, buckle up, because we're about to embark on a magical journey into the world of functional programming (FP) in JavaScript. It's like turning your spaghetti code into a gourmet meal! 🍝➡️🍱

Let's see this kitchen magic in action with some tasty code examples!

To understand the benefits of functional programming, let's compare it with the more traditional imperative style:

Array Transformation: Appetizer

Imperative Style (The old-school kitchen):

const veggies = ['carrot', 'broccoli', 'cauliflower'];
const cookedVeggies = [];
for (let i = 0; i < veggies.length; i++) {
    cookedVeggies.push(`cooked ${veggies[i]}`);
}

Functional Style (The modern kitchen):

const veggies = ['carrot', 'broccoli', 'cauliflower'];
const cookedVeggies = veggies.map(veggie => `cooked ${veggie}`);

See how we turned that clunky for-loop into a sleek one-liner? That's the beauty of FP – it's like having a sous-chef (map) do all the repetitive work for you!

Pancake Stack Reversal: Flipping the Breakfast Tower

Imagine you're a pancake artist, and you've just created a towering stack of pancakes with letters written on each one. Now you want to flip the entire stack to read the message from bottom to top. Let's see how we can do this with code!

Imperative Style (The old-school pancake flipper):

function flipPancakeStack(stack) {
    let flippedStack = '';
    for (let i = stack.length - 1; i >= 0; i--) {
        flippedStack += stack[i];
    }
    return flippedStack;
}

const originalStack = "PANCAKE";
const flippedStack = flipPancakeStack(originalStack);
console.log(flippedStack); // "EKACNAP"

In this approach, we're manually flipping each pancake one by one, from the top of the stack to the bottom. It works, but it's a bit labor-intensive, isn't it? Imagine flipping a tall stack this way!

Functional Style (The smooth pancake-flipping machine):

const flipPancakeStack = str => 
    str.split('').reduce((reversed, char) => char + reversed, '');

const originalStack = "PANCAKE";
const flippedStack = flipPancakeStack(originalStack);
console.log(flippedStack); // "EKACNAP"

Wow! Look at that smooth operator! 😎 We've turned our string into an array of characters, then used the reduce function to flip our pancake in one sweeping motion. Here's what's happening:

split('') turns our string into an array of characters.
reduce goes through each character, adding it to the front of our accumulating result.
We start with an empty string '' and build it up, character by character.

It's like having a fancy pancake-flipping robot that assembles the pancake in reverse as it goes along. No manual flipping required!

The Beauty of Functional Flipping

Notice how our functional approach doesn't use any loops or temporary variables. It's a single expression that flows from left to right. This makes it:

More readable: Once you're used to reduce, this reads almost like English.
Immutable: We're not changing any existing data, just creating new strings.
Shorter: We've reduced our function to a single, powerful line.

Remember, in the kitchen of code, it's not just about getting the job done – it's about style, efficiency, and leaving a clean workspace. Our functional pancake flipper does all three!

Main Course: Curry Transformation Feast

Now, let's spice things up with some Indian cuisine! Imagine we're running a bustling Indian restaurant, and we need to transform our thali menu. We want to adjust spice levels, filter out dishes based on dietary preferences, and format the names for our trendy menu board.

Imperative Style (The frazzled curry chef):

const thaliMenu = [
    { name: 'Butter Chicken', spiceLevel: 2, vegetarian: false, available: true },
    { name: 'Palak Paneer', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Lamb Vindaloo', spiceLevel: 4, vegetarian: false, available: false },
    { name: 'Dal Makhani', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Chicken Tikka Masala', spiceLevel: 3, vegetarian: false, available: true }
];

const veggieSpicyMenu = [];
for (let i = 0; i < thaliMenu.length; i++) {
    if (thaliMenu[i].vegetarian && thaliMenu[i].available) {
        let dish = {
            name: thaliMenu[i].name.toUpperCase().replace(/ /g, '_'),
            spiceLevel: thaliMenu[i].spiceLevel + 1
        };
        if (dish.spiceLevel > 5) dish.spiceLevel = 5;
        veggieSpicyMenu.push(dish);
    }
}

Functional Style (The Michelin-star tandoor master):

const thaliMenu = [
    { name: 'Butter Chicken', spiceLevel: 2, vegetarian: false, available: true },
    { name: 'Palak Paneer', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Lamb Vindaloo', spiceLevel: 4, vegetarian: false, available: false },
    { name: 'Dal Makhani', spiceLevel: 1, vegetarian: true, available: true },
    { name: 'Chicken Tikka Masala', spiceLevel: 3, vegetarian: false, available: true }
];

const veggieSpicyMenu = thaliMenu
    .filter(dish => dish.vegetarian && dish.available)
    .map(dish => ({
        name: dish.name.toUpperCase().replace(/ /g, '_'),
        spiceLevel: Math.min(dish.spiceLevel + 1, 5)
    }));

🍛✨ We've just transformed our thali menu with the grace of a yoga master. The functional approach reads like a recipe from a classic Indian cookbook: "Filter the vegetarian and available dishes, then map them to new objects with formatted names and increased spice levels." It's a recipe for code that's as aromatic and delightful as the dishes it describes!

Dessert: Async Chai Brewing Symphony

For our final course, let's steep ourselves in the art of asynchronous chai brewing. Imagine we're creating a smart chai maker that needs to check tea leaves, heat water, and blend spices, all in perfect harmony.

Imperative Style (The flustered chai wallah):

function brewChai(teaType, callback) {
    checkTeaLeaves(teaType)
        .then(leaves => {
            if (leaves.quality === 'good') {
                heatWater(leaves.requiredTemperature)
                    .then(water => {
                        blendSpices(teaType)
                            .then(spices => {
                                const chai = mixChaiIngredients(leaves, water, spices);
                                callback(null, chai);
                            })
                            .catch(error => callback(error));
                    })
                    .catch(error => callback(error));
            } else {
                callback(new Error('Tea leaves are not of good quality'));
            }
        })
        .catch(error => callback(error));
}

Functional Style (The serene chai master):

const brewChai = teaType =>
    checkTeaLeaves(teaType)
        .then(leaves => 
            leaves.quality === 'good'
                ? Promise.all([
                    Promise.resolve(leaves),
                    heatWater(leaves.requiredTemperature),
                    blendSpices(teaType)
                  ])
                : Promise.reject(new Error('Tea leaves are not of good quality'))
        )
        .then(([leaves, water, spices]) => mixChaiIngredients(leaves, water, spices));

Wah, what a beautiful symphony! 🍵🎶 We've just orchestrated a complex chai brewing process into a smooth, promise-based operation. It's like watching a graceful kathak dance – each step flows seamlessly into the next, creating a perfect blend of flavors and aromas.

The Secret Masala: Why FP is the Chef's Kiss 👨‍🍳💋

Readability: FP code often reads like a story. "Filter this, map that, reduce those." It's like writing a recipe for your future self (or your poor colleague who has to maintain your code).
Predictability: Pure functions always return the same output for a given input. No surprises, no "it worked on my machine" mysteries.
Testability: Since FP emphasizes pure functions, testing becomes a breeze. It's like being able to taste each ingredient separately before combining them.
Conciseness: As we've seen, FP can often express complex operations in just a few lines. Less code means fewer bugs and easier maintenance.
Composition: You can combine simple functions to create complex behaviors, like stacking Lego bricks to build a castle. 🏰

Wrapping Up Our Functional Feast

There you have it, folks! We've transformed our code from a fast-food joint to a Michelin-star restaurant. Functional programming in JavaScript isn't just about writing less code; it's about writing code that's easier to understand, test, and maintain.

Remember, you don't have to go full Gordon Ramsay and remake your entire codebase overnight. Start small – try using map instead of a for-loop, or break a complex function into smaller, pure functions. Before you know it, you'll be whipping up functional programming delicacies that would make any code chef proud!

Now, go forth and func-tionalize! May your code be pure, your functions be high-order, and your bugs be few.

Happy coding, and may the func be with you! 🚀🎉

Frontend challenge: Cricket landing page

Jangya satapathy — Sat, 03 Aug 2024 17:48:12 +0000

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Highlights

Responsive design with 700px max width content
Google map integration with no API key
Theme focused
Form validation
CSS animation cricket ball with scroll to top

Demo

Link - https://frontend-challenge-gilt-chi.vercel.app/
Github - https://github.com/jangya/frontend-challenge

Light Theme

Dark Theme

License

This is MIT license. Anyone can use this code.

Conclusion

Still, some improvements should be addressed in the future.

Replace all email addressed to mailto hrefs
Fix the google map integration with API key
Add social media icons

Thank you dev team for this challenge.

Mastering Responsive Layouts: Achieving Complex Designs with CSS Grid

Jangya satapathy — Sun, 14 Jul 2024 17:58:53 +0000

Creating responsive layouts is a common challenge for web developers. In this blog, we'll explore how to achieve a specific responsive design using different CSS techniques, focusing on why CSS Grid is the best approach for this particular layout.

The Challenge

We need to create a layout where:

Desktop View:

DIV 1 and DIV 3 stack vertically on the left, each taking 50% of the left column.
DIV 2 takes up the full height of the right column.

Mobile View:

All three divs stack vertically.

Why Flexbox Falls Short

Flexbox is excellent for one-dimensional layouts but struggles with complex two-dimensional layouts like ours. Here's why:

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Issues with Flexbox

In this flexbox setup:

DIV 2 cannot automatically adjust its height to match the combined height of DIV 1 and DIV 3.
Flexbox is primarily for one-dimensional layouts (either row or column), not complex two-dimensional arrangements.

The CSS Grid Solution

CSS Grid excels at creating two-dimensional layouts, making it perfect for this challenge.

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Explanation

Grid Layout:

Defines a grid with two columns and two rows.
Positions DIV 1 in the first column and first row.
Positions DIV 2 in the second column, spanning two rows.
Positions DIV 3 in the first column and second row.

Responsive Design:

For screens 768px or narrower, the layout switches to flex, stacking items vertically.

Conclusion

While Flexbox is great for simpler, one-dimensional layouts, CSS Grid provides the power and flexibility needed for more complex, two-dimensional designs. By using CSS Grid, we can easily achieve the desired responsive layout with minimal code and maximum control.

Feel free to adapt this example to suit your own projects, and enjoy the benefits of using CSS Grid for your responsive layouts!

Vaccine session near you

Jangya satapathy — Tue, 04 May 2021 08:16:26 +0000

Github page url - https://jangya.github.io/vaccine-session/
Github Repo - https://github.com/jangya/vaccine-session