DEV Community: Varit Patel

LeetCode Question 29

Varit Patel — Sat, 09 Mar 2024 23:15:47 +0000

Given two integers dividend and divisor, divide two integers without using multiplication, division, and mod operator.

Let's solve it :-)

var divide = function(dividend, divisor) {
};

Function divide has two parameters dividend and divisor.

First of all, Let's check some weird scenarios:

Question has a note which says 32-bit signed integer range: [−2*31, 2*31 − 1] so this indicates the max and min(on Negative side) number which we need to process
What if the dividend and divisor both have negative value
What if the dividend or divisor has negative value

Let's code it ;-)

 const signedIntegerValue = 2**31
 var divide = function(dividend, divisor) {
    const retIsNegative = Math.sign(divisor) !== Math.sign(dividend);
    dividend = Math.abs(dividend)
    divisor = Math.abs(divisor)

    let result = 0

    // Logic here below...

    return retIsNegative ? -result : result
};

Define the 32 bit signed integer range as constant at above

Now inside function calculate weather we have one of the value as negative or not.

If both signs are not same then, return value is negative.

Next lines, Makes both of them to the absolute value as it will be easy to handle the sign later.

And predefined result value 0 and added result value as the return value for the function.

_Logic _

    while (divisor <= dividend) {
        let value = divisor
        let multiple = 1
        while (value + value <= dividend) {
            value += value
            multiple += multiple
        }
        dividend = dividend - value
        result += multiple
    }

    if (result > (signedIntegerValue - 1)) {
        return retIsNegative ? -signedIntegerValue : signedIntegerValue - 1
    }

Consider dividend value is 10 and divisor value is 3.
Running a while loop till the divisor is less than dividend.

Assigning divisor value to value variable

Initially, considering multiple value is 1.

Running a nest while loop when (*value + value *) which is 2 * divisor value is less than dividend - This loop runs for the logarithmic purpose to remove the values from dividend

so now the value = value + value which is (3 + 3) = 6

and multiple value is now 2

Now, nested while loop check the condition

so new value of the value = value + value which is (6 + 3) = 9 and 9 < divisor 10

New value of value is 9 and multiple stands as 3

Now, nested while loop check the condition, where 12 <= 10 which is false.

Hence nested loop is over and next line after the loop starts executing.

Hence new value of dividend is 10 - 9 = 1

return value is result(0) + multiple(3) = 3

Checking the return value with the signed 32 integer value

and returning according to the signatures for the max and min signed 32 integer value.

If the return is not greater than signed integer value then it returns as the signed value suggests.

Full Code as follows:

const signedIntegerValue = 2 ** 31
var divide = function (dividend, divisor) {
    const retIsNegative = Math.sign(divisor) !== Math.sign(dividend);
    dividend = Math.abs(dividend)
    divisor = Math.abs(divisor)

    let result = 0
    while (divisor <= dividend) {
        let value = divisor
        let multiple = 1
        while (value + value <= dividend) {
            value += value
            multiple += multiple
        }
        dividend = dividend - value
        result += multiple
    }

    if (result > (signedIntegerValue - 1)) {
        return retIsNegative ? -signedIntegerValue : signedIntegerValue - 1
    }
    return retIsNegative ? -result : result
};

Hope this helps. Happy Coding!

The better way to Validate the props in Vue

Varit Patel — Sun, 19 Apr 2020 07:19:17 +0000

Well, Whenever we communicate with data, we need to validate the data in order to achieve the expected behavior and these apply to any type of communication that happens within the application and when it comes to communicating from Parent to Child using props is no exception.

Let's dig into props in detail to write better and predictable code.

Array syntax
Object syntax
Object syntax with custom validator

First, let's define the parent component which is responsible to pass the data to the child.

Parent component

Parent component consists of the movies list which basically passes the list of the movies to the child component. For better understanding will pass static props to more focus on how to write props better.


<MovieList name="Movie 1" image="assets/images/movie-1.png" rating="7.5" 
watchlist="true">

Array syntax

Using array syntax, props can be directly passed using the name of the props and that will be used to display the data in the template.


export default {
  name: 'MovieList',
  props: ['name', 'image', 'rating', 'watchlist']
}

Basically, It can be helpful for prototyping of the app but for big and scalable this approach is not enough to make code more scalable and reliable. Below are lists of disadvantages of using this syntax.

Cons

No Type checking
No Information indicates on mandatory and optional props
No Default value
No Appropriate custom validator

Well, All the shortcomings discussed above will be handled in the below examples to make our code more predictable.

Object syntax

Alternate to Array syntax, props can also be defined with object syntax and this syntax can facilitate us to use three key properties with prop attributes which helps us to write better code.

type checks the data type of prop.
required indicates whether the prop is required or not.
default indicates the value of prop if the parent component failed to pass that prop.


