Javascript good and bad practices

comments.js

// Comments should explain the code, not read the code

// bad : check if the age is bigger than 18.
// good: minors are redirected to other page.
if( age >=18 ){ ... }

conditionals.js

//  too many content inside
if( something.exists === true ){
  //
  // 100 lines of code
  //
}
// betetr modularize
if( something.exists === true ){
  doSomething();
  var hasSuccess = undoSomething();
  if(hasSuccess){
    etc();
  }
}


// Try dont use else statement
if( something.exists === true ){
  something.value = 100;
} else {
  something.value = 0;
}
// better write the conditionals again to amke more clear and easy to mantain
if( something.exists === true ){
  something.value = 100;
}
if( something.exists !== true ){
  something.value = 0;
}
// and remember, the else if statement dont exists in javascript
if( something.exists === true ){
  something.value = 100;
} else if(anotherThing.exists ) {
  anotherThing.value = 0;
}
// is the same as
if( something.exists === true ){
  something.value = 100;
} 
if(anotherThing.exists ) {
  anotherThing.value = 0;
}

configs.js

// Don't
  $.ajax({
    type: "POST",
    url: "api/users",
    data: {limit: 10},
    success: function(data){
      $('#form').hide();
      $('#message').text('Search success!!');
      $('#list').html(data).fadeIn('fast');
    },
    error: function(){
      $('#message').text('Search error!!');
    }
  });

// Do
var config: {
  messages = {
    success: 'Search success!!',
    error: 'Search error!!'
  },
  api: {
    users: "api/users"
  },
  animate: {
    velocity: "fast"
  },
  list: {
    perPage: 10
  }
}
//...
$.ajax({
  type   : "POST",
  url    : config.api.users,
  data   : {limit: config.list.perPage},
  success: function(data){
    $('#form').hide();
    $('#message').text(config.messages.success);
    $('#list').html(data).fadeIn(config.animate.velocity);
  },
  error: function(){
    $('#message').text(config.messages.success);
  }
});

dom-access.js

// Instead of
$('#buttonSend').on('click', function(){
  $(this).prop('disabled', true);
  $('#form').addClass('sending');
  $.post('ajax/contact', function(data) {
    $('#message').html(data);
    $('$form').removeClass('sending');
    $('#buttonSend'),prop('disabled', false);
  });
});

// write:
var $buttonSend = $('#buttonSend');
var $form = $('#form');
var $message = $('#message');

$buttonSend.on('click', function(){
  $buttonSend.prop('disabled', true);
  $form.addClass('sending');
  $.post('ajax/contact', function(data) {
    $message.html(data);
    $form.removeClass('sending');
    $buttonSend.prop('disabled', false);
  });
});

function-names-bad.js

// names with code description, not the functionality
function biggerThanEighteen(age){
  return age >= 18;
}

// describe what you're testing
function isLegalAge(age){
  return age >= 18;
}

loops.js

// Write
var colors = ['Blue', 'Green', 'Pink', 'Red'];
for(var count = 0, colorsNr = colors.length; count < colorsNr; count++){ // 
   console.log( colors[i] );
}

// avoid
var colors = ['Blue', 'Green', 'Pink', 'Red'];
for(var count=0; i < colors.length; count++){
   console.log( colors[i]) ;
}

modularize.js

// Instead of 
$('#button1').on('click', function(){
  $('#result').load('ajax/list-people.html', function() {
    $('#form').slideUp()
  });
})
$('#button2').on('click', function(){
  $('#result').load('ajax/list-brands.html', function() {
    $('#form').slideUp()
  });
})
//...

// Write
function hideForm(){
    $('#form').slideUp();
}
$('#button1').on('click', function(){
  $('#result').load('ajax/lista-people.html', function() {
    hideForm();
  });
})
$('#button2').on('click', function(){
  $('#result').load('ajax/lista-brand.html', function() {
    hideForm();
  });
})

// Better
function hideForm(){
  $('#form').slideUp();
}
function loadData( element, url){
  $(element).on('click', function(){
    $('#result').load(url, function() {
      hideForm();
    });
  })  
}
loadData('#button1', 'ajax/list-people.html');
loadData('#button2', 'ajax/list-brand.html');

nesting.js

$('#button').on('click', function(){
  $.ajax({
    type: "POST",
    url: 'users',
    success: function(data){
      $('resultado').fadeIn('fast', function(){
        $('#form').animate({
          heigth: 0, 
          opacity: 0
        }, 300, function(){
            $('#message').animate({
              heigth: 200,
              opacity: 1
            }, 300, function(){
              //etc etc
            })
          }
        )
      })
    },
    error: function(){
      $('#message').text(config.messages.success);
    }
  });
});

short-notation.js

// write
var colors = ['pink', 'blue', 'green'];
// instead of
var cores = new Array();
lunch[0]='pink';
lunch[1]='blue';
lunch[2]='green';

// Write
var x = v || 10;
// instead 
if(v){
   var x = v;
} else {
   var x =10;
}

// Write
var direction = (x > 100) ? 1 : -1;
// em vez de 
var direction;
if(x > 100){
   direction = 1;
} else {
   direction = -1;
}

technologies-mix.js

// wrong
$('.user-name').css({
  'border'  : '1px solid red',
  'color'   : 'red'
});
// right
$('.user-name.error').addClass('error');

// instead of write
$('#resultado').load('<php echo #something ?>', function() {
    $('#formulario').slideUp()
  });
// better
var url_api_user = '<php echo #something ?>';
$('#resultado').load(url_api_user, function() {
    $('#formulario').slideUp()
});

variables-names-bad.js

// too short, abreviations
var x1;
var input1;
var posX;

// too long
var dayAverageValueGraph;
var inputTextFirstName;

// name that describes the value, not the type
var isBigger18; // better use 'isLegalAge'

variables-names-good.js

// variables with $ on start are jQuery elements
var $header    = $('#header');
var $menuItens = $('#menu a');

// uppercase for constants
var IMAGES_PATH = '/assets/images/';
var CLIENT_NAME = 'John Dow';

// _ to private functions
var _count = 0;