12 Simple (Yet Powerful) JavaScript Tips

»feb. 20 Last Year 27

(For Badass JavaScript Development)

NOTICE: I have written only 2 of the 12 tips so far, but I plan to post all 12 Powerful Tips eventually.

I provide you with 12 simple, yet powerful, JavaScript tips and detailed explanation of each. These are techniques that all JavaScript programmers can use now; you needn’t be an advanced JavaScript developer to benefit from these tips. After you read all of the detailed explanations of how each technique works and when to use it, you will have become a more enlightened JavaScript developer, if you aren’t already one.

Indeed, notable JavaScript masters and enlightened JavaScript developers have been using many of these techniques to write powerful, efficient JavaScript. And in a bit, you will, too.

  • Receive Updates

  1. Powerful JavaScript Idiomatic Expressions With && and ||

    You see these idiomatic expressions in JavaScript frameworks and libraries. Let’s start off with a couple of basic examples:

    Example 1: Basic “short circuting” with || (Logical OR)
    To set default values, instead of this:

    function documentTitle(theTitle)
    if (!theTitle) {
      theTitle  = "Untitled Document";
      }
    }

    Use this:

    function documentTitle(theTitle)
      theTitle  = theTitle || "Untitled Document";
    }

    Explanation:
    — First, read the “Important Note” box below for a refresher on JavaScript’s Falsy and Truthy values
    — The || operator first evaluates the expression on the left, if it is truthy, it returns that value. If it is falsy, it evaluates and returns the value of the right operand (the expression on the right).
    — If theTitle variable is falsy, the expression on the right will be returned and assigned to the variable. On the other hand, if theTitle is truthy, its value will be returned and assigned to the variable.

    JavaScript Falsy Values: null, false, 0 undefined, NaN, and “” (this last item is an empty string).
    — Note that Infinity, which is a special number like NaN, is truthy; it is not falsy, while NaN is falsy.

    JavaScript Truthy Values: Anything other than the falsy values.

    Example 2: Basic short circuting with && (Logical AND)
    Instead of this:

    function isAdult(age) {
      if (age && age > 17) {
      return true;
    }
    else {
      return false;
      }
    }

    Use this:

    function isAdult(age) {
       return age && age > 17 ;
    }

    Explanation:
    — The && operator first evaluates the expression on the left. If it is falsy, false is returned; it does not bother to evaluate the right operand.
    — If the the first expression is truthy, also evaluate the right operand (the expression on the right) and return the result.

    It Gets More Exciting!

    Example 3:
    Instead of this:

    if (userName) {
      logIn (userName);
    }
     else {
       signUp ();
    }

    Use this:

     userName && logIn (userName) || signUp ();

    Explanation:
    — If userName is truthy, then call the logIn function with userName as the parameter.
    — If userName is falsy, call the signUp function

    Example 4:
    Instead of this:

    var userID;
    if (userName && userName.loggedIn) {
      userID = userName.id;
    }
    else {
      userID = null;
    }

    Use this:

    var userID = userName && userName.loggedIn && userName.id

    Explanation:
    — If userName is truthy, call userName.loggedIn and check if it is truthy; if it is truthy, then get the id from userName.
    — If userName is falsy, return null.

  2. Powerful Uses of Immediately Invoked Function Expressions

    (How Immediately Invoked Function Expressions Work and When to Use Them)
    IIFE (pronounced “Iffy”) is an abbreviation for Immediately Invoked Function Expression, and the syntax looks like this:

    (function () {
     // Do fun stuff
     }
    )()

    It is an anonymous function expression that is immediately invoked, and it has some particularly important uses in JavaScript.

    How Immediately Invoked Function Expressions Work?

    • The pair of parenthesis surrounding the anonymous function turns the anonymous function into a function expression or variable expression. So instead of a simple anonymous function in the global scope, or wherever it was defined, we now have an unnamed function expression.
    • It is as if we have this:
      
// Shown without the parentheses here:
      ? = function () {};
      
      // And with the parentheses here:
      (? = function () {});
      // An unknown variable assigned the value of a function, wrapped in a parentheses, which turns it into an unnamed function expression.

      Similarly, we can even create a named, immediately invoked function expression:

      (showName = function (name) {console.log(name || "No Name")}) (); // No Name
      
      showName ("Rich"); // Rich
      showName (); // No Name

      — Note that you cannot use the var keyword inside the opening pair of parentheses (you will get a syntax error), but it is not necessary in this context to use var since any variable declared without the var keyword will be a global variable anyway.
      — We were able to call this named function expression both immediately and later because it has a name.
      — But we can’t call the anonymous function expression later, since there is no way to refer to it. This is the reason it is only useful when it is immediately invoked.

    • By placing the anonymous function in parentheses (a group context), the entire group is evaluated and the value returned. The returned value is actually the entire anonymous function itself, so all we have to do is add two parentheses after it to invoke it.
    • Therefore, the last two parentheses tell the JS compiler to invoke (call) this anonymous function immediately, hence the name “Immediately Invoked Function Expression.”

    • Because JavaScript has function-level scope, all the variables declared in this anonymous function are local variables and therefore cannot be accessed outside the anonymous function.
    • So we now have a powerful piece of anonymous code inside an unnamed function expression, and the code is meaningless unless we invoke the anonymous function, because nothing can access the code. It is the immediate invocation of the anonymous function that makes it powerful and useful.
    • You can pass parameters to the anonymous function, just like you would any function, including variables. The anonymous function’s scope extend into any outer function that contains it and to the global scope. Read my article, JavaScript Variable Scope and Hoisting Explained, for more.

    When To Use Immediately Invoked Function Expressions?

    1. To Avoid Polluting the Global Scope
      
