DEV Community: Esto Triramdani N

You Can Be Fast, But Can You Really Understand It?

Esto Triramdani N — Mon, 07 Jul 2025 12:31:13 +0000

Back when I was in school, especially during math class, I realized something small that turned out to have a big impact:

Sometimes, even if my answer was wrong, I still got some points.

The reason was simple: the process I followed was considered correct.

Maybe not all the way to the end, but the logic and steps made sense.

I didn’t think much of it at the time. But after stepping into the real world — especially as a developer — I began to understand:

The process is everything.

Instinct Is Good, But You Still Need the Process

Imagine these two problems:

Example A:

10 + a = 12
What is the value of a?

Easy answer. Even a middle schooler would say:

a = 2

Now try this one:

Example B:

5c − 7 = 2c + 8a
Find the values of c and a.

You can't solve this just by "instinct." It requires understanding concepts, algebraic reasoning, and a step-by-step process.

In 10 + a = 12 case, you use your instinct to solve that. But in 5c − 7 = 2c + 8a , you need more “tools” to solve.

And at this point, we realize:

Strong instincts are built from trained thinking processes.

In Programming, We Often Chase Results First

In the programming world, there's a habit most of us have done (or still do):

We go straight for the answer.

We face an error. We're confused by the syntax. We don’t know how to connect the API. And our first move is:

🔍 Open Google
🔍 Type the question into StackOverflow
🔍 Or now, just ask ChatGPT

An answer appears. Problem solved. We move on to the next task.

But one thing remains unresolved: our thought process.

What Are We Missing?

When we only focus on the result, we might:

Not understand why the solution works
Not know alternative solutions
Miss our own logical errors
Fail to build intuition for similar future problems

A simple example:

Let’s say you want to remove an item from an array in JavaScript. You search and copy-paste:

array.splice(index, 1);

Problem solved? Sure.

But do you know:

The difference between .splice() and .slice()?
What happens if index is invalid?
Does this mutate the original array or return a new one?

Fast Isn’t Always Effective

Being quick doesn’t mean you're skilled.

Finishing a task doesn’t mean you've understood it.

What often gets forgotten:

Programming is about problem solving, not just syntax.

And the ability to solve problems comes from thinking, not just answers.

So, What Can You Train?

When you hit a problem, train yourself to:

Analyze first: Understand the context of the error or task.
Form a hypothesis: Try to figure out your own solution, even if you're unsure.
Compare with the actual solution: Does it match? What's different?
Understand the logic behind the solution: Not just the what, but the why.

With this process, you're not just solving one task. You're building a thinking framework that you can use again and again.

🧠 Learning to code is learning to think.

Being quick is good. But being able to understand and repeat it — that's far more valuable.

Not Just in Coding

We often think that only technical fields require strong processes.

But actually...

🍻 Cooking

Anyone can cook instant noodles. But making rendang?

If you just throw in the ingredients and turn the heat up, it won’t end well.

Recipe + step order + technique = process.

📝 Writing

Many people think writing is about talent. But great writers spend more time on outlining and editing than on the first sentence.

🎸 Learning Music

Someone who plays guitar smoothly isn’t just memorizing songs. Their fingers have gone through hours of fingering drills and chord transitions.

Why Do We Often Skip the Process?

Simple answer: because process isn’t instant.

Results can be copied. Processes must be practiced. And in today’s fast-paced world, the process feels like an "extra burden."

But...

Inside the process lies learning, understanding, and character building.

Closing: Train Your Process, and the Results Will Follow

If you're learning something new — whether it's programming, design, public speaking, or even something personal like communication — don’t rush toward the outcome.

Ask yourself:

Have I recognized the pattern?
Do I know the reason behind each step?
Can I do this again in a different context?

The process might be tiring. But like building muscle, today’s pain becomes tomorrow’s strength.

So don’t underestimate those small, slow steps.

That’s where real growth happens.

Photo by toine G on Unsplash

Leverage Your Code Editor: Store Constants Into An Object

Esto Triramdani N — Thu, 27 Feb 2025 13:23:43 +0000

As developer, I believe you will “playing around” with the code editor. It is not a wise way if you code a complete project using only Notepad (without ++) while there are a bunch of code editors free to use. Notepad is a great tool for you to do some adjustment code like .env file or similar.

