DEV Community: Petros Koulianos

2 Tips to Clean Ugly if Statements

Petros Koulianos — Mon, 18 Jan 2021 18:03:50 +0000

Conditional statements are the backbone of programming but lot of times business requirements can lead to create long nested and ugly if statements.
This post demonstrates some tips to clean those ugly situations.

#1 Complex condition expressions

Long and complex condition expressions are obvious an ugly situation

// weird 😣😣
if((temp === 0) || (temp > 0 && temp < 5 && gusts > 10) || (snowing)){
//code block
}

Solution create a separate function to return a boolean that represents the long condition

// better 😁😁
if(isColdOutside(temp, windGusts, snowing)){
//code block
}

function isColdOutside(temp, windGusts, snowing){
  if(temp === 0){
   return true
  }
  if(snowing){
   return true
  }
  if(temp > 0 && temp < 5 && windGusts > 10){
   return true
  }
  return false
}

#2 Ternary into ternary

This is another situation that is ugly and the human brain struggle to parse

// weird 😣😣
let temp = 6
let windGusts = 20
let isFreezingOutside = temp < 5 ? (windGusts > 15 ? true : false) : (snowing ? true : false)

Solution again here we can create smaller functions to make it cleaner

// better 😁😁
let temp = 6
let windGusts = 20

let isFreezingOutside = temp < 1 ? isSnowing(snowing) : isWindStrong(windGusts)

function isWindStrong(windGusts){
  if(windGusts > 15){
   return true
  }
return false
}

function isSnowing(snowing){
  if(snowing){
   return true
  }
return false
}

This was two quick tips to clean ugly if statements.

Thanks for reading 😎😎😎

twitter @petroskoulianos

3 password REGEX for your next project

Petros Koulianos — Fri, 15 Jan 2021 08:55:17 +0000

Regular expressions are cryptic and hard to understand and build one from scratch.
But don't panic with those cryptic symbols, the dev community can help.
Here i am writing 3 password regular expressions to use it at your next JavaScript front end app or your next nodeJs back end application.

// PASSWORD REGEX FOR YOUR NEXT JAVASCRIPT APP

// regex for a basic password must be
// more than 8 chars 
const PASSWORD_REGEX_1=  /^[A-Za-z0-9]\w{8,}$/;

// more secure regex password must be
// more than 8 chars 
// at least one number
const PASSWORD_REGEX_2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

// more secure regex password must be :
// more than 8 chars  
// at least one number
// at least one special character
const PASSWORD_REGEX_3=  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;

You can combine all 3 regular expressions to show proper warning messages.

Great web sites to check your regular expressions :

Structuring an expressJS application

Petros Koulianos — Tue, 12 Jan 2021 12:21:07 +0000

This is my opinion for file structuring expressJS apps.

I am open to read any opinions and for further discussion.

Looking for React Theme to Build a Dev Blog

Petros Koulianos — Thu, 13 Aug 2020 19:32:00 +0000

I am looking for a minimal React Theme to build a developer blog, any suggestions would be useful.
Thanks 😀😀

5 Reasons to Use SQLite the Tiny GIANT for Your Next Project

Petros Koulianos — Fri, 07 Aug 2020 16:43:08 +0000

SQLite database is a tiny giant in the SQL area with a fully-featured SQL database engine and billions of deployments.

Continue reading on The Startup »

Proper Ways to Clone an Object in JavaScript

Petros Koulianos — Wed, 22 Jul 2020 07:31:40 +0000

Photo by Bimata Prathama on Unsplash

Objects in JavaScript are reference values and can store complex key-value properties.

let story = {
    title: 'Proper Ways to Copy(Clone) an Object in JavaScript',
    author:{
            name:'pkoulianos',
            email:'petran@pkoulianos.com'
    },
    tags:['Javascript','programming']
};

Copy an object can be a little tricky. But don’t worry about in this story we’ll cover how to copy an object in proper ways.

1. The Fatal😡 Way to Copy an Object

A fatal way to try copying an object is to use the assign = operator. The reason is that the assign operator will only pass the reference to the new variable.

Let’s see a simple example

