Object-orient or functional programming?

How about object-oriented vs functional programming?
If you guessed object-oriented is better you’re completely wrong :)
And if you guessed functional programming you’re way off base ;)

Debating programming paradigms at this level is like debating art.
There is always more than one way to solve a problem especially in Javascript and it’s great to debate these things but there are no absolutes.

There is going to be a trade-off for every decision that you make.
Let’s start by taking a look at some functional typescript code.

Pure Functions

The most important concept in functional programming is the…


In this article, I am going to talk about Javascript Pro Tips. Please learn how to write solid modern Javascript and avoid bad code from the olden days.

Debugging

Actually it’s about console logging stuff.

How do you use console log? There are good ways and bad ways to console log. Imagine you have three different objects. Each one assigned to its own variable like this.

const foo = { name: 'tom', age: 30, nervous: false } 
const bar = { name: 'dick', age: 40, nervous: false }
const baz = { name: 'harry', age:50, nervous: false }

The obvious way…


To make code easy to read and maintain, you should follow some best practices.

In this article, I am going to talk about some best practices you should follow to make everyone’s lives easier.

Group Function Overloads Together

You can overload functions.

This means you can have multiple function signatures for a function, which TypeScript can check for.

To make your lives easier, you should group them together so that it’s easier to read:

function foo(a: string, b: string): string;

function foo(a: number, b: number): number;

function foo(a: any, b: any): any {
console.log(a, b);
}

Ordering Class Members

You may consider ordering class members to make…


JavaScript is partly a functional language.

To learn JavaScript, you have to learn the functional parts of JavaScript.

In this article, I am going to talk about pipe functions and functors with JavaScript.

Pipe

You can create a pipe function by creating a function that takes an array of functions as arguments.

It returns a function that takes a value and you call reduce on it with that calls fn with acc.

For example, you can write:

const compose = (...fns) =>
(value) =>
fns.reduceRight((acc, fn) => fn(acc), value)

The only difference is that you used reduceRight instead of reduce so…


To created component with built-in styles with a few lines of code, you can use the vue-styled-components to create them.

Getting Started

First, install the package by running:

npm i vue-styled-components

Then you can create some basic components, for example:

import styled from "vue-styled-components";

export const StyledTitle = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;

export const StyledHeader = styled.header`
padding: 4em;
background: yellow;
`;

You just need to import the package then use the template tags that came with the code to create new styled elements.

You can change the font size, text alignment, and other things with the tags.


Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

Today we’ll look at how to handle user interactions with Vue 3.

Handling User Input

The v-model directive lets you bind your input value to a model property.

For instance, you can write:

<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input v-model="name" />
<p>{{ name }}</p>
</div>
<script>
const app = {
data() {
return {
name: ""
};
}
};

Vue.createApp(app).mount("#app");
</script>
</body>
</html>

You added the name property to the object…


Today I am going to talk about new features in Typescript 4.0.

TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Labeled Tuple Elements

You can label tuple elements.

You can write:

type Range = [start: number, end: number];

to restrict args to have a string and a number.

you can also write:

type Foo = [first: number, second?: string, ...rest: any[]];

to have rest entries in your tuple.

If your tuple has type Foo, then the tuple starts with a number and a string.

Then the rest of the entries can be anything.

Labels don’t require you to…


Today I am going to talk about common mistakes you may be making in your Javascript project.

Javascript is one of the most popular language in the world but it’s still very easy to make mistakes when writing code through misunderstanding or overlooking stuff that we already know.

Undefined and Null

Javascript has both undefined and null for non-values. However, there are quite a few differences between the two. undefined means that the variable may have been declared, but nothing is set to it. A variable can also be explicitly set as undefined. The type of an undefined variable, when checking the type…


Today I am going to talk about developer tooling to improve these 3 areas.

  • Write code quickly
  • Debug code effectively
  • Update code easily

1. Fast Refresh (write code quickly)

Fast refresh makes your React app reloads slick and painless on code changes and Re-renders only the required React components if a code change is made instead of reloading the entire app.

Is it the same as hot reloading?

The answer is NO. The hot reloading has some limitations.

  • No function component support (React hook)
  • No error recovery
  • Often did not reload after changes
  • Required brittle code transforms

How is Fast Refresh different?

  • First class feature for…


If you’re serious about web development, then you’ll need to learn about JavaScript at some point. Year after year, numerous surveys have shown that JavaScript is one of the most popular programming languages in the world, with a large and growing community of developers. Just like Python, modern JavaScript can be used almost anywhere, including the front end, back end, desktop, mobile, and the Internet of Things (IoT). Sometimes it might not be an obvious choice between Python vs JavaScript.

If you’ve never used JavaScript before or have felt overwhelmed by the quick pace of its evolution in recent years…

Bogdan Jiang

Senior Full Stack Developer

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