
## Linking Objects or Inheriting From Objects

In JS, you can link objects and make them share properties pretty easily. Let's create an object `talk` that has a function `greet`. And create 2 objects from where we want to link `talk` object so that we can invoke `greet` function as if it exists on the other object.

```js
var talk = {
  greet: function () {
    return 'Hello! I am ' + this.name
  },
}

var friend = {
  name: 'meher',
}

var buddy = {
  name: 'you',
}
```

Now, if you console log the friend object, you would see the internal slot called as `[[Prototype]]`(in case of Chrome) and `<prototype>`(in case of Firefox). This internal slot `<prototype>` by default points to the Object constructor, which is one of the [fundamental object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#fundamental_objects). In simple terms, fundamental objects are just built-in objects, they are Object, Function, Boolean, and Symbol functions.

For us to make our object invoke the `greet` function as it was it own, we need to make this internal prototype(`[[prototype]] or <prototype>`) point to the `talk` object.

```js
Object {
	name: "meher"
	// we want to point this to the `talk` object, as this is used for the look up
	[[prototype]]: Object {...}
}
```

The following 2 ways we can make the internal prototype(`[[prototype]] or <prototype>`) point to the `talk` object but we don't use them because there are heavy performance [implications](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto). In a gist, changing is the `[[prototype]]` is generally slow due to how JS engine optimizes property accesses.

```js
// try both nonetheless to just see the effect, just avoid them in prod
friend.__proto__ = talk
// or
Object.setPrototypeOf(friend, talk)
```

The correct way to do it would be using `Object.create` method. The reason this does not impact the performance is that `Object.create` creates a temporary object that points to the `talk` object, and we make our object point to this. Look at this over-simplified polyfill for Object.create. You can check MDN for a complete [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create).

Overall, the `new` keyword does the most heavy lifting here, and you must [watch this video](https://youtu.be/g2XWyfHvjCk) to follow what exactly `new` keyword does.

```js
// oversimplified polyfill, check MDN for link for in-depth polyfill
function ObjectCreate(pointTo) {
  function F()
  F.prototype = pointTo
  var obj = new F()
  return obj
}
```

Now, coming back to our code, if you couldn't follow the polyfill for Object.create then simply assume it to be a nice little black box that _links_ objects without having a performance implication. And there are 2 ways to use it:

```js title="without property descriptor"
var friend = Object.create(talk)
friend.name = 'meher'
```

Object.create has 2 parameters, the second one is a [[property descriptor]], which is a fancy word for describing the nature of properties of your object. Here we are using a simple property descriptor that makes us update the `name` property later, if we wanted to. If we kept the writable `false` then we wouldn't be able to change the `name` property to anything else.

```js title="with property descriptor"
var friend = Object.create(talk, {
  name: {
    value: 'meher',
    writable: true, // we want the object to be ...
  },
})
```


Linking Object or Inheriting From Objects


https://www.youtube.com/watch?v=e08ERlmpdqQ

Think of default binding as the rule that applies when none of the other binding rules apply. Let's take a look at the most common way to invoke a function.

```js
function name() {
  console.log(this)
}

name()
```

When you load such code in your browser window through the developer console or an HTML document,
the function name gets added to the global object. In the case of a browser (the other being the
Node environment), the global object is the window object.

The window object contains numerous functions, namespaces, objects, and constructors, all of which
are globally available throughout your codebase. Therefore, when we inquire about `this` within a
function like this, we receive the window object as the result. These are some methods and
properties in window object, you can enter `window` in developer console and see something like
this:

```js
console.log(window)

Window {
  alert: ƒ alert()
  atob: ƒ atob()
  blur: ƒ blur()
  btoa: ƒ btoa()
  caches: CacheStorage {}
  cancelAnimationFrame: ƒ cancelAnimationFrame()
  cancelIdleCallback: ƒ cancelIdleCallback()
  captureEvents: ƒ captureEvents()
  chrome: {loadTimes: ƒ, csi: ƒ}
  clearInterval: ƒ clearInterval()
  clearTimeout: ƒ clearTimeout()
  // ... so on
}
```

## But Why?

When an identifier like the function name is declared in the global scope, the identifier is added
to the global object.

And when we are invoking the `name` function, what JavaScript is actually doing behind the scenes
is:

```js
window.name()
```

And it should be clear why this keyword is pointing to the window object because our

<b>invocation-site</b>(window.name) clearly shows that `name` function should be invoked from the
perspective of the window. And that's why `this` in a function in global scope points to the
`window` object.

## Strict Mode

In strict mode, it's quite simple, you will get `undefined`, which is an appropriate response and
avoids all the confusion.

```js
'use strict'

function name() {
  console.log(this) // > undefined
}

name()
```

Even if `use strict{:js}` is used in function scope, `this` keyword points to `undefined`

```js
function name() {
  'use strict'
  console.log(this) // > undefined
}

name()
```

So that's one other way the value of `this` keyword can have a different value.

Now, let's look at the
[next part](/implicit-binding-this-keyword) which is
[**Implicit Binding**](/implicit-binding-this-keyword)


Default Binding - THIS Keyword


https://youtu.be/zoz_Ih9-y_0

Implicit binding applies when we use a function and invoke it as a method of an object. In that
case, the `this` keyword points to the object on which the method was invoked. In the following
examples you will notice that the invocation of `getName` was done using the object `person` and
that's what made the `this` keyword point to the `person` object.

```js
var person = {
  firstName: 'meher',
  getName: function () {
    console.log(this.firstName)
  },
}

person.getName() // outputs meher
```

## Function Outside the Method

Furthermore, it doesn't matter if the function was defined inside or outside the object. Take a look
at the example below, the function's definition location is inconsequential. However, because the
function is once again invoked using the person object, the this keyword comprehends the context and
refers to the person object.

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',
  getName,
}

person.getName() // outputs meher
```

As the function location doesn't matter, we can use this to our advantage and create a reusable
function that can run on different objects and return different results. For example, if `employee`
object and `person` object both can access the `firstName` function.

## When Implicit Binding Fails

If you store the function reference in a variable and then invoke the function later. **The implicit
binding is lost.**

```js
var person = {
  firstName: 'meher',
  getName: function () {
    console.log(this.firstName)
  },
}

var fn = person.getName

// isn't this invocation similar to default binding,
// this returns 'undefined' as the window object has no firstName
fn()
```

## Callbacks

There is a rule that says, this keyword points to whatever is on the left side of the method. Unfortunately, it doesn't work with callbacks. Here's an example:

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',
  getName,
}

function displayFirstName(cb) {
  cb()
}
// because again the cb() invocation follows the default binding rule and
// hence this keyword points again to window
displayFirstName(person.getName)
```

And this can even happen when we use a native method like setTimeout. So when it comes to passing methods, we should always give a thought about how the actual invocation will happen and how will it impact the value of `this` keyword.

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',
  getName,
}