A modern code editor has their own intelisense (or code completion). It means, code editor helps you to complete your writing by only typing some characters (or pressing CTRL/Cmd+Space). Heads up to VS Code documentation to find out more about intellisense. The explanation there is also applied to other code editors, like JetBrains family.

IntelliSense Come To Solve This Problem

In every aspect in this world, remembering something is a hard thing but we cannot run away from it. From elementary school until today, we have to memorized something. And we often forget about that.

To tackle this obstacle, we often memorizing the pattern instead of memorizing the whole thing. It is also applied in coding. We can’t memorized every single thing in our code, but we can made a pattern on our work. Creating an organized directory structure is also a way to creating a pattern to help us remembering our work.

Remembering constants in our codebase is not just tedious—it’s also a recipe for errors. Imagine you have a hardcoded API URL spread across multiple files, and one day, the API provider changes its endpoint. Without a centralized constant, you’ll have to manually search and update every occurrence. What if you miss one? This could lead to bugs, failed requests, or even security vulnerabilities if deprecated endpoints expose sensitive data.

In this article, constant is a hard-coded variable that won’t change (read only), not stored in database or something (or anything that can be assigned in an JavaScript object, including a function). At this point, we have the same definition about constant.

In this article, I will demonstrate how I manage constants in VS Code and reduced our mind to memorizing something (that might have no point if we memorizing it). And the language scope that we are going to use is JavaScript/TypeScript.

Benefit:

More organized constant. Constant is playing vital role, and the most important thing we can ensure the constant (its value) is typo-free so it can avoid error.
Easy to remember. You only need to remember one keyword [or some keywords if you grouped constant into some groups]. Once you import the object, VS Code will suggest every single thing inside the object.

Start Working!

Let's break down each level step by step into smaller steps and see how we can implement it effectively.

Level 1: Centralizing Constants in a Single File

At the basic level, you should start by creating a dedicated file to store all your constants. This helps to maintain consistency and avoid duplication.

Create a constants file

Inside your project, create a file named constants.ts (or .js if you're not using TypeScript).

Define and export constants

// constants.ts
export const API_URL = "https://api.example.com";
export const APP_NAME = "My Awesome App";
export const MAX_RETRY_ATTEMPTS = 3;

Import and use the constants

Now, in any module that needs these constants, simply import them:

import { API_URL, APP_NAME } from "./constants";

console.log(`Welcome to ${APP_NAME}. Fetching data from ${API_URL}`);

Level 2: Leveraging IntelliSense by Grouping Constants into an Object

Instead of exporting individual constants, we can organize them into an object. This allows IntelliSense to suggest all available constants once we reference the object.

Refactor constants into an object

Modify your constants.ts file:

export const CONSTANTS = {
  API_URL: "https://api.example.com",
  APP_NAME: "My Awesome App",
  MAX_RETRY_ATTEMPTS: 3,
} as const; // `as const` ensures the object values remain readonly.

Import the object and access constants with IntelliSense

Now, when you import CONSTANTS, VS Code will provide suggestions for available properties.

import { CONSTANTS } from "./constants";

console.log(`Welcome to ${CONSTANTS.APP_NAME}. Fetching data from ${CONSTANTS.API_URL}`);

Add documentation to enhance readability

Documenting your constants makes it easier for developers to understand their purpose.

export const CONSTANTS = {
  /** The base URL for API requests */
  API_URL: "https://api.example.com",

  /** The application name displayed in UI */
  APP_NAME: "My Awesome App",

  /** The maximum number of retry attempts for failed requests */
  MAX_RETRY_ATTEMPTS: 3,
} as const;

Now, whenever you hover over the properties in VS Code, you'll see helpful tooltips explaining what each constant does. This image below is an example if you implement this level.

Level 3: Scaling Up by Organizing Constants into Modules

As your application grows, managing all constants in a single file becomes inefficient. You can group related constants into separate files and import them into an index.ts file for better organization.

Create separate files for related constants

// constants/api.ts
export const API = {
  BASE_URL: "https://api.example.com",
  TIMEOUT: 5000,
} as const;

// constants/app.ts
export const APP = {
  NAME: "My Awesome App",
  VERSION: "1.0.0",
} as const;

// constants/settings.ts
export const SETTINGS = {
  MAX_RETRY_ATTEMPTS: 3,
  ENABLE_LOGGING: true,
} as const;

Create an index file to simplify imports

// constants/index.ts
export { API } from "./api";
export { APP } from "./app";
export { SETTINGS } from "./settings";

Import constants using IntelliSense

Now, in your main code, you can simply import everything from constants and enjoy IntelliSense support.

import { API, APP, SETTINGS } from "./constants";

console.log(`App Name: ${APP.NAME}`);
console.log(`API Base URL: ${API.BASE_URL}`);
console.log(`Max Retry Attempts: ${SETTINGS.MAX_RETRY_ATTEMPTS}`);

This approach keeps constants modular, easy to maintain, and helps developers find the necessary values quickly. Like level 2, this level emphasizes the purpose-driven segregation of constants.

Conclusion

By following these levels, you can improve the way you manage constants in JavaScript/TypeScript:

✅ Level 1: Keep all constants in a dedicated file to avoid duplication.

✅ Level 2: Store constants inside an object for better IntelliSense suggestions.

✅ Level 3: Organize constants into separate files and import them through an index.ts file for scalability.

By leveraging the power of IntelliSense, you reduce the cognitive load of memorizing constants, making your development process smoother and error-free. Happy coding!

BONUS

This section's placement is somewhat arbitrary. I added it after finishing the article and struggled to find a more suitable location 😬.

Common Mistakes 1: Using Magic Numbers/String Values Directly

Instead of writing this code:

if (user.role === "admin") { ... } // ❌ Hardcoded string

We can create this constant:

export const ROLES = {
  ADMIN: "admin",
  USER: "user",
} as const;

Then refactor the code:

if (user.role === ROLES.admin) { ... } // ❌ Hardcoded string

Common Mistakes 2: Not Using as `const` in TypeScript

Without as const, object properties could be unintentionally reassigned. Here is the solution ✅:

export const APP = { NAME: "MyApp" } as const;

Union and Intersection Types in TypeScript

Esto Triramdani N — Sun, 05 Jan 2025 16:14:02 +0000

Union and Intersection Types in TypeScript

Introduction

TypeScript, a strongly-typed superset of JavaScript, brings robust type-checking capabilities to JavaScript development. These capabilities help developers catch errors early and write more maintainable code. Among the powerful features of TypeScript are Union Types and Intersection Types. These types provide flexibility and precision in defining complex types, which can be crucial for large-scale applications.

The goal of this article is to explain the concepts of union and intersection types in TypeScript. We will dive into an example to illustrate how these types can be combined to create a more expressive type definition. By the end of this article, you should have a solid understanding of how to use these types effectively in your TypeScript projects.

Okay, without further ado, let’s dive in.

Case Study

I have this meme below.

https://www.picturepunches.com/meme/317642

There’s an unspoken rule in the art of conversation: never ask a woman her age and never ask a man his salary. But let’s raise the stakes and make this more intriguing. Imagine a third rule: never ask a coder their unfinished project count. Some secrets are best left in the shadows—because whether it’s age, earnings, or abandoned side projects, the answers often come with stories you may not be ready to hear.

OK, let’s focus on the first two items: man and woman.

	Dont ask 1	Dont ask 2	Should ask 1	Should ask 2
Man	Salary	Relationship	Address	Full name
Woman	Age	Weight	Address	Full name

In TypeScript we could made the type like this:

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};

The problem here if we create an object based on the Person type

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};

Both two objects above will not showing any type error.

Intersection and Union types come to solve this problem.

Union Types

A Union Type allows a variable to be one of several types. In our example:

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}

This part of the type definition states that a Person can be one of two shapes:

An object with gender: 'man' and dontAsk being either 'salary' or 'relationship'.
An object with gender: 'woman' and dontAsk being either 'weight' or 'age'.

This flexibility is useful when dealing with data that can take multiple forms.

Intersection Types

An Intersection Type combines multiple types into one. A variable of an intersection type must satisfy all the constituent types. In our example:

& {
    address?: string,
    fullName: string
}

This part of the type definition states that a Person must have:

An optional address property of type string.
A required fullName property of type string.

Combining Union and Intersection Types

The complete Person type combines both union and intersection types:

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};

A Person object must match one of the union types and must also include the properties defined in the intersection type. Here are some valid Person objects:

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};

If define person1 don’t ask to age it shows error. In Visual Studio Code which has built in support for TypeScript, it will shows error when we are hovering the object.

Summary

In TypeScript, Union Types allow a variable to be one of several types, while Intersection Types combine multiple types into one. By understanding and using these types, you can write more flexible and robust TypeScript code. The Person type example illustrates how to combine these concepts to create complex and precise type definitions.

Using TypeScript effectively can significantly improve code maintainability. When a new developer joins your team, clear type definitions reduce the need for lengthy explanations. Instead of deciphering code, the team can focus on discussing the project's flow and goals, boosting productivity and collaboration.

Don't Just Copy and Paste Code, Make It Reusable

Esto Triramdani N — Mon, 25 Nov 2024 13:51:51 +0000

Background

It’s perfectly normal to copy and paste code from the internet. In fact, most coding issues we face—whether bugs, styling challenges, or the need for a sleek page loader in plain CSS—often have solutions available online. We search for answers, and the internet offers a wealth of code snippets and guides. Of course, it’s essential to filter and verify these solutions to ensure they’re a good fit for our needs.

When writing code, it’s easy to get swept up in the convenience of copying and pasting code. Over time, though, we may start to notice that our code has become messy and hard to maintain. The pattern often goes like this:

We encounter a problem.
Search for a solution online.
Copy the code we find.
Paste it into our codebase.
Move on.

As mentioned earlier, there's a good chance we’ll eventually face the same issues again. This cycle repeats, and we end up revisiting and re-copying solutions without truly integrating or understanding them (the challenges others faced have now become our own 🤣). So, we return to Step 1: Encounter a problem—and the cycle continues.

Solution

To avoid this hell circle, DRY principle might be the solution. The DRY principle, which stands for "Don't Repeat Yourself", is a software development principle that aims to reduce code duplication and repetitive patterns. Applying DRY principle to your code will replace repetitive code and logic with modular and referenceable code. Or in this article, to avoid you back again from step 5 to step 1 for the same problem.

Let’s take a look these examples:

Using Functions to Avoid Repetition

Function come to solve repetitive code. It is defintely wrong if you write a function but you still left repetitive code in your codebase.

If you find similar blocks of logic being repeated, refactor them into a reusable function.

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

Create a general-purpose function for area calculation.

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

Creating Utility Functions

I am still talking about function: creating an utility function is one of the way to achieve clean code. Example, if multiple parts of your code convert a string to title case, extract that into a utility function.

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

Consider to create a function to handle this problem.

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

Constants for Common Values

How many times you call an API which has the same endpoint? I believe, it is more than once.

If certain values like URLs or configuration options are used across your app, define them once as constants.

// before 

function getApiEndpoint() {
    return "https://api.example.com";
}

function fetchData() {
    return fetch("https://api.example.com/data");
}

What if the backend changed the URL? If you are still write this code like the example above, you will change all the codes which contains the URL. It is a wise if you move the endpoint to a constant that you can change it once and all the API call still works because they follow the constant you have made.

// after

const API_ENDPOINT = "https://api.example.com";

function getApiEndpoint() {
    return API_ENDPOINT;
}

function fetchData() {
    return fetch(`${API_ENDPOINT}/data`);
}

Got another idea?

Those examples are just a little to describe how important to keep our code to point and not keeping the repetitive code over and over again. Feel free to share in the comment box below your thought.

Summary

The DRY (Don't Repeat Yourself) principle is a fundamental coding practice that encourages developers to avoid redundancy by reusing code wherever possible. Applying DRY principles can significantly enhance maintainability, readability, and efficiency across a codebase, as it minimizes the number of places where changes need to be made when updates are required. The DRY principle is about creating reusable, maintainable code. By leveraging TypeScript's capabilities—like functions, generics, interfaces, and enums—you can keep your codebase clean and reduce redundancy.

Spread Operator

Esto Triramdani N — Mon, 21 Nov 2022 14:47:13 +0000

Spread Operator

Let’s go to the use cases!

Spreading an Array

In a case, we want duplicate an array. We can’t copy just like this.

const arr = [1, 4, 2];
const arr2 = arr;

If we do that, when we manipulate arr the arr2 will be affected.

arr.push(100);
console.log(arr); // [1, 4, 2, 100]
console.log(arr2); // [1, 4, 2, 100]

Output what we want is

console.log(arr); // [1, 4, 2, 100]
console.log(arr2); // [1, 4, 2] => we don't even touch `arr2` so it should be the same

This case happens because we pass by reference to arr2. Simply, we don’t really have arr2. We may call arr2 just an alias of arr.

To completely copy arr to arr2 we can use something called spread operator.

Spread operator is three dots ... operator.

Before we copy arr, if we do console.log(...arr) the output will be

1 4 2

It means we now have 3 values that is not belong to any variables or constants. So we can do this to copy an array.

const arr = [1, 4, 2];
const arr2 = [ ...arr];
// arr = [1, 4, 2]

If we push stuff to arr, arr2 will stay the same.

arr.push(50);
console.log(arr); // [1, 4, 2, 50]
console.log(arr2); // [1, 4, 2]

Spread operator can be used to combine multiple arrays.

const newArr = [...arr1, ...arr2, ...arr3, ...arr4];

Spreading an Object

Spread operator can also implemented to an object.

Let’s say we have two objects.

const personProfile = {
    name: 'Esto',
    age: 22,
}; 
const personHobbies = {
    indoor: ['Reading', 'Sleeping', 'Coding'],
    outdoor: ['Football', 'Running']
}

We can combine two object with this code.

const person = { ...personProfile, ...personHobbies };

Or we can copy personProfile to personProfileBackup.

const personProfileBackup = { ...personProfile };

Conclusion

The best case to copy an object or an array is when our app have “Customize” feature.

When user customize their theme, that customized configuration stored in a new object without replacing the old one.

If user click reset, we can replace modified object with the old one. Of course, we will find other use cases if we started building real world project!

See you!

Callback in JavaScript

Esto Triramdani N — Mon, 14 Nov 2022 06:24:18 +0000

Callback

I like to keep my definition of a callback straightforward: it’s simply a function passed as an argument to another function (or as an object property, if you’re using an object as a parameter). Down the line, that function will be called and executed within the code it was passed into. Let’s walk through an example to make it clear.

If you still don't get it, may this example could make you understand.

const multiply = ({ numb1, numb2 }) => {
    return numb1 * numb2;
};

const sum = ({ numb1, numb2 }) => {
    return numb1 + numb2;
};

const doWith2Numbers = ({ cb, numb1, numb2 }) => {
    return cb({ numb1, numb2 });
}

doWith2Numbers({ cb: multiply, numb1: 2, numb2: 3 }) // 6
doWith2Numbers({ cb: sum, numb1: 2, numb2: 3 }) // 5

We have two functions that can multiply and sum of two numbers. So far, you might think, “We can just simply call that function like this.”

multiply({ numb1: 2, numb2: 3 })
sum({ numb1: 2, numb2: 3 })

This syntax works too, but it doesn’t give us a reusable blueprint. Here’s a simple case: I want to skip any action if numb2 is 2, 3, or 4.

Rather than editing every function we’ve already created (like multiply and sum), we can just update doWith2Numbers.

const doWith2Numbers = ({ cb, numb1, numb2 }) => {
    const nothingNumbers = [2, 3, 4];
    if (nothingNumbers.includes(num2)) return undefined;
    // other code
}

Another example: we are creator of a package but we don’t really know what our package will do. We only know that function receives arguments. We will give the rest to other developer to describe the functionality. We will work with callback often when working with web framework, Express.js.

See you!

Object desctructuring

Esto Triramdani N — Mon, 07 Nov 2022 01:38:57 +0000

Object Destructuring

Object desctructuring is similar with array desctruturing concept, but you can't named the object name as you wish. Instead, you can create alias for it.

Case 1: Destruct an `Object` Stored in `Variable/Constant`

Let's say, we have function that returns an object of detail user that fetched from API.

const getUser = async (username) => {
    const user = await fetch(`/user/${username}`);
    const userJson = user.json();
    return userJson;
};

We call that above function and store the returned object .

const main = async () => {
    const user = await getUser('estotriramdani');
    console.log(user.fullname);
    console.log(user.nickname);
};

Now, let's destruct that constant.

const main = async () => {
    const { fullname, nickname } = await getUser('estotriramdani');
    console.log(fullname);
    console.log(nickname);
};

Make sure fullname and nickname are the same with the original object (before destructuring).
If we destruct like this

const { name, nickname } = await getUser('estotriramdani');

name will undefined since the returned object has no name property.
So, if we want result like that (name property), we can give that property an alias by placed double colons : after fullname followed by alias name we want.

const { fullname: name, nickname } = await getUser('estotriramdani');

alias is usefull when we get user with the same function (we only change the username params).

const {
    fullname: fullnameUser1,
    nickname: nicknameUser1
} = await getUser('estotriramdani');
const {
    fullname: fullnameUser2,
    nickname: nicknameUser2
} = await getUser('john_doe');

Code above will avoid naming conflicts.

Case 2: Destruct `Function` Parameter

This topic will extremely usefull in React. Because props (we will learn it later in React section) is an object.
We have function that receive an object.

const createHouse = (params) => {
    const { name, length } = params;
    // do other stuffs
};

Code above is work just fine, but we can simplify it again.
The following code is equivalent with code that we've just wrote above.

const createHouse = ({ name, length }) => {
    // do others stuffs
};

As we can see, we can destruct the object right in function params. By doing this way, we can eliminated a line.
Create a function with this kind of parameter also can be called as named parameter. We can put name or length anywhere.

createHouse({ name: 'Little House', length: 50 }); // it is valid
createHouse({ length: 50, name: 'Little House' }); // it is also valid!

See you on the next post!

Array Destructuring

Esto Triramdani N — Fri, 28 Oct 2022 10:00:00 +0000

Introduction

I really want to create a written programming tutorial, but I don't know where to start since programming is a big playground. Yes, I can start anywhere but this is also being my problem: I can't describe any and where. The idea is just spinning around in my head for months 🤕.
I finally decided to start by defined my goal: building MERN (MongoDB, Express.js, React.js, and Node.js) stack app. It made me easier to create tutorial structure later.

This tutorial covers the following lessons:

JavaScript Refreshment for Building React App
React.js as frontend library/framework
Express.js as backend library/framework
MongoDB as database to store our data
Integrating Express.js and MongoDB

We will learn those things one by one. So this tutorial, we are not going to build a really MERN app. We only want to learn everything we need to build a MERN app. Later after we learn together in this tutorial, we are ready to build MERN app without any fundamental knowledge issues.

If you have any thoughts, feel free to catch me at

📧Email
📱LinkedIn

Array Destructuring

Desctruturing is an important concept we should know before starts building app with React.
For example, we create a function that returns an array.

const getRandomTwoNumbers = () => {
    const numbers = [Math.random(), Math.random()];
    return numbers;
};

We can call this function and get each items like this:

const numbs = getRandomTwoNumbers();
const numberOne = numbs[0];
const numberTwo = numbs[1];
console.log(numberOne, numberTwo);

But there is a short way to do that.

const [numberOne, numberTwo] = getRandomTwoNumbers();
console.log(numberOne, numberTwo);

It is more simple, right?
You can treat numberOne and numberTwo as constant: you can name it anything you want.

So, let's do it in 👨🏻‍💻 React

You might have seen or familiar with this code snippet.

const [name, setName] = useState('Esto');

We can also wrote code above like this.

const nameState = useState('Esto');
const name = nameState[0];
const setName = nameState[1];

... because useState returns an array that has two lengths (it's guaranted by React).
Array destructuring syntax made our code simplier and it can save 2 lines.

Keep code 💻 and see you in the next post! 🍻

Avoid Else Statement In Your Function To Write a Clean Code

Esto Triramdani N — Sat, 16 Jul 2022 09:32:31 +0000

When I took programming class in college, one of fundamental topic is control flow, including if - else if - else statement.

if (a === 'one') {
  // do something here
} else if (a === 'two'){
  // do something here
} else {
  // I said, do something!!
}

My lecturer taught me in a good way how to write and implement if statement. But I just remembered, I learn if statement subject before I learn about function.

It is okay if we use else outside function or in top level code, moreover we are still need else.

const sayHi = true;
if (sayHi) {
  console.log("Hi!")
} else {
  console.log("....")
}

In a function that returned something, in most cases we don't even need the else statment. Here is the example.

function func(isRich: boolean){
  if (isRich) {
    return "I am rich!";
  } else {
    return "Can you give me a money, please?";
  }
}

Since function will stop executing lines of code after return is written, we can just remove else statement.

function func(isRich: boolean){
  if (isRich) {
    return "I am rich!";
  }
  // intepreter, compiler, or anything won't execute codes bellow
  return "Can you give me a money, please?";
}

When we need to check another condition that has been specified we might use else if statement and write the logic inside the block.

function grade(score: number) {
  if (score >= 90) {
    return 'A';
  } else if (score >= 80) {
    return 'B';
  } else if (score >= 70) {
    return 'C';
  } else if (score >= 60) {
    return 'D';
  } else {
    return 'F';
  }
};

Or we can write it with switch-case.

function grade(score: number){
  switch (true) {
    case score >= 90:
      return 'A';
    case score >= 80:
      return 'B';
    case score >= 70:
      return 'C';
    case score >= 60:
      return 'D';
    default:
      return 'F';
  }
};

Two examples above work fine. But I prefer this style.

function grade(score: number){
  if (score >= 90) return 'A';
  if (score >= 80) return 'B';
  if (score >= 70) return 'C';
  if (score >= 60) return 'D';
  return 'F';
};

Thank you for reading!

Build a REST API of History of Conflicts Using Express.js

Esto Triramdani N — Mon, 07 Mar 2022 09:54:40 +0000

Hi everyone! Welcome to my really first post in DEV.
A week ago, I found an interesting dataset that contains list of conflicts in Kaggle (History of Conflicts). That dataset shows conflicts happened in the world. It contains 900+ rows. Whether the data is valid or not, we can use this dataset to learn.
I have transformed the data to JSON. You can just copy here. I splitted the data every 20 item into a new array. So the form of JSON I provided will be an array of array of object.
If you want to see the final result [which has been integrate with frontend app], you can visit this link. Of course we will deploy our app after the app is completely built.

Initialize the Node.js project, then install the dependencies: express, cors, and dotenv. I also install nodemon as devDependencies.

mkdir history-of-conflicts-backend
cd history-of-conflicts-backend
npm init -y
npm i express cors dotenv --save
npm i nodemon --save-dev

In package.json, edit the scripts.

"scripts": {
   "dev": "nodemon index.js",
   "start": "node index.js"
 },

Create index.js on project root directory as we defined that ./index.js is our entry point.
Create an express server in ./index.js and make sure our web server is working fine.

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 4000;

app.use(cors());

app.get('/', (req, res) => {
  res.json({
    message: 'Hello',
  });
});

app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

Run npm run dev and hit http://localhost:4000 in Postman (or something like that).
Did you find json response with "message": "Hello"? If you did, let's move to the next step!
Create a .json file called transformed-data.json and place it under /data directory.

data
  - transformed-data.json

Now we need a controller to serve sections of part. 'part' that I mean is a group of rows. We have 47 parts in case. First 46 parts has 20 rows, while the last parts has 6 rows.
So we have to create a pagination-like endpoint. We call the group of parts as section.

Create a file ./controllers/index.js. At the top of line, import transformed-data.json.

const transformedData = require('../data/transformed-data.json');

Since I didn't provide the transformed data (the file that has been splitted parts into sections), we need to do it manually. To do that, create function called startEndIndexFinder under the line which transformed-data.json is imported.

function startEndIndexFinder({ currentSection, itemsPerSection }) {
  const section = +currentSection < 0 ? 1 : +currentSection;
  const startIndex = (section - 1) * itemsPerSection;
  const endIndex = section * itemsPerSection - 1;
  return { section, startIndex, endIndex };
}

The function receive object as parameter which contains currentSection and itemsPerSection. Make sure currentSection is greater than 0. Then find the first index and the last index of current section. Finally return an object which contains section, start index, and end index.

Use startEndIndexFinder to our /parts controller.

const partsController = async (req, res) => {
  const currentSection = req.query.section || '1';
  const itemsPerSection =
    +req.query.itemsPerSection || transformedData.length + 1;
  const { endIndex, section, startIndex } = startEndIndexFinder({
    currentSection,
    itemsPerSection,
  });
  const maxSection = Math.ceil(transformedData.length / itemsPerSection);
  if (+currentSection > maxSection) {
    res.status(404).json({
      status: false,
      message: 'No more sections',
      data: {
        itemsPerSection,
        maxSection,
      },
    });
  }
  const data = transformedData
    .map((item, index) => {
      if (index >= startIndex && index <= endIndex) {
        return {
          id: index + 1,
          name: `Part ${index + 1}`,
          from: item[0].Date,
          to: item[item.length - 1].Date,
          link: `/api/parts/${index + 1}`,
        };
      }
    })
    .filter((item) => item);
  res.status(200).json({
    status: true,
    message: 'Sections of parts were successfully fetched',
    data: {
      itemsPerSection,
      section,
      startIndex,
      endIndex,
      maxSection,
      data,
    },
  });
};

module.exports = { partsController };

We received current section and itemsPerSection from request. ItemsPerSection is being validated at this controller because there are possibilities client sends a different amount of itemsPerSection in every requests. So we need to execute this const maxSection = Math.ceil(transformedData.length / itemsPerSection);

Of course you can write a cleaner code than mine :)

After our first controller created, let's use it.

const { partsController } = require('./controllers');
// ...
app.get('/api/parts', partsController);
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

Test. Is it working? If yes, let's jump to another step.

The second controller is to serve the detail of a part. It is more easier than the previous one.

// ...
const partController = async (req, res) => {
  const { params } = req;
  let part = params.part ? +params.part - 1 : 1;
  part = part < 0 ? 0 : part;
  part = part > transformedData.length - 1 ? transformedData.length - 1 : part;
  res.status(200).json({
    status: true,
    message: 'List of parts was successfully fetched',
    data: transformedData[part],
  });
};
module.exports = { partsController, partController };

Then use it in ./index.js.

const { partsController, partController } = require('./controllers');
// ...
app.get('/api/parts/:part', partController);

Test it again. If you successful, our API is already done.

By far, our folder structure looks like this.

/controllers
  - index.js
/data
  - transformed-data.json
/node_modules
  ........
index.js
package.json

Next step, we will deploy this app to Vercel.

GitHub repository
See you!

DEV Community: Esto Triramdani N

You Can Be Fast, But Can You Really Understand It?

Instinct Is Good, But You Still Need the Process

In Programming, We Often Chase Results First

What Are We Missing?

Fast Isn’t Always Effective

So, What Can You Train?

Not Just in Coding

🍻 Cooking

📝 Writing

🎸 Learning Music

Why Do We Often Skip the Process?

Closing: Train Your Process, and the Results Will Follow

Leverage Your Code Editor: Store Constants Into An Object

IntelliSense Come To Solve This Problem

Start Working!

Level 1: Centralizing Constants in a Single File

Level 2: Leveraging IntelliSense by Grouping Constants into an Object

Level 3: Scaling Up by Organizing Constants into Modules

Conclusion

BONUS

Common Mistakes 1: Using Magic Numbers/String Values Directly

Common Mistakes 2: Not Using as const in TypeScript

Union and Intersection Types in TypeScript

Union and Intersection Types in TypeScript

Introduction

Case Study

Union Types

Intersection Types

Combining Union and Intersection Types

Summary

Don't Just Copy and Paste Code, Make It Reusable

Background

Solution

Using Functions to Avoid Repetition

Creating Utility Functions

Constants for Common Values

Got another idea?

Summary

Spread Operator

Spread Operator

Spreading an Array

Spreading an Object

Conclusion

Callback in JavaScript

Callback

Object desctructuring

Object Destructuring

Case 1: Destruct an Object Stored in Variable/Constant

Case 2: Destruct Function Parameter

Array Destructuring

Introduction

Array Destructuring

Avoid Else Statement In Your Function To Write a Clean Code

Build a REST API of History of Conflicts Using Express.js

Common Mistakes 2: Not Using as `const` in TypeScript

Case 1: Destruct an `Object` Stored in `Variable/Constant`

Case 2: Destruct `Function` Parameter