MikaZuki Augus

Posted on Apr 15, 2022

Learning Modern JavaScript & JQuery

#javascript #webdev #programming #beginners

What's happening my Coding Community!

This week I have been tackling the topics of Modern Javascript and JQuery in my bootcamp course.

Surprisingly as I have stepped on to this part of my Coding journey I have found learning Modern JS and Jquery a tad much easier then learning Vanilla Javascript earlier on in my journey. I guess that may be due to either the simplicity of how these languages/frameworks have been created or to my constant revisiting of Javascript.

Nonthe less since I failed my last Javascript project I have been trying to put in a lot of effort trying to really hone in and learn Javascript properly. I have even been taking physical notes which I probably haven't done since I was in University nearly 8 years ago 😧 .But yes long story short I really want to get the hang of this and try to implement it into future projects.

With Modern JS my findings have made me come across these concepts that have made a lot of sense to me:
Map()
Filter()
Reduce()

With Map() being able to Execute a function on all elements.
Filter() to filter unwanted elements out.
Reduce() to reduce all elements to a single output.

Using these methods and working them against certain arrays I have been able to grasp how these actually pull apart functions in your code and visually sort them for you.

One Example I have is below:

From the example above I was able to pull the information of the student ID's I wanted from the array.

Another Example of Filtering Student information I have also below:

These practical examples I have been working with within Modern JS have helped my understanding a lot. I hope it also helps make a bit more sense to you. For further help with my understanding and studying I have been taking up extra lessons outside of my bootcamp with Net Ninja.
You can find a good source of his material right here:
https://youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc

Now moving on to the Framework JQuery this has also helped simplify a lot of Javascript and how to connect to the dom and manipulate html and CSS directly without having to write too much code. However Upon further investigation and research on JQuery it seems that over the last few years the usage of it has been going down a lot compared to other modern frameworks out there like React and VUE. Although according to Google Trends it is still used a lot out there on millions of websites. I guess it's the same thing with what's happening between Bootstrap and frameworks like TailWindCSS etc.

How do you guys feel about JQuery and its decline, is it something to stick around still for years to come? Should I give up on pursuing JQuery for future projects and just pickup React instead?

I hope this article helped you pick up a bit more understanding of Modern JS like it did for me.

Follow me on Twitter: @CodezMikazuki

Thanks for reading,
Malcz/Mika

Top comments (8)

peerreynders • Apr 16 '22

With Map() being able to Execute a function on all elements.

That's what Array.prototype.forEach() is for (Looping over Arrays).

Array.prototype.map() creates an entirely new array with elements that are the result of calling the function with the element from the original array at the identical index position.

Filter() to filter unwanted elements out.

Array.prototype.filter() also creates an entirely new array. In this case the array only contains elements from the original array where the passed function returns a truthy value. That function is often referred to as a predicate. filter can be an unfortunate name as it isn't clear what is "valuable"—what is "removed" or what is "passed" and it is somewhat inappropriate as the original array isn't modified as nothing is "removed". So in some way you could say that the predicate determines which elements to "keep" for the new array.

Reduce() to reduce all elements to a single output.

Array.prototype.reduce(). Just be careful here—that single output could be an object of a number of key/value pairs or an array with many elements. Keep in mind that both map() and filter() can be implemented in terms of reduce().

function mapToArray(array, fn) {
  const reducer = (accumulator, element) => {
    accumulator.push(fn(element));
    return accumulator;
  };

  return array.reduce(reducer, []);
}

function filterToArray(array, predicate) {
  const reducer = (keep, value) => {
    if (predicate(value)) keep.push(value);

    return keep;
  };

  return array.reduce(reducer, []);
}

const subjectEntries = [
  ['art', 'Simon'],
  ['cad', 'Paul'],
  ['english', 'Joan'],
  ['math', 'Harry'],
  ['science', 'Iris'],
];

function appendSubjectTeacher(subjects, [name, teacher]) {
  subjects[name] = {
    name,
    teacher,
  };
  return subjects;
}

const allSubjects = subjectEntries.reduce(appendSubjectTeacher, {});

function appendSubjectGrade(gradedSubjects, [name, grade]) {
  gradedSubjects[name] = {
    subject: allSubjects[name],
    grade,
  };

  return gradedSubjects;
}

const toGradedSubjects = (entries) => entries.reduce(appendSubjectGrade, {});

const students = [
  {
    name: 'John',
    subjects: toGradedSubjects([
      ['cad', 87],
      ['english', 75],
      ['math', 90],
    ]),
  },
  {
    name: 'Emily',
    subjects: toGradedSubjects([
      ['art', 95],
      ['english', 80],
      ['science', 93],
    ]),
  },
  {
    name: 'Adam',
    subjects: toGradedSubjects([
      ['art', 80],
      ['math', 95],
      ['science', 83],
    ]),
  },
  {
    name: 'Fran',
    subjects: toGradedSubjects([
      ['art', 95],
      ['english', 87],
      ['science', 67],
    ]),
  },
];

const isTopMathStudent = ({ subjects }) => (subjects.math?.grade ?? 0) >= 90;
const topMathStudents = filterToArray(students, isTopMathStudent);

const toName = ({ name }) => name;
console.log(mapToArray(topMathStudents, toName)); // ["John", "Adam"]

Should I give up on pursuing JQuery for future projects and just pickup React instead?

Apples and Oranges.

jQuery was useful when it was first released in 2006 during the Browser wars to make it easier to write code that worked across the different browsers—since then browsers have harmonized somewhat (now Safari is lagging behind while Chrome is bullying everybody to adopt more and more advanced features for better or worse) and the browsers have absorbed the best ideas from jQuery. So jQuery is a legacy technology that could be encountered anywhere so it can be useful to know the basics in order to be able to work with existing code but for the most part try not to create more jQuery dependent code.

It's useful to know how common jQuery tasks can implemented in plain JavaScript.

Now these days different browsers do support the latest JavaScript features to a varying degree - and this is where Babel fits in as it can generate code that is supported by most browsers (the level of which is configurable).

Learning React means just that—you are learning React—but it doesn't teach you anything about the web in general.

The Web of Native Apps II: Google and Facebook:

"Hence while they have Reactjs for the browser, they also have React Native for mobile. Facebook realizes they have no advantage in the Web over any usurper platform, and helping the Web only further enshrines their competitors."

React is designed by Facebook for its own needs (and values) and due to it's popularity it's become a Golded Hammer—so it's used in places where it isn't optimal.

To get a sense of where things are at, read: experiences. Web. frameworks. future. me.

The point is that DOM manipulation (as it was practiced in the past with jQuery) is still an important skill: Introduction to the DOM; it's something frameworks don't teach but knowledge that is needed on those edge cases that come up often enough. Also there is a whole spectrum of development from the document to the application web that one single framework cannot cover. So there is a whole spectrum of web rendering techniques.

React by itself only covers Client-side Rendering.
For Server-side rendering Next.js has to be added. But that comes at the cost of full page hydration. Depending on the use case there are often better options.

Recently Fred K. Schott (Astro) broke the web down to:

Marketing
Publishing
E-commerce
Stateful
Apps

React was designed before 2013 for the "Apps" and "Stateful" space - and while it's currently in use for many E-commerce settings (it's popular) there can be trade-offs (e.g. in 2014 eBay decided it wasn't a good fit for them and developed Marko instead).

Amila Welihinda

@amilajack

Server side render everything

amazon.com is server side rendered and has no client side rendering framework. The potential latency hit didn't justify it.

We were stuck with jQuery 1.6.4 😬

SSR React wasn't fast enough for us. This blew my mind.

19:26 PM - 22 Jan 2022

CommitStrip

@commitstrip

A theory about PHP
commitstrip.com/2021/02/03/a-t…

18:11 PM - 03 Feb 2021

MikaZuki Augus • Apr 19 '22

Thank you for the substantial feedback Peer.
Very helpful and useful information I will refer back to while I continue my studies!

Chris Gustin • Apr 15 '22

I think it’s worth learning the basics of jQuery and how it works, but I wouldn’t spend much more time than that unless you’re looking at a career that will involve working with older sites, or you’re looking at becoming a Wordpress dev (or a similar stack that has jQuery baked in). My opinion, you’ll get more bang for your buck focusing on learning and understanding plain Javascript at the start.

MikaZuki Augus • Apr 19 '22

Thanks for the feedback Chris, I also believe this as well. I have covered most of the basics in my course, So I think I have got it much covered. But yes will I believe the JS fundamentals are always best to always go back to.

AjeaS • Apr 16 '22

Nice post! yea JQuery is a small library to help out with writing JS code. It’s nice to know how to use it, but you don’t need to dive too deep into it. Commonly people use it on static websites(making animations and such) but you rarely/or don’t see it used on web apps using React. Nonetheless, good luck on your dev journey. Looking forward to your progress 👌