Make Javascript code smaller and more optimized [duplicate]

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
– Jamiec, Commented Apr 23, 2021 at 9: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
– VLAZ, Commented Apr 23, 2021 at 9:14
This is turning into a talk show. like Operah on TV. go on though. am enjoying it... — mw509
– mw509, Commented Apr 23, 2021 at 9:19

mw509 · Accepted Answer · 2021-04-23 09:58:29Z

-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, 2021 at 9:58

answered Apr 23, 2021 at 9:18

mw509

2,0831 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mw509 Over a year ago

And may I know why I have been marked down?

VLAZ Over a year ago

x = x === "none" ? "block" : "none"; does not do the same thing. It just assigns the variable x it does not change .style.display

mw509 Over a year ago

true. let's fix it quick. Thanks

VLAZ Over a year ago

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....

mw509 Over a year ago

Exactly what the minifier would likely produce if it was used. I jus thought I share options.

|

Collectives™ on Stack Overflow

Make Javascript code smaller and more optimized [duplicate]

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related