DEV Community: Samuel Tope

Reducing Your Array The Right Way

Samuel Tope — Mon, 22 Oct 2018 16:31:22 +0000

Reducing Your Array The Right Way

Image credits: Pixabay

One of the benefits of Javascript as a language is that it allows us to write functional style of programming, that is, we write programs by composing functions which describe actions (what should happen) and abstracts the processes (how it should happen). This style of programming is possible in javascript because functions are first-class citizens, they are data and can be passed around in your application like variables.

Pure Functions

One of the core tenet of functional programming is writing pure functions. Pure functions are functions that have no free variables, i.e all its variables comes from its arguments, thereby making it return the same value for the same arguments, It has no side-effects on the program because it does not change the program state.

If a pure function needs to mutate or modify any variable(arguments) passed to it, it will create a copy, modify and return the copy, leaving the original variable untouched. This is called immutability. The essence of functional programming is using functions to transform data from one form to another, like i mentioned earlier, these data are copied before being transformed thereby leaving the original data intact. This improves readability, testability and correctness of our program.

Array.prototype.reduce And Array.prototype.reduceRight

Array is a basic data structure in javascript there are several operations we can perform on an array by applying functions to it. We will be taking a look at two of these functions in this article. They are called reduce (Array.prototype.reduce) and reduceRight (Array.prototype.reduceRight). What these functions does is to process an array by iterating over its elements and building up a single value that is returned based on a specified criteria.

reduce() and reduceRight() works in the same way except that reduce() starts from the first item in the array to the last while reduceRight() starts from the last item to the first.

Both reduce() and reduceRight() accept two arguments, a function that performs the reduction operation (a reducer) and an optional initial value with which the reducer starts its operation. The reducer accepts four arguments: the previous item (also called the accumulated value), the current item, the current item’s index and the array itself. The first two arguments of the reducer is commonly used. The value returned from each iteration (the accumulated value) is passed to the next iteration as the first argument.

The reduce() and reduceRight() uses a reducer, the reducer is the function that does the actual calculation on each iteration.

Examples

Lets use a basic example to illustrate how reduce works, we are going to sum up the elements of an array using the reduce function.

let numbers = [2,4,6,7,8];
let sum = numbers.reduce((acc, cur) => {
 return acc + cur;
});
console.log(sum); // 27

There are five elements in the numbers array, the reducer will iterate through the elements using the first value (2) as the intial accumulator (acc). Lets see what each value looks like for each iteration.

First iteration => acc = 2, cur = 4, acc + cur = 6
Second iteration => acc = 6, cur = 6, acc + cur = 12
Third iteration => acc = 12, cur = 7, acc + cur = 19
Fourth iteration => acc = 19, cur = 8, acc + cur = 27

if a second argument is passed to the reduce function like this

let numbers = [2,4,6,7,8];
let sum = numbers.reduce((acc, cur) => {
 return acc + cur;
}, **20** );

console.log(sum); // 47

It will be the first argument to the reducer and the iteration will occur five times instead of four like this:

First iteration => acc = 20, cur = 2, acc + cur = 22
Second iteration => acc = 22, cur = 4, acc + cur = 26
Third iteration => acc = 26, cur = 6, acc + cur = 32
Fourth iteration => acc = 32, cur = 7, acc + cur = 39
Fifth iteration => acc = 39, cur = 8, acc + cur = 47

The best practice is to initialize the reduce function to a reasonable default by providing a value as the second argument of the reduce function.

To find the largest number in an array using the reduce function:

const numbers = [20,22,50,60,12];
const largestNumber = numbers.reduce((max, num) => {
 console.log(`${num} > ${max} is ${num > max}`); 
 return (num > max) ? num : max
}, 0);

console.log(largestNumber); // 60

In the above example, the max variable was initialized to 0, on each iteration, the reducer compares the current max value with the current element (num) and returns the greater of the two values, the returned value is assigned to the max variable and its used for the next iteration.

To remove duplicate elements in array using the reduce function:

let numbers = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];

let distinctNumbers = numbers.reduce((distinct, num) => {
 return (distinct.indexOf(num)) !== -1 ? distinct : [...distinct, num];
}, []);

console.log(distinctNumbers); // [1,2,3,5,4]

Note that the reduce function was initialized to an empty array because we are expecting an array as our result, this is the reasonable default. What the reducer is doing in this example is to check if a number already exists in the initialized array, add it if it doesn’t exist, and return the array. The spread operator is used here.

Lets have one more example to illustrate reduceRight(). Assuming we need to perform an operation that has a right to left precedence, like an arithmetic operation. Lets see an example below:

Compute 3^(3^2)
// We calculate (3 ^ 5) first, assuming the result is n, we then calculate (2 ^ n) to get the final answer.

let numbers = [3,3,2];
let answer = numbers.reduceRight((ans, num) => {
 return Math.pow(num, ans);
});

console.log(answer); // 19683

In the example below, the reducer starts from the right (2), In the first iteration, the calculation will be (3²) which is 9, the second iteration will be (3⁹) which is 19683.

Conclusion

I have just shown you a little of the capabilities of reduce() and reduceRight(), They have more use-cases than what we have treated here. To learn more, check out the MDN docs. Sarah drasner also wrote an article on css-tricks.

Thanks for Reading

Understanding Vuejs Lifecycle hooks

Samuel Tope — Tue, 21 Aug 2018 19:50:43 +0000

A component in Vuejs has a lifecycle which is being managed by Vue itself when it creates the component, mounts the component to the DOM, updates the component and destroy the components. In order words, Each component has what is known as lifecycle events — its birth, life events like changes and death_._ We can tap into key moments in that lifecycle by implementing one or more lifecycle hooks that gets called by Vue itself thereby giving us the opportunity to add our own code at specific stages of a component lifetime.

Vue has eight lifecycle hooks, and the key to remembering them is to know that four of them are event that get triggered indicating that the actual event will happen. They start with “before” prior to the actual hooks and are fired before the actual hooks.

Lets see these hooks in action.

beforeCreate — This is the first hook that gets called after the Vue instance has been initialized. At this stage, data observation (reactivity), events, computed properties and watchers are yet to be set up. Therefore , we cannot interact with any parts of the component.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  beforeCreate() {
    console.log('I am the first hook to get called!');
    console.log(`You can see that my data property is ${typeof this.counter}`); // undefined
  }
}
</script>

Created — This hook is called after the instance is created. At this stage, the instance has finished processing, data observation (reactivity), computed properties, methods, watchers and event callbacks have been set up. You can’t interact with the DOM at this stage because your component has not been mounted. The $el property is not also available yet.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    console.log('I am the created hook.');
    console.log(`You can now see that my data property is ${typeof this.counter}`);
  }
}
</script>

beforeMount — At this stage, the template is compiled, either from the template or render options, or from the outerHTML of the element that Vue was initialized to. The template isn’t rendered yet and the $el method doesn’t exist either. Please note that this hook is not called during sever-side rendering.

<script>
export default {
  beforeMount() {
    console.log(`I am ready to be rendered.!`)
  }
}
</script>

Mounted — Called after the instance has been mounted, where el property is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called. The component becomes fully functional after the mounted hook is called and we can fully interact with it.

One thing to take note of is that the mounted hook doesn’t guarantee that the element has been added to DOM. To execute a code that is DOM dependent at this stage, put the code inside a callback method to the Vue.nextTick() function (Vue.nextTick() defers its callback to be executed after the next DOM update cycle). See the example below:

<template>
  <p>I'm text inside the component.</p>
</template>

