DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on • Edited on

13 3

Javascript: Declarative vs Imperative programming style

These are programming paradigms:

Declarative: tells What to do

Imperative: tells How to do

Example: Find the summation of salary for the employees with dept 'justCode'

Imperative Style:

const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

const justCodeDept = [];

// filter employees based on dept name.
for (let i=0; i<employees.length; i++) {
  if (employees[i].dept === 'justCode') {
    justCodeDept.push(employees[i]);
  }
}

// summation of justCodeDept employees.
let summation = 0;
for (j = 0; j<justCodeDept.length; j++) {
  summation = summation + justCodeDept[j].salary;
}

console.log(summation);
Enter fullscreen mode Exit fullscreen mode

Declarative Style:

const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

console.log(employees.filter(item => item.dept === 'justCode').reduce(((previousValue, currentValue) => previousValue += currentValue.salary), 0));
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (6)

Collapse
 
ankletime profile image
ankletime

just to point out the filter function then reduce is inefficient - looping twice. checking for "justDepartment" in the reduce itself (returning previous value if not fulfilling) is therefore double efficient. :)

also, the variables in the reduce should be previous value and current Object. your names would apply to a simple array of numbers.

Thanks

Collapse
 
cadams profile image
Chad Adams • Edited

The declarative example is also a good example of functional programming. (Which is a form of declarative programming)

Collapse
 
shubhankar_bag_coder profile image
shubhankar-bag-coder

Great ...

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

Thanks :)

Collapse
 
otumianempire profile image
Michael Otu

Great example. This may look simple but it does the job of explaining the concept simply. ✌️

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

Thanks. :)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay