Procedural approach in JavaScript - Stack Overflow

admin管理员组

文章数量:1321062

I recently watched a JavaScript video tutorial containing code similar to this one:

(function (){
    var b = 10,
        c = 20, 
        d = 50;

    var e = function(){
        return b + c + d;
    };
    return e();
}());

This is a mon JS coding pattern. The author said that this is an example of a procedural approach in Javascript code. I don't understand that, can you please explain.

I recently watched a JavaScript video tutorial containing code similar to this one:

(function (){
    var b = 10,
        c = 20, 
        d = 50;

    var e = function(){
        return b + c + d;
    };
    return e();
}());

This is a mon JS coding pattern. The author said that this is an example of a procedural approach in Javascript code. I don't understand that, can you please explain.

• javascript
• procedural-programming

Share Improve this question Follow edited May 25, 2016 at 13:46 ElGavilan 6,9241616 gold badges3030 silver badges3636 bronze badges asked Nov 2, 2012 at 14:01 Miroslav TrninicMiroslav Trninic 3,45144 gold badges3131 silver badges5555 bronze badges 2

• 1 That's extremely convoluted way to write 10 + 20 + 50 – Esailija Commented Nov 2, 2012 at 14:04
• 7 yes, but it is not about 10+20+50 – Miroslav Trninic Commented Nov 2, 2012 at 15:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Let's start by saying the above is a self-invoking anonymous function:

A self-invoking anonymous function runs automatically/immediately when you create it and has no name, hence called anonymous.

The above is a fairly poor example in my opinion, but consider the following change:

var f = (function (){
    var b = 10,
        c = 20, 
        d = 50;

    var e = function(){
        return b + c + d;
    };
    return e();
}());

​console.log(f);​ 

We've taken the above code and added a var f = in front of the function. This returns the value of e() from the inner function to f and now you have a value f to be used elsewhere. Since the variables b, c, d, e are declared within the function scope of the anonymous function, we can ensure that they will not be tampered with. This is a way to do private variables in JavaScript. Now say you had 10 + 20 + 50 may places within your code. You could run this anonymous function at the beginning and substitute those occurrences with f. This idea of abstracting out code into various procedures is why it's referred to as Procedural Programming.

Procedural programming uses a structured approach to coding the program where the functionality of the program is broken down into a number of functions or subroutines to make it easier to follow and reduce the need to repeat code.

This is mainly used to make code easier to read, easier to follow/debug and lets you abstract monly used chunks of code into well written snippets of code. 

---

Read more

---

Self-Invoking Functions

Purpose of Self-Invoking Functions

Procedural Programming

More Procedural Programming

and this moves you into Closures

本文标签： Procedural approach in JavaScriptStack Overflow