setTimeout(person.getName, 1000)

// An implementation similar to this could be found in a library or native API:

function setTimeout(fn, delay) {
  fn()
}
```

So that's second way the value of `this` keyword can have a different value. Now, let's look at the
[next part](/explicit-binding-this-keyword) which is
[**Explicit Binding**](/explicit-binding-this-keyword)


Implicit Binding - THIS Keyword


https://youtu.be/EelD6EFWgcs

JavaScript's prototypal system is inspired by the language Self. Now, Self was the first one to
implement it. Lua, ActionScript, JScript, Cecil and many other languages exist that implement this
pattern.

In prototype system, there are no classes. Yes, JS has no classes and ES6 classes is just a
syntactic sugar, internally JS does prototype-based wiring for you.

Class-based languages are based on a deep-rooted duality of Classes & Object Instances. For instance,
if we create an object of the class Vehicle, such as Red Car, and send it a message to deliver super
heavy materials, it is not feasible because Red Car is not equipped for that and it is something
that's wired in Vehicle class. This highlights the importance of subclassing, which enables creating
specialized classes, such as Sports Car and Truck, with their own unique capabilities.

However, predicting the future qualities of objects and classes is challenging, and systems can
become rigid when the initial design does not anticipate future changes. And this
was one of the motivation to create prototype feature, as such use cases occur in real world development
all the time.

## Object

Objects are much more than just maps in JavaScript. They are not just a collection of key value
pair. They are very generic in nature for instance, you can link them to create the features of
inheritance with no classes at all.


Inheritance in JavaScript


JavaScript, or JS, is a web programming language alongside HTML and CSS. It is widely used, with 98% of websites incorporating it for webpage behavior. JavaScript is a high-level language with dynamic typing and supports multiple programming styles. It has APIs for various tasks and works with the Document Object Model (DOM). While it lacks built-in I/O, web browsers and runtime systems provide JavaScript APIs for that.

JavaScript engines are now used in servers and applications, with Node.js being the most popular runtime system. Despite similar names, Java and JavaScript have distinct designs and differ significantly.

## Influences

- C and C++ influenced JavaScript's syntax.
- Self inspired JavaScript's prototype-based object-oriented programming model.
- Lisp and Scheme influenced JavaScript's functional programming concepts.
- Perl influenced JavaScript's regular expression syntax.
- Smalltalk influenced JavaScript's event-driven programming model.
- Haskell influenced JavaScript's built-in functional methods.

## EcmaScript vs JavaScript

ECMAScript is the standardized scripting language specification, defining the syntax, semantics, and behavior. JavaScript is the most widely used implementation of ECMAScript, known for web development. It extends the specification with browser-specific features like DOM manipulation and event handling.

In simpler terms, ECMAScript is the standard, while JavaScript is its popular implementation primarily used in web browsers. Other implementations include JScript and ActionScript.

## Creation

In the early days of the web, Mosaic was a popular browser that led to the founding of Netscape. Netscape Navigator, a more advanced browser, was released in 1994 and gained widespread usage. To overcome the limitation of static web pages, Netscape sought to add a scripting language. They considered Java and Scheme but ultimately decided on a new language with Java-like syntax.

Initially named LiveScript, it was later rebranded as JavaScript upon its official release in December 1995. The choice of the name JavaScript caused confusion, as it was unrelated to Java and seen as a marketing tactic during the dot-com boom.

## Browser Wars

In the browser war between Microsoft and Netscape, Microsoft introduced Internet Explorer in 1995 and developed its own JavaScript interpreter called JScript. JScript was released in 1996 with support for CSS and HTML extensions, but it differed significantly from Netscape's implementation, causing compatibility issues for developers.

In 1996, Netscape submitted JavaScript to Ecma International to establish a standardized specification, leading to the release of the first ECMAScript language specification in 1997. Microsoft's dominance in the browser market made JScript the de facto standard for client-side scripting. While initially involved in the standards process, Microsoft eventually withdrew, leading to the shelving of ECMAScript 4.

## Growth

In the early 2000s, Internet Explorer dominated the browser market, causing stagnation in client-side scripting. However, in 2004, Mozilla's release of Firefox challenged Internet Explorer's dominance and gained significant market share. Mozilla joined ECMA International in 2005 and collaborated with Macromedia (later Adobe Systems) to standardize ActionScript 3 as the new ECMAScript 4.

Despite efforts, ECMAScript 4 did not materialize without Microsoft's cooperation. Meanwhile, open-source communities thrived, with the introduction of Ajax and JavaScript libraries like jQuery, Prototype, Dojo Toolkit, and MooTools. Google's Chrome browser, featuring the faster V8 JavaScript engine with just-in-time compilation, prompted other browser vendors to improve their engines. In 2009, a conference in Oslo brought various parties together, resulting in the release of ECMAScript 5 standard in December 2009.

## Dominanace

ECMAScript 6 was published in 2015, marking the culmination of years of ambitious work and introducing numerous additions and refinements. The introduction of Node.js in 2009 by Ryan Dahl expanded JavaScript's usage beyond web browsers, providing a standalone runtime system. Node.js, powered by the V8 engine, an event loop, and I/O APIs, gained popularity among millions of developers, with npm becoming the world's largest package manager.

The ECMAScript draft specification is now openly maintained on GitHub, with regular annual snapshots and a comprehensive proposal process for potential language revisions. The JavaScript ecosystem includes libraries, frameworks, established practices, and extensive usage outside of web browsers. Transpilers have emerged to facilitate development, particularly for single-page applications and JavaScript-intensive websites.


Introduction to JavaScript


There were many options that I tried, I think one with the `currentColor` option but the one that worked seamlessly was this little snippet, you place it right after the SVG tag and it just works.

I also use [Next-Themes](https://www.npmjs.com/package/next-themes) that fully supports dark mode, including system preference with prefers-color-scheme and also immediately syncs this between tabs.

In a gist, the `prefers-color-scheme` is CSS media feature is used to detect the user's preferred color scheme or theme set in their operating system or device settings. Also, you can read more about it in [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

```html
<svg width="351" height="348" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
  <style>
    svg {
      fill: #232323;
      stroke: #444;
    }
    @media (prefers-color-scheme: dark) {
      svg {
        fill: #999888;
        stroke: #fafafa;
      }
    }
  </style>
  <g>
    <title>Layer 1</title>
    <g id="svg_440">
      <path>.....</path>
    </g>
  </g>
</svg>
```


How I added Light & Dark Theme SVGs on my Website


In this tutorial, we will look at `this` keyword and break it down into five parts so that each part
is bite-sized and easy to comprehend. By the end of this series, you will have a super solid
intuitive mental model that will stay with you for the longest time.

## Background

The JavaScript language is quite inspired by the language Scheme. Scheme is the language that has
inspired functional programming languages like Haskell and Closure.

But in later stages, the makers of JavaScript noticed a rise in the popularity of Java and decided
to make JavaScript look like Java for easier adoption. And that choice brought many features from
the object-oriented world into JS. And we know that a functional programming language doesn't have
`this` keyword, but object-oriented programming does.

Even though JS decided to mimic the look and feel of Java, from within, JS is very much like Scheme.
It does not implement a true object-oriented system, but JS achieves inhertiance by leveraging the
prototype model. Although you might say that ES6 has classes, and it is nothing but syntactic sugar
over the prototype system.

> ES6 classes are just a syntactic sugar over the Prototype Model.

With all that being said, `this` keyword is very easy concept to understand, and let me show you
how.

## Why Do We Need THIS

One way you can see this keyword is as a way to do a 2-dimensional look up in your scope. When you
define a variable, the lookup in your scope chain happens from inner to outer functions until you
reach the global scope. Now, what if you want one of your variables to look up for data/or-its-value
in other parts of your scope? `this` keyword gives us a way to solve it. And there is much more to
`this` which we will see in the next part of the series.

Now, you could say that, I could write a function and receive an argument as my data. And you
wouldn't be wrong, but that's just another way to solve it.

## Call Site

Call site refers to the location of the function invocation, and it is an important step in
determining what the value of `this` keyword is going to be. In some cases, the call-site can get
hidden away by libraries and native APIs, e.g., setTimeout, but those cases are limited and
predictable.

There is an informal rule that says, whatever is on the left is what this keyword points to. It's a
good conclusion to some extent, but nevertheless, how we reach that conclusion is important too.

> 'this' is a run-time binding and not an author-time binding.

## Rules for Call Site

The value of this keyword depends on _how_ the function is invoked. We should now ask ourselves,
**how many ways** can a function be invoked in JavaScript? The answer to that question is, there are
five ways to invoke a function:

- **Default Binding**
- **Implicit Binding**
- **Explicit Binding**
- **new Operator Binding**
- **Arrow Functions**

In the [next part](/default-binding-this-keyword), we will see how
[**Default Binding**](/default-binding-this-keyword) works. By the way, I have covered these posts in the my youtube channel as well.

https://youtu.be/e08ERlmpdqQ

https://youtu.be/zoz_Ih9-y_0

https://youtu.be/ht9jxw8G0AE

https://youtu.be/g2XWyfHvjCk

https://youtu.be/zBdpnVIfQVc


THIS Keyword in JavaScript


## AWS Account Creation

The first thing we need to have is access to AWS. You will have to sign up and provide your credit
card details for account creation. I created myself a new AWS account, incase I face any issue I can
highlight possible solutions to you.

After creating my fresh new account, it looks something like this on my landing page. Hope it looks
somewhat similar for you as well.

## Getting Started

AWS Lambda is essentially a language-specific environment that runs in an execution environment
called as runtime. This runtime passes events, context information and responses between other
lambdas as well.

### Install Python & PIP

Python should be most probably installed on your computer. You can test by running
`python --version` or `python3 --version`. You can install Python from here:
https://www.python.org/downloads/

Try running `pip --version` if its installed, if not then you can install it from here:
https://pip.pypa.io/en/stable/installation/

### Installing Docker

I installed Docker on my iMac using the GUI package as it would handle setting all the configuration
and path correctly. There is a CLI option as well but I wouldn’t recommend it unless the GUI package
is unable to install for you. Docker’s download page > https://docs.docker.com/desktop/

### Installing AWS CLI

We would need the AWS CLI to push the docker container to the AWS ECR which is just a registry or
repository for storing the images. I again used the GUI installer from here >
https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

## Lets Create Our Codebase

### Create Dockerfile

```docker
# source the base image
FROM public.ecr.aws/lambda/python:3.9

# copy function code
COPY app.py ${LAMBDA_TASK_ROOT}

# each required library is listed as a separate line
COPY requirements.txt  .
RUN  pip3 install -r requirements.txt

# set the cmd to the handler
CMD ["app.handler"]
```

### Create Lambda Function

We will create a simple function that returns the parameter it receives. This way will get to see
what information does our lambda function has available when it begins to run.

- **Event** is a dict that contains the parameters which are sent when the function is invoked
- **Context** param is the context in which the function is called

```python
import jsonpickle

def handler(event, context):
	return {
		"EVENT": jsonpickle.encode(event),
		"CONTEXT": jsonpickle.encode(context)
	}
```

### Create requirements.txt

```txt
jsonpickle==1.3
```

## Running Lambda Container Locally

### Build

```shell
docker build -t <container-name> .
```

e.g. if we name our container raring-rusty then the cmd will look like:

```shell
docker build -t raring-rusty .
```

After the build is complete, we can quickly verify by hitting the following command.

```shell
docker images
```

It should output something like this:

```shell
➜ docker images
REPOSITORY     TAG       IMAGE ID       CREATED        SIZE
raring-rusty   latest    a0ea76e99b97   1 minute ago   595MB
```

Before we can run the docker, we have to install a Runtime Interface Client which defines a HTTP
interface for runtimes to receive invocation events from Lambda and respond.

### Install RIC

```shell
pip install awslambdaric
```

### Running

```shell
docker run -p 9000:8080 <container-name>:latest
```

e.g.

```shell
docker run -p 9000:8080 raring-rusty:latest
```

## Testing Lambda Invocation

### Using Postman

You can install Postman from here: https://www.postman.com/ and test the lambda function before
deploying it to AWS ECR

### URL

```url
http://localhost:9000/2015-03-31/functions/function/invocations
```

### Method

```txt
POST
```

### Body -

- Select `raw` as the body type and `json` as the format

```json
{ "is_cat": "true" }
```

### Authorization

```txt
No Auth
```

### Using CURL

```shell
curl -XPOST "http://localhost:9000/2015-03-31/functions/function/invocations" -d '{"is_cat":"true"}'
```

### Result

At this point you should get a response back from your lambda function. Mine looked like below:

```json
{
  "EVENT": "{\"is_cat\": \"true\"}",
  "CONTEXT": "{\"_epoch_deadline_time_in_ms\": 1657690206053, \"aws_request_id\": \"048c7493-7487-4af8-9b28-6a774ccfad8c\", \"client_context\": null, \"function_name\": \"test_function\", \"function_version\": \"$LATEST\", \"identity\": {\"cognito_identity_id\": null, \"cognito_identity_pool_id\": null, \"py/object\": \"awslambdaric.lambda_context.CognitoIdentity\"}, \"invoked_function_arn\": \"arn:aws:lambda:us-east-1:012345678912:function:test_function\", \"log_group_name\": \"/aws/lambda/Functions\", \"log_stream_name\": \"$LATEST\", \"memory_limit_in_mb\": \"3008\", \"py/object\": \"awslambdaric.lambda_context.LambdaContext\"}"
}
```

In next part, let’s look at how we can push our docker image to AWS ECR i.e. Elastic Container
Registry to which our AWS Lambda will point.


Deploy Python Lambda functions with Docker


## Introduction to Algorithms by CLRS version of Merge Sort

I like this version of more than the regular merge sort version because we can see much more clarity
in terms of recursion. Initially, the letters `p, q, r` might looks strange but they just denote p
as the 0th index, q as a mid-point index, r as the last index

## Main function's pseudocode

- For an input array A[p…r]
- Find the floor mid-point q as (p+q)/2
- mergesort(A, p, q)
- mergesort(A, q+1, r)
- merge(A, p, q, r)

## Merge function's pseudocode

In the below pseudocode, setting the B and C as infinity helps us avoid running through the last
remaining array for which we have to write 2 loops in the regular merge sort version. Inserting a
“Sentinel” value, in this case a value that will be larger than any real value in the array, at the
end of the array will make the check against it always fail. Also, sentinel value can be thought of
as a value that terminates the loop.

- create B and C as new arrays
- set i and j as 0
- copy A[p..q] to B and A[q+1..r] to C
- set B’s and C’s last item as Infinity
- for k = p to r:
  - if B[i] is less than C[j]
    - set A[k] as B[i] and increment i
  - else if B[i] is more than C[j]
    - set A[k] to C[j] and increment j

## Final Code

```js
var input = [1, 5, 5, 2, 9, 4, 8, 7, 4, 5, 1, 0, 8, 2, 1, -1, -3]

function mergeSort(A, p, r) {
  if (p >= r) return

  var q = Math.floor((p + r) / 2)
  mergeSort(A, p, q)
  mergeSort(A, q + 1, r)
  merge(A, p, q, r)
}

function merge(A, p, q, r) {
  var B = [],
    C = []
  var i = 0,
    j = 0

  for (var m = p; m <= q; m++) {
    B.push(A[m])
  }

  for (var m = q + 1; m <= r; m++) {
    C.push(A[m])
  }

  B.push(Infinity)
  C.push(Infinity)

  for (var k = p; k <= r; k++) {
    if (B[i] <= C[j]) {
      A[k] = B[i]
      i++
    } else if (B[i] > C[j]) {
      A[k] = C[j]
      j++
    }
  }
}

mergeSort(input, 0, input.length - 1)
console.log(input)
```


CLRS Merge Sort in JavaScript


## NextJS

For generating static site for performance. However, one thing I noticed really late in the
development was that NextJS doesn't generate images of various sizes at build time. Making NextJS
not a true static site generator.

## Bulma

Bulma is a vanilla CSS library, no JS based components. I needed something timeless for styling
because I didn't want to use a component library that tightly binds style with logic. Because web is
so evolving I didn’t to invest any time maintaining stylesheet, upgrading them and all the nuances
that come with a library.

I knew I wanted something like sass based that supports nesting of classes and handles name-spacing.
Luckily NextJS supports css modules out of the box to handle this. So now I just plain vanilla CSS
using utilities from Bulma for grids, basic layout classes etc and NextJS takes care of the rest.

Now, by having NextJS CSS modules I do have added a layer of processing over my vanilla CSS. But
even if I pull out css modules out of my system, I would just have to add a wrapping classname in my
CSS because all my CSS is nested in a SASS like format.

## MDX

I am using Markdown X to write the contents of the post. Markdown was sufficient but I needed to
rearrange the HTML structure that was generated from the markdown to be intercepted and rearranged
in a different order or configuration. MDX does that by giving you a hook before it renders the
document. My use case was creating a table of content for my post and I needed to have an anchor tag
within the heading tag.

```js
## Heading -> <h2>Heading</h2> // Markdown
## Heading -> <h2><a href="intro">Heading</a></h2> // MDX
```

## Vercel

The deployment is handled by Vercel. It deploys on every push to the master and also takes care of
the image generation which I highlighted earlier.


How I Built My Website


## Overview

- It’s a standard recursive algorithm similar to binary search.
- The array is split until the pairs or individual item exist . The pairs are sorted.
- A merge routine then merges the 2 sorted arrays and this repeats until all the parts are merged.

## Merge Routine

The merge routine is as following for 2 sorted arrays:
[MIT Ref](https://www.youtube.com/watch?v=bOk35XmHPKs)

| Left Sorted Array | Right Sorted Array |
| ----------------- | ------------------ |
| 20                | 12                 |
| 13                | 11                 |
| 7                 | 9                  |
| 2                 | 1                  |

Steps to merge the left and right array:

- use 3 pointers for left half, right half and the resulting sorted array.
  [YT Ref](https://www.youtube.com/watch?v=bOk35XmHPKs)
- compare 1(i) & 2(j), strike off 1, push 1 at an index(k) in new array and move the pointer to 9
- compare 9 & 7, strike off 7, push 7 at an index(k) new array and move the pointer to 13
- repeat

## Code for Merge

- sorting will an easier operation as we are going to swap the A[0] and A[1] of the split array.

```javascript
function merge(input, leftHalf, rightHalf) {
  var leftSize = leftHalf.length
  var rightSize = rightHalf.length
  var i = 0,
    j = 0,
    k = 0

  while (i < leftSize && j < rightSize) {
    if (leftHalf[i] <= rightHalf[j]) {
      input[k] = leftHalf[i]
      i++
    } else {
      input[k] = rightHalf[j]
      j++
    }
    k++
  }

  while (i < leftSize) {
    input[k] = leftHalf[i]
    i++
    k++
  }

  while (j < rightSize) {
    input[k] = rightHalf[j]
    j++
    k++
  }
}
```

## Code for Split and Sort Recursively

```js
function mergeSort(input) {
  var leftHalf = []
  var rightHalf = []
  var remains = input.length % 2
  var middle = (input.length + remains) / 2

  if (input.length < 2) {
    return input
  }

  for (var i = 0; i < middle; i++) {
    leftHalf[i] = input[i]
  }

  for (var i = middle; i < input.length; i++) {
    rightHalf[i - middle] = input[i]
  }

  mergeSort(leftHalf)
  mergeSort(rightHalf)

  merge(input, leftHalf, rightHalf)
}
```

## Final Complete Code

```js
var input = [2, 74, 12, 9, 1, 1, 1, 0, 9, 6, 5, 6, 6, 5]

