Return to Answer

An appropriate term for this code is spaghetty code – it's tightly intertwined with other parts of the app, so one cannot easily take out a part of it and reason about it without thinking about the rest of the app. Just like it's hard to pull out one single spaghetty from a bowl.

It's not inherently bad, as long as the program is really small (< 10 lines). But as your program grows, you're bound to experience that it's getting harder and harder to reason about your program and make changes in it without breaking things. You might even reach a point where you're afraid to make any changes, as things are so likely to break.

I guess one needs to go through this to really start to look for better ways of organizing the code. So don't feel bad about yourself. Everybody starts out like this. If you want to improve, look out for books like "Pragmatic programmer" or "Clean code". Or search the web for "JavaScript style guide" and "Software engineering principles".

To answer in more detail...

I find it really hard to understand what this code does:

• Seems that it's been extracted out of a larger file, that could give us some context.
• It calls into various functions like drawTable(), addEditValue() which aren't defined in here.
• It assigns to some global variables like names and idEdit, which are also not defined in here.

Several style issues make the code hard to read:

• It's sloppily indented – sometimes 4, sometimes 2 spaces, sometimes no indentation at all.

• Some lines end with semicolon, others don't.

• The comments are sometimes misleading, like:

   // to get the current URL witout hash
   const getLink = window.location.hash.slice(1)
  

  It actually does the opposite – it returns the hash-part of the URL.

• At other times the comments state what's already obvious from the code:

   // listen a click on the page
   top.addEventListener('click', function(e){
  

• The name getLink looks like a function name, but it's not a function. A good style is to only name functions with verbs (as they do things).

• The name data is meaningless. All variables contain data. Naming a variable data is just as helpful as naming it variable.

• The name character is very confusing. Previously you pushed e.target.id to the history state (naming it data). And then in popstate you get back the history state and call it character. If it's a character, then call it so consistently in both places. But it looks like it's not just a single character, because you assign it to idEdit – so it seems to be some sort of ID instead.

Regarding your question:

But in the part of the code with browser history I can't find a way to use jQuery, only pure JS.

That's absolutely fine. jQuery is a library for doing DOM manipulations (for interacting with the HTML on the page). You shouldn't use it for other things besides that.

An appropriate term for this code is spaghetti code – it's tightly intertwined with other parts of the app, so one cannot easily take out a part of it and reason about it without thinking about the rest of the app. Just like it's hard to pull out one single spaghetti from a bowl.

It's not inherently bad, as long as the program is really small (< 10 lines). But as your program grows, you're bound to experience that it's getting harder and harder to reason about your program and make changes in it without breaking things. You might even reach a point where you're afraid to make any changes, as things are so likely to break.

I guess one needs to go through this to really start to look for better ways of organizing the code. So don't feel bad about yourself. Everybody starts out like this. If you want to improve, look out for books like "Pragmatic programmer" or "Clean code". Or search the web for "JavaScript style guide" and "Software engineering principles".

To answer in more detail...

I find it really hard to understand what this code does:

• Seems that it's been extracted out of a larger file, that could give us some context.
• It calls into various functions like drawTable(), addEditValue() which aren't defined in here.
• It assigns to some global variables like names and idEdit, which are also not defined in here.

Several style issues make the code hard to read:

• It's sloppily indented – sometimes 4, sometimes 2 spaces, sometimes no indentation at all.

• Some lines end with semicolon, others don't.

• The comments are sometimes misleading, like:

   // to get the current URL witout hash
   const getLink = window.location.hash.slice(1)
  

  It actually does the opposite – it returns the hash-part of the URL.

• At other times the comments state what's already obvious from the code:

   // listen a click on the page
   top.addEventListener('click', function(e){
  

• The name getLink looks like a function name, but it's not a function. A good style is to only name functions with verbs (as they do things).

• The name data is meaningless. All variables contain data. Naming a variable data is just as helpful as naming it variable.

• The name character is very confusing. Previously you pushed e.target.id to the history state (naming it data). And then in popstate you get back the history state and call it character. If it's a character, then call it so consistently in both places. But it looks like it's not just a single character, because you assign it to idEdit – so it seems to be some sort of ID instead.

Regarding your question:

But in the part of the code with browser history I can't find a way to use jQuery, only pure JS.

That's absolutely fine. jQuery is a library for doing DOM manipulations (for interacting with the HTML on the page). You shouldn't use it for other things besides that.