The most popular use of the IIFE is to avoid declaring variables in the global scope. Many JavaScript libraries use this technique, and of course many JS pros, too. It is especially popular amongst jQuery plugin developers. And you should use an IIFE in the top-level (main.js) of your applications.

      In this first example, I am using it in the global scope to keep all my variables local to the anonymous function, and thus outside the global scope where variables can shadow (block) other already-defined variables with the same name (probably from an included library or framework). All of my code for the application will start in the IIFE:



       // All the code is wrapped in the IIFE
      (function () {

      var firstName = “Richard”;
      

function init () {
      
  doStuff (firstName);
        // code to start the application
      
}

      
      function doStuff () {
        // Do stuff here
      }
      
      function doMoreStuff () {
       // Do more stuff here
      }
      
      // Start the application

      init ();

      }) ();

      — Note that you can also pass jQuery or any other object or variable via the parameter (the last 2 parentheses).


    2. Use With the Conditional Operator
      The use of the IIFE in this manner is not as well known, but it quite powerful since you can execute complex logic without having to setup and call a named function:

      — Note the two anonymous functions in the conditional statement
      — Why would you do this? Because it is powerful and badass.
      — I purposely added enough space between each section so the code can read better.

      var unnamedDocs = [], namedDocs = ["a_bridge_runover", "great_dreamers"];
      
      function createDoc(documentTitle) {
          var documentName = documentTitle 
      
              ?
      
       (function (theName) {
              var newNamedDoc = theName.toLocaleLowerCase().replace(" ", "_");
              namedDocs.push(newNamedDoc);
      
              return newNamedDoc;
          })(documentTitle)
      
      
              :
      
      
              (function () {
                  var newUnnamedDoc = "untitled_" + Number(namedDocs.length + 1);
                  unnamedDocs.push(newUnnamedDoc);
                  return newUnnamedDoc;
              })();
      
      
          return documentName;
      }
      createDoc("Over The Rainbow"); // over_the rainbow
      createDoc(); // untitled_4
    3. 



    4. Use it in Closures to Prevent Fold Over
      I discussed this particular use of the IIFE before in my post, Understand JavaScript Closures With Ease. So I will copy the section of that code and reuse it here.

      To prevent close over in for loops, we can use an Immediately Invoked Function Expression to prevent a common bug when closures are used with for loops:

      To fix side effects (bug) in closures, you can use an IIFE, such as if this example:

      function celebrityIDCreator (theCelebrities) {
          var i;
          var uniqueID = 100;
          for (i = 0; i < theCelebrities.length; i++) {
              theCelebrities[i]["id"] = function (j)  { // the j parametric variable is the i passed in on invocation of this IIFE
                  return function () {
                      return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array
                  }
              } (i); // immediately invoke the function passing the i variable as a parameter
          }
      
          return theCelebrities;
      }
      
      var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
      
      var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
      
      var stalloneID = createIdForActionCelebs [0];
      
console.log(stalloneID.id()); // 100
      
      var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id()); // 101

Be good. Sleep well. And enjoy coding.

Six Courses Coming Soon (Updated)

Don't learn JavaScript, Meteor, Node, Backbone, or any other web-dev technologies until you see our course offering or at least until you use our Modern Developer Technology Guide to determine which specific set of technologies you need to learn and use to accomplish your goals. Both are coming soon.

Get a Complete Web-Dev Education

Each course is part of a Career Path, a complete web dev education. About 3 to 6 courses make up a Career Path. Note the following Career Paths you can choose from:

  • jQuery Developer/Designer, Junior Front-end Developer, Web Developer, or JavaScript Developer (2 courses)
  • The Modern Front-end Developer (3 courses)
  • Designer to Developer: Designer Building a Startup (3–4 courses)
  • The Front-end-Framework-Equipped Modern Front-end Developer (4 courses)
  • Full-stack Modern Developer (4–6 courses)
  • Startup-Bound Developer (Build complex database-driven startups like Facebook and Twitter) (4–6 courses)
  • HTML5/JavaScript Mobile Developer (Build mobile apps for Android and iOS using your JavaScript skills)
  • iOS Developer (Build native iPhone/iPad apps)

