Лучшие практики использования условных операторов в JavaScript
В этой статье объясняются лучшие практики использования условных операторов в JavaScript.
YouTube Video
Лучшие практики использования условных операторов в JavaScript
Операторы if являются основой структуры управления в программах на JavaScript. Однако, по мере усложнения кода, количество операторов if может вырасти, что затрудняет чтение кода. На этот раз мы углубимся в лучшие практики правильного создания операторов if в JavaScript, чтобы повысить читаемость и сопровождаемость кода.
Упрощайте код, используя флаги
Упрощайте условия, содержащие несколько критериев, с помощью булевых значений.
Примеры, которых следует избегать
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Улучшенные примеры
Используйте флаги для уточнения условий.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Делайте условные операторы простыми
Когда условное выражение становится сложным, читаемость кода ухудшается, поэтому необходимо сохранять условие простым.
Примеры, которых следует избегать
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Улучшенные примеры
Разделяя условие на переменные с конкретным значением, вы можете прояснить его смысл.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Проясните приоритет логических операторов
В условиях if в JavaScript неверное понимание приоритета логических операторов может привести к нежелательному поведению.
Примеры, которых следует избегать
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Улучшенные примеры
Когда приоритет операторов неясен, можно использовать скобки для уточнения.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Использование сокращённой оценки условий
JavaScript поддерживает механизм короткого замыкания вычислений для операторов && (И) и || (ИЛИ). Механизм короткого замыкания вычислений означает, что как только результат условия определён, оставшаяся часть условия не вычисляется.
И(&&): Если левая часть вычисляется как ложь, правая часть не вычисляется, и возвращается её значение.ИЛИ(||): Если левая часть вычисляется как истина, правая часть не вычисляется, и возвращается её значение.
Примеры, которых следует избегать
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Улучшенные примеры
В этом коде функция user?.someComplexFunction() вызывается даже если user?.isLoggedIn имеет значение false.
Понимание механизма короткого замыкания вычислений поможет вам избежать ненужных вычислений и писать более эффективный код.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Минимизируйте использование операторов else
Операторы else могут увеличить когнитивную нагрузку при анализе кода. Вместо этого рассмотрите возможность использования раннего возврата.
Примеры, которых следует избегать
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Улучшенные примеры
Уточняйте условия с помощью раннего возврата.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Правильное использование тернарного оператора
Для простых условий использование тернарного оператора может сократить ваш код. Однако избегайте вложенности или сложной логики.
Примеры, которых следует избегать
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Улучшенные примеры
Отдавайте приоритет читаемости, разбивая условия.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Использование значений по умолчанию и сокращённой оценки условий
Используйте значения по умолчанию и короткую оценку условий, чтобы уменьшить разветвления и упростить код.
Примеры, которых следует избегать
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Улучшенные примеры
В этом случае использование логических операторов делает код более компактным.
1// Good Example
2displayName = user?.name || 'Guest';Правильно определяйте, когда использовать конструкции switch
Когда требуется несколько условий, конструкции switch могут сделать намерения более ясными.
Примеры, которых следует избегать
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Улучшенные примеры
Использование конструкций switch может помочь организовать код.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Использование защитных выражений с условиями раннего выхода
Ограничительное условие - это техника, использующая конструкции if, чтобы выйти из функции заранее.
Примеры, которых следует избегать
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Улучшенные примеры
Используйте ограничительные условия, чтобы уменьшить вложенность.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Пишите комментарии для уточнения намерений
Для сложных условий или важных ветвей добавляйте краткие и понятные комментарии, чтобы передать суть кода.
Примеры, которых следует избегать
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Улучшенные примеры
Добавляйте комментарии, чтобы сделать намерения понятными.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Заключение
Эффективное использование конструкций if в JavaScript может значительно улучшить читаемость и сопровождение кода.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.