function merge(input, leftHalf, rightHalf) {
  var leftSize = leftHalf.length
  var rightSize = rightHalf.length
  var i = 0,
    j = 0,
    k = 0

  while (i < leftSize && j < rightSize) {
    if (leftHalf[i] <= rightHalf[j]) {
      input[k] = leftHalf[i]
      i++
    } else {
      input[k] = rightHalf[j]
      j++
    }
    k++
  }

  while (i < leftSize) {
    input[k] = leftHalf[i]
    i++
    k++
  }

  while (j < rightSize) {
    input[k] = rightHalf[j]
    j++
    k++
  }
}

function mergeSort(input) {
  var leftHalf = []
  var rightHalf = []
  var remains = input.length % 2
  var middle = (input.length + remains) / 2

  if (input.length < 2) {
    return input
  }

  for (var i = 0; i < middle; i++) {
    leftHalf[i] = input[i]
  }

  for (var i = middle; i < input.length; i++) {
    rightHalf[i - middle] = input[i]
  }

  mergeSort(leftHalf)
  mergeSort(rightHalf)

  merge(input, leftHalf, rightHalf)
}

mergeSort(input)
console.log(input)
```


Merge Sort in JavaScript


## Overview

Its similar to Merge Sort where we apply divide and conquer approach but unlike Merge sort there is
no need to combine because Quicksort sorts in-place.

## Divide

**Pivot** can be selected by choosing :

- A right most item in the list.
- A randomly selected value is also taken as pivot, the random item is then swapped with the last
  item in the list.
- A set of three random values are picked, the median value among the 3 is swapped with the last
  item in the list.
- Items that are less than pivot are collected in left and right if otherwise.
- The above evaluation will not guarantee sorted items in the left or right.

## Conquer

The left and right chunk are repeated applied with the same evaluation.

## Combine

No combine needed unlike merge sort, because the sorting happens in-place.

## Main Method Pseudocode

- function that takes: A (input), p(starting index), r(pivot's index)
  - if p ≥ r then do nothing
  - get q(dividing line between the left and right chunk) by partitioning
  - invoke the main method with the left chunk with (A, p, q-1) as parameters
  - invoke the main method with the right chunk with (A, q+1, r) as parameters

## Partition Pseudocode

- function that takes: A(input), p(starting index), r(pivot's index)
  - set q as p
  - loop through the input
    - check if the current value of the input is less than the pivot
    - then swap the current value with the q
  - after the loop, swap the r with the q ( this put the pivot in between the left and right chunks)

## Code

```js
var A = [5, 4, 3, 1, 4, 53, 1, 4, 6, 3, 7, 3, 11, 2, 1, 5, 7, 3]