let car1 = { color:’white’, type:’4X4'};// fatal way to copy an object
let car2 = car1;//change the color property
car2.color = ‘red’;console.log(car1);
**//{ color: 'red', type: '4X4' }** 😂😂
console.log(car2);
**//{ color: 'red', type: '4X4' }** 😂😂

In the above example, we create a new object car1 and try to copy it with the = operator to a new variable car2 and we change the color property. Printing both objects we can see that is identical and the reason is that both car1 and car2 have the same reference of the object.

2. Get a Shallow💧 copy

Shallow copy will copy all enumerable own properties from the source object to the target.

In simple terms, a shallow copy will not truly copy :

Arrays, Sets, etc
Inner objects

Get a shallow copy with Object.assign()

Object.assign() will get you a shallow copy of your target object:

let post = {
   title:'How to copy objects in JS',
   tags:['js','js-basics','programming'],
   date: new Date(),
   author:{
         name:'petros',
         email:'petran@pkoulianos.com'
   },
   getAuthorData: function(){
              return this.author.name+'-'+this.author.email;
   }
};let newPost = Object.assign({},post);
newPost.title = 'I love js'
newPost.tags[0] = 'web-programming'
newPost.author.name = 'Petran';
newPost.date = new Date(1970);console.log(post);
console.log(newPost);//console output
{ title: 'How to copy objects in JS',
  tags: ['web-programming', 'js-basics', 'programming'],
  date: 2020-07-21T18:48:29.112Z,
  author: { name: 'Petran', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' },
  getAuthorData: [Function: getAuthorData] }
{ title: 'I love js',😀
  tags: ['web-programming', 'js-basics', 'programming'],😂
  date: 1970-01-01T00:00:01.970Z,😀
  author: { name: 'Petran', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' },😂
  getAuthorData: [Function: getAuthorData] }😀

In the above example, we create a new object post and copy it with Object.assign() to a new variable newPost and we change all properties. Printing both objects we can see that the shallow copy newPost have copied properly the title ,date and getAuthorData but tags and author are pass by reference.

Get a shallow copy with …Spread operator

The spread operator will get you also a shallow copy of your target object:

/ \*\*\* / 
**let newPost = {...post}**
/ \*\*\* /
console.log(post);
console.log(newPost);//console output
{ title: 'How to copy objects in JS',
  tags: ['web-programming', 'js-basics', 'programming'],
  date: 2020-07-21T18:48:29.112Z,
  author: { name: 'Petran', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' },
  getAuthorData: [Function: getAuthorData] }
{ title: 'I love js',
  tags: ['web-programming', 'js-basics', 'programming'],
  date: 1970-01-01T00:00:01.970Z,
  author: { name: 'Petran', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' },
  getAuthorData: [Function: getAuthorData] }

3. Get a Deep🌊 copy

A deep copy of an object will solve the mystery of getting a proper copy of inner objects and arrays, sets, etc but date objects will be converted to string and functions will not be copied at all.

We can get a deep copy by using the JSON object.

let targetObj = JSON.parse(JSON.stringify(sourceObj));

/ \*\*\* / 
let newPost = JSON.parse(JSON.stringify(post));
/ \*\*\* /
console.log(post);
console.log(newPost);//console output
{ title: 'How to copy objects in JS',
  tags: ['js', 'js-basics', 'programming'],
  date: 2020-07-21T18:54:35.964Z,
  author: { name: 'petros', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' },
  getAuthorData: [Function: getAuthorData] }
{ title: 'I love js',
  tags: ['web-programming', 'js-basics', 'programming'],
  date: **'2020-07-21T18:54:35.964Z'** ,😂
  author: { name: 'Petran', email: '[petran@pkoulianos.com](mailto:petran@pkoulianos.com)' } }

Printing both objects we can see that the deep copy newPost have copied properly the title , tags and author but date is converted to string and getAuthorData are not copied at all.

5. Conclusion

Both Shallow and Deep copies have their own pros and cons. Before we decide which copy is right, we have to be sure about the object properties.

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Build a Flush Message Middleware with Node.js from Scratch

Petros Koulianos — Wed, 22 Apr 2020 12:20:02 +0000

Learn how to build a flush messages middleware system with node.js and express.js from scratch

Photo by Photo by Octavian Rosca on Unsplash

1.Introduction

In this story, we’ll learn how to build a flush message middleware from scratch with node.js and express.js.

But what is flush messages?

Flush messages are small messages with information that inform the user-client about various cases, such as unsuccessful login, invalid input on a form field etc …

Continue reading on JavaScript in Plain English »

Regular Expressions Cheat Sheet in Node.js

Petros Koulianos — Tue, 07 Apr 2020 19:40:35 +0000

A detailed story to learn, write and execute regular expressions easily.

Continue reading on JavaScript in Plain English »

How to Implement a Stack in Node.js

Petros Koulianos — Tue, 31 Mar 2020 21:01:44 +0000

Stack is one of the most important data structures in programming, but how we can implement a stack in javascript? Let’s dig in.

Continue reading on JavaScript in Plain English »