DEV Community: Omar Adel

It works now but will it work in the future?!

Omar Adel — Sun, 12 Mar 2023 09:19:44 +0000

Have you ever run a function that works and the tester returned it to you with a comment that it is untestable or doesn't apply to clean code concepts?

while going throw some coding challenges, found concept of pure function and impure function.

Pure function

In simple terms, pure functions do not have an internal state. Therefore, all operations performed in pure functions are not affected by their state. As a result, the same input parameters will give the same deterministic output regardless of how many times you run the function.

To get a better understanding, let’s consider the following example.

function add(a,b) { 
  return a + b
}
console.log(add(4,5))

This example contains a simple add() function, which gives 9 as the output. It is a very predictable output, and it does not depend on any external code. This makes the add() function a pure function.

If a function is declared pure and does not have a state, it can share many instances inside a class. Also, it is advised to avoid mutations inside pure functions.

Advantages of pure functions

A pure function works as an independent function that gives the same output for the same inputs.
Pure functions are readable because of independent behavior. Moreover, they are straightforward to debug.
You can clone an external state into a pure function, but it does not change the purity of the function.

Impure Functions

An impure function is a function that contains one or more side effects. It mutates data outside of its lexical scope and does not predictably produce the same output for the same input.

For example, consider the following code snippet:

var addNew = 0;
function add(a,b){ 
  addNew =1; 
  return a + b + addNew
}
console.log(add(4,5))

In the above example, there is a variable named addNew, and it is declared outside of the add() function. But the state of that variable is changed inside the add() function. So, the add() function has a side effect on a variable outside of its scope and is therefore considered an impure function.

In general, it’s ideal to keep the impure elements of your programs distinct from the data processing, which is usually pure. Also, updating and maintaining your applications will be much easier if you confine impure elements to their particular functions.

The following JavaScript functions are inherently impure:

Math.random() is an impure function since it modifies the internal state of the Math object and provides different results with each call. So Math.random() can contain side effects.

Math.random(); (Output: 0.4450692005082965)

In the above code snippet, no arguments pass into any of the Math.random() function calls, but still they all produce a different result.

Date.now()
arr.splice()
arr.push()
arr.sort()
console.log() and alert() are also impure functions (although they generate the same behavior and always return the same value for identical calls).
JavaScript is synchronous by its nature. Therefore, asynchronous functions such as fetch and promise are impure.

Advantages of impure functions

Impure functions can use an in-place solution to reduce the space complexity.
In impure functions, the state can be modified to use the parent variable and call for the function compiling.

As mentioned before, the main difference between pure and impure functions in JavaScript is side effects. So, let’s discuss some specifics about the side effects.

Side effects

Side effects can occur in your program when it uses an external code block inside a function. As a result, there can be performance issues in your application. for example:

var preNumber =2;
function addValue(newNumber){ 
  return preNumber += newNumber; 
}

In the above example, the variable preNumber is used inside the addValue() function. This behavior can result in the following side effects.

Side effect 1: Dependency issue

The addValue() method depends on the preNumber variable. If preNumber is not defined or not available, the method will throw an error.

Side effects 2: External code modification

When the addValue() function executes, it changes the state of the preNumber variable. It shows that the addValue() method has a side effect of modifying external code.

Side effects 3: Non-deterministic function

The addValue() function uses external code. It makes the function non-deterministic, which means you cannot determine the output by looking.

Conclusion

Pure functions do not have side effects. Impure functions can cause side effects.
Pure functions return the same output if we use the same input parameters. However, impure functions give different outcomes when we pass the same arguments multiple times.
Pure functions always return some results. Impure functions can execute without producing anything.
Debugging pure functions is relatively easier than debugging impure functions.
Pure functions cannot execute AJAX calls or standard DOM manipulation.
Impure functions aren’t inherently wrong. They merely can cause some confusion in more extensive systems in the form of spaghetti code.

Flexbox (Parent Properties)

Omar Adel — Sun, 11 Dec 2022 09:03:09 +0000

When we talk about flexbox properties we should separate between properties for parent & properties for children

Properties for the Parent

Display

.container {display: flex;} vs .container {display: inline-flex;}

Well, both of them has the same effect on the children but the only different is on the parent. flex-inline makes the parent display inline.

Flex-Direction

There are 4 main directions which are:

.container{flex-direction: row} (default)

the main axis is from left to right & the cross axis is from top to bottom

.container{flex-direction: row-reverse}

the main axis is from right to left & the cross axis is from top to bottom

.container{flex-direction: column}

