Como no repetir variables con mismo nombre para diferentes funciones

Question

tengo este codigo javascript:

$().ready(function() {        
      $("#aceptarEditar").click(function(){
        var item = $('#idTemp').val();  
           $("#botones"+item).toggle(); 
           $("#botonesEditar"+item).toggle(); 
           $("#txtNombre"+item).prop("disabled", false);
           $("#txtDescripcion"+item).prop("disabled", false);
           });

      $("#aceptarSalir").click(function(e){
        var item = $("#idTemp").val();  
        $("#botones"+item).toggle(); 
        $("#botonesEditar"+item).toggle(); 
        $("#txtNombre"+item).prop("disabled", true);
        $("#txtDescripcion"+item).prop("disabled", true);
           });

Como podrán notar repito dos veces la variable:

 var item = $("#idTemp").val();

La cual, como podrán notar se repite tanto el nombre y valor de esta. Es por ello que solo vengo a pedirles que si me podrían enseñar cual es la forma correcta de nombrar una sola vez esta variable ya que la uso dos veces, en uno donde se usa un botón para editar y otro botón para cancelar al momento de editar.

la solucion es simple [no uses var usa let](https://es.stackoverflow.com/q/106042/28035), no importa si repites la variable siempre y cuando no sean globales ambas — JackNavaRow, Apr 02 '18 at 18:25
dependera mucho del scope o ámbito de la variable y si `$("#idTemp").val()` cambia entre clicks, con mas contexto tal vez la puedas hacer global o pasarla por parametro a otra funcion que maneje los toggles — alo Malbarez, Apr 02 '18 at 18:31
@aloMalbarez la funcion por callback mantendra el contexto a menos que uses [arrow function](https://es.stackoverflow.com/questions/135637/contexto-this-en-function-arrow-con-prototype) — JackNavaRow, Apr 02 '18 at 19:20
me refería al contexto de la aplicación/proyecto en general. en el sentido de "depende de lo que quieras hacer y cómo" — alo Malbarez, Apr 02 '18 at 19:26
el contexto del contexto siempre dependerá del contexto (?) =P — alo Malbarez, Apr 02 '18 at 20:03

score 5 · Answer 1 · answered Apr 02 '18 at 18:34

El problema de crear e instanciar 1 sola vez esa variable es que si cambias su valor en uno de los dos métodos no funcionara como esperas, lo que puedes es crear una variable global y asignarle el elemento en html y dentro de los metodos acceder a la propiedad que usas. Otra cosa que puedes hacer es ver que se repite en ambos metodos, crear uno solo y llamarlo con x parámetros para que haga la función del primero o el segundo. Me percaté que lo unico que varia en ambos es que estableces a false o a true la propiedad disabled en las ultimas líneas de tus eventos, por tanto este es el resultado de mi refactorización:

$().ready(function() {
    var item = $('#idTemp'); 
    var comun = function(disabled){
        var disabled = !disabled || disabled === undefined ? false : disabled;
        var val = item.val();
        $("#botones"+val).toggle(); 
        $("#botonesEditar"+val).toggle(); 
        $("#txtNombre"+val).prop("disabled", disabled);
        $("#txtDescripcion"+val).prop("disabled", disabled);
    };

  $("#aceptarEditar").click(function(){   
        comun(false);
  });

  $("#aceptarSalir").click(function(e){
        comun(true);
   });

Estaba por editar mi respuesta para decir lo mismo! hacer una función genérica para los dos casos es la forma más limpia de resolverlo. — CJ Nimes, Apr 02 '18 at 19:07

score 3 · Answer 2 · answered Apr 02 '18 at 18:32

Si ese valor no cambia nunca, podrías poner la variable afuera de las funciones:

$().ready(function() {  

  var item = $('#idTemp').val();

  $("#aceptarEditar").click(function(){
      // ... usar item ...
  });

  $("#aceptarSalir").click(function(e){
      // ... usar item ...
  });

Pero si ese valor puede ser variable y tener valores distintos cada vez que se ejecuten los clicks en los botones, entonces no te queda otra que dejarlo como lo hiciste. A lo sumo, podrías declarar la variable afuera de las funciones y asignarles el valor dentro de ellas, pero no lo recomiendo:

  var item;

  $("#aceptarEditar").click(function(){
      item = $('#idTemp').val();
  });

  $("#aceptarSalir").click(function(e){
      item = $('#idTemp').val();
  });

JackNavaRow · Answer 3 · 2018-04-02T19:49:57.207

Una forma limpia de hacerlo es con callback pasando el parametro por medio de bind

function accionItem(isDisabled){
  let item = $('#idTemp').val();  
  console.log(item)
   $("#botones"+item).toggle(); 
   $("#botonesEditar"+item).toggle(); 
   $("#txtNombre"+item).prop("disabled", isDisabled);
   $("#txtDescripcion"+item).prop("disabled", isDisabled);
  
}

$().ready(function() {        
      $("#aceptarEditar").click(accionItem.bind(false));
      
      $("#aceptarSalir").click(accionItem.bind(true));
               
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="aceptarEditar" id="aceptarEditar"> Aceptar y editara</button>

<button class="aceptarSalir" id="aceptarSalir"> Aceptar y editara</button>

<input  id="idTemp" type="hidden" value="chispas">

que diferencia hay hacerlo de esta forma a la que proponen los demas? simple no llamas dos veces a una funcion, en el ejemplo que te muestran los demas compañeros fijate que al click, tienen una funcion que llama a la funcion que cambia los valores, en conclusion llamas a tres funciones, y si quieres optimizar tu codigo entonces debes tener en cuenta esto

Como no repetir variables con mismo nombre para diferentes funciones

3 Answers3