Make Javascript code smaller and more optimized

Question

I am trying to optimize the code below to be as small as possible (because a client is supposed to just paste it into their website code). Is it possible to minimize it further (i am using minify to compress spaces and stuff but is there any coding i can do to make it smaller?).

<span id="gmbdata"></span>

<script>
function specHours() {
  var x = document.getElementById("spec");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFunc(myObj) {

var dag="";var gmbdata="";
for (var i = 1; i <= 7; i++) 
{
    dag="day"+i;timme="hours"+i;
    gmbdata += '<span style="width:15ch;display:inline-block;">'+myObj[dag]+'</span><span style="padding-left:5px;">'+myObj[timme]+'</span><br />';
}
 document.getElementById("gmbdata").innerHTML = gmbdata;
  if(myObj.specialopeninghours != "") document.getElementById("specialopeninghours").innerHTML = '<a href="#" onclick="specHours()">Speciella öpettider</a><div id="spec" style="display:none"><span>'+myObj.specialopeninghours+'</span></div>';
}
</script>

<script src="https://XXX"></script>

The `if` condition is a very simple 1-line ternary for starters. you only use `day` and `timme` once so not much point exlicitly declaring them. There's _loads_ of ways this code could be shorter — Jamiec, Apr 23 '21 at 09:13
@Jamiec and almost none that I can think of should be done by hand. We've had tools for this for many, many years. — VLAZ, Apr 23 '21 at 09:14
This is turning into a talk show. like Operah on TV. go on though. am enjoying it... — mw509, Apr 23 '21 at 09:19

mw509 · Answer 1 · 2021-04-23T09:58:29.813

-2

You could change the condition in the first function into a ternary as below

function specHours() {
  var x = document.getElementById("spec");
  x.style.display  = x.style.display === "none" ? "block" : "none";
}

am not sure where this function is used. am not seeing it used anywhere else but here is another way.

function specHours() {
  var x = document.getElementById("spec");
  "none" === x.style.display ? x.style.display = "block" : x.style.display = "none"
}

I have not tested this but theoretically it should work just fine.

Ideally, the first looks shorter. :)

The second function could be reduced to;

function myFunc(myObj) {
for (var i = 1; i <= 7; i++) 
{
    gmbdata += '<span style="width:15ch;display:inline-block;">'+myObj["day"+i]+'</span><span style="padding-left:5px;">'+myObj["hours"+i]+'</span><br />';
}
 document.getElementById("gmbdata").innerHTML = gmbdata;
  if(myObj.specialopeninghours != "") document.getElementById("specialopeninghours").innerHTML = '<a href="#" onclick="specHours()">Speciella öpettider</a><div id="spec" style="display:none"><span>'+myObj.specialopeninghours+'</span></div>';
}

The declaration of Day and Time is not necessary.

after this, what you could do more is to use shorter names/declarations/variables/whatever-it-is-called. eg:

function myFunc(myObj) {
for (var i = 1; i <= 7; i++) 
{
    gd += '<span style="width:15ch;display:inline-block;">'+myObj["day"+i]+'</span><span style="padding-left:5px;">'+myObj["hours"+i]+'</span><br />';
}
 document.getElementById("g").innerHTML = g;
  if(myObj.s != "") document.getElementById("s").innerHTML = '<a href="#" onclick="specHours()">Speciella öpettider</a><div id="spec" style="display:none"><span>'+myObj.s+'</span></div>';
}

edited Apr 23 '21 at 09:58

answered Apr 23 '21 at 09:18

mw509

1,957
1
19
25

And may I know why I have been marked down? – mw509 Apr 23 '21 at 09:20
2

`x = x === "none" ? "block" : "none";` does not do the same thing. It just assigns the variable `x` it does not change `.style.display` – VLAZ Apr 23 '21 at 09:27
true. let's fix it quick. Thanks – mw509 Apr 23 '21 at 09:30
`none" === x.style.display ? x.style.display = "block" : x.style.display = "none"` is longer than `x.style.display = x.style.display === "none" ? "block" : "none";` because now `x.style.display` is repeated three times instead of two and there are two assignments instead of one.... – VLAZ Apr 23 '21 at 09:32
Exactly what the minifier would likely produce if it was used. I jus thought I share options. – mw509 Apr 23 '21 at 09:34
"* you could further reduced it to *" – VLAZ Apr 23 '21 at 09:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231503/discussion-between-mw509-and-vlaz). – mw509 Apr 23 '21 at 09:35
No need to. I pointed out your current message makes a factually incorrect statement. "further reduced" means it should be *shorter*. It's not. No need for a discussion. – VLAZ Apr 23 '21 at 09:37
right. got it. :facepalm – mw509 Apr 23 '21 at 09:59

Make Javascript code smaller and more optimized

1 Answers1