Forem: Chandrasekar Gokulanathan

4. Median of Two Sorted Arrays

Chandrasekar Gokulanathan — Fri, 23 Apr 2021 07:11:37 +0000

Problem #4: https://leetcode.com/problems/median-of-two-sorted-arrays/

Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.

Example 1:

Input: nums1 = [1,3], nums2 = [2]
Output: 2.00000
Explanation: merged array = [1,2,3] and median is 2.

Example 2:

Input: nums1 = [1,2], nums2 = [3,4]
Output: 2.50000
Explanation: merged array = [1,2,3,4] and median is (2 + 3) / 2 = 2.5.

Example 3:

Input: nums1 = [0,0], nums2 = [0,0]
Output: 0.00000

Example 4:

Input: nums1 = [], nums2 = [1]
Output: 1.00000

Example 5:

Input: nums1 = [2], nums2 = []
Output: 2.00000

Solution

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number}
 */
var findMedianSortedArrays = function(nums1, nums2) {
    let sortedArray = [...nums1, ...nums2].sort((a,b) => a-b);
    let median = 0;

    if (sortedArray.length % 2 !== 0) {
        median = sortedArray[Math.floor(sortedArray.length / 2)];    
    } else {
        median = (sortedArray[(sortedArray.length/2)] + sortedArray[(sortedArray.length/2) -1])/2;
    }

    return median;
};

3. Longest Substring Without Repeating Characters

Chandrasekar Gokulanathan — Fri, 23 Apr 2021 05:08:15 +0000

Given a string s, find the length of the longest substring without repeating characters.

Example 1:

Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.

Example 2:

Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.

Example 3:

Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.

Example 4:

Input: s = ""
Output: 0

Solution

/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
    let start = 0, end = 0;
    let maxStringLength = 0;
    let charSet = new Set();

    while (end < s.length) {
        if (!charSet.has(s[end])) {
            charSet.add(s[end]);
            maxStringLength = Math.max(charSet.size, maxStringLength);
            end++;
        } else {
            charSet.delete(s[start]);
            start++;
        }
    }

    return maxStringLength;
};

2. Add Two Numbers

Chandrasekar Gokulanathan — Fri, 23 Apr 2021 05:07:58 +0000

Problem #2: https://leetcode.com/problems/add-two-numbers/

You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

Example 1:

Input: l1 = [2,4,3], l2 = [5,6,4]
Output: [7,0,8]
Explanation: 342 + 465 = 807.

Example 2:

Input: l1 = [0], l2 = [0]
Output: [0]

Example 3:

Input: l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]
Output: [8,9,9,9,0,0,0,1]

Solution

/**
 * @param {ListNode} l1
 * @param {ListNode} l2
 * @return {ListNode}
 */
var addTwoNumbers = function(l1, l2) {
    let node = null;
    const carry = arguments[2];

    if (l1 || l2) {
        if (!l1) {
            l1 = new ListNode();
        }
        if (!l2) {
            l2 = new ListNode();
        }
        let val = l1.val + l2.val;
        if (carry) {
            val += 1;
        }
        node = new ListNode(val %10, null);
        node.next = addTwoNumbers(l1.next, l2.next, val > 9 ? 1 : 0);
    } else if (carry) {
        node = new ListNode(1, null);
    }
    return node;
};

1. Two Sum

Chandrasekar Gokulanathan — Fri, 23 Apr 2021 05:07:35 +0000

Problem #1: https://leetcode.com/problems/two-sum/

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to the target. You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Output: Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:

Input: nums = [3,2,4], target = 6
Output: [1,2]

Example 3:

Input: nums = [3,3], target = 6
Output: [0,1]

Solution

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function(nums, target) {
    var complementMap = new Map();

    for(var j=0; j<nums.length; j++) {
        var complement = target - nums[j];
        if (complementMap.has(complement)) {
            return [complementMap.get(complement), j]
        }
        complementMap.set(nums[j], j);
    }
}

Understanding JS primitives

Chandrasekar Gokulanathan — Mon, 13 Jan 2020 07:40:16 +0000

JavaScript is a loosely typed language. Hence it's very easy for developers to overlook the need to understand its data types. But as we go on to work with different JS frameworks and libraries, the raw knowledge of JS becomes imperative to grasp their nuances.

Let's start from the very basics. We'll question our knowledge and try to answer them along our way.

Data Types

