Melhores Práticas para Declarações Condicionais em JavaScript
Este artigo explica as melhores práticas para declarações condicionais em JavaScript.
YouTube Video
Melhores Práticas para Declarações Condicionais em JavaScript
As declarações if são uma estrutura de controle fundamental nos programas em JavaScript. No entanto, à medida que o código se torna mais complexo, o número de declarações if pode aumentar, dificultando a leitura do código. Desta vez, vamos nos aprofundar nas melhores práticas para projetar adequadamente as declarações if em JavaScript para melhorar a legibilidade e a manutenibilidade.
Simplifique o código usando flags.
Simplifique condições que envolvem múltiplos critérios usando valores booleanos.
Exemplos a Evitar
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Exemplos Melhorados
Use flags para esclarecer condições.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Mantenha as Declarações Condicionais Simples
Quando uma expressão condicional se torna complexa, a legibilidade do código diminui, portanto, é necessário manter a condição simples.
Exemplos a Evitar
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Exemplos Melhorados
Ao dividir a condição em variáveis com significados específicos, você pode clarificar sua intenção.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Esclareça a precedência dos operadores lógicos
Nas declarações if em JavaScript, a má compreensão da precedência dos operadores lógicos pode levar a comportamentos indesejados.
Exemplos a Evitar
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}Exemplos Melhorados
Quando a precedência de operadores não está clara, você pode usar parênteses de forma apropriada para esclarecer.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Utilizando avaliação de curto-circuito
O JavaScript suporta avaliação de circuito curto para os operadores && (E) e || (OU). Avaliação de circuito curto significa que, quando o resultado de uma condição é determinado durante a avaliação, a parte restante não é avaliada.
E(&&): Se o lado esquerdo for avaliado como falso, o lado direito não é avaliado e seu valor é retornado.OU(||): Se o lado esquerdo for avaliado como verdadeiro, o lado direito não é avaliado e seu valor é retornado.
Exemplos a Evitar
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Exemplos Melhorados
Neste código, a função user?.someComplexFunction() é chamada mesmo se user?.isLoggedIn for false.
Compreender a avaliação de circuito curto pode ajudá-lo a evitar cálculos desnecessários e a escrever código eficiente.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimize o Uso de Declarações else
As declarações else podem aumentar a carga cognitiva ao acompanhar o código. Em vez disso, considere utilizar retornos antecipados.
Exemplos a Evitar
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Exemplos Melhorados
Clarifique as condições com retornos antecipados.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Uso Adequado do Operador Ternário
Para condições simples, usar um operador ternário pode encurtar seu código. No entanto, evite aninhamento ou lógica complexa.
Exemplos a Evitar
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Exemplos Melhorados
Priorize a legibilidade dividindo as condições.
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}Utilizando valores padrão e avaliação de curto-circuito
Use valores padrão e avaliação de curto-circuito para reduzir ramificações e simplificar o código.
Exemplos a Evitar
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Exemplos Melhorados
Nesse caso, usar operadores lógicos torna o código mais conciso.
1// Good Example
2displayName = user?.name || 'Guest';Diferencie adequadamente quando usar declarações switch.
Quando várias condições são necessárias, declarações switch podem tornar as intenções mais claras.
Exemplos a Evitar
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}Exemplos Melhorados
Usar declarações switch pode ajudar a organizar o código.
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}Utilizando cláusulas de proteção com condições de saída antecipada
Uma cláusula de guarda é uma técnica que utiliza declarações if para sair de uma função rapidamente.
Exemplos a Evitar
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}Exemplos Melhorados
Use cláusulas de guarda para reduzir aninhamento.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Escreva comentários para esclarecer intenções.
Para condições complexas ou ramificações críticas, adicione comentários concisos e claros para transmitir a intenção do código.
Exemplos a Evitar
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Exemplos Melhorados
Adicione comentários para tornar as intenções claras.
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}Conclusão
Usar de forma eficaz as declarações if do JavaScript pode melhorar muito a legibilidade e a manutenção do código.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.