JavaScript coding style for initializing variables

Question

I've stripped most of the code and comments from what follows.

My question is about the style that it is written in, not about the correctness of the code itself.

In particular, I've never seen anyone use this way of defining and initializing variables.

The idea is to keep all the definitions together, but to attach and isolate the initialization code for each variable. Ideally each section does nothing but initialize the named variable, with no side effects on anything else.

It works well for me, but want to know whether other people would find it too confusing.

"use strict"
if (typeof RB === 'undefined') var RB = {}
RB.tab = (function() {
   let tab_start = function(id, color1="#EFE", color2="#CDC", foldername="...") {
      let tabs = document.createElement("div"); {
         tabs.setAttribute("id", "tab_" + id)
      }
      let folder = document.getElementById(id); {
         folder.parentNode.insertBefore(tabs, folder)
         folder.appendChild(document.createElement("div"))
         folder.lastElementChild.innerHTML = "<span></span>" + foldername
      }
      let c1, c2; {
         let get_rgb = function(color) {
            let value; {
               let temp = document.createElement("div")
               document.body.appendChild(temp)
               temp.style.color = color
               value = window.getComputedStyle(temp).getPropertyValue("color")
               document.body.removeChild(temp)
            }
            return value.substring(4, value.length-1).replace(/ /g, '').split(',')
         }
         c1 = get_rgb(color1)
         c2 = get_rgb(color2)
      }
      ...
   }
   ...
   return function(arg) {// RB.tab([ [id, color, color],...,[id, color, color] ])
      let url = new URL(location.href)
      ...
      window.onresize()
   }
}())

Answer 1

As you are not using ; consistently I would say that your init style is dangerous as it will block automatic colon insertion.

For example the following lines will throw a syntax error SyntaxError: Unexpected token '{'

 var a = foo{ 
    // init stuff
 }

Or syntax error Missing initializer in destructuring declaration

 var a = 0,{
    // init stuff
 }

In a sea of code this type of typo is easily overlooked. Though it is a syntax error so will not lay in wait (in most normal situations)

When you allow the ; to be inserted by moving the { to a new line it is safer.

 var a = foo
 { 
    // init stuff
 }

however the concern is that you are doing more than simple assignment within the block which could lead to situation such as

 var a = {}
 {
     let a.bar = foo  // was meant to be a.bar = foo
 }

The let is a typo but will not get caught until the code is run.

If you do continue to use this style I would recommend you use semicolons and be very strict in regards to the extent of the setup code within the block.

Personally I think its ugly.

Answer 2

I see what you're doing and it does group things nicely. However, I would avoid it simply because it's nonstandard. People will get confused.

You can achieve pretty much the same thing by using empty space to group things;

let tabs = document.createElement("div");
tabs.setAttribute("id", "tab_" + id);

let folder = document.getElementById(id);
folder.parentNode.insertBefore(tabs, folder)
folder.appendChild(document.createElement("div"))
folder.lastElementChild.innerHTML = "<span></span>" + foldername

or just splitting out functions

let folder = addFolder(id, folderName);