You probably must have heard of the terms imperative vs declarative and wondered what it means and how to apply it while programming.

In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.

Imperative approach focuses on how you do something, and declarative approach focuses on what you do.”

For instance, if you ask about how to learn react; let's look at the imperative vs declarative response to both.

The imperative response: You can either learn using tutorials or by reading the documentation. To learn using tutorials, click on Take a tutorial button and to learn using the docs, click on Get started. The links are on https://reactjs.org

The declarative response: Visit https://reactjs.org

HTML, React etc. uses the declarative approach unlike imperative approach that focus on how e.g. Java.

<header>
  <h1>Learn React Today</h1>
</header>

const Input = ({ className, label, name, placeholder, type }) => {
    return (
        <div className={styles.inputWrapper}>
            <label
                className={styles.inputLabel}
                htmlFor={name}
            >
                {label || ''}
            </label>
            <input
                id={name}
                className={className}
                name={name}
                placeholder={placeholder || ' '}
                type={type}
            />
        </div>
    );
};

Given the examples above, the focus is on WHAT is to be done rather than HOW to get it done.

Worthy of note is the fact that behind the scenes, declarative approach uses imperative approach. However, this has been abstracted and you do not need to bother about it.

Given the string "Hello World" to reverse and a bunch of numbers to find its sum, the possible approach you may take is:

const reverseString = (str) => {
  if (str && typeof (str) !== 'string') {
    return "Argument must be a string";
  }

  const splittedStr = [...str];
  let reversedString = '';

  for (let index = splittedStr.length - 1; index >= 0; index--) {
    reversedString += splittedStr[index];
  }

  return reversedString;
}

const getSum = arr => {
  let sum = 0;

  for (let index = 0; index < arr.length; index++){
    result += arr[index];
  }

  return result;
}

The solutions above are valid. However, you can take a more declarative approach to get the same result instead of repeated iterations on the array.

These can be refactored to:

const reverseString = (str) => {
  return [...str].reverse().join('');
}

const getSum = arr => {
  return arr.reduce((prev, current) => prev + current, 0);
}

The above describes the WHAT we want to achieve (declarative) instead of the HOW we want to achieve it (imperative). Notice the use of built-in JavaScript methods - reverse, join, and reduce to achieve the same goal with a concise and readable code.