DEV Community

Discussion on: Learning Modern JavaScript & JQuery

View post
Collapse
 
peerreynders profile image
peerreynders •

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"]
Enter fullscreen mode Exit fullscreen mode

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.

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).

Collapse
 
mikacodez profile image
MikaZuki Augus •

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