the main axis is from top to bottom & the cross axis is from left to right

.container{flex-direction: column-reverse}

the main axis is from bottom to top & the cross axis is from left to right

But what is the main axis & cross axis?

Let's first understand the axis in the flexbox. Flexbox is a one dimension layout which means it apply the flex properties on only one dimension. That means we have more than one axis which are the main axis & the cross axis

Flex-Wrap

By default, flex items will all try to fit onto one line. We can change that and allow the items to wrap as needed with this property.

.container{flex-wrap: nowrap} (default)

all flex items will be on one line

.container{flex-wrap: wrap}

flex items will wrap onto multiple lines, from top to bottom.

.container{flex-wrap: wrap-reverse}

flex items will wrap onto multiple lines from bottom to top.

Flex-Flow

Well, flex-flow is shorthand for the flex-direction and flex-wrap properties. For example

.container {flex-flow: column wrap;}

Justify-Content

justify-content defines the alignment along the main axis so that it helps us to distribute extra free space leftover. And its types are:

.container{justify-content: flex-start} (default)

items are packed toward the start of the flex-direction.

.container{justify-content: flex-end}

items are packed toward the end of the flex-direction.

.container{justify-content: center}

items are centered along the line.

.container{justify-content: space-between}

items are evenly distributed in the line; first item is on the start line, last item on the end line.

.container{justify-content: space-around}

items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

.container{justify-content: space-evenly}

items are distributed so that the spacing between any two items (and the space to the edges) is equal.

.container{justify-content: start}

items are packed toward the start of the writing-mode direction.

.container{justify-content: end}

items are packed toward the end of the writing-mode direction.

.container{justify-content: left}

items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.

.container{justify-content: right}

items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.

Align-Items

align-items defines the alignment along the cross axis so it is the same version of justify-content but in diferent axis. And its types are:

.container{align-items: stretch} (default)

stretch to fill the container.

.container{align-items: flex-start | start | self-start}

items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

.container{align-items: flex-end | end | self-end}

items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

.container{align-items: center}

items are centered in the cross-axis.

.container{align-items: baseline}

items are aligned such as their baselines align.

Align-Content

To work with align content we should use flex-wrap: wrap since it works with items in multiple lines as it is described in the photo below:

.container{align-content: normal} (default)

items are packed in their default position as if no value was set.

.container{align-content: flex-start | start}

items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.

.container{align-content: flex-end | end}

items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.

.container{align-content: center}

items centered in the container.

.container{align-content: space-between}

items evenly distributed; the first line is at the start of the container while the last one is at the end.

.container{align-content: space-around}

items evenly distributed with equal space around each line.

.container{align-content: space-evenly}

items are evenly distributed with equal space around them.

.container{align-content: stretch}

lines stretch to take up the remaining space.

Gap & Row-Gap & Column-Gap

The gap property controls the space between flex items. It applies that spacing only between items not on the outer edges.

when we apply justify-content: space-between; the gap will only take effect if that space would end up smaller.

This article did not cover all the flexbox parent properties tricks but it has covered the most used ones.

I hope it is helpful. And I am open to any comments or updates.

JavaScript Primitive & Non Primitive Data Type

Omar Adel — Thu, 11 Aug 2022 13:26:00 +0000

Normally when we hear data types in any programming language, integer, string, etc... jumps to our mind.

Although all of these things are data types, there are two umbrellas contains most of the JavaScripts data types.

Primitive Data Types & Non Primitive Data Types

Non Primitive Data Types

Array which is used for storing different elements, Ex:

arr = [1, 3, 5, 'jack']

Object which is a standalone entity, with properties and type, Ex:

client = {
  name: "Harry Potter",
  age: 20,
  eyeColor: "blue"
};

Primitive Data Types

Number which is used for floating-point numbers, Ex:

num = 1;

String which is used for sequence of characters, Ex:

name = 'Mike';

Boolean which is used for logical type that can be only true or false, Ex:

flag = true;

Undefined which is used for a variable that got declared and yet not assigned to a value (empty value), Ex:

value;
console.log(value)     // undefined

Symbol (ES2015) which is used for value that is unique & cannot be changed, Ex:

client = {
  name: "Harry Potter",
  age: 20,
  eyeColor: "blue"
};
id = Symbol('id');
client[id] = 101959; // you added an id to client named 'Harry Potter'

BigInt (ES2020) which is used for larger integers than the number type can hold, Ex:

bigNum = BigInt("123456789012345678901234567890123456789");

Note:

in both the array & the object can contain different types of data.