Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Maintain Readability for Conditional Assignments with JavaScript IIFEs

    Alex ReardonAlex Reardon

    This lesson will show you how you can use Immediately Invoked Function Expressions (IIFE's) to make conditional assignments more readable and robust

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Here, we have a conditional assignment. We are conditionally assigning the value of the variable greeting based on another variable isJoiningRoom.

    00:09 If isJoiningRoom is truthy, then greeting will be set to Hello. Otherwise, it will be set to Goodbye. This conditional assignment is achieved using a ternary statement.

    00:24 Here, we have a more complex conditional assignment. Now the variable greeting is based on a number of other variables.

    00:33 If isJoiningRoom is set to true, then greeting will be set to Welcome. If isLeavingRoom is true, then greeting will be set to Goodbye. If isReEnteringRoom is set to true, greeting will be set to Welcome back. If none of these are true, greeting will be set to Hi.

    00:51 This conditional assignment uses nested ternary statements. Nested ternary statements are generally considered to be hard to maintain as their structure can be difficult to follow.

    01:06 In this example, we are achieving the same complex conditional assignment using if-else statements. We firstly declare the variable greeting with no assignment. At this point, its value will be undefined. We then walk through the if statements to assign a value to the greeting variable.

    01:28 Using if-else statements for complex conditional assignments, it's much clear to read than the nested ternary statement. However in order to use this approach, we need to split the declaration of the variable greeting from its assignment, which is done later.

    01:47 The variable greeting has its type changed from undefined to a string after the if-else statements. Due to the split between the declaration and assignment, we can no longer able to use the const keyword. Rather, we now need to use the let keyword.

    02:11 Another way of achieving conditional assignments is to use an immediately-invoked function expression, or IIFE. An IIFE is a function that will be immediately executed in place. When we declare our variable greeting, we can assign its value to the result of the IIFE.

    02:32 Here, we have the same complex conditional assignment we had previously performed using an IIFE. We were able to maintain the readability of using if-else statements for conditional assignment without needing to split the declaration of the variable greeting from its assignment.

    02:50 Because there is no longer a split between the declaration and assignment of the variable greeting, we are able to use the const keyword for the greeting variable.

    Discuss

    Discuss