Lädt...


🔧 Useful JavaScript tips and tricks that you may not be aware of 💻👨‍💻


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

JavaScript is a widely used web programming language. If you are looking to start a career in Software Engineering, then chances are that you will encounter the concepts of JavaScript.

JavaScript is unarguably the most popular programming language in the realm of web development. While it has its own caveats and tricky/confusing concepts, learning and using JavaScript is almost necessary if you want to progress in your web development career.

In this blog post, I will list down some useful JavaScript tips and tricks to help you out in challenging situations while using this language.

Automatic Semicolon Injection (ASI) in JavaScript

Some languages like C#, C++ and Java are very strict about ending each line with a semicolon.

JavaScript also uses semicolons to indicate the end of a line, but using the semicolon in JavaScript is actually optional. By optional, it means that JavaScript will apply a set of complex rules to work out whether a semicolon should have gone there or not. This is known as Automatic Semicolon Injection.

Example:

function returnSomething()
{
  return
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

Now upon first glance, you might think that logging this function call will show this particular object. But, if we call this function, we actually get undefined as the output.

Explanation: Because the opening bracket doesn’t occur on the same line as the return, ASI puts one semicolon in there for us. So, as far as JavaScript is concerned, our code actually looks like this:

function returnSomething()
{
  return ; // <-- semicolon inserted by ASI, remainder of function not evaluated.
    {
      name: 'JavaScript Expert'
      contactMethod: 'Shine batsign at sky'
    }
}

This is the process of ASI. To avoid such scenarios, we should carefully look the placement of braces and other syntax.

Non-sequential Array keys and indexes

Let’s imagine we have a simple array, we know we can pop, push, append, and do whatever we like with arrays. But we also know that JavaScript, like other languages, lets us access array elements by index.

However, what’s unusual about JavaScript is that you can also set elements by array index when the array isn’t even up to that index just yet.

Example:

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[100] = 100;
console.log(arr);
console.log('The length of the array is ' + arr.length);

Output:

[ 1, 2, <98 empty items>, 100 ]
The length of the array is 101

Finding the OS type using JavaScript

The window.navigator object contains information about the visitor's browser OS details. Some of the OS properties are available under the platform property.

You can use the below snippet to get the OS type:

console.log(navigator.platform);

Output:

Win32 (for Windows)
MacIntel (for modern macOS)
Linux x86_64 (64-bit Linux systems)
WebOS (for LG Smart TVs)
Linux (for Samsung Smart TVs)

How to detect whether a mobile browser is being used for browsing

You can detect mobile browsers by simply running through a list of devices and checking if the userAgent matches anything:

function detectMobileBrowser() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true;
  } else {
    return false;
  }
}

Apply CSS styles and colors on JS console messages

You can apply CSS styles and colors on the console messages using certain syntax. This can be very useful in differentiating certain messages from others.

Code example:

console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );

Output:

Console CSS Output

And that's it! These are just a few of lesser known JavaScript tips and tricks which might come in handy for you in the future.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

...

🔧 Useful JavaScript tips and tricks that you may not be aware of 💻👨‍💻


📈 59.23 Punkte
🔧 Programmierung

🔧 Thất nghiệp tuổi 35


📈 38.33 Punkte
🔧 Programmierung

🔧 🔥10 JavaScript Tips and Tricks That Will Be Useful


📈 31.98 Punkte
🔧 Programmierung

📰 How AI Is Useful — and Not Useful — for Cybersecurity


📈 27.9 Punkte
📰 IT Security Nachrichten

📰 Hands-on Review: Myrror Security Code-Aware and Attack-Aware SCA


📈 27.86 Punkte
📰 IT Security Nachrichten

🔧 🚀 JavaScript Tips: Essential Tips and Tricks for Developers


📈 27.82 Punkte
🔧 Programmierung

📰 iOS 14 tips and tricks: Six useful Settings app features


📈 26.64 Punkte
📰 IT Nachrichten

📰 Useful PuTTY Configuration Tips and Tricks


📈 26.64 Punkte
🐧 Unix Server

📰 15 Useful ‘sed’ Command Tips and Tricks for Linux SysAdmins


📈 26.64 Punkte
🐧 Unix Server

🔧 Useful GitHub tricks and tips


📈 26.64 Punkte
🔧 Programmierung

📰 Learn Useful ‘Vi/Vim’ Tips and Tricks for Beginners – Part 1


📈 26.64 Punkte
🐧 Unix Server

🔧 22 Useful CSS Tips and Tricks Every Developer Should Know


📈 26.64 Punkte
🔧 Programmierung

📰 Google AI Researchers Propose a Noise-Aware Training Method (NAT) for Layout-Aware Language Models


📈 26.64 Punkte
🔧 AI Nachrichten

🐧 27 Useful Windows Command Prompt Tricks You Might Not Know


📈 26.37 Punkte
🐧 Linux Tipps

📰 Security In 5: Episode 386 - Tools, Tips and Tricks - Holiday Security Tips You Should Consider Now


📈 25.66 Punkte
📰 IT Security Nachrichten

🐧 To those who may not be aware of Snaps, here is a good overview


📈 24.07 Punkte
🐧 Linux Tipps

🔧 15 Advanced TypeScript Tips and Tricks You Might Not Know 🤔💡


📈 23.44 Punkte
🔧 Programmierung

📰 Top 200+ Best CMD Tricks, Tips And Hacks Of 2019 (Command-Prompt Tricks)


📈 23.14 Punkte
📰 IT Security Nachrichten

🐧 TikTok Tips And Tricks 2020 | 8 Best TikTok Tricks To Step Up Your Game


📈 23.14 Punkte
🐧 Linux Tipps

🔧 🚀 Terminal Tricks: Essential Tips and Tricks for Developers


📈 23.14 Punkte
🔧 Programmierung

🔧 🚀 Terminal Tricks: Essential Tips and Tricks for Developers


📈 23.14 Punkte
🔧 Programmierung

🔧 🚀 Terminal Tricks: Essential Tips and Tricks for Developers


📈 23.14 Punkte
🔧 Programmierung

📰 Security In 5: Episode 405 - Tools, Tips and Tricks - Security Tips For Students Back To Class


📈 22.47 Punkte
📰 IT Security Nachrichten

📰 Security In 5: Episode 525 - Tools, Tips and Tricks - Parents Tips For Video Gamers - A Video


📈 22.47 Punkte
📰 IT Security Nachrichten

📰 Security In 5: Episode 657 - Tools, Tips and Tricks - Tips To Make Office 365 MFA Better


📈 22.47 Punkte
📰 IT Security Nachrichten

🔧 🚀 CI/CD Tips: Essential Tips and Tricks for Developers


📈 22.47 Punkte
🔧 Programmierung

🔧 🚀 Docker Tips: Essential Tips and Tricks for Developers


📈 22.47 Punkte
🔧 Programmierung

🔧 🚀 CI/CD Tips: Essential Tips and Tricks for Developers


📈 22.47 Punkte
🔧 Programmierung

🔧 🚀 CI/CD Tips: Essential Tips and Tricks for Developers


📈 22.47 Punkte
🔧 Programmierung

🔧 🚀 CI/CD Tips: Essential Tips and Tricks for Developers


📈 22.47 Punkte
🔧 Programmierung

matomo