First Ever JavaScriptIsSexy.com Courses

In a few weeks, look out for six comprehensive courses, unlike any you can find elsewhere online. Our Career Paths provide the best value—more comprehensive (we teach you everything), more relevant (latest and most apt technologies), and more affordable (~90% less than programming boot camps; ~99% less than college) than other similar courses, online or offline. You will learn more about modern web development (in 4–6 months) in our Career Paths than you would at any 4-year university.
  1. Course 1: Essential JavaScript and Modern Web Application Development

    You can't develop modern applications with just JavaScript.

    What You Will Learn
    In this course, you will learn beginning to intermediate JavaScript along with all the relevant and necessary technologies and tools to develop complete modern web applications on the front end. Note that JavaScript by itself is just about 35% of what you have to learn to develop modern web applications, even simple web applications.

    Who Is this Course For?
    — Anyone with at least some high school education
    — No programming experience necessary

    You will be able to develop complete moderately complex front-end web applications using JavaScript and other tools and technologies.

  2. Course 2: Mastering JavaScript and Modern Web Application Development

    Become a proficient modern JavaScript developer.

    What You Will Learn
    In this course, you will learn intermediate to advanced JavaScript along with all the relevant and necessary (intermediate to advanced) technologies and tools to develop complex modern web applications, though not database-driven apps.

    Who Is this Course For?
    — Completed at least the "essential" course

    What will graduating from this course allow you to do?
    Work as a jQuery Developer/Designer, Junior Front-end Developer, Web Developer, or JavaScript Developer. JavaScript and Web Developers with similar expertise can easily make $70,000 a year. (Salary varies by city and developer's expertise and experience.)

  3. Course 3: The Modern Front-end Developer

    Become a qualified Front-end Developer and make a huge salary or develop your own startup—if you take the "Skip-the-backend" course.

    What You Will Learn
    In this course, you will learn everything (except a specific front-end framework; see the next course) you need to learn to become a highly qualified Front-end Developer. You will learn not just JavaScript, but all the latest technologies and tools that modern front-end developers must know.

    Who is this course for?
    — Completed course 1
    — And graduated from course 2

    What Will Graduating from This Course Allow You to Do?
    Front-end developers are in high demand, perhaps more so than any other programmers, and they make more than $80,000 a year. (Salary varies by city and developer's expertise and experience.)

    We will prepare you for jobs and connect you with agencies and employers, when you graduate from the "Front-end Career Path."

    Of course you will be able to develop your own startup as well, if you take the "Skip the backend" course after this course.

  4. Course 5: Front-end-Framework-Equipped Modern Front-end Developer (Choose either React, Angular, Backbone, OR Ember)

    We will help you choose the best front-end framework for you. Don't waste time learning a front-end framework that's not for you.

    Advanced front-end developers with experience using at least one of the four noted front-end frameworks are undoubtedly the hottest (highly sought after) developers today. They make between $70K and $160K+. (Salary varies by city and developer's expertise and experience.)

  5. Course 6: The Modern Full-stack Developer

    Learn the technologies you need to know to become a qualified and successful full-stack JavaScript developer.

    What You Will Learn
    You will learn all the tools, skills, and technologies necessary to become a full-stack JavaScript developer.

    Who Is this Course For?
    — Completed the first three courses

    What Will Graduating from This Course Allow You to Do?
    You will be in high demand as a full-stack JavaScript developer, making between $70,000 and $160,000+ a year. You will be able to develop any kind of startup comfortably. (Salary varies by city and developer's expertise and experience.)

  6. Other courses are coming later, including a "Skip-the-Backend" course, courses on developing mobile apps for iOS and Android using JavaScript, and a course on developing iOS apps using Swift and other Apple technologies.

What Can You Do Right Now?

  1. First, enter you email in the "Receive Updates" form above.
  2. Then, use the Contact form to (a) request features, (b) make suggestions, or (c) ask questions. We want to make our courses the best courses, the best value, the most rewarding. We need your help to do that.

When Specifically Will the Courses Begin?

We will release the course web site, with more detailed information, in about 3–4 weeks (most likely in January). You can enroll in classes then.

The first set of courses may begin to roll out in February.

How Much Will Each Course Cost?

While we haven't finalized the cost for each course, I do know that we have different prices for the courses. For example, Course 1 will cost less than the Front-end course. Moreover, the cost per course will definitely be affordable to the working class. I will make certain the courses are affordable for most people. I will fight to keep Course 1 under $200, though I can't promise that I will win.

Get Ready! Between now and Christmas, enjoy the down time because, when our courses begin, they will kick your butt into web-dev shape. So get ready to work hard, build cool stuff, change the world (you will), and realize your dreams.

Leave a Reply

Current ye@r *