Хитрости для уменьшения сложности кода: && и || операторы

Сложность кода может сделать код нечитаемым как для вас, так и для других. Частью работы программиста является обучение рефакторингу сложного кода, чтобы он стал более понятным. Сегодня мы поговорим о двух операциях, которые это делают: || и &&

|| оператор:

|| имеет следующий синтаксис (условие#1) || (условие №2). Если первое условие истинно,оно возвращается. Если первое условие ложно, возвращается второе. Это относится и к истинным, и к ложным значениям.

Случай №1. Его можно использовать для рефакторинга объявления сложной переменной.

function Person( name, age ){
  var personsName;
  var personsAge;
  if( name === undefined ) {
    personsName = 'N/A';
  } else {
     personsName = name;
  }
  if( age === undefined ) {
    personsAge = 'N/A';
  } else {
     personsAge = age;
  }
}

Образец кода принимает два параметра и проверяет их допустимость перед их передачей. Сейчас код кажется избыточным и сложным, можно себе представить, насколько больше, когда добавляется больше переменных.

function Person( name, age ) ){
  var personName = name || 'N/A';
  var personAge = age || 'N/A';
}

Здесь имя или возраст человека будут храниться в локальной переменной только в том случае, если это истинное значение, что позаботится о пограничном случае, когда переменная не определена. Для дальнейшего рефакторинга кода мы можем установить personName и personAge в качестве параметров, чтобы уменьшить потребность в дополнительной переменной.

function Person( personName, personAge ) {
  personName = personName || 'N/A';
  personAge = personAge || 'N/A';
}

оператор &&:

Оператор && использует аналогичный синтаксис (условие#1) &&(условие#2)за исключением того, что первое значение будет возвращено, если оно ложно или ложно, а второе значение будет возвращено, если оно истинно, или правда.

Случай № 2. Это можно использовать, чтобы увидеть, применяется ли условие к некоторым, но не ко всем индексам в массиве.

function makeSureArrayHasNoUndefinedValues( arr ){
   return reduce( arr, function( condition, element ) {
   if( condition === true ) {
     if( typeof element === 'undefined' ) {
       return false;
     }
   } else {
     return false;
   }
   }, true );
}

Вышеприведенный код проверяет, чтобы в массиве не было неопределенных значений. Он будет проверять каждое значение, пока не достигнет значения undefined, после чего всегда будет возвращать false. Это случай, когда мы предполагаем, что случай изначально верен, пока не найдем ложный случай. Здесь мы можем использовать оператор &&.

function makeSureArrayHasNoUndefinedValues(arr){
   return reduce( arr, function(condition, element) {
     return condition && typeof element !== 'undefined';
   }, true );
}

В этом случае, поскольку «условие» истинно, && всегда будет возвращать второе значение того, не является ли элемент неопределенным. Если это значение возвращает false, тогда «условие» также станет ложным, а это означает, что оператор && будет выбирать «условие» в качестве возвращаемого значения на каждой последующей итерации.

Использование && и || вместо оператора if-else

Удивительно, но && и || также может упростить сложные операторы if-else. Простой пример выглядит следующим образом

before refactoring:
if( num === 1 ) {
  num++;
} else {
  num--;
}
after refactoring:
num === 1 
&& num++ 
|| num--;

Логика этого заключается в том, что «num++» будет работать только в том случае, если «num === 1» возвращает true. Если ‘ num === 1 ’ возвращает false, вся левая часть || будет ложным и, следовательно, || вернет число — .

Теперь давайте рассмотрим более сложный пример:

var friendsColl= {}; //--> 'name' : *array of friends*, ... 
var addFriend = function( name, friendName ) {   
  if( !(name in friendsColl) ){     
    friendsColl[name] = [];     
    friendsColl[name].push(friendName);
  } else if( friendsColl[name].indexOf(friendName) === -1 ) {
      friendsColl[name].push(friendName)     
  }   
};

Объект friendsColl содержит имена людей в качестве ключей и массив их друзей в качестве значений. Оператор if-else здесь создаст новый массив, если имя не существует в качестве ключа, и поместит имя друга в массив. Оператор else проверит, что друг еще не существует в списке друзей, прежде чем поместить друга в массив.

Мы можем реорганизовать это, используя && и ||

var friendsColl ={}; //--> 'name' : *array of friends*, ...
var addFriend = function(name, friendName) {  
  !(name in friendsColl) 
  && (friendsColl[name] = []).push(friendName) 
  ||  friendsColl[name].indexOf(friendName) === -1 
  && friendsColl[name].push(friendName); 
};

Чтобы объединить 'friends[name] = []' и 'friendsColl[name].push(friendName)' в одно выражение, мы используем объявление значения в качестве переменной, в которую мы помещаем наше имя: '(friendsColl[name]= []).push(имя_друга)';

Независимо от того, && и || повышает удобочитаемость в этом примере сомнительно, поскольку для правильного понимания требуется, чтобы читатель понимал использование || и && в этом контексте. Несмотря на это, этот пример демонстрирует мощные возможности использования операторов && и || операторов и показывает, что его использование в реальном мире заслуживает изучения.