Toggle Function in JavaScriptAjax plugin that binds to click and page loadJavaScript custom addEvent function to add event handlersChanging html element with click event: how to restore default state of element using jQuery if/else statementA better looking 'treeview' - dealing with lots of checkboxesDocumenting an intToRuleset function line by lineDetecting gyroscope data using promisesTurn script into a function which extracts the div ID and places it insideHandling arguments in a Python-like range() function in JavaScriptAbstraction of google analytics with click events and forms submission handlingpass argument to jQuery .on() event handler callback
A social experiment. What is the worst that can happen?
Loading commands from file
How do I find all files that end with a dot
Creepy dinosaur pc game identification
Is there a name for this algorithm to calculate the concentration of a mixture of two solutions containing the same solute?
Why did the Mercure fail?
Are the IPv6 address space and IPv4 address space completely disjoint?
Did arcade monitors have same pixel aspect ratio as TV sets?
What was the exact wording from Ivanhoe of this advice on how to free yourself from slavery?
Non-trope happy ending?
How should I respond when I lied about my education and the company finds out through background check?
Store Credit Card Information in Password Manager?
How to bake one texture for one mesh with multiple textures blender 2.8
Is the U.S. Code copyrighted by the Government?
Open a doc from terminal, but not by its name
The IT department bottlenecks progress. How should I handle this?
How could a planet have erratic days?
How can "mimic phobia" be cured or prevented?
Create all possible words using a set or letters
When were female captains banned from Starfleet?
Should I outline or discovery write my stories?
On a tidally locked planet, would time be quantized?
How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?
It grows, but water kills it
Toggle Function in JavaScript
Ajax plugin that binds to click and page loadJavaScript custom addEvent function to add event handlersChanging html element with click event: how to restore default state of element using jQuery if/else statementA better looking 'treeview' - dealing with lots of checkboxesDocumenting an intToRuleset function line by lineDetecting gyroscope data using promisesTurn script into a function which extracts the div ID and places it insideHandling arguments in a Python-like range() function in JavaScriptAbstraction of google analytics with click events and forms submission handlingpass argument to jQuery .on() event handler callback
$begingroup$
Here is my current toggle function:
$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
if ($scope.selection === 'Select All')
$scope.emailList = $scope.users.filter(user => !user.report.emailed);
else
$scope.emailList = $scope.emailList = [];
;
Here are my thoughts and questions about the best practices:
I make an assignment to
$scope.emailListin the if and else statement. Instead of separate assignments, is one assignment better? Refactoring to one assignment will pollute the code with unnecessary variables, but it may make the code more readable?$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
const emailListUpdate;
if ($scope.selection === 'Select All')
emailListUpdate = $scope.users.filter(user => !user.report.emailed);
else
emailListUpdate = $scope.emailList = [];
$scope.emailList = emailListUpdate;
;The main benefit I see here is that anybody reading the code can skim to the last line and know the overall purpose. Overall, I don't see this to be a beneficial refactor since I don't think it adds additional readability and potentially makes it harder to follow. I would appreciate thoughts on this.
Ternary or
if/else:I reviewed a great post about the benefits and use cases of using ternary or
if/else. Here is what the code would look like refactored to a ternary:$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
$scope.emailList = $scope.selection === 'Select All' ? $scope.users.filter(user => !user.report.emailed); : [];
;Quoting from the article linked above:
An if/else statement emphasizes the branching first and what's to be done is secondary, while a ternary operator emphasizes what's to be done over the selection of the values to do it with.
I feel the
if/elsefeels more natural, but I'm not sure if that is just related to my lack of experience using ternary.I have another
toggleItemfunction used when a checkbox is clicked.$scope.toggleItem = (event, user) =>
$begingroup$
Here is my current toggle function:
$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
if ($scope.selection === 'Select All')
$scope.emailList = $scope.users.filter(user => !user.report.emailed);
else
$scope.emailList = $scope.emailList = [];
;
Here are my thoughts and questions about the best practices:
I make an assignment to
$scope.emailListin the if and else statement. Instead of separate assignments, is one assignment better? Refactoring to one assignment will pollute the code with unnecessary variables, but it may make the code more readable?$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
const emailListUpdate;
if ($scope.selection === 'Select All')
emailListUpdate = $scope.users.filter(user => !user.report.emailed);
else
emailListUpdate = $scope.emailList = [];
$scope.emailList = emailListUpdate;
;The main benefit I see here is that anybody reading the code can skim to the last line and know the overall purpose. Overall, I don't see this to be a beneficial refactor since I don't think it adds additional readability and potentially makes it harder to follow. I would appreciate thoughts on this.
Ternary or
if/else:I reviewed a great post about the benefits and use cases of using ternary or
if/else. Here is what the code would look like refactored to a ternary:$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
$scope.emailList = $scope.selection === 'Select All' ? $scope.users.filter(user => !user.report.emailed); : [];
;Quoting from the article linked above:
An if/else statement emphasizes the branching first and what's to be done is secondary, while a ternary operator emphasizes what's to be done over the selection of the values to do it with.
I feel the
if/elsefeels more natural, but I'm not sure if that is just related to my lack of experience using ternary.I have another
toggleItemfunction used when a checkbox is clicked.$scope.toggleItem = (event, user) =>
$begingroup$
Here is my current toggle function:
$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
if ($scope.selection === 'Select All')
$scope.emailList = $scope.users.filter(user => !user.report.emailed);
else
$scope.emailList = $scope.emailList = [];
;
Here are my thoughts and questions about the best practices:
I make an assignment to
$scope.emailListin the if and else statement. Instead of separate assignments, is one assignment better? Refactoring to one assignment will pollute the code with unnecessary variables, but it may make the code more readable?$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
const emailListUpdate;
if ($scope.selection === 'Select All')
emailListUpdate = $scope.users.filter(user => !user.report.emailed);
else
emailListUpdate = $scope.emailList = [];
$scope.emailList = emailListUpdate;
;The main benefit I see here is that anybody reading the code can skim to the last line and know the overall purpose. Overall, I don't see this to be a beneficial refactor since I don't think it adds additional readability and potentially makes it harder to follow. I would appreciate thoughts on this.
Ternary or
if/else:I reviewed a great post about the benefits and use cases of using ternary or
if/else. Here is what the code would look like refactored to a ternary:$scope.toggleSelect = event =>
$scope.selection = event.target.innerHTML;
$scope.emailList = $scope.selection === 'Select All' ? $scope.users.filter(user => !user.report.emailed); : [];
;Quoting from the article linked above:
An if/else statement emphasizes the branching first and what's to be done is secondary, while a ternary operator emphasizes what's to be done over the selection of the values to do it with.
I feel the
if/elsefeels more natural, but I'm not sure if that is just related to my lack of experience using ternary.I have another
toggleItemfunction used when a checkbox is clicked.$scope.toggleItem = (event, user) => improve this answer
answered 12 hours ago
Blindman67Blindman67
8,7981521
$endgroup$
add a comment " is redundant.
Code, best option.
$scope.selectEmailUsers = event =>
$scope.selection = event.target.textContent;
$scope.emailList = $scope.selection === "Select All" ?
$scope.users.filter(user => !user.report.emailed); : [];
// ^ remove syntax error
; // << remove the ;
answered 12 hours ago
Blindman67Blindman67
8,7981521
$endgroup$
Short and sweet is best.
Your statement
"The main benefit I see here is that anybody reading the code can skim to the last line and know the overall purpose"
That makes no sense at all, you say all that is needed to understand the functions is
$scope.emailList = emailListUpdate;
Nobody jumping into someone else code will just skim, the only people that skim code are those that know the code.
You can make a few assumptions.
- All that read your code are competent coders.
- All that read your code have read the project specs.
- Every line of code will be read by a coder new to the code.
Example
The best code is brief as possible without being a code golf entrant.
Notes
- Why
innerHTML, should it not betextContent???? - This function is not a toggle. It is based on selection value.
- The ternary expression is too long, break the line so it does need to be scrolled
- The ternary has a syntax error. Misplaced
; - the
;on the last line after "}" is redundant.
Code, best option.
$scope.selectEmailUsers = event =>
$scope.selection = event.target.textContent;
$scope.emailList = $scope.selection === "Select All" ?
$scope.users.filter(user => !user.report.emailed); : [];
// ^ remove syntax error
; // << remove the ;
answered 12 hours ago
Blindman67Blindman67
8,7981521
answered 12 hours ago
Blindman67Blindman67
8,7981521
answered 12 hours ago
Blindman67Blindman67
8,7981521
answered 12 hours ago
Blindman67Blindman67
8,7981521
8,7981521
add a comment |
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216054%2ftoggle-function-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