function quicksort(A, p, r) {
  if (p >= r) return

  var q = partition(A, p, r)
  quicksort(A, p, q - 1)
  quicksort(A, q + 1, r)
}

function partition(A, p, r) {
  var q = p

  for (var u = p; u <= r - 1; u++) {
    if (A[u] <= A[r]) {
      ;[A[q], A[u]] = [A[u], A[q]]
      q++
    }
  }
  ;[A[q], A[r]] = [A[r], A[q]]
  return q
}

quicksort(A, 0, A.length - 1)
console.log(A)
```


Quicksort in JavaScript


https://youtu.be/ht9jxw8G0AE

Implicit binding applies when we use a function and invoke it as a method of an object. In that
case, the `this` keyword points to the object on which the method was invoked. In the following
examples you will notice that the invocation of `getName` was done using the object `person` and
thats what made the `this` keyword point to the `person` object.

```js
var person = {
  firstName: 'meher',
  getName: function () {
    console.log(this.firstName)
  },
}

person.getName() // outputs meher
```

## Function Outside the Method

Also, it does not matter whether the function was defined within the object or not. Look at the
below example, the function's definition location doesn't matter at all. But because the function
again invoked using the `person` object, the `this` keyword understand the context and points the to
the `person` object.

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',
  getName,
}

person.getName() // outputs meher
```

