Blog

懒癌晚期


Project maintained by VirusPC Hosted on GitHub Pages — Theme by mattgraham

Back Home

Imperative and Declarative Programming

Programming Paradigms

Programming paradigms are a way to classify programming languages based on their features. Some languages are designed to support one paradigm, while other programming languages support multiple paradigms(the trend of times).

The classification in different articles is slightly different, I take the one written in wiki. Common (not all) programming paradigms include:

Simple Definition

Examples

  1. You arrive at a restaurant, approach the front desk and say…

    • An imperative approach (HOW): I see that table located under the Gone Fishin’ sign is empty. My husband and I are going to walk over there and sit dow
    • A declarative approach (WHAT): Table for two, please.
  2. you asked a question: “I’m by Wal-Mart. How do I get to your house from here?”

    • An imperative response: Go out of the north exit of the parking lot and take a left. Get on I-15 south until you get to the Bangerter Highway exit. Take a right off the exit like you’re going to Ikea. Go straight and take a right at the first light. Continue through the next light then take your next left. My house is #298.
    • A declarative response: My address is 298 West Immutable Alley, Draper Utah 84020
  3. Write a function called double which takes in an array of numbers and returns a new array after doubling every item in that array. double([1,2,3]) -> [2,4,6]

    • An imperative solution:
        function double (arr) {
            let results = []
            for (let i = 0; i < arr.length; i++){
                results.push(arr[i] * 2)
            }
            return results
        }
      
    • A declarative solution:
        function double (arr) {
            return arr.map((item) => item * 2)
        }
      
  4. Using jQuery (or vanilla JavaScript), add a click event handler to the element which has an id of “btn”. When clicked, toggle (add or remove) the “highlight” class as well as change the text to “Add Highlight” or “Remove Highlight” depending on the current state of the element..

    • An imperative solution: jQuery
        $("#btn").click(function() {
        $(this).toggleClass("highlight")
        $(this).text() === 'Add Highlight'
            ? $(this).text('Remove Highlight')
            : $(this).text('Add Highlight')
        })
      
    • A declarative solution: React.js
        <Btn 
        onToggleHighlight={this.handleToggleHighlight}
        highlight={this.state.highlight}> 
            {this.state.buttonText}
        </Btn>
      
  5. A more complex example[3]:

    • An imperative opproach:
        const numbers = [1, 2, 3, 4, 5, 6];
        result = 0;
        for (let i = 0; i< numbers.length; i++>) {
            if(numbers[i % 2 === 0]) {
                result += numbers[i] * 2;
            }
        }
      
    • A declarative approach:
        const numbers = [1, 2, 3, 4, 5, 6];
        const result = numbers
            .filter(i => i % 2 === 0)
            .map(i => i * 2)
            .reduce((acc, next) => acc + next);
      
    • An even more declarative approach:
        const numbers = [1, 2, 3, 4, 5, 6];
        const isPair = i => i % 2 === 0;
        const double = i => i * 2;
        const sum = (a, b) => a + b;
        const result = numbers.filter(isPair).map(double).reduce(sum);
      

Relations between Imperative and Declarative Programming

Features of Imperative Programming

Features of Declarative Programming

References

  1. programming paradigm - wiki
  2. Imperative vs Declarative Programming - Tyler McGinnis
  3. Imperative and Declarative Programming - Anthony Cyrille
  4. Introduction of Programming Paradigms - geeksforgeeks