<script>
export default {
  mounted() {
    // Element might not have been added to the DOM yet
    this.$nextTick(() => {
        // Element has been definitely added to the DOM
       console.log(this.$el.textContent); // I'm text inside the component.
    }
  }
}
</script>

beforeUpdate — It is called anytime changes are made to our data and the DOM needs to be updated, right before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to manually remove an added event listeners. This hook is not called during server-side rendering, because only the initial render is performed at server-side.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  beforeUpdate() {
    console.log(this.counter) // Logs the counter value every second, before the DOM updates.
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
</script>

Updated — hook is fired after a change has been made. The component’s DOM would have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead.

Note that updated does not guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use vm.$nextTick inside of updated:

<template>
  <p ref="dom-element">{{counter}}</p>
</template>
<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  updated() {
    // Fired every second, should always be true
    console.log(+this.$refs['dom-element'].textContent === this.counter)
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
</script>

beforeDestroy — Called right before a Vue instance is destroyed. At this stage the instance is still fully functional. You can perform necessary cleanups here. Please note that this hook is not called during sever-side rendering.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  beforeDestroy() {
    // Clean up the counter.
    // (In this case, effectively nothing)
    this.counter = null
    delete this.counter
  }
}
</script>

Destroyed — Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed. Please note that this hook is not called during sever-side rendering.

<script>
import DestroyerNotifierService from './notifier'

export default {
  destroyed() {
    console.log(this) // There's practically nothing here!
    DestroyerNotifierService.informThem('Component destroyed')
  }
}
</script>

All lifecycle hooks automatically have their this context bound to the component instance, so that you can access data, computed properties, and methods. This means you should not use an arrow function to define a lifecycle method (e.g. created: () => this.fetchTodos()). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.fetchTodos will be undefined.

In order words, arrow functions does not have their own value of this. The value of this in an arrow function is inherited from the enclosing (lexical) scope. So, you cannot use them inside a hook.

Conclusion

In this article, we have learnt about Vuejs Component lifecycle and their applications.

Thanks for reading.

Transforming Laravel Request Data Using Middleware

Samuel Tope — Thu, 14 Jun 2018 18:38:09 +0000

There are times when we are required to format our form input values in order to make them more user friendly, like using input masking to format phone numbers (XXX-XXXX-XXXX) or currency (X,XXX,XXX). Depending on our data layer requirement. This kind of value may need to be normalized or transformed before been passed to the validator or saved in the database.

This tutorial assumes a fair amount of knowledge in Laravel. If you are new to laravel, you may want to check out the docs.

Our Approach

A method I found out lately involves creating a middleware class for transforming request data before the controller gets to handle the request. Since the middleware provides a convenient mechanism for filtering HTTP requests entering our application we can leverage on it to transform our data. Lets do this:

Step 1: Creating our middleware:

Create a new middleware with the make:middleware artisan command.

php artisan make:middleware TransformData

Open app/Http/Middleware/TransformData.php file and paste the code below:

On line 6, the ParameterBag class was imported. Since laravel uses Symphony HttpFoundation component behind the hood to handle HTTP layer concerns, we have access to Symphony ParameterBag Class (a container for key/value pairs) which is the store for our form data (request data). This class will enable us to manipulate our request and change the values to the desired format.

In addition to the middleware handle method, I added two other methods which are clean (line 34) and _clean_Data (line 45).

Let’s examine what these methods are doing.

Handle Method

public function handle($request, Closure $next) {
    if ($request->isJson()) {
       $this->clean($request->json());
    } else {
       $this->clean($request->request);
    }
    return $next($request);
}

The handle checks whether the incoming request is a json or regular request and passes the corresponding data to the clean method.

Clean Method

private function clean(ParameterBag $bag) {
    $bag->replace($this->cleanData($bag->all()));
}

There are two methods of the ParameterBag class that is quite useful to us. The first is “all” which returns an array of parameters (in this case our form data) and the second method is “replace” which replaces the current parameters by a new set. The replace method expects an array as its argument. Simply meaning that we get our form data from the bag using the “all” method, we pass it to the cleanData method of our middleware to transform the data and cleanData returns its result to the ParameterBag “replace” method to replace the content of our request data. VOILLA!!!

CleanData Method

private function cleanData(array $data)                           
{   
   return collect($data)->map(function ($value, $key) {  
       if ($key == 'payment\_amount') {                                        
           return preg\_replace("/([^0-9])/", '', $value);                                     
       } else {
          return $value;                               
       }                               
   })->all();                           
}

Our Clean_Data method receives the array returned from the _all method, we then wrap the array in a collection class so that we can apply a custom function to modify each element. The array key stores each name of our form input and the array value stores the corresponding input value. Assuming we want to change the value of our payment_amount (The name of our input form field), get the value using the key and remove all non-digit characters. Return the data to the ParameterBag.

Apply middleware

...

_protected_ $routeMiddleware = [
    ...
    **'data.transform' => \App\Http\Middleware\TransformData::_class_** _,_  
];
...

Attach the middleware to your route or controller depending on the use-case.

Conclusion

In this article, we have seen how to transform our form request data with Laravel middleware, there are other use-cases for this method,Here’s the link to the github gist.

If you have a question that hasn’t been answered or you have a different perspective of this approach, feel free to drop in comments here or via Twitter.