Still using jQuery, even if you can create your own if you want?
Tags: javascript, jquery
Published: 2020-06-22 10:29:00

Thanks to [jQuery](//jquery.com) for making our pass time lot easier, but [you might not need jQuery](http://youmightnotneedjquery.com/) for now, it's not deprecated anymore but it was completely outdated.

I remember the time when **jQuery** was become a very popular JS Framework, most of Javascript user using it, i almost always founded Javascript tutorial covered with jQuery, it's good at that time but not for nowadays.

## What's the problem?
**You must stop using jQuery**, but why? It's really helpful to me? I thought you even know that, that's outdated and with just using a native API of Javascript it can be done.

**But how if i was written an complex app with it?** Or i want to work again with my old project? **Should i rewrite from scratch?** If like so then what do you need is just write your own jQuery. Fortunately this is can be really simple 😁

I'll show you how simple it was, as example we can make jQuery `$` selector with native JavaScript API, like this:

```js
const $ = (q) => document.querySelector(q)
```

Then try to find element using CSS selector like what we do in jQuery like `$('.box')` and it's work perfectly.

But if you can realize, we can't get all of the whole elements if there is more than one `.box` classed div, to fix that change the `querySelector` to `querySelectorAll`, the return will give you a list of founded node as object.

```js
const $ = (q) => document.querySelectorAll(q)
```

## How about the Function?

In jQuery we have a lot of "helper" function to manipulate the DOM, we can also do that too.

To extend our own simple jQuery code we need to wrap it in a class and define the selector by creating the class instance using a function. 

Let's move to the real part of *making your own jQuery*:

```js
class ownJQ {
  constructor(q) {
    const el = document.querySelectorAll(q)
    el.forEach((node, index) => this[index] = node)
    
    this.length = el.length
  }
  
  toggle(className) {
    for (let i = 0; i < this.length; i ++) {
      this[i].classList.toggle(className)
    }
    
    return this
  }
}
```

Then lets define the selector function, you can freely choose the selector variable but for similarity purpose i use `$` sign:

```js
const $ = (q) => new ownJQ(q)
// Return result:
// ownJQ {0: div.box, 1: div.box, 2: div.box, length: 3}
```

Now our own jQuery has ready to use, to prove that work as expected lets testing our `toggle` function, what this function do is toggle the founded elements with the given class name.

``` js
$('.box').toggle('bg-red')
// Return result:
// ownJQ {0: div.box.bg-red, 1: div.box.bg-red, 2: div.box.bg-red, length: 3}
```

## That's cool, but how it's work?

I designing the class API as similar as the jQuery do, at first after we defined the `ownJQ` class we need to find all the target element inside the `constructor` function.

``` js
constructor(q) {
  // Find element by query
  const el = document.querySelectorAll(q)
  // Push founded node element to class itself
  // with their index number as key
  el.forEach((node, index) => this[index] = node)

  // All elements total
  this.length = el.length
}
```

> *constructor* is class built-in function that run when the class instance is on creation

```js
toggle(className) {
  // Iterate all element
  for (let i = 0; i < this.length; i ++) {
    // Do toggle class to each node
    this[i].classList.toggle(className)
  }

  // Return the class itself,
  // make it work with chaining function
  return this
}
```

Hopefully this actually as simple as i said, and this is for bonus:

``` js
// You can try this at home
text(v) {
  let texts = []
  for (let i = 0; i < this.length; i++) {
    v ? this[i].innerText = v : texts.push(this[i].innerText)
  }

  return v ? this : texts
}
```

I think it's better then rewrite your whole project especially if you're lazy people like me, but i strongly recommended to you by rewriting your old project with new technology then you can learned new things from it.

![Nick young confused](https://media.giphy.com/media/lkdH8FmImcGoylv3t3/giphy-downsized.gif)

Here's the example & source code:

Source: [https://repl.it/@bramaudi/YourOwnJQuery](https://repl.it/@bramaudi/YourOwnJQuery)
Demo: [https://yourownjquery--bramaudi.repl.co/](https://yourownjquery--bramaudi.repl.co/)