We all know that there is no static typing in JS. Meaning, developers cannot enforce the data type of variables before-hand. It'll always be inferred by JS at run-time.

// Static typing - not possible in JS
int noOfYears = 5;
string name = 'Code';

// Dynamic typing
var noOfYears = 5;
typeof noOfYears;       //  "number"
var name = 'Code';
typeof name;            //  "string"

The typeof operator returns us a string indicating the type of the variable JS has evaluated at run-time.

Q1 : So, how many data types does JS know to evaluate our variables?

There are 7 primitive types and an Object type.

Primitive types

number
bigint
string
boolean
null
undefined
symbol

When we say primitive it means,

The values are represented directly at the lowest level of the language implementation.
They are immutable (i-e) they cannot be altered.
They are always copied by value instead of reference.
They do not have any associated functions to perform operations on them.

Q2: What does immutability really mean here? Because, when I assign a number to a variable and then re-assign it to a different value, everything seems to work great. In the example below, `a` is mutable right?

var a = 5;
console.log(a); //  5
a = 25;
console.log(a); //  25

Great question indeed. It is true that you are able to change the value of a from 5 to 25. But here, it is important not to confuse a primitive itself with a variable assigned a primitive value.

5 is primitive. Whereas the variable a which has a primitive value of 5 is not a primitive. It's just a variable that supposedly has a primitive value.

If it's still confusing, consider this,

You can in no way change the value of 5. It's always 5 whatever we do with it. The fundamental meaning of the value of 5 cannot be changed by you no matter what.

Consider a string which again is immutable. In the example below, even if we try to modify the string, since its immutable it doesn't change its value.

var animal = "Cat";
console.log(animal[0]); //  C
animal[0] = "R";
console.log(animal); // Cat

Summing up, Values are immutable. Variables are not. They just hold a reference to their (primitive) values.

Q3: Are variables really call by value? Because I remember any changes made to a variable getting reflected in its reference.

This is again a general confusion with developers. Primitives are always copied by value and not by reference. Because, if it's by reference, then they become mutable.

The reference change which people often mention happens with Object types. The example below will make it clear

// Primitive types - Call by Value

var a = 5;
var b = a;
console.log(a); //  5
console.log(b); //  5

b = 100;
console.log(a); //  5
console.log(b); //  100

// Object types - Call by reference

var a = { val: 5 };
var b = a;

b.val = 100;
console.log(a); //  {val: 100}
console.log(b); //  {val: 100}

Here, when we assign a to b, the value of a is copied by value. That is why any changes done to b does not really affect a. Whereas that is not the case if a is an Object.

Q4: I've performed operations with primitive types. The `toUpperCase()` is one example. Then how are that primitives don't have any associated functions with them?

Short answer - JavaScript promptly coerces between primitives and objects.

JS has a few wrapper objects around primitive types. Number is a wrapper around number type. String is a wrapper around string type. These wrappers belong to Object type and have corresponding functionalities to those primitives.

So, lets consider an example,

var animal = "Cat";
console.log(animal.toUpperCase()); // CAT
console.log(animal); // Cat

So, the toUpperCase() actually belongs to the String wrapper object and not the string primitive type.

So,this is what roughly happens behind the scenes,

var animal = "Cat";
var tempVar = new String(animal);
console.log(tempVar.toUpperCase());

I hope this has cleared a few confusions with primitives. Feel free to comment on any other questions/corrections you may have!

References

How I published my first npm module

Chandrasekar Gokulanathan — Thu, 12 Jul 2018 12:01:43 +0000

Publishing an npm module will be in the checklist of most budding javascript developers. After all, we would have used plenty of npm modules ourselves, saving us hundreds of development hours and making our lives much easier. It is only obvious for us to think about contributing back to the community we owe.

To be true, publishing one is relatively simple. But getting an idea for one, which could prove to be useful to the community (in theory at least ;) is relatively harder. There’ll already exist an npm module for most problems we could think of. In fact, like how apple trademarked “There’s an App for that™”, Npmjs could file a trademark for “There’s an npm module for that”.

Coming to the actual story… I was developing a react native application a few weeks back. I had to develop a custom component which would enable me to search a FlatList since there is no built-in support for search. Then, this idea of releasing it as an npm module was bugging me. Because finally, I had something which could be a little useful to someone facing a similar problem.

So, I started making the component much more generic and added support for SectionList as well. Then I began exploring ways of releasing the package.