Now, you can notice that because function location doesn't matter, we can use this property to our
advantage and create a reusable function(s) that can be run on different objects and return
different result. Imagine, if we had `employee` object somewhere in the codebase and a `person`
object. Both object can reuse the `firstName` function.

## When Implicit Binding Fails

If you store the function reference in a variable and then invoke the function later. The implicit
binding is lost.

```js
var person = {
  firstName: 'meher',
  getName: function () {
    console.log(this.firstName)
  },
}

var fn = person.getName

fn() // looks up globally?
```

## Callbacks

In the case of the callbacks, the general rule these days is that whatever is on the left side,
which doesn't work . See why:

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',

  getName,
}

function displayFirstName(cb) {
  cb()
}

displayFirstName(person.getName)
```

Even when implicit-lost context is passed, the global issue is still raised.

```js
function getName() {
  console.log(this.firstName)
}

var person = {
  firstName: 'meher',
  getName,
}

setTimeout(person.getName, 1000)

// An implementation similar to this could be found in a library or native API:

function setTimeout(fn, delay) {
  fn()
}
```


13 POSTS

Articles

javascript

7 Tutorials

Linking Object or Inheriting From Objects

Default Binding - THIS Keyword

Implicit Binding - THIS Keyword

Inheritance in JavaScript

Introduction to JavaScript

THIS Keyword in JavaScript

Explicit Binding - THIS Keyword

blog

2 Articles

How I added Light & Dark Theme SVGs on my Website

How I Built My Website

cloud

1 Tutorials

Deploy Python Lambda functions with Docker

algorithms

3 Tutorials

CLRS Merge Sort in JavaScript

Merge Sort in JavaScript

Quicksort in JavaScript