أفضل الممارسات لاستخدام العبارات الشرطية في 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}

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}

1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3    // ...
4}

1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3    // ...
4}

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';

 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}

 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}

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}