Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jsBeautify acts differently when handling different kinds of function expressions #485

Closed
hekexue opened this issue Jun 26, 2014 · 3 comments
Milestone

Comments

@hekexue
Copy link

hekexue commented Jun 26, 2014

hello,
first of all, thanks for this code formatting tool you guys provided for us and it's really a great job and it helps me a lot and i can't even write js codes without it :-)

these days I am confused by the different results when jsbeautify formatting different kinds of function expressions and I hope you guys can help me out.

This is my first example that shows a function expression, in which the word "function" should not start in a new line and jsbeautify acts right.

var dd = (function () {

})()

the second example bellow shows a function declaration before and after jsbeautified

//before jsbeautify
var a = 1;function fn() {

}

//after jsbeautify , the "function fn" starts in a new line, which is also right to act in this way
var a = 1;

function fn() {

}

two examples above shows how jsbeautifier works when it sees a function expression or a function declaration.

you guys definitely know the differences between "function expression" and "function declaration" in concept of javascript language syntax.But I think jsbeautify not treat all the function expressions equally. One thing confuse me very much is that ,when I write a function in an array as one of it's element, which definitely is a function expression, the statement will always be formatted into a new line which i think it's not right, because other kind of function expressions not start in a new line as showed in my first example.

the condition that I'm talking about happens a lot when using angularjs to define a module with couple of dependences like bellow:

angular.module('myApp').controller('MyController', ['$scope', 'somethingElse', function($scope, greeter) {
    //I hope the function stays where it was written, not start a new line, because it's not a function declaration but a function expression.
}]);

but when I jsbeautify my js codes, the code above will always be formatted like bellow which confuse me a lot:

angular.module('myApp').controller('MyController', ['$scope', 'somethingElse', 
    function($scope, greeter) {
    //it starts in a new line, not acts like other function expressions 
}]);

thank you again and waiting for your help ~

@bitwiseman
Copy link
Member

Edited your issue for reability. What you are seeing is treat where a function expression occurs as meaningful.

Let me restate some examples.

Input:

// Issue reporter would like the output for at least the first three cases to remain unchanged
// method call argument
a = a('$scope', 'somethingElse', function($scope, greeter) {
    //I hope the function stays where it was written
});

// Array-literal member, forced using parens
a = ['$scope', 'somethingElse', (function($scope, greeter) {
    //I hope the function stays where it was written
})];

// Array-literal member bare
a = ['$scope', 'somethingElse', function($scope, greeter) {
    //I hope the function stays where it was written
}];

// Object-literal member
a = {a: '$scope', b: 'somethingElse', c: function($scope, greeter) {
    //I hope the function stays where it was written
}};

Actual Output:

// method call argument
a = a('$scope', 'somethingElse', function($scope, greeter) {
    //I hope the function stays where it was written. 
});

// Array-literal member, forced using parens
a = ['$scope', 'somethingElse', (function($scope, greeter) {
    //I hope the function stays where it was written
})];

// Array-literal member bare
a = ['$scope', 'somethingElse',
    function($scope, greeter) {
        //I hope the function stays where it was written
    }
];

// Object-literal member
a = {
    a: '$scope',
    b: 'somethingElse',
    c: function($scope, greeter) {
        //I hope the function stays where it was written
    }
};

This is in an interesting edge cases. I suspect the "Array-literal bare" case is intentional - something that was requested or considered need.

But it looks like this is an anti-pattern for AngularJS devs in general - see #464. It might be worth changing over.

@hekexue
Copy link
Author

hekexue commented Sep 11, 2014

thank you for your reply~ In your examples, all the functions are "Function Expression" and it's very obvious that's only the third example acts differently. May be just let them act in the same way when they are formatted is a good idea :-). Thanks again and best wishes.

@bitwiseman
Copy link
Member

Here's another example

Input:

// Array-literal member bare, two functions
a = ['$scope', 'somethingElse', function($scope, greeter) {
    //I hope the function stays where it was written
}, function($scope, greeter) {
    //I hope the function stays where it was written
}];

Actual Output:

// Array-literal member bare
a = ['$scope', 'somethingElse',
    function($scope, greeter) {
        //I hope the function stays where it was written
    },
    function($scope, greeter) {
        //I hope the function stays where it was written
    }
];

In this case, having the second function on the same line as the end of the previous could be argued to be a little odd, but still it does seem to me like you point is holds up.

@einars, @evocateur - do you two have any sense historically if the newline before function expression inside of an array was a requested feature or just an arbitrary one that we imposed?

@bitwiseman bitwiseman added this to the v1.5.2 milestone Sep 27, 2014
@bitwiseman bitwiseman changed the title jsBeautify acts differently when handling different kinds of function expressions[BUG][javascript] jsBeautify acts differently when handling different kinds of function expressions Jan 20, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants