Learning Modern JavaScript & JQuery

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.

• You might not need jQuery
• You Don't Need jQuery (anymore)
• You Don't Need jQuery
• (Now More Than Ever) You Might Not Need jQuery
• jQuery considered harmful

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.

• The Cost of Javascript Frameworks
• radEventListener: a Tale of Client-side Framework Performance

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

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.

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 👌

1.javascript.info/
2.javatpoint.com/javascript-tutorial
3.developer.mozilla.org/en-US/docs/L...