The first step is to initialize an npm project using npm init and providing it with the necessary info.

The next step is to determine the modules which our package will be dependent on. In my case, it was just react and react-native. But since anybody who would be using this npm module would be doing so in their react-native project, they must already have react-native installed. So, these must be added to peerDependencies instead of dependencies. Apart from these, I didn’t have to use any other modules since the problem was relatively simple.

Then we would have to worry about versioning our modules so that we could release bug fixes, feature updates.. with ease. The standard is to follow semantic versioning.

The patch version must be incremented when doing a bug fix. Minor version when we do some minor feature enhancements without breaking the API. Major version change occurs when we do a** breaking change** to our module.

The next step is to organize our code. The entry point would be the one we specified in package.json. By default it’d be index.js. We could organize it in whichever way we find comfortable.

The final step is to prepare a useful README.md so that, people who actually would want to use our package fell at ease.

Once we have everything in place, we’ll have to check if our package really works. Since it's not published yet, we’ll have to test it by installing - giving it the file path instead of the name of the package. Something like npm install <file-path> would do the trick.

If everything works fine, we’re good enough to publish it to npm. It's as simple as npm login && npm publish if we have an account with npmjs already.

Here's the link of the modules in npmjs.

I also went a step ahead and created a react-native application that demonstrates the functionalities of this module. This application also helped me a lot in the documentation efforts.

Chandrasekar-G / RNSearchableListDemo

RNSearchableListDemo

A react native application to demonstarte the features of react-native-searchable-list

Here's the github Repo and the npm page

Setup

git clone https://github.com/Chandrasekar-G/RNSearchableListDemo.git
cd RNSearchableListDemo
react-native run-ios

View on GitHub

TODO

I’ll have to write unit tests using jest. I began testing my components with jest snapshots. But I just wish to be sure so that I write unit tests actually solve to be useful instead of writing them for the sake of it.
Once jest tests are ready, add a CI preferably Travis.
Adding support for highlighting the text matching the search term.

Feel free to try out this module. Any constructive feedback/pull requests are
welcome :)

Chandrasekar-G / react-native-searchable-list

A Wrapper around FlatList and SectionList with search feature.

react-native-searchable-list

A powerful wrapper around React Native FlatList and SectionList to provide built in search feature react-native-searchable-list is designed to be simple yet a powerful wrapper around react native's FlatList and SectionList components to provide them with search functionality.

Installation

npm i react-native-searchable-list --save

1. SearchableFlatList

API

Props	Description	Data Type	isRequired
`data`	Data for the FlatList	`Array`	✅
`searchTerm`	Searching Term being input by the user. Typically this will be a state variable bound to a text input	`String`	✅
`searchAttribute`	Attribute to be searched in case of array of objects. This will be empty in case of a simple array data	`String`	❌
`ignoreCase`	Case sensitive / Case insensitive search. By default this will be set to true	`Boolean`	❌

By default the SearchableFlatList also inherits all the props of a React Native FlatList. You could use virtually any props you would with a FlatList.

Usage

import

…

View on GitHub

React Native updates with VS App Center CodePush

Chandrasekar Gokulanathan — Tue, 12 Jun 2018 13:05:53 +0000

One handy feature of ‘not-so-native’ apps which get easily overlooked is —
to publish updates without having to go through the usual pain of submitting an update in the play store/app store.

In this tutorial, we’ll see how we can send CodePush updates using the Visual Studio App Center along with CI distribution.

Prerequisites

GitHub account
VS App Center account (You could sign in using github)
react-native cli

Step 1:

Create a react native app using the react-native CLI and push the code to a GitHub repo.

This is how your app will initially look like when you run react-native run-ios

Step 2:

2.1 Login to http://appcenter.ms/. On the Home page, click on the Add new App button.

In the model shown, fill in the details of the app you’re developing. Although we use the same codebase for both the android and iOS versions of our apps, the build process is entirely different. Hence, we’ll have to create separate apps for iOS and Android respectively.

For the sake of the tutorial, we’ll choose the OS as android. The steps will be the same for iOS except that we’ll have to choose the provisioning profile and certificates instead of the android Keystore file.

2.2 Now, link our remote repo in GitHub with this app. You’ll see the list of branches available in the repo. We just have a master branch as of now.

2.3 Click on the gear icon next to the desired branch. This will be the branch we’ll be using for continuous integration.

2.4 To distribute the built apk/ipa files to users we’ll have to sign our builds. For android, we’ll have to generate a** Keystore file** first to be used for signing the build. This is a sample command for generating a Keystore file.

2.5 Turn on the ‘Sign Builds’ option and **‘Distribute Builds’ **option. Upload the Keystore file we just created. Enter the password for Keystore file, key alias and the key password which we gave in the previous prompt.

For iOS, this step will be a little different. We’ll have to choose the provision profile **and the p12 certificate** and provide it with the requires passcodes for the same.

Once we click ‘Save and Build’ option, a manual build will be triggered. Any subsequent commits to the master branch will automatically trigger builds unless we’ve manually turned off that option.

Once the build is complete, you’ll receive an email with a link to download the app. Now, our app is available for distribution and we can add collaborators to use these apps.

We have now successfully established a CI flow for our react-native android app along with app distribution

Step 3:

3.1 Install the app center command-line utility. This includes a host of other features apart from codepush like crashes, analytics…

Log in to the app center. This will open up the browser and display you an authentication token. Copy and paste this token to the command window.

3.2 Go back to the app center. Choose our app and select **Distribute -> CodePush. **Select the Create Standard Deployments button. This will by default create two standard deployments for Production and Staging.

3.3 Now, go back to the terminal again and get the deployment lists. This will give us the list of keys available for the standard deployments available. Make a note of the staging key as we’ll be using this key in the next step.

Step 4:

4.1 We’ll now add the code push client-side SDK to our react native app so that it will be able to listen for updates from the app center and make updates accordingly. Go to the project directory and install the code-push SDK.

4.2 After this use the react-native link command to link this npm module with the android native build. Here you’ll be asked for the deployment keys which we got from the previous step. Use the same key for both android and iOS since we’ll be dealing with the iOS update in a totally different app.

Step 5:

Our next step will be to use this client-side SDK and make changes in our code so that our react native app is able to recognize the updates.

We’ll create a button, on press of which the app will search for updates.

5.1 Go to app.js and import the npm module.

5.2 Add a Touchable Opacity with a corresponding handler.

5.3 Make the above changes and check in the code in the remote git repo. This will trigger a build automatically in the app center and we’ll receive an mail with the new download link for the updated app. Once installed, it’ll look something like this

Step 6:

We’ll now make some text change in our app and release a build using code push.

6.1 Make some text changes in the app. Now, go to the terminal and release a build using code push in staging. Now, this release will be available for apps in the version mentioned in the app.

6.2 Now open the latest mobile app installed. You’ll be prompted with a dialog to update the app. When you click install, the latest update will be installed and you’ll be able to see the text changes we just made.

Here's the github repo if you need a reference,

Chandrasekar-G / ReactNativeCodePush

React Native + Code Push

ReactNativeCodePush

This repo has a sample react native project implemented with React Native Code Push along with CI provided by microsoft appcenter.

View on GitHub

Forem: Chandrasekar Gokulanathan

4. Median of Two Sorted Arrays

Solution

3. Longest Substring Without Repeating Characters

Solution

2. Add Two Numbers

Solution

1. Two Sum

Solution

Understanding JS primitives

Data Types

Q1 : So, how many data types does JS know to evaluate our variables?

Primitive types

Q2: What does immutability really mean here? Because, when I assign a number to a variable and then re-assign it to a different value, everything seems to work great. In the example below, a is mutable right?

Q3: Are variables really call by value? Because I remember any changes made to a variable getting reflected in its reference.

Q4: I've performed operations with primitive types. The toUpperCase() is one example. Then how are that primitives don't have any associated functions with them?

References

How I published my first npm module

Chandrasekar-G / RNSearchableListDemo

RNSearchableListDemo

Setup

Chandrasekar-G / react-native-searchable-list

A Wrapper around FlatList and SectionList with search feature.

react-native-searchable-list

Installation

1. SearchableFlatList

API

Usage

React Native updates with VS App Center CodePush

Chandrasekar-G / ReactNativeCodePush

React Native + Code Push

ReactNativeCodePush

Q2: What does immutability really mean here? Because, when I assign a number to a variable and then re-assign it to a different value, everything seems to work great. In the example below, `a` is mutable right?

Q4: I've performed operations with primitive types. The `toUpperCase()` is one example. Then how are that primitives don't have any associated functions with them?