export default {
  name: "MovieList",
  props: {
    name: {
      type: String,
      required: true
    },
    rating: {
      type: [Number, String],
      required: false,
      default: 5
    },
    wishlist: {
      type: Boolean,
      default: false
    },
    image: {
      type: String,
      default: require("@/assets/default-poster.png")
    }
  }
};

Below are the things which we can notice from the above code.

Props are now supporting types. The list of available types includes some of the JavaScript data types & others are as below.
- String
- Number
- Object
- Array
- Boolean
- Date
- Function
- Symbol
A prop can accept multiple data types as used in the rating prop.
Required props can be easily identified.
The default value is used in a case where the parent failed to pass the prop.
If default property is set, the required properties become true automatically hence even not writing would make sense. ( e.g. wishlist & image prop)

So, The prop with object syntax is much better than the array syntax as it overcomes a lot of cons that come with object syntax, which we discussed above. but still, there is a catch in code with the image prop.

Imagine, the Parent component somehow passed the image URL wrong.

<Movie-List name="Movie with incorrect image path" image="../assets/default.png"/>

In order to handle such cases, prop with object syntax have another property called validator to validate the incoming prop and if our requirement for the prop doesn't match, it throws an error. Thus, it helps to write more reliable and scalable code. Let's go through the example below

Object syntax with custom validator


export default {
  props: {
    image: {
      type: String,
      default: require("@/assets/default-poster.png"),
      validator: propValue => {
        const hasImagesDir = propValue.indexOf("@/assets/") > -1;
        const listOfAvailableExt = [".jpeg", ".jpg", ".png"];
        const isValidExt = listOfAvailableExt.some(ext =>
          propValue.endsWith(ext)
        );
        return hasImagesDir && isValidExt;
      }
    }
  }
}

Here, the validator function accepts a prop value and if the value passes the given validations, then the prop image is visible otherwise it will throw an error in the console as below.

[Vue warn]: Invalid prop: custom validator check failed for prop "image".

Now, we can simply correct the path of the image which renders the correct image.

Here is the working codesandbox

NOTE: The props are validated before the component instance is created, hence the instance properties such as data, computed, etc will not be available to use inside default or validator function.

I hope it helps to write better code.🤞

Feel free to post any questions 📝 on the comments below. I would be more than happy to answer them.

The need for composition API in Vue

Varit Patel — Thu, 20 Feb 2020 04:23:28 +0000

Well, Presently in Vue world, The hot🔥 topic is the Composition API, a function-based API introduced in Vue 3.0. In this article, We will learn what was the need for this new API and then how to use function-based API. I try to explain it in as much simple as I can to understand it for beginners also.

This article summarises the need for Composition API described in #RFC & some examples.

So, Let's start 💻

Before we deep dive, There is no need to panic that the composition API will change the Vue drastically. Composition API is add-ons to the existing feature hence there are no breaking changes going into Vue 3.0
Moreover, the Vue team has created a plugin (vue-composition) which is compatible with Vue 2.x.

Let's see some questions first!

What was the need for composition API?

As popularity increases for Vue day by day, People started to adopt Vue for large & Enterprise level application too. Due to which there were many cases where components for such applications grow gradually with the time and there is the moment when It was hard to maintain & read using Single File component architect. Hence the need for braking component in a logical manner arises and with Vue's existing API this was not possible.
Instead of adding in another new concept, Composition APIs are proposed which basically expose Vue's core capabilities - such as creating and observing reactive state - as standalone functions and this API helps to write clean and reusable code among multiple components.

What were the drawbacks of the alternative approaches that Vue has?

Before the introduction of the new API, Vue has other alternatives that offer reusability among components such as mixins, HOC(High order component), scoped slot but with all approaches comes with their own shortcomings due to which they are not widely used.

Mixins - It was hard to maintain once the app has some numbers of mixins. The developer needs to visit each mixin to see data is coming from which mixin.

HOC - This pattern doesn't go well with the Vue SFC approach, thus it is not widely recommended or popular to use among Vue developers.

Scoped slot - Even though slot hides the drawbacks of other concepts can't but with this approach, the developer ended up having a lot of reusable components and putting more and more login in Template which was again hard to maintain in longtime.

Kudos to Vue Team 👏

In Simple words, composition API helps to

Use low-level APIs of Vue which was not the case with Vue 2.x
Efficiently Organise and Write reusable code, as API is function-based.
Improves code readability by separating shared logic to functions.
Achieve code separation & DRY principle.
Use TypeScript better with Vue application.

Note: As Vue is very easy to start, so is the composition API.

Let's build one simple app to go through the API.

1) Import vue-composition plugin

npm install @vue/composition-api --save

2) Install plugin to the Vue app before importing any other APIs. The idea to register it before any other plugin is that composition API can be used in other plugins just as it is a built-in feature of Vue.

import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

3) Using composition API, Let's create a small functionality to understand the API better. Create a new folder, called composition-fns and create a file called toggle.js

Here, we are importing ref from the API and using it we are declaring the variable isVisible and which has by default value false.

In addition to it, There is a method called toggle which is responsible
for toggling the value of isVisible.

import { ref } from "@vue/composition-api";

export const useToggle = () => {
  const isVisible = ref(false);

  const toggle = () => {
    return (isVisible.value = !isVisible.value);
  };

  return {
    isVisible,
    toggle
  };
};

4) At first, Import the useToggle function and then to use the above composition API in a component, API provides setUp() function. This setup function includes data, methods, computed & watcher object of the Vue component.

Since here we're using the useToggle composition fn, we can destructure the values and return it using setup method in order to use it for the template.

import { useToggle } from "./composition-fn/toggle";
setup() {
  const { isVisible, toggle } = useToggle();
  // expose to template
  return {
    isVisible,
    toggle
  };
}

The setUp function can have two arguments.

props - properties passed to the components and they are reactive since any change in props which results in re-render of the component.
context - which has selected properties which was earlier passed to component using this.

Context is having below functions/properties

context.refs
context.emit
context.attrs
context.slots

As setUp function is heart of composition API, It is very crucial to understand it.

5) In the end, Template is consists of the button and div to show and hide the toggle value.

<div>{{ isVisible }}</div>
<button type="button" @click="toggle">
  {{isVisible ? 'hide' : 'show' }} Toggle
</button>

Here is working codesandbox

I hope this helps you to get started with composition API and journey towards Vue 3.0!

Wish you good luck 😃

List of ways to merge arrays in javascript!

Varit Patel — Sun, 15 Sep 2019 03:09:08 +0000

Well, Imagine interviewer ask you to tell the ways to merge two arrays in JavaScript? There are various ways you can achieve it. so in this post, we will go through some of the ways to merge arrays.

Let's see some ways!


const fruits1 = ["🍏", "🍎", "🍐"];

const fruits2 = ["🍊", "🍋", "🍌"];

/**
 * 1. Using concat method
 */

const concatFruits = fruits1.concat(fruits2);
console.log("concat:",concatFruits);

/**
 * Output
 * concat: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 2. Using ES6 spread syntax
 */

const spreadFruits = [...fruits1, ...fruits2];
console.log("spread:",spreadFruits);

/**
 * Output
 * spread: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 3. Using Push method
 * This method will mutate original array [fruits3]
 */

const fruits3 = ["🍏", "🍎", "🍐"];

const fruits4 = ["🍊", "🍋", "🍌"];

const pushFruits = fruits3.push(...fruits4);
console.log("push:",fruits3);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 4. Using unshift method
 * This method will mutate original array [fruits6]
 */

const fruits5 = ["🍏", "🍎", "🍐"];

const fruits6 = ["🍊", "🍋", "🍌"];

fruits6.unshift(...fruits5);
console.log("unshift:",fruits6);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 5. Using splice method
 * This method will mutate original array [fruits7]
 */

const fruits7 = ["🍏", "🍎", "🍐"];

const fruits8 = ["🍊", "🍋", "🍌"];

fruits7.splice(3, 0, ...fruits8);
console.log("splice:",fruits7);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

Play with jsfiddle

Based on the above implementation, Recommend and convenient ways are
- option 1: Array.prototype.concat() method or
- option 2: Spread syntax

Feel free to comment if you know any other way to do so.

References:

MDN - concat

MDN - Spread

What is Partial & Required utility types in TypeScript?

Varit Patel — Wed, 11 Sep 2019 05:09:47 +0000

In a real-world application, Basic types are used but there are scenarios where we need some types that can be derived from one or two types. TypeScript provides various utility types to make an easier transformation from the already defined type in our project. moreover, these utilities are globally available. Hence it can be accessed from anywhere.

Basic understanding of TypeScript requires in order to understand the below concept.

Partial<T>

Make a type with all properties of T set to Optional.
Useful when some of the properties of the type T to be updated.


interface Todo {
    title: string;
    description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>): Todo {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});

Above example, <T> denotes as a defined type that needs to be modified.

Required<T>

Make a type with all properties of T set to Required.
Useful when all the properties of the object to set all the properties of T to be updated.


interface Todo {
    title: string;
    description?: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Required<Todo>): Todo {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    title: 'title updated',
    description: 'throw out trash',
});

Important Points to note

Below are the scenarios where these two utilities can have some tweaks.

Useful when strictNullChecks flag is enabled.
Works only on a single level, does not work with the nested level.

And weirdly, If at all, Partial & Required are used together, the outer most will take higher priority(not useful in an ideal scenario, but mentioned just to understand it better).