6 Advanced JavaScript Concepts You Should Know

Code Hunter — Tue, 17 Aug 2021 03:55:30 +0000

1. Closures to Extend Variable Scope

Closures in JavaScript are a fairly straightforward concept, and have been discussed online in a number of in-depth articles. The fact that they are straightforward doesn’t necessarily mean they’re simple however, as seen by the extensive articles that cover the subject.

Simply put, closures allow variable scope to be extended past the common scope restrictions of functions. I like the way Jeremy Keith describes closures in his book Bulletproof Ajax:

“Think of closures as a kind of regional scope: broader than local but not as broad as global.”

To create a closure, you nest a function inside of a function. That inner function has access to all variables in its parent function’s scope. This comes in handy when creating methods and properties in object oriented scripts. Here is a simple example that demonstrates the use of a closure:

function myObject() {
  this.property1 = "value1";
  this.property2 = "value2";
  var newValue = this.property1;
  this.performMethod = function() {
    myMethodValue = newValue;
    return myMethodValue;   
  };
  }
  var myObjectInstance = new myObject();  
  alert(myObjectInstance.performMethod());

The key portions of the script are the nested anonymous function are highlighted in green and the method call in the alert function (last line). Because the method in the alert is actually calling a nested function, that method is able to read the value of the variable called newValue, even thought that variable is not within the scope of the anonymous function, or method.

Developers use closures all the time, probably unknowingly, since a closure is created any time an anonymous function is nested inside another function and utilizes variables from the parent function’s scope. The power of the closure is revealed when that method (the inner function) is called, and values that normally wouldn’t be accessible are within “regional” scope and are thus able to be used as any other value.

See the references below for some deeper explanations of closures and their relation to scope. I also highly recommend you pick up a good advanced JavaScript book that offers a good discussion of the concepts associated with closures.

There are sometimes instances where you need to traverse the DOM and gain access to a specific element, or group of elements, but due to certain restrictions, you may not have direct access to the elements via a CSS class name or ID in the HTML code. This might be because of user-generated content produced through a rich text editor, or dynamic content pulled from a database.

Whatever the case, it’s not impossible to access those unidentified DOM elements via JavaScript. Using what I call “contextual targeting”, you can gain access to, and modify, almost any element in the DOM. As long as you have a map of the general template that contains the element you want to target, you can access that element and manipulate it the same way you would an element that has a class name or ID.

Let’s create some basic HTML code that will serve as our example page:

<div id="header">
  <h1>Site Title</h1>
</div>
<div id="sidebar">
  <ul>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</div>
<div id="content">
  <h2>Page Title</h2>
  <p><a href="#">Lorum Ipsum link here</a>. Pellentesque habitant morbi
     tristique senectus et netus et malesuada fames ac turpis egestas.
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, 
     ante. Donec eu libero sit amet quam egestas semper.
     Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
     Pellentesque habitant morbi tristique senectus et netus et malesuada
     fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
     ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
     egestas semper. Aenean ultricies mi vitae est. Mauris
     placerat eleifend leo.</p>
  <p><span style="color: red;">Pellentesque habitant morbi</span>
    tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
    tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
    eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
    eleifend leo.</p>    
</div>
<div id="footer">
   <p>Copyright | <a href="#">contact</a> | <a href="#">policy</a> | 
      <a href="#">privacy</a></p>
</div>

Using the HTML code above, if we wanted to target all the anchor tags on the page, we could collect them and manipulate them like this:

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  // do something with the anchor tags here
}

If we wanted to target only the anchor tags in the footer, however, we would target them based on their context, or surrounding elements, like this

var myFooterElement = document.getElementById("footer");
var myLinksInFooter = myFooterElement.getElementsByTagName("a");
for (i=0;i<myLinksInFooter.length;i++) {
  // do something with footer anchor tags here
}

The first line grabs a reference to the footer element. The second line collects all <a> tags inside the footer. Then we loop through them and do what we want with them. Thus, they are accessible even though they are not grouped via class names.

You can accomplish the same thing by using node properties, as shown below.

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].parentNode.parentNode.id === "footer") {
    // do something with footer anchor tags here
  }
}

Similar code could be used to target the lone anchor tag inside the “content” section.

We could also limit our anchor tag search to include only tags that have the href attribute set, so as to avoid finding any in-page links. We do this by using the getAttribute method:

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("href")) {
    // do something with the anchor tags here
  }
}

Finally, you’ll notice that there is a tag with an inline style. The inline style could have been generated through a content management system, so you may not have the ability to edit it directly. You can target all elements with inline styles like this:

var myLinkCollection = document.getElementsByTagName("span");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("style")) {
    // do something with all anchors that have inline styles
  }
}

The possibilities are endless with contextual targeting, and there are even more options available if you’re using a JavaScript library that normalizes browser differences and simplifies DOM manipulation.

Conclusion

Although I didn’t provide a detailed explanation of every concept dealt with in this collection, I hope this list provided beginning and intermediate coders with an overview of a few fairly advanced JavaScript tactics that they can implement in future projects or experiments.

Please feel free to comment on any of the advanced JavaScript concepts I’ve mentioned and some specific ways that you have used them in your own applications.

Step By Step Guide To Push Your First Project On GitHub

Code Hunter — Mon, 16 Aug 2021 10:30:20 +0000

Depending on your situation, or what you are trying to do, there are probably a dozen ways to push your source code for for the first time to GitHub. But I’m these six git commands are the only ones I use.
My situation is a little simpler. I use GitHub just for my personal work. I don’t really collaborate with anyone. I don’t use branches. I work on the master directly. I use Windows. If this is your situation as well, then this post might help you.

Set Up Your Environment

I assume that you have already set up your environment to use the git commands. If not, make sure you do the following first:

Install Git SCM on your computer to enable you to use git on the command line.
Register at GitHub. Then, create an empty repository.

The Six Commands

I run these six commands in this order:

git init

git add -A

git commit -m “your message”

git remote add origin https://github.com/username/reponame.git

git pull –rebase

git push -f origin master

git init

Initializes and prepares your directory for git. Suffice it to say that you need to open a command prompt or PowerShell » CD to your source code directory » type git init and Enter. You can execute git status at any point in time to see where you’re at in the process.

git add -A

Prepares all changes on staging. The -A means all changes are staged including edits, additions, and deletes. I do this because I don’t have to think!

git commit -m

Commits all the changes. After commit, you are ready to push to GitHub.

git remote add origin

Associates your directory with a remote git server and repo. The URL of your repo is that URL that you see when you click the Clone or download button. You can execute git remote -v to verify that your directory has been associated with your remote repo.

git pull –rebase

This step is somewhat controversial. I only use this because I am pushing directly to a master, so I need to pull from the remote first before pushing. In fact, if I don’t use this, it won’t let me push! According to Atlassian, it’s like saying, “I want to put my changes on top of what everybody else has done.” So, this is perfectly fine for my situation.

git push -f origin master

Because I did a pull –rebase, I need to force or use the -f directive.

DEV Community: Code Hunter

6 Advanced JavaScript Concepts You Should Know

1. Closures to Extend Variable Scope

Further Reading

2. Object Literals to Pass Optional Arguments

Further Reading

3. Contextual Targeting of DOM Elements

Further Reading:

4. Using Namespaces to Prevent Conflicts

Further Reading:

5. Hybrid Application Development

Further Reading:

6. Rendering Readable HTML

Conclusion

Related Content

Step By Step Guide To Push Your First Project On GitHub

Set Up Your Environment

The Six Commands

git init

git add -A

git commit -m

git remote add origin

git pull –rebase

git push -f origin master

That’s it

Let me know what you think!