DEV Community: Baljeet Singh

Which is Array Reduce method in Javascript

Baljeet Singh — Wed, 21 Jul 2021 05:28:28 +0000

Reduce method in javascript is used to reduce the array to a single value. It takes a callback function which takes four parameters (accumulator, currentValue, index, array), but mostly we use the first two.

Now let's take a look at some of the examples,

Calculate sum of all the elements in an array

const arr = [2,3,5,4];

// here accumulator is names sum
// item is the current value
// 0 is the initial value
const arraySum = arr.reduce((sum, item) => sum + item, 0);
console.log('Output is: ', arraySum);
// Output is: 14

Calculate total number of fruits in the array

const fruits = [
  { name: 'Apple', quantity: 3 },
  { name: 'Banana', quantity: 4 },
  { name: 'Mango', quantity: 2 },
];

const totalFruits = fruits.reduce((total, fruit) => total + fruit.quantity, 0);
console.log('Total Fruits are:', totalFruits);
// Total Fruits are: 9

Group Students by ClassName

const students = [
  { name: 'Baljeet', className: 10 },
  { name: 'Fatehjit', className: 2 },
  { name: 'Ekjeet', className: 10 },
  { name: 'Manvir', className: 5 },
];
const output = students.reduce((groupedStudents, student) => {
  const className = student.className;
  if (groupedStudents[className] == null) {
    groupedStudents[className] = [];
  }
  groupedStudents[className].push(student);
  return groupedStudents;
}, {});
console.log('Grouped Students: ', output);
/* output 
{ 2: [ { name: 'Fatehjit', className: 2 } ],
  5: [ { name: 'Manvir', className: 5 } ],
  10: [ { name: 'Baljeet', className: 10 },
     { name: 'Ekjeet', className: 10 } ] } */

What is CSR, SSR, SSG, ISR (Different Rendering Strategies) and which framework does it better (Angular, React, Vue)

Baljeet Singh — Wed, 21 Jul 2021 05:27:40 +0000

01) CSR stands for Client Side Rendering. Here the entire website is rendered in the browser.

Use when building a admin dashboard and when seo is not important. Required javascript enabled on the browser.

Angular, React, Vue all support it out of the box.

02) SSR stands for Server Side Rendering. Here the webpages are rendered on the server and then sent to the client.

Use when speed and seo is important. App works without javascript enabled in browser.

Angular supports it via Angular Universal

React via NextJS

Vue via NuxtJS

03) SSG stands for Static Site Generation. Here the webpages are rendered on the build time.

Use when speed and seo is important. Host the app on any static hosting (netlify/vercel)

Angular supports it via Scully/Angular Universal

React via NextJS/Gatsby

Vue via NuxtJS/Gridsome

04) ISR stands for Incremental Static Regeneration. Here the webpages are regenerated on the fly based after the defined time.

Same benefits as SSG. Entire app doesn't need to be build after each change.

Angular doesn't support it

React via NextJS

Vue doesn't support it

Can you share an app you built and which rendering strategy and framework you used❓

FOUR DIFFERENT WAYS TO WRITE FUNCTIONS IN JAVASCRIPT

Baljeet Singh — Thu, 03 Oct 2019 07:25:27 +0000

Functions are the basic building blocks of the Javascript. A function in Javascript is a code block that performs a specific task or set of tasks.
There are basically 4 (four) different ways we can define functions in Javascript.

Function Declaration
Function Expression
Arrow Function Expression
Concise Arrow Function Expression

// Function Declaration
function square(x) {
    return x * x;
}

// Function Expression
const square = function(x) {
    return x * x;
}

// Arrow Function Expression
const square = x => {
    return x * x;
}

// Concise Arrow Function Expression
const square = x => x * x;

If you prefer you can take a look at the video tutorial,