This article will take note how many ways we can use to do looping in JavaScript, pros and cons.

Image for post
Image for post
Photo by Mike Kenneally on Unsplash

In this story, I want to share about the many ways to do looping in JavaScript and some notes on the advantages and disadvantages of each way.

  1. Sequential for Loop
  2. Array.prototype.forEach
  3. ES6 for-of statement
  4. ES6 for-in statement
  5. Bonus — Combination Iterators and For Loop

Sequential for Loop

Loops offer a quick and easy way to do something repeatedly.

Image for post
Image for post
a basic looping using sequential for loop

This standard for loop will print out the string Walking east one step five times. The value of step increments each time the loop executes if the step is not larger than four (4).

  • Pros:
    - work with all browsers.
    - we can use break and continue flow control statements. …


A simple technique to filter JavaScript object properties by using replacer as an array or a function.

Image for post
Image for post
Photo by Hanny Naibaho on Unsplash

In this article, I will share about using replacers with JSON.stringify().

  1. Syntax Re-introduction
  2. Using Replacer Argument

Syntax Re-introduction

I think that most of us know the JSON.stringify() first argument. But, only some people know about there is a second argument called a replacer. So I want to re-introduce again the method syntax.

The JSON.stringify() method will do 2 things:

  1. convert the value to a JSON string.
  2. replace values if a replacer function is specified.
JSON.stringify(value[, replacer[, space]])

There are 3 parameters:

  1. value
    The value to convert to a JSON string.
  2. replacer
    A function that alters the behavior of the stringification process.
  3. space
    Add space to output. …


A simple guide to add a version to an interface for an Angular application.

Image for post
Image for post
Photo by Ardalan hamedani on Unsplash

In this article, I will share a simple configuration to import the package.json file into your Angular application.

  1. Import @types/node
  2. Add configuration to
  3. Import package.json to Angular component

The purpose of this is very simple. Sometimes, we want to import package.json to Angular components to get the version number and display in the template.

Here is how I do it.

This package contains type definitions for Node.js. It will help you to recognize node syntax.

You can install it here.

You need node types in the as below.

Image for post
Image for post
add node to

The reason why I add @type/node here is that I want to use the require() syntax to import package.json …


Guide to installing Prettier and adding it to a pre-commit hook for Angular.

Image for post
Image for post
Photo by Thought Catalog on Unsplash

In this article, I want to share how to setup Prettier for Angular to run on a specific folder only and keep your code looking good.

  1. What is Prettier?
  2. Install Prettier
  3. Write a Script
  4. Auto format code with a Pre-commit Hook

Note: I wrote this story based on how I install Prettier for my new Angular 9 project recently.

What is Prettier?

Prettier is an opinionated code formatter with support for many languages.

Here is this story, we will install it to format TypeScript, HTML, SCSS.

The reason why we MUST have this awesome library in your project is that we can make sure our code have only one and unique style guide in the project. …


A simple note that help developer walkthrough Angular Reactive Form

Image for post
Image for post
Photo by Kreshnik Ceka on Unsplash

Have you ever wondered why Angular is so powerful with forms? In this article, I will walk you through this topic to understand why and how Angular is better with forms compared to React or Vuejs.


  1. What Reactive Form is
  2. Three Basic Blocks
  3. FormBuilder
  4. Validators
  5. The Magic

What Reactive Form is

Angular provides 2 ways to work with forms which are template-driven form and reactive form.

While template-driven form is dealing with form by using directives, Reactive form allows Angular developers to handle forms at the Angular template component.

Reactive Form will bring more benefits compared to template-driven from such as:

  • The code will be testable. …


Why we should use functional programming on the frontend to keep codebase readable, maintainable, reusable, and testable.

Image for post
Image for post
Photo by Toa Heftiba on Unsplash

I’m writing this article right after I completed refactoring a terrible and large source code into a simpler one while applying the functional programming paradigm.

I want to share this with front-end developers around the world the idea as to why FP is a good fit for JavaScript and some ideas to write better code that is readable, maintainable, reusable, and testable.


  1. Problem
  2. How Functional Programming Helps
  3. What Functional Programming is

OO makes code understandable by encapsulating moving parts. FP makes code understandable by minimizing moving parts - Michael Feathers


JavaScript is the only programming language for the client-side, and this means it comes with a lot of shared state in order to do animation, handle UI events, spawn asynchronous processes, complicated business logic on the client side, and some extra stuff for server side rendering. …


Basic TypeScript types that developers need to know when working with TypeScript.

Image for post
Image for post
Photo by daan evers on Unsplash

This story is about types in TypeScript which is a typed superset of JavaScript that compiles to plain JavaScript. I will go to more detail to explain some terms below.

  • Primitive Types
  • Enumerations
  • Union Types
  • Literal Types
  • Intersection Types
  • Arrays
  • Tuple Types
  • Dictionary Types
  • Mapped Types
  • Discriminated Unions

You can read the origin document here from the TypeScript homepage or this story about JavaScript types.

For more content like this, check out

Primitive Types

The primitive types in TypeScript are similar to JavaScript

  • string
  • boolean
  • number
  • symbol


  • The undefined type is the value of a variable that has not been assigned a value. …

Git Tips

Simple guide to create SSH keys and add it to your GitHub account

Image for post
Image for post
Photo by Hanny Naibaho on Unsplash

In this article, I will show you how to add an SSH key to a Github account.

  1. Checking existing SSH keys
  2. Generate new SSH key
  3. Add SSH key to Github account setting

You can understand that SSH keys help you to connect to GitHub WITHOUT supplying your username or password at each visit.

So, you do not need to type your username and password in the terminal every time you commit new changes to your Github repository.

For more content like this, check out

Checking existing SSH keys

Open the terminal and type ls -al ~/.ssh or ls ~/.ssh


Understand RxJS terms: observables, operators, observer, subscription, subject, and scheduler, in an Angular application using simple explanations.

Image for post
Image for post
Photo by Hanny Naibaho on Unsplash

In reactive programming, there are 6 popular terms are:

  • observable
  • operators
  • observer
  • subscription
  • subject
  • scheduler

In this story, I will introduce these terms as fundamental knowledge to start learning reactive programming for a newbie.

For more content like this, check out


Observable is a stream or source of data that can arrive over time.

In an Angular application, you can create a data source from 2 main cases:

HTTP request:

import { ajax } from "rxjs/ajax";const URL = "";
const posts$ = ajax.getJSON(URL);

UI events:

import { fromEvent } from 'rxjs';const searchBtn = document.getElementById('search-user');
const searchUser$ = fromEvent(searchBtn…


Learn Angular’s NgModule

Image for post
Image for post
Photo by Sushant Vohra on Unsplash

In this article, I will share my understanding of Angular Modules by:

  1. What is NgModule?
  2. ngModule code example
  3. NgModule scope in Angular
  4. Popular Angular modules
  5. Using a Common Module for Sharing
  6. Lazy-loaded Module for Load Times

For more content like this, check out

What is NgModule?

A module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application.

You can understand that an ngModule is a class that allows us to define private and public methods. …


Senior JavaScript Engineering (React, Vuejs, Angular, Nodejs) & Owner of

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store