В этой статье рассказывается о том, как писать условные конструкции лучше, чем вы к этому скорее всего привыкли и наглядно, прямо на примерах показывается, как это делать в сравнении с обычными методами.
\n\n\n\n\n\n\n\n// условие\nfunction test(fruit) {\n if (fruit == 'apple' || fruit == 'strawberry') {\n console.log('red');\n }\n}На первый взгляд пример выше выглядит вполне хорошо. Однако, что же будет, если у нас станет больше красных фруктов. К примеру ещё добавится вишня (cherry) или клюква (cranberries)? Будем ли мы расширять условие с помощью дополнительных ||?
Мы можем свободно переписать условие, с использованием Array.includes. Смотрите, как это просто:
function test(fruit) {\n // Выгружаем условия в массив\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n if (redFruits.includes(fruit)) {\n console.log('red');\n }\n}Тут мы выгружаем список красных фруктов (redFruits) в массив. Так наш код будет выглядеть чище.
Давайте расширим предыдущий пример и включим в него ещё два условия.
\n\n\n\nЕсли нет фруктов, то выкинем ошибку.
\n\n\n\nВыведем в консоль сообщение, что фруктов больше 10.
\n\n\n\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n // Условие 1: fruit должен иметь значение\n if (fruit) {\n // Условие 2: он должен быть красным\n if (redFruits.includes(fruit)) {\n console.log('red');\n\n // Условие 3: должно быть большое количество\n if (quantity > 10) {\n console.log('big quantity');\n }\n }\n } else {\n throw new Error('No fruit!');\n }\n}\n\n// test results\ntest(null); // error: No fruits\ntest('apple'); // print: red\ntest('apple', 20); // print: red, big quantityА теперь, посмотрите на код выше, что у нас есть?
\n\n\n\n1 if/else, который фильтрует неверные условия
3 уровня вложения (условия 1, 2 и 3)
\n\n\n\nГлавное правило которому лично я стараюсь следовать — это всегда делать ранний выход из функции при обнаружении изначально неверного условия.
\n\n\n\n/_ Раннее завершение функции, если найдено неверное условие _/\n\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n // Условие 1: выдача ошибки сразу\n if (!fruit) throw new Error('No fruit!');\n\n // Условие 2: должно быть красным\n if (redFruits.includes(fruit)) {\n console.log('red');\n\n // Условие 3: большое количество\n if (quantity > 10) {\n console.log('big quantity');\n }\n }\n}Таким образом у нас на один уровень вложения меньше. Такой подход особенно хорош тогда, когда у вас реально длинное условие if (представьте, если бы вам пришлось скролить к самому концу кода, чтобы узнать, есть ли там else. Это же обалдеть можно)
Дальше мы можем ещё больше сократить вложения if, инвертируя условие с ранним выходом из функции. Посмотрите на второе условие ниже и всё увидите:
/_ ранний выход из функции, если найдено неверное условие _/\nfunction test(fruit, quantity) {\n const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];\n\n if (!fruit) throw new Error('No fruit!'); // Условие 1: выдача ошибки сразу\n if (!redFruits.includes(fruit)) return; Условие 2: стоп, если фрукт не красный\n\n console.log('red');\n\n // Условие 3: количество должно быть больше 10\n if (quantity > 10) {\n console.log('big quantity');\n }\n}Инвертируя условия во втором случае, наш код становится свободным от вложений. Этот подход полезен тогда, когда у нас довольно длинная логика условия и нам надо отменить последующий процесс если условие не удовлетворено.
\n\n\n\nОднако, это не то правило, которого нужно безукоризненно придерживаться. Спросите себя сами, эта версия (без вложения) лучше/более читабельная, чем предыдущая (второе условие с вложением)?
\n\n\n\nЛично для меня подходит предыдущая версия (второе условие с вложением). И вот почему:
\n\n\n\nКод короче и проще, он куда понятнее с вложенным if.
Инвертирование условия может нагрузить в плане логики и заставить лишний раз подумать.
\n\n\n\nКак вывод, всегда стремитесь к наименьшему вложению и раннему выходу из функции, но не пренебрегайте ими.
\n\n\n\nЯ полагаю, что код ниже может выглядеть для вас вполне знакомым, нам часто нужно проверять null/undefined и назначать дефолтные значения во время работы с JavaScript:
function test(fruit, quantity) {\n if (!fruit) return;\n const q = quantity || 1; // Если не указывается количество, то по-дефолту будет 1\n\n console.log(`We have ${q} ${fruit}!`);\n}\n\n//test results\ntest('banana'); // We have 1 banana!\ntest('apple', 2); // We have 2 apple!На самом деле мы можем избавиться от переменной q, указав дефолтные параметры функции.
function test(fruit, quantity = 1) { // Если не указывается количество, до по-дефолту будет 1\n if (!fruit) return;\n console.log(`We have ${quantity} ${fruit}!`);\n}\n\n//test results\ntest('banana'); // We have 1 banana!\ntest('apple', 2); // We have 2 apple!Куда проще и интуитивно понятнее, не так ли? Пожалуйста, обратите внимание на то, что каждый параметр может иметь своё собственное дефолтное значение. Для примера, мы можем указать дефолтное значение для fruit:
function test(fruit = 'unknown', quantity = 1)А что если fruit это объект? Можем ли мы назначить дефолтный параметр?
function test(fruit) { \n // выводим название фрукта, если его указывают\n if (fruit && fruit.name) {\n console.log (fruit.name);\n } else {\n console.log('unknown');\n }\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleПосмотрите на пример выше, там нам надо вывести имя фрукта, если оно доступно или мы выведем в консоль unknown. Мы можем смело избежать объявления условия fruit && fruit.name с помощью дефолтных параметров функции и деструктуризации.
// назначаем дефолтный пустой объект {}\nfunction test({name} = {}) {\n console.log (name || 'unknown');\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleТак как нам нужно только свойство name от fruit, мы можем деструктуризировать параметр, используя {name}, затем мы можем использовать name, как переменную в нашем коде, вместо fruit.name.
Мы также назначаем пустой объект {}, как дефолтное значение. Если мы так не сделаем, то получим ошибку при выполнении test(undefined) — Cannot destructure property name of ‘undefined’ or ‘null’. Потому что тут нет свойства name в undefined.
Если вы не против использовать сторонние библиотеки, то есть несколько способов сократить проверку null:
Используйте функцию get из Lodash
Используйте idx от Facebook (c Babeljs)
\n\n\n\nВот пример с Lodash:
\n\n\n\nfunction test(fruit) {\n console.log(__.get(fruit, 'name', 'unknown'); // Получает name у fruit, если его нет, то назначается ‘unknown’.\n}\n\n//test results\ntest(undefined); // unknown\ntest({ }); // unknown\ntest({ name: 'apple', color: 'red' }); // appleВы можете запустить демо код тут. Кроме того, если вы фанат Функционального Програмирования, вы можете выбрать Lodash fp, функциональную версию Lodash. Там метод изменится с get на getOr).
Давайте посмотрим на пример ниже, тут нам надо получить фрукты по их цвету:
\n\n\n\nfunction test(color) {\n // используйте case, для выбора фруктов по цвету\n switch (color) {\n case 'red':\n return ['apple', 'strawberry'];\n case 'yellow':\n return ['banana', 'pineapple'];\n case 'purple':\n return ['grape', 'plum'];\n default:\n return [];\n }\n}\n\n//test results\ntest(null); // []\ntest('yellow'); // ['banana', 'pineapple']Кажется, что в коде выше всё правильно, но мне он кажется довольно громоздким. Тот же результат можно получить с помощью объект литерала и более чистого синтаксиса:
\n\n\n\n// применяем объект литерал, чтобы найти фрукты по цвету\n const fruitColor = {\n red: ['apple', 'strawberry'],\n yellow: ['banana', 'pineapple'],\n purple: ['grape', 'plum']\n };\n\nfunction test(color) {\n return fruitColor[color] || [];\n}Или вы можете использовать Map, чтобы достичь того же результата:
// используйте Map, чтобы найти фрукты по цвету\n const fruitColor = new Map()\n .set('red', ['apple', 'strawberry'])\n .set('yellow', ['banana', 'pineapple'])\n .set('purple', ['grape', 'plum']);\n\nfunction test(color) {\n return fruitColor.get(color) || [];\n}Map это тип объекта, который появился в ES2015 и позволяет вам хранить данные как key value (ключ и его значение).
А теперь вопрос. Нужно ли нам прекратить использование switch? Не ограничивайте себя этим. Лично я использую объект литералы, когда это возможно, но я бы не стал выставлять жесткие ограничения в этом плане, используйте то, что больше подходит под конкретный случай.
У Todd Motto есть интересная статья, в которой он углубляется в вопрос использования switch и объект литералов, тут вы можете её прочитать.
\n\n\n\nДля примера выше, на самом деле, мы можем отрефакторить код с помощью Array.filter.
const fruits = [\n { name: 'apple', color: 'red' }, \n { name: 'strawberry', color: 'red' }, \n { name: 'banana', color: 'yellow' }, \n { name: 'pineapple', color: 'yellow' }, \n { name: 'grape', color: 'purple' }, \n { name: 'plum', color: 'purple' }\n];\n\nfunction test(color) {\n // используем Array.filter, чтобы найти фрукты по цвету\n\n return fruits.filter(f => f.color == color);\n}Всегда есть больше одного способа достигнуть одного и того же результата. Мы увидели 4 для одного и того же примера. В общем, кодить очень даже весело!
\n\n\n\nПоследний совет скорее касается применения сравнительно новой функции массивов, с помощью которой можно значительно сократить ваш код. Посмотрите на пример ниже, тут мы хотим проверить все ли фрукты красного цвета:
\n\n\n\nconst fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n ];\n\nfunction test() {\n let isAllRed = true;\n\n // Условие: все фрукты должны быть красными\n for (let f of fruits) {\n if (!isAllRed) break;\n isAllRed = (f.color == 'red');\n }\n\n console.log(isAllRed); // false\n}Тут всё так долго, мы вполне можем сократить число строк с помощью Array.every:
const fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n ];\n\nfunction test() {\n // Короткий способ выставления условия\n const isAllRed = fruits.every(f => f.color == 'red');\n\n console.log(isAllRed); // false\n}Теперь всё куда опрятнее, да? Таким же образом мы можем проверить есть ли в нашем массиве красные фрукты, для этого мы можем просто использовать Array.some в одну строку.
const fruits = [\n { name: 'apple', color: 'red' },\n { name: 'banana', color: 'yellow' },\n { name: 'grape', color: 'purple' }\n];\n\nfunction test() {\n // Условие: есть ли красные фрукты в массиве\n const isAnyRed = fruits.some(f => f.color == 'red');\n\n console.log(isAnyRed); // true\n}В этой статье рассказывается о том, как писать условные конструкции лучше, чем вы к этому скорее всего привыкли и наглядно, прямо на примерах показывается, как это делать в сравнении с обычными методами.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/uslconstrukciifkjnsdkj.jpg"},"interesting":[{"title":"15 методов работы с элементами про которые вы возможно не слышали","slug":"15-metodov-raboty-s-elementami-pro-kotorie-vy-ne-slyshaly-vozmozhno","type":"js"},{"title":"JavaScript. Почему 3 + true = 4? И другие хитрые уравнения приведения типов","slug":"javascript-pochemu-3true4-i-drugie-hitrye-uravneniya-privedeniya-tipov","type":"js"},{"title":"7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах","slug":"7-poleznyh-ulovok-s-rest-parametrami-i-spread-operatorom-na-javascript-objectah","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}