<h2 id="introduction">Introduction</h2>
Originating from mathematics, graphs are now widely used data structures in Computer Science. One of the first problems we encounter when constructing any algorithm regarding Graph processing or traversal is how we represent the graph and then, how to traverse that representation.
<blockquote>
Graph traversal is not a trivial problem, and given the difficulty of the task - many algorithms have been devised for efficient (yet not perfect) graph traversal.
</blockquote>
In this guide, we'll take a look at one of the two complementary, fundamental and simplest algorithms for Graph traversal - Depth-First Search (DFS). It's the most commonly used algorithm alongside the related <a target="_blank" href="/graphs-in-python-breadth-first-search-bfs-algorithm/">Breadth-First Search (BFS)</a> given their simplicity. After going over the main idea used for DFS, we'll implement it in Python on a Graph representation - an adjacency list.
<ul>
<li><a target="_blank" href="/graph-theory-and-graph-related-algorithms-theory-and-implementation">Graph Theory and Graph-Related Algorithm's Theory and Implementation</a>
<ul>
<li><a target="_blank" href="/graphs-in-python-representing-graphs-in-code/">Representing Graphs in Code</a></li>
<li>Depth-First Search (DFS)</li>
<li><a target="_blank" href="/graphs-in-python-breadth-first-search-bfs-algorithm/">Breadth-First Search (BFS)</a></li>
<li><a target="_blank" href="/dijkstras-algorithm-in-python/">Dijkstra's Algorithm</a></li>
<li><a target="_blank" href="/basic-ai-concepts-a-search-algorithm/">A* Search</a></li>
<li><a target="_blank" href="/boruvkas-algorithm-in-python-theory-and-implementation">Minimum Spanning Trees - Borůvka's Algorithm</a></li>
<li><a target="_blank" href="/graphs-in-python-minimum-spanning-trees-prims-algorithm">Minimum Spanning Trees - Prim's Algorithm</a></li>
<li><a target="_blank" href="/graphs-in-python-minimum-spanning-trees-kruskals-algorithm/">Minimum Spanning Trees - Kruskal's Algorithm</a></li>
</ul>
</li>
</ul>
<h2 id="depthfirstsearchtheory">Depth-First Search - Theory</h2>
Depth-First Search (DFS) is an algorithm used to traverse or locate a target node in a graph or tree data structure. It priorities depth and searches along one branch, as far as it can go - until the end of that branch. Once there, it backtracks to the first possible divergence from that branch, and searches until the end of that branch, repeating the process.
Given the nature of the algorithm, you can easily implement it recursively - and you can always implement a recursive algorithm iteratively as well:
<img src="https://s3.stackabuse.com/media/articles/dfs-gif.gif" alt="dfs animation">
The start node is the root node for tree data structures, while with more generic graphs - it can be any node.
DFS is widely-used as a part of many other algorithms that resolve graph-represented problems. From cycle searches, path finding, topological sorting, to finding articulation points and strongly connected components. The reason behind this widespread use of the DFS algorithm lies in its overall simplicity and easy recursive implementation.
<h2 id="thedfsalgorithm">The DFS Algorithm</h2>
The DFS algorithm is pretty simple and consists of the following steps:
<ol>
<li>Mark the current node as visited.</li>
<li>Traverse the neighboring nodes that aren't visited and recursively call the DFS function for that node.</li>
</ol>
The algorithm stops either when the target node is found, or the whole graph has been traversed (all nodes are visited).

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Since graphs can have cycles, we'll need a system to avoid them so we don't fall into infinity loops. That's why we &quot;mark&quot; every node we pass as visited by adding them to a <code>Set</code> containing only unique entries.

 </div>
 </div>
 </div>
 By marking nodes as &quot;visited&quot;, if we ever encounter that node again - we're in a loop! Endless computational power and time have been wasted on loops, lost in the aether.
<h3 id="pseudocode">Pseudocode</h3>
Given these steps, we can summarize DFS in pseudocode:
<pre><code class="hljs">DFS(G, u):
 # Input processing
 u.visited = true
 for each v in G.adj[u]:
 if !v.visited:
 DFS(G, v)
 # Output processing
</code></pre>
Input and output processing is performed depending on the purpose of the graph search. Our input processing for DFS will be checking if the current node is equal to the target node.
With this view, you can really start to appreciate just how simple yet useful this algorithm is.
<h2 id="depthfirstsearchimplementation">Depth-First Search - Implementation</h2>
The first thing we need to consider before diving into the implementation of the DFS algorithm itself is how to implement a graph. As in any other article from this series, we've opted to implement it using a fairly basic <code>Graph</code> class. It contains a graph representation and a couple of methods you need to operate with graphs:
<pre><code class="hljs">class Graph:
 # Constructor
 def __init__(self, num_of_nodes, directed=True):
 self.m_num_of_nodes = num_of_nodes
 self.m_nodes = range(self.m_num_of_nodes)
 
 # Directed or Undirected
 self.m_directed = directed
 
 # Graph representation - Adjacency list
 # We use a dictionary to implement an adjacency list
 self.m_adj_list = {node: set() for node in self.m_nodes} 
 
 # Add edge to the graph
 def add_edge(self, node1, node2, weight=1):
 self.m_adj_list[node1].add((node2, weight))

 if not self.m_directed:
 self.m_adj_list[node2].add((node1, weight))
 
 # Print the graph representation
 def print_adj_list(self):
 for key in self.m_adj_list.keys():
 print(&quot;node&quot;, key, &quot;: &quot;, self.m_adj_list[key])
</code></pre>
Let's just quickly recap how does the <code>Graph</code> class work. The <code>__init__()</code> method defines a constructor. It consists of a number of nodes, a set of nodes, and the graph representation. In this case, a graph is represented by an adjacency list - effectively a Python dictionary with each node of the graph set to be one key. A set of adjacent nodes is assigned to each node (key).

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: An adjacency list is a type of graph representation in code, it consists of keys that represent each node, and a set of values for each of them containing nodes that are connected to the key node with an edge. 
Using a dictionary for this is the easiest way to quickly represent a graph in Python, though you could also define your own <code>Node</code> classes and add them to a <code>Graph</code> instance instead.

 </div>
 </div>
 </div>
 As its name suggests, the <code>add_edge()</code> method is used to add edges to the graph representation. Each edge is represented as in any usual adjacency list. For example, edge <code>1-2</code> is represented by adding <code>2</code> as the adjacent node of node <code>1</code> in the adjacency list. Additionally, our implementation enables you to assign a weight to any edge.
Lastly, we've created the method that prints the graph representation - <code>print_adj_list()</code>.
Now we can implement the DFS algorithm in the <code>Graph</code> class. Depth-First Search implementation is usually recursive in code given how natural of a pair that is, but it can also be easily implemented non-recursively. We'll be using the recursive method:
<pre><code class="hljs">def dfs(self, start, target, path = [], visited = set()):
 path.append(start)
 visited.add(start)
 if start == target:
 return path
 for (neighbour, weight) in self.m_adj_list[start]:
 if neighbour not in visited:
 result = self.dfs(neighbour, target, path, visited)
 if result is not None:
 return result
 path.pop()
 return None 
</code></pre>
We added the start node to the beginning of our traversal path and marked it as visited by adding it to a set of <code>visited</code> nodes. Then, we traversed the start node's neighbors that aren't already visited and called the function recursively for each of them. Recursive calls result in going as deep as we can along one &quot;branch&quot;.
We then saved a reference to the result. In the case the function returns <code>None</code>, that means that the target node was not found in this branch and that we should try another. If the recursive call, in fact, does not return <code>None</code>, that means we have found our target node and we return the traversal path as result.
In the end, if we find ourselves outside of the <code>for</code> loop, it means that all the neighbor branches of the current node have been visited and none of them lead to our target node. So, we remove the current node from the path and return <code>None</code> as result.
<h2 id="runningdfs">Running DFS</h2>
Let's illustrate how the code works through an example. As we've stated before, we'll be using <code>Graph</code> class to represent the graph. Internally, it represents a graph as an adjacency list. Here's the graph we'll be using in the following example:
<img src="https://s3.stackabuse.com/media/articles/graphs-in-python-dfs-1.png" alt="graph">
We'll be searching for a path from node <code>0</code> to node <code>3</code>, if it exists, the path will be saved into a set of visited nodes, called <code>traversal_path</code> so we can reconstruct it for printing.
The first thing we need to do is to create an instance of the <code>Graph</code> class. Our example graph is undirected and has 5 nodes, so we'll create its representation in the following way:
<pre><code class="hljs">graph = Graph(5, directed=False)
</code></pre>
This will create the instance of the <code>Graph</code> representing undirected graph with 5 nodes. Next, we need to add all edges from the example graph into our graph representation:
<pre><code class="hljs">graph.add_edge(0, 1)
graph.add_edge(0, 2)
graph.add_edge(1, 3)
graph.add_edge(2, 3)
graph.add_edge(3, 4)
</code></pre>
Now, we've created the complete representation of the example graph. Let's take a look at how does the <code>Graph</code> class internally store our example graph:
<pre><code class="hljs">graph.print_adj_list()
</code></pre>
Which outputs the following:
<pre><code class="hljs">node 0 : {(1, 1), (2, 1)}
node 1 : {(0, 1), (3, 1)}
node 2 : {(0, 1), (3, 1)}
node 3 : {(1, 1), (4, 1), (2, 1)}
node 4 : {(3, 1)}
</code></pre>
This shows the structure of the dictionary used to represent an adjacency list. It's perfectly in line with the implementation of an adjacency list provided in the <a target="_blank" href="/graphs-in-python-representing-graphs-in-code/">article</a> about graph representations in Python.
Finally, we can find a path from node <code>0</code> to node <code>3</code>:
<pre><code class="hljs">traversal_path = []
traversal_path = graph.dfs(0, 3)
print(traversal_path)
</code></pre>
This will output the found path:
<pre><code class="hljs">[0, 1, 3]
</code></pre>
Now it would be useful to take a look at the steps our algorithm took:
<ul>
<li>Add node <code>0</code> to the traversal path and mark it as visited. Check if node <code>0</code> is equal to target node <code>3</code>, since it's not, continue and traverse its neighbors (<code>1</code> and <code>2</code>).</li>
<li>Is neighbor <code>1</code> visited? - No. Then, the algorithm calls the function recursively for that node.
<ul>
<li>Recursive call for node <code>1</code>: Add node <code>1</code> to the traversal path and mark it as visited. Is <code>1</code> equal to our target node <code>3</code>? - No, continue and traverse its neighbors (<code>0</code> and <code>3</code>).</li>
<li>Is neighbor <code>0</code> visited? - Yes, move on to the next one.</li>
<li>Is neighbor <code>3</code> visited? - No, call the function recursively for this node.
<ul>
<li>Recursive call for node <code>3</code>: Add node <code>3</code> to the traversal path and mark it as visited. Is <code>3</code> equal to our target node <code>3</code>? - Yes, the target node has been found, return the traversal path.</li>
</ul>
</li>
</ul>
</li>
</ul>
<table class="table table-striped">
 <tr>
 <th>Current Node</th>
 <th>Path</th>
 <th>Visited</th>
 </tr>
 <tr>
 <td>0</td>
 <td>[0]</td>
 <td>{0}</td>
 </tr>
 <tr>
 <td>1</td>
 <td>[0, 1]</td>
 <td>{0, 1}</td>
 </tr>
 <tr>
 <td>3</td>
 <td>[0, 1, 3]</td>
 <td>{0, 1, 3}</td>
 </tr>
</table>
The algorithm stops and our program prints out the resulting traversal path from node <code>0</code> to node <code>3</code>:
<pre><code class="hljs">[0, 1, 3]
</code></pre>
After the search, the marked nodes on the graph represent the path we took to get to the target node:
<img src="https://s3.stackabuse.com/media/articles/graphs-in-python-dfs-2.png" alt="marked graph">
In case there was no path between the start and target node, the traversal path would be empty.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Graphs can also be disconnected, meaning that there are at least two nodes that cannot be connected by a path. In this case, DFS would ignore the nodes that it can't get to.

 </div>
 </div>
 </div>
 <img src="https://s3.stackabuse.com/media/articles/graphs-in-python-dfs-3.png" alt="disconnected graph">
For example in this graph, if we were to start DFS from node <code>0</code> to node <code>4</code>, there would be no such path because it has no way of getting to the target node.
<h2 id="conclusion">Conclusion</h2>
In this article, we've explained the theory behind the Depth-First Search algorithm. We've depicted the widely-used recursive Python implementation, and went over the borderline cases for which the algorithm will not work properly.

David Landup

Anđela Niketić

Dimitrije Stamenic

Jovana Ninkovic

In this guide, we've gone over the theory and implementation of Depth-First Search (DFS) in Python.

Graphs in Python: Depth-First Search (DFS) Algorithm

In this guide - learn how to represent graphs in Python, as an adjacency matrix, adjacency list and list of edges, with practical code examples and pros and cons.

Graphs in Python: Representing Graphs in Code

<h2 id="introduction">Introduction</h2>
Event handling is a very important concept when trying to make an interactive application. Generally speaking, an event is a signifier of an interaction between a user and our application - clicking, typing on a keyboard, and so on. Interactive and reactive applications are, in essence, built around the concept of reacting to events - each time an event is detected, an application calls a corresponding function that handles the detected event.
<blockquote>
These functions are known as event handlers.
</blockquote>
Vue is no different. It has an event handling mechanism that allows you to catch and handle events from within each independent component file. Events can appear either as user input or we can manually create them in the code and emit them when needed.
<blockquote>
In this article, we will explore how to handle events in Vue using the <code>v-on</code> directive. Event handling enables us to run JavaScript as a response to DOM events. We will learn how to handle the click, submit, scroll, and some keyboard events.
</blockquote>
<h2 id="vondirectiveinvue">v-on Directive in Vue</h2>
Vue uses the <code>v-on</code> directive to catch and handle events. It defines a DOM event it listens to and assigns a JavaScript function that runs when the event is detected:
<pre><code class="hljs">&lt;div v-on:click=&quot;handleClick&quot;/&gt;
&lt;div @click=&quot;handleClick&quot;/&gt;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>v-on</code> directive is used interchangeably with the <code>@</code> symbol - <code>v-on:event-name</code> is equal to <code>@event-name</code>.

 </div>
 </div>
 </div>
 <h2 id="commoneventsinvue">Common Events in Vue</h2>
There are lots of events that can be captured! Though, not all of them are used on a daily basis. The majority of the events you'll be tracking commonly can be divided into three categories: mouse, keyboard, and form events.
Each one of them has some specific distinctions, so let's take a deeper look at each individual group and how to handle them.
<h3 id="mouseeventsinvue">Mouse Events in Vue</h3>
Mouse events are triggered each time a user clicks, drags, drops, or does something with a mouse to a particular item. For example, the following code will prompt an alert when a user clicks a button using <code>v-on:click</code>:
<pre><code class="hljs">&lt;div&gt;
 &lt;!-- `v-on:click` detects the click event --&gt;
 &lt;button v-on:click=&quot;showAlert(&#x27;Thank you for clicking the button!&#x27;)&quot; &gt;
 Show alert
 &lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
export default {
 methods: {
 showAlert: (message) =&gt; {
 alert(message);
 }
 }
};
&lt;/script&gt;
</code></pre>
Alternatively, we can make use of the <code>@</code> symbol and avoid using <code>v-on</code> as seen below:
<pre><code class="hljs">&lt;div&gt;
 &lt;button @click=&quot;showAlert(&#x27;Thank you for clicking the button!&#x27;)&quot;&gt;
 Show alert
 &lt;/button&gt;
&lt;/div&gt;
</code></pre>
<h3 id="keyboardeventsinvue">Keyboard Events in Vue</h3>
Keyboard events are triggered when a user types a particular button on the keyboard. You can register an event when a user is pressing down a key (<code>keydown</code>), starts to presses a key (<code>keypress</code>), or releases a key (<code>keyup</code>):
<pre><code class="hljs">&lt;input type=&#x27;text&#x27; placeholder=&#x27;Type something&#x27; @keypress=&#x27;handleKeyPressed&#x27; @keydown=&#x27;handleKeyDown&#x27; @keyup=&#x27;handleKeyUp&#x27; /&gt;
</code></pre>
For instance, suppose we want an alert to show what is typed into an input field when we press the enter key on our keyboard. This can be achieved easily using <code>@keyup.enter</code>:
<pre><code class="hljs">&lt;div&gt;
 &lt;input type=&quot;text&quot; v-model=&quot;name&quot; @keyup.enter=&quot;showAlert(name)&quot; /&gt;
&lt;/div&gt;

&lt;script&gt;
export default {
 data() {
 return {
 name: &quot;&quot;
 };
 },
 methods: {
 showAlert: (message) =&gt; {
 alert(message);
 }
 }
};
&lt;/script&gt;
</code></pre>
Taking a look at the code above, you will notice we added key event modifiers - such as <code>.enter</code>. Key event modifiers in Vue offer extensive support for listening to keyboard inputs.
The key event modifier follows the structure:
<pre><code class="hljs">v-on.keyevent.keyname
// Or
v-on.keyevent.keycode
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Keycodes are generally <a rel="nofollow noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">deprecated</a> and you should avoid using them because most modern browsers don't support them anymore. It's only reasonable to use them for legacy reasons - if you need to support old browsers that don't have support for key name modifiers.

 </div>
 </div>
 </div>
 Vue makes your job easier by providing aliases for the most commonly used key codes - <code>.enter</code>, <code>.tab</code>, <code>.delete</code> (encapsulates &quot;Delete&quot; and &quot;Backspace&quot; keys), <code>.esc</code>, <code>.space</code>, <code>.up</code>, <code>.down</code>, <code>.left</code>, <code>.right</code>.
<blockquote>
Either way, you should use key names instead of keycodes whenever possible - that's a way to future-proof your code!
</blockquote>
Key names follow the simple naming convention in Vue. The first thing you should know is that you can find all valid key names in <a rel="nofollow noopener noreferrer" target="_blank" herf="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values"><code>KeyboardEvent.key</code></a>. Those names use camel casing (e.g. <code>CapsLock</code>), but key names in Vue use kebab casing (e.g. <code>caps-lock</code>).
So, to find a valid Vue key name, take a look at its name in <a rel="nofollow noopener noreferrer" target="_blank" herf="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values"><code>KeyboardEvent.key</code></a> and convert it to a kebab case. As simple as that!

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can also chain multiple key names like <code>v-on.keyup.ctrl.enter</code>.

 </div>
 </div>
 </div>
 In case you must use keycodes, again, you can, even though it's not advised:
<pre><code class="hljs">&lt;input type=&quot;text&quot; v-model=&quot;name&quot; @keyup.13=&quot;showAlert(name)&quot; /&gt;
</code></pre>
The 13th key is &quot;Enter&quot;.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can check for keycodes <a target="_blank" rel="nofollow noopener noreferrer" href="https://keycode.info/">here</a>.

 </div>
 </div>
 </div>
 <h3 id="formeventsinvue">Form Events in Vue</h3>
Form events are triggered by form actions such as submission, input field change and lots more - using event names like <code>:submit</code>, <code>:change</code>, <code>:reset</code>. The following code illustrates how you can pop an alert message when form data is submitted:
<pre><code class="hljs">&lt;form className=&quot;new-task&quot; @submit=&quot;handleSubmit&quot;&gt;
 &lt;input
 type=&quot;text&quot;
 placeholder=&quot;Type to add new tasks&quot;
 v-model=&quot;newTask&quot;
 /&gt;
&lt;/form&gt;

&lt;script&gt;
export default {
 data() {
 return {
 newTask: &quot;&quot;
 };
 },
 methods: {
 handleSubmit() {
 alert(this.newTask);
 }
 }
};
&lt;/script&gt;
</code></pre>
One thing you should keep in mind when managing form submissions in JavaScript apps is that you must utilize the native <code>preventDefault()</code> function of the submit event before running your form handling function. Otherwise, the page will be redirected before the form validation function has a chance to validate a form. This is because by default, the next expected action is forwarding the data to a server's REST API, which we don't have here.
This is easily accomplished with Vue by adding a <code>prevent</code> event modifier directly to the form template, rather than doing it manually in your handler. When added, a <code>prevent</code> modifier makes sure the submit event won't reload the page. It's worth noting that the modifier is inserted after the <code>.</code> in the directive:
<pre><code class="hljs">&lt;form @submit.prevent=&quot;handleSubmit&quot;&gt;&lt;/form&gt;
</code></pre>
Vue offers several event modifiers that are useful in common event handling scenarios:
<ul>
<li><code>.stop</code> - stop propagation of click events:</li>
</ul>
<pre><code class="hljs">&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;
</code></pre>
<ul>
<li><code>.capture</code> - an event targeting a child element, within a parent element is handled by the parent first, before being delegated to the child:</li>
</ul>
<pre><code class="hljs">&lt;div v-on:click.capture=&quot;doThis&quot;&gt;&lt;/div&gt;
</code></pre>
There are others like <code>.self</code>, <code>.once</code>, <code>.passive</code>, etc.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Modifiers can be chained as well. For example <code>v-on:click.stop.prevent=&quot;handleClick&quot;</code>.

 </div>
 </div>
 </div>
 <h2 id="writingandemittingcustomeventsinvue">Writing and Emitting Custom Events in Vue</h2>
So far, we've discussed handling native events. Now, let's look at how to make a component emit its own event, given that Vue is a component-based framework.
Assume we want a child component to convey information to a parent component. Prop data can only be sent from parent to child, not the other way around, therefore we can't utilize it here. A solution is for the child component to emit an event and the parent to listen for it.
When you want the event to be emitted, use <code>this.$emit(&quot;my-event-name&quot;)</code> from the child component. Assume we have a component <code>ChildComponent</code> that must notify its parent <code>MainPage</code> that it has been closed.
<h3 id="childcomponent">ChildComponent</h3>
<pre><code class="hljs">export default {
 methods: {
 onClose() {
 this.$emit(&#x27;close-dialog&#x27;);
 },
 },
};
</code></pre>
Additionally, you can also send data in your custom event. <code>MainPage</code> can access that data in the handler function of the <code>close-dialog</code> event:
<pre><code class="hljs">onClose() {
 this.$emit(&quot;close-dialog&quot;, { time: Date.now() });
}
</code></pre>
<h3 id="mainpage">MainPage</h3>
The parent component (<code>MainPage</code>) can then handle the custom event exactly the same as it would for a native event.
<pre><code class="hljs">&lt;div&gt;
 &lt;dialog-component @close-dialog=&quot;handleEvent&quot; /&gt;
&lt;/div&gt;
</code></pre>
Event handler can access data sent when the <code>close-dialog</code> event was emitted:
<pre><code class="hljs">handleEvent ({ time }) {
 console.log(`The Dialog was closed at ${time}`);
}
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we've learned how to handle events in Vue using <code>v-on</code>. We've explained the most common types of events - mouse events, form events, and keyboard events.
Additionally, we've explained how to create custom events in Vue. After reading this article, you should have a comprehensive overview of event handling in Vue, you should be able to handle all native events, and be able to create your own custom events from starch.

Joel Olawanle

In this guide, learn how to handle JavaScript events with Vue, using v-on. Handle mouse, keyboard, form and custom events through practical code examples.

Guide to Vue Event Handling With v-on: Mouse, Keyboard, Form and Custom Events

<h2 id="introduction">Introduction</h2>
Vue.js is a simple web app framework for creating dynamic web interfaces and Single-Page Apps (SPAs). As we create these apps, oftentimes, we want to render something based on a particular criteria - this is the essence of conditional rendering.
Conditional rendering refers to the ability to render distinct user interface (UI) markup based on whether a condition is true or not. This notion is frequently used in contexts like showing or hiding components (toggling), switching application functionality, handling authentication and authorization, and many more.
<blockquote>
In this article, we'll look at various ways of conditionally rendering in Vue.js by using the <code>v-if</code>, <code>v-else-if</code>, and <code>v-else</code> directives. We will also take a look at some examples and highlight the difference between the <code>v-if</code> and <code>v-show</code>.
</blockquote>
<h2 id="vif">v-if</h2>
The <code>v-if</code> directive is used to conditionally render a block meaning the block with the <code>v-if</code> attribute will only be produced if the directive's expression returns a <code>true</code> value. If the expression produces an invalid result (for example, <code>null</code>, <code>0</code>, empty string, <code>false</code>), the element is deleted from the DOM.
Let's illustrate this behavior on the practical example:
<pre><code class="hljs">&lt;div v-if=&quot;login&quot;&gt;
 &lt;p&gt;This user has been logged in!... Welcome.&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
export default {
 data() {
 return {
 login: true,
 };
 }
};
&lt;/script&gt;
</code></pre>
Since <code>login</code> is set to <code>true</code>, the <code>&lt;div&gt;</code> block containing <code>v-if</code> directive will be produced, thus displayed.
<h3 id="vifvsvshow">v-if vs v-show</h3>
It is worth noting that the <code>v-show</code> would also work in the example above and would function seemingly identically, but there is a distinction between the two.
<blockquote>
<code>v-if</code> conditionally renders an element, whereas <code>v-show</code> conditionally shows/displays an element.
</blockquote>
This implies that when the conditional is toggled, <code>v-if</code> will actually delete and restore components wile <code>v-show</code> just makes them invisible or visible. The following animation illustrates how <code>v-if</code> actually deletes and reproduces code blocks:
<img src="https://s3.stackabuse.com/media/articles/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if-1.gif" alt="">
Meanwhile, <code>v-show</code> will always maintain the element in the DOM and will just change its CSS to toggle its appearance (by setting its <code>display</code> to <code>none</code>):
<img src="https://s3.stackabuse.com/media/articles/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if-2.gif" alt="">
<h2 id="velse">v-else</h2>
The <code>v-else</code> directive is a <code>v-if</code> directive that allows you to customize the <code>false</code> value in conditional renderings. If it isn't <code>true</code>, you can use <code>v-else</code> to define what should happen instead.
For example, assume we have a password input, and we want it to produce an error message, &quot;Weak Password&quot;, if the length of the input is less than 6 or display &quot;Strong Password&quot; if the length is greater than 6.
This is a conditional render, with an option for handling the false-case:
<pre><code class="hljs">&lt;form&gt;
 &lt;input type=&quot;password&quot; v-model=&quot;password&quot; placeholder=&quot;Enter your password&quot; /&gt;
 &lt;p v-if=&quot;password.length &gt; 6&quot;&gt;Strong Password&lt;/p&gt;
 &lt;p v-else&gt;Weak Password&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
export default {
 data() {
 return {
 password: &quot;&quot;
 };
 }
};
&lt;/script&gt;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>v-if</code>/<code>v-else</code> works like the regular <code>if</code> and <code>if...else</code> expression in JavaScript.

 </div>
 </div>
 </div>
 Let's utilize this to toggle contents of a simple login page so it changes the message based on whether a user is logged in or not. We'll modify the button wording based on the <code>userLoggedIn</code> status as well:
<pre><code class="hljs">&lt;div id=&quot;app&quot;&gt;
 &lt;div v-if=&quot;userLoggedIn&quot;&gt;
 &lt;h2&gt;Hello Welcome!&lt;/h2&gt;
 &lt;p&gt;You have sucessfully logged in to your user account!&lt;/p&gt;
 &lt;/div&gt;
 &lt;div v-else&gt;
 &lt;p&gt;Please Log In to access your account!&lt;/p&gt;
 &lt;/div&gt;
 &lt;button @click=&quot;userLoggedIn = !userLoggedIn&quot;&gt;
 &lt;p v-if=&quot;!userLoggedIn&quot;&gt;Login&lt;/p&gt;
 &lt;p v-else&gt;LogOut&lt;/p&gt;
 &lt;/button&gt;
&lt;/div&gt;
 
&lt;script&gt;
export default {
 data() {
 return {
 userLoggedIn: false
 };
 }
};
&lt;/script&gt;
</code></pre>
The button’s click event will toggle the <code>userLoggedIn</code> data item, and this will affect the data displayed as seen below:
<img src="https://s3.stackabuse.com/media/articles/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if-3.gif" alt="">
<h2 id="velseif">v-else-if</h2>
<code>v-else-if extends a v-if</code> with an <code>else...if</code> block. This is similar to JavaScript's <code>else...if</code> block in that it allows us to add an if statement to an existing <code>v-if</code>. This is used when there are many criteria to check and can be chained several times:
<pre><code class="hljs">&lt;form&gt;
 &lt;input type=&quot;password&quot; v-model=&quot;password&quot; placeholder=&quot;Enter your password&quot; /&gt;
 &lt;p v-if=&quot;password.length &lt; 4&quot;&gt;Weak Password&lt;/p&gt;
 &lt;p v-else-if=&quot;password.length &lt; 7&quot;&gt;Fairly Strong Password&lt;/p&gt;
 &lt;p v-else&gt;Strong Password&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
export default {
 data() {
 return {
 password: &quot;&quot;
 };
 }
};
&lt;/script&gt;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: When both <code>v-if</code> and <code>v-for</code> are used to the same element, <code>v-if</code> is evaluated first. This simply implies that using <code>v-if</code> and <code>v-for</code> on the same element is not advised, owing to implicit precedence.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this article, we've seen how to conditionally render an element with <code>v-if</code>, <code>v-else</code>, and <code>v-else-if</code>. We also explained the difference between <code>v-if</code> and <code>v-show</code>.

In this guide, learn how to conditionally show or render a DOM element with JavaScript and Vue.js - using v-if, v-show, v-else and v-else-if.

Conditional Rendering/Display in Vue with v-if, v-show, v-else and v-else-if

<h2 id="introduction">Introduction</h2>
If you're a developer working on any modern web application, you're probably aware of how important it is to properly set up routing. When you browse through many React Router tutorials, you may notice that they seldom mention redirects and instead focus on how to use the <code>Link</code> component. To manage routing in React, we can utilize the <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/react-router-dom">react-router-dom</a> package.
<blockquote>
In this post, we will look at the many methods and scenarios in which you can utilize redirects in React. We'll also look at some previous strategies and how they functioned with the new replacements for them in React Router v6, which is the most recent version as of the time of this writing.
</blockquote>
<h3 id="prerequisites">Prerequisites</h3>
In this article, we will use the <code>react-router-dom</code> package, which we must install in our project. This is accomplished by running one of the following commands in our terminal:
<pre><code class="hljs">$ npm i react-router-dom
</code></pre>
or
<pre><code class="hljs">$ yarn add react-router-dom
</code></pre>
<h2 id="redirectandnavigatecomponent">Redirect and Navigate Component</h2>
The <code>Redirect</code> component was usually used in previous versions of the <code>react-router-dom</code> package to quickly do redirects by simply importing the component from <code>react-router-dom</code> and then making use of the component by providing the <code>to</code> prop, passing the page you desire to redirect to.
<pre><code class="hljs">import { Redirect } from &#x27;react-router-dom&#x27;;

&lt;Route path=&#x27;/redirect-page&#x27; element={ &lt;Redirect to=&quot;/error-page&quot; /&gt; }/&gt;
</code></pre>
With the release of React Router v6, the <code>Redirect</code> component was removed and replaced with the <code>Navigate</code> component, which operates just as the <code>Redirect</code> component does by taking in the <code>to</code> prop to enable you to redirect to the page you specify.
<pre><code class="hljs">import { Navigate } from &#x27;react-router-dom&#x27;;

&lt;Route path=&quot;/redirect&quot; element={ &lt;Navigate to=&quot;/error-page&quot; /&gt; } /&gt;
</code></pre>
Make sure that you have the route already. For instance, if you would be redirecting to the &quot;/error-page&quot; route, ensure you have already declared the route previously before setting up the redirect. Take note of the order or <code>Route</code> declarations in the code below:
<pre><code class="hljs">import { BrowserRouter, Routes, Route, Navigate } from &#x27;react-router-dom&#x27;;
import ErrorPage from &#x27;./ErrorPage&#x27;;
import Home from &#x27;./Home&#x27;;

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Routes&gt;
 &lt;Route
 path=&quot;/&quot;
 element={ &lt;Home /&gt; }
 /&gt;
 {/* The next line is very important for the Navigate component to work */}
 &lt;Route
 path=&quot;/error-page&quot;
 element={ &lt;ErrorPage /&gt; }
 /&gt;
 &lt;Route
 path=&quot;/redirect&quot;
 element={ &lt;Navigate to=&quot;/error-page&quot; /&gt; }
 /&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}
export default App;
</code></pre>
<h3 id="conditionalredirects">Conditional Redirects</h3>
This is something you will likely need to make use of when building web applications. Conditional redirects are simply routing based on certain criteria.
A common scenario might be when you're building an e-commerce platform, and you don't want users to have access to certain components/modals/forms, such as the checkout modal/component, until they've added some products to the cart. If they try to force their way into the page, they should be redirected to the products page so they can first select items.
This is known as conditional redirects. To do this, we would use the <code>useState()</code> hook to empty the cart array and then apply some criteria to our route.
<pre><code class="hljs">const [cartItems, setCartItems] = useState([]);

&lt;Route
 path=&quot;/checkout&quot;
 element={ cartItems.length &lt; 1 ? &lt;Navigate to=&quot;/products&quot; /&gt; : &lt;Checkout /&gt; }
/&gt;;
</code></pre>
In this example, as long as this array is empty, we won't be able to access the <code>/checkout</code> route until there is at least one item in the <code>cartItems</code> array.
<h3 id="replacingthecurrenturl">Replacing the Current URL</h3>
In some cases, you might want to replace the current URL in the browser instead of adding (i.e., pushing) it to your browser's history, to do this we simply have to add the <code>replace</code> prop to the <code>Navigate</code> component.
<pre><code class="hljs">&lt;Navigate replace to=&quot;/error-page&quot; /&gt;
</code></pre>
Without this prop, the browser will keep track of the history, including the redirect.
<h2 id="programmaticredirectswithusenavigate">Programmatic Redirects with <code>useNavigate()</code></h2>
You may be familiar with the <code>useHistory()</code> hook from previous versions of the <code>react-router-dom</code> package, which was used to programmatically redirect users. When visitors have finished filling out a form, or if you want to add a redirect function to a button, this is a great use-case.
The <code>useHistory()</code> hook is first imported and then assigned to a variable, which is subsequently utilized in a button (for example) to redirect users once a specific action is taken. Using the <code>onClick</code> event, we can then call the <code>.push()</code> method to tell React Router where we want the button to redirect to.
<pre><code class="hljs">import { useHistory } from &#x27;react-router-dom&#x27;;

const Home = () =&gt; {
 const history = useHistory();
 return (
 {/* ... */}
 &lt;button onClick={() =&gt; history.push(&#x27;/products&#x27;)}&gt;
 {/* ... */}
 );
};
</code></pre>
With the release of React Router v6, we no longer utilize the <code>useHistory()</code> hook, but instead the <code>useNavigate()</code> hook, which is quite similar.
This is also accomplished by importing the hook and then assigning a variable to the <code>useNavigate()</code> hook, like we did with <code>useHistory()</code>. We can now utilize the variable that was returned to navigate the user to other pages.
<pre><code class="hljs">import { useNavigate } from &#x27;react-router-dom&#x27;;

const Home = () =&gt; {
 const navigate = useNavigate();
 return (
 {/* ... */}
 &lt;button onClick={() =&gt; navigate(&#x27;/products&#x27;)}&gt;
 {/* ... */}
 );
};
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Unlike the <code>useHistory()</code> hook, this does not require calling the <code>push</code> method. All we need to do is pass the path as an argument to the <code>navigate</code> function.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this post, we looked at a number of ways to redirect with React Router, how it functions, and how this was handled in both the older version and the latest v6 version.

Scott Robinson

Redirects in React Router

<h2 id="introduction">Introduction</h2>
<a rel="nofollow noopener" target="_blank" href="https://axios-http.com/">Axios</a> is a JavaScript library that uses the Promise API to create HTTP requests with <code>http</code> in Node.js runtime or <code>XMLHttpRequests</code> in the browser. Because these requests are promises, they work with the newer async/await syntax, as well as <code>.then()</code> functions for promise chaining and the <code>.catch()</code> mechanism for error handling.
<pre><code class="hljs">try {
 let res = await axios.get(&#x27;/my-api-route&#x27;);

 // Work with the response...
} catch (err) {
 // Handle error
 console.log(err);
}
</code></pre>
<blockquote>
In this article, we will see how to handle errors with Axios, as this is very important when making any HTTP calls knowing fully well that there are times when the service you're calling might not be available or return other unexpected errors. We'll show the <code>.then()</code>/<code>.catch()</code> method, but primarily use the async/await syntax.
</blockquote>
<h3 id="thenandcatch">Then and Catch</h3>
Promises can be handled in two ways using modern JS - the async/await syntax, which was shown above, as well as <code>.then()</code> and <code>.catch()</code> methods. Note that both of these methods can produce the same functionality, but async/await is typically regarded as being easier to work with and requires less boilerplate code in longer promise chains.
Here is how you'd achieve the same thing, but using the then/catch method:
<pre><code class="hljs">axios.get(&#x27;/my-api-route&#x27;)
 .then(res =&gt; {
 // Work with the response...
 }).catch(err =&gt; {
 // Handle error
 console.log(err);
 });
</code></pre>
Both the <code>res</code> and <code>err</code> objects are the same as with the async/await syntax.
<h2 id="handlingerrors">Handling Errors</h2>
In this section, we will look at two primary categories of problems, as well as other issues that we may encounter and how to manage them using Axios. It is critical that you understand that this applies to all types of HTTP queries handled by Axios, including <code>GET</code>, <code>POST</code>, <code>PATCH</code>, and so on.
Here you can see the syntax for the three aspects - this will capture the error; it is crucial to note that this error carries a large error object with a lot of information:
<pre><code class="hljs">try {
 let res = await axios.get(&#x27;/my-api-route&#x27;);

 // Work with the response...
} catch (err) {
 if (err.response) {
 // The client was given an error response (5xx, 4xx)
 } else if (err.request) {
 // The client never received a response, and the request was never left
 } else {
 // Anything else
 }
}
</code></pre>
The differences in the error object, highlighted above in the <code>catch</code> code, indicate where the request encountered the issue. We'll look deeper into this in the following sections.
<h3 id="errorresponse"><code>error.response</code></h3>
This is the type of mistake we are most familiar with, and it is much easier to deal with. Many sites display a 404 Not Found page/error message or various response codes based on what the API provides; this is often handled via the response.
If your error object has a response property, it signifies your server returned a 4xx/5xx error. This will assist you choose what sort of message to return to users; the message you'll want to provide for 4xx may differ from that for 5xx, and if your backend isn't returning anything at all.
<pre><code class="hljs">try {
 let res = await axios.get(&#x27;/my-api-route&#x27;);

 // Work with the response...
} catch (err) {
 if (err.response) {
 // The client was given an error response (5xx, 4xx)
 console.log(err.response.data);
 console.log(err.response.status);
 console.log(err.response.headers);
 } else if (err.request) {
 // The client never received a response, and the request was never left
 } else {
 // Anything else
 }
}
</code></pre>
<h3 id="errorrequest"><code>error.request</code></h3>
This error is most commonly caused by a bad/spotty network, a hanging backend that does not respond instantly to each request, unauthorized or cross-domain requests, and lastly if the backend API returns an error.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This occurs when the browser was able to initiate a request but did not receive a valid answer for any reason.

 </div>
 </div>
 </div>
 <pre><code class="hljs">try {
 let res = await axios.get(&#x27;/my-api-route&#x27;);

 // Work with the response...
} catch (err) {
 if (err.response) {
 // The client was given an error response (5xx, 4xx)
 } else if (err.request) {
 // The client never received a response, and the request was never left
 console.log(err.request);
 } else {
 // Anything else
 }
}
</code></pre>
Earlier we mentioned that the underlying request Axios uses depends on the environment in which it's being run. This is also the case for the <code>err.request</code> object. Here the <code>err.request</code> object is an instance of <code>XMLHttpRequest</code> when being executed in the browser, whereas it's an instance of <code>http.ClientRequest</code> when being used in Node.js.
<h3 id="othererrors">Other Errors</h3>
It's possible that the error object does not have either a <code>response</code> or <code>request</code> object attached to it. In this case it is implied that there was an issue in setting up the request, which eventually triggered an error.
<pre><code class="hljs">try {
 let res = await axios.get(&#x27;/my-api-route&#x27;);

 // Work with the response...
} catch (err) {
 if (err.response) {
 // The client was given an error response (5xx, 4xx)
 } else if (err.request) {
 // The client never received a response, and the request was never left
 } else {
 // Anything else
 console.log(&#x27;Error&#x27;, err.message);
 }
}
</code></pre>
For example, this could be the case if you omit the URL parameter from the <code>.get()</code> call, and thus no request was ever made.
<h2 id="conclusion">Conclusion</h2>
In this short article, we looked at how we may handle various sorts of failures and errors in Axios. This is also important for giving the correct message to your application/website visitors, rather than always returning a generic error message, sending a 404, or indicating network problems.

Handling Errors With Axios

<h2 id="introduction">Introduction</h2>
Objects are used to store a set of properties, each of which may be thought of as a relationship between a name (or key) and a value - thus, objects are a collection of key-value pairs.
<blockquote>
In this guide, we'll take a look at how to sort an Array of Objects by a string property's value using the <code>sort()</code> method.
</blockquote>
Sorting data is one of the core usages of software! We can sort and filter data on various conditions, and sorting by the value of a string property is a common one. For example, suppose we have a list of students with their <code>firstName</code> and <code>lastName</code>:
<pre><code class="hljs">const students = [
 { firstName: &quot;John&quot;, lastName: &quot;Doe&quot;, graduationYear: 2022 },
 { firstName: &quot;Stephen&quot;, lastName: &quot;Matt&quot;, graduationYear: 2023 },
 { firstName: &quot;Abigail&quot;, lastName: &quot;Susu&quot;, graduationYear: 2022 },
 { firstName: &quot;Zara&quot;, lastName: &quot;Kate&quot;, graduationYear: 2024 },
 { firstName: &quot;Daniel&quot;, lastName: &quot;Vic&quot;, graduationYear: 2023 }
];
</code></pre>
We could sort these students by either their <code>firstName</code> or <code>lastName</code>. We could write custom comparators (such as to compare lengths), sort them lexicographically, sort by inclusion of a substring, etc.
<h3 id="sortlistofobjectsbystring">Sort List of Objects by String</h3>
JavaScript lists implement a <code>sort()</code> method, which additionally accepts a callback function that lets you implement a custom comparator. By default, the <code>sort()</code> method logically sorts the given data type. For integers, comparison is fairly straightforward (in ascending order), and strings are sorted lexicographically:
<pre><code class="hljs">const names = [&quot;john&quot;, &quot;kate&quot;, &quot;dan&quot;];
// Sorting array of strings, lexicographically
console.log(names.sort()); // [&quot;dan&quot;,&quot;john&quot;,&quot;kate&quot;]
</code></pre>
Since we want to sort an array of objects, based on an underlying property, we'll want to define a custom callback function for sorting. The callback function accepts two parameters - two elements to be compared at any given time. Based on the comparison, you'll return <code>-1</code>, <code>0</code> or <code>1</code>, denoting the result of the comparison. If <code>-1</code> is returned, <code>a</code> is considered lesser than <code>b</code>. <code>0</code> signifies equality. <code>1</code> signifies that <code>b</code> is greater than <code>a</code>:
<pre><code class="hljs">let sortedStudents = students.sort((a, b) =&gt; {
 if (a.firstName &lt; b.firstName) {
 return -1;
 }
 if (a.firstName &gt; b.firstName) {
 return 1;
 }
 return 0;
});

console.log(sortedStudents);
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We can compress the <code>if</code> statements by not using the curly braces.

 </div>
 </div>
 </div>
 This would output:
<pre><code class="hljs">[
 { firstName: &quot;Abigail&quot;, lastName: &quot;Susu&quot;, graduationYear: 2022 },
 { firstName: &quot;Daniel&quot;, lastName: &quot;Vic&quot;, graduationYear: 2023 },
 { firstName: &quot;John&quot;, lastName: &quot;Doe&quot;, graduationYear: 2022 },
 { firstName: &quot;Stephen&quot;, lastName: &quot;Matt&quot;, graduationYear: 2023 },
 { firstName: &quot;Zara&quot;, lastName: &quot;Kate&quot;, graduationYear: 2024 }
];
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: When comparing strings, upper case letters have a different weight than lower case letters and <code>A</code> would be, for instance, positioned after <code>b</code>. It's generally considered good practice to equalize the strings to either all lowercase or all uppercase (more commonly, lowercase, due to efficiency).

 </div>
 </div>
 </div>
 Let's account for the case, and shorten/compact the if statements using a <a target="_blank" href="https://stackabuse.com/null-coalescing-operator-in-javascript-with-ecmascript-2020/">null coalescing operator</a>:
<pre><code class="hljs">let sortedStudents = students.sort((a,b) =&gt; (a.firstName.toLowerCase() &lt; b.firstName.toLowerCase()) ? -1 : ((b.firstName.toLowerCase() &gt; a.firstName.toLowerCase()) ? 1 : 0));

console.log(sortedStudents);
</code></pre>
This results in:
<pre><code class="hljs">const students = [
 { firstName: &quot;John&quot;, lastName: &quot;Doe&quot;, graduationYear: &quot;2021&quot; },
 { firstName: &quot;Stephen&quot;, lastName: &quot;Matt&quot;, graduationYear: &quot;2026&quot; },
 { firstName: &quot;Abigail&quot;, lastName: &quot;Susu&quot;, graduationYear: &quot;2022&quot; },
 { firstName: &quot;Zara&quot;, lastName: &quot;Kate&quot;, graduationYear: &quot;2024&quot; },
 { firstName: &quot;Daniel&quot;, lastName: &quot;Vic&quot;, graduationYear: &quot;2023&quot; }
];
</code></pre>
Even though the years are strings here, we can easily sort them as well:
<pre><code class="hljs">let sortedStudents = students.sort((a,b) =&gt; (a.graduationYear &lt; b.graduationYear) ? -1 : ((b.graduationYear &gt; a.graduationYear) ? 1 : 0))

console.log(sortedStudents);
</code></pre>
This results in:
<pre><code class="hljs">[
 { firstName: &quot;John&quot;, lastName: &quot;Doe&quot;, graduationYear: &quot;2021&quot; },
 { firstName: &quot;Abigail&quot;, lastName: &quot;Susu&quot;, graduationYear: &quot;2022&quot; },
 { firstName: &quot;Daniel&quot;, lastName: &quot;Vic&quot;, graduationYear: &quot;2023&quot; },
 { firstName: &quot;Zara&quot;, lastName: &quot;Kate&quot;, graduationYear: &quot;2024&quot; },
 { firstName: &quot;Stephen&quot;, lastName: &quot;Matt&quot;, graduationYear: &quot;2026&quot; }
];
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short article - we took a look at sorting an array of objects based on a string property, using the <code>sort()</code> method in JavaScript.

In this tutorial, learn how to sort an array of JavaScript objects, based on a string value of a property, with practical code and a custom comparator using the sort() method.

Sort Array of Objects by String Property Value

<h2 id="introduction">Introduction</h2>
Whenever you have a website that prompts users to scroll down a lengthy amount - offering a button to scroll back to the top is a nice gesture!
<blockquote>
In this hands-on guide, we will learn how to make an animated HTML/CSS/JS button to scroll to the top in Vanilla JavaScript.
</blockquote>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The source code is available on <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/StackAbuse/scroll-to-top-js">GitHub</a>.

 </div>
 </div>
 </div>
 <h3 id="gettingstarted">Getting Started</h3>
We'll be creating the functionality from scratch and styling it. Using a <code>querySelector()</code>, we'll select the created button and toggle its visibility on and off based on where the user is on the page, and trigger an event to scroll to the top on each click.
<blockquote>
If you'd like to read about creating a scroll-to-top in React, read our <a target="_blank" href="https://stackabuse.com/how-to-scroll-to-top-in-react-with-a-button-component/">How to Scroll to Top in React with a Button Component</a>!
</blockquote>
Because the button is fixed to a certain location (bottom-right) using the CSS <code>position</code> attributes, the markup for this functionality may be inserted anywhere inside the <code>body</code> element of your HTML code:
<pre><code class="hljs">&lt;div className=&quot;scroll-to-top&quot;&gt;
 &lt;span class=&quot;btn btn-position btn-style&quot;&gt;^&lt;/i&gt;
&lt;/div&gt;
</code></pre>
Once added, we can style the button and its parent <code>&lt;div&gt;</code>. We'll fix the position of the button to the bottom right, offsetting it a little from the bottom and the right-hand side:
<pre><code class="hljs">.scroll-to-top {
 position: relative;
}

.btn-position {
 position: fixed;
 bottom: 40px;
 right: 25px;
 z-index: 20;
}

.btn-style {
 background-color: #551b54;
 border: 2px solid #fff;
 border-radius: 50%;
 height: 50px;
 width: 50px;
 color: #fff;
 cursor: pointer;
 animation: movebtn 3s ease-in-out infinite;
 transition: all 0.5s ease-in-out;
 font-size: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 visibility: hidden;
}
</code></pre>
We've set the <code>visibility</code> of this button to <code>hidden</code> by default, so that the button only appears when the user has scrolled down to a particular position (Y-axis) - we'll do this by altering its property with JavaScript later. Finally, let's add a hover and some animation to the button so it doesn't stand still:
<pre><code class="hljs">.icon-style:hover {
 animation: none;
 background: #fff;
 color: #551b54;
 border: 2px solid #551b54;
}

@keyframes movebtn {
 0% {
 transform: translateY(0px);
 }
 25% {
 transform: translateY(20px);
 }
 50% {
 transform: translateY(0px);
 }
 75% {
 transform: translateY(-20px);
 }
 100% {
 transform: translateY(0px);
 }
}
</code></pre>
<h3 id="implementingthelogic">Implementing the Logic</h3>
Now that the button is styled, and invisible - let's implement the logic that makes it visible once the user scrolls down. We'll select it via <code>querySelector()</code> and attach an <code>EventListener</code> to the element:
<pre><code class="hljs">const scrollBtn = document.querySelector(&quot;.btn&quot;);
</code></pre>
Now, based on the position of the window's Y value (how much the user has scrolled vertically, starting at <code>0</code>) - we'll set the <code>visibility</code> of the element to <code>&quot;visible&quot;</code> or <code>&quot;hidden&quot;</code> if the Y value is below a certain threshold:
<pre><code class="hljs">const btnVisibility = () =&gt; {
 if (window.scrollY &gt; 400) {
 scrollBtn.style.visibility = &quot;visible&quot;;
 } else {
 scrollBtn.style.visibility = &quot;hidden&quot;;
 }
};
</code></pre>
Now we have a function which, when called, checks whether the webpage has been scrolled down to <code>400</code>, and sets the <code>visibility</code> of the button element to <code>visible</code>, else it sets it to <code>hidden</code>.
Finally - we'll want to repeatedly call this function to repeatedly check the position and adjust the visibility accordingly. This is best done through an event listener that triggers the function on each scrolling change:
<pre><code class="hljs">document.addEventListener(&quot;scroll&quot;, () =&gt; {
 btnVisibility();
});
</code></pre>
The last piece of code we'll want to attach to an event listener is the logic to scroll the user back up programmatically when they click a button. The <code>scrollToTop()</code> function of the <code>window</code> instance does just that! We can set what the &quot;top&quot; is, by providing a Y coordinate, and can call the method on each <code>&quot;click&quot;</code> event on the button:
<pre><code class="hljs">scrollBtn.addEventListener(&quot;click&quot;, () =&gt; {
 window.scrollTo({
 top: 0,
 behavior: &quot;smooth&quot;
 });
});
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>window.scrollTo()</code> has a behavior parameter that indicates whether the scrolling should progress softly (smoothly) or instantly in a single step (<code>auto</code> the default value).

 </div>
 </div>
 </div>
 That's it! Try scrolling down the page - an animated button will appear. Once it does and you click it, you'll smoothly be taken back to the top of the page:
<img src="https://s3.stackabuse.com/media/articles/scroll-to-top-in-vanilla-javascript-1.gif" alt="scroll to top in vanilla javascript">
<h2 id="conclusion">Conclusion</h2>
Scrolling to the top of the page isn't difficult - even with event listeners and animations! In this hands-on guide, we've learned how to implement the scroll-to-top functionality with Vanilla JavaScript and styled the button.

In this short hands-on guide, learn how to implement the scroll-to-top functionality in vanilla JavaScript, as well as how to style and animate the button.

Scroll to Top in Vanilla JavaScript

<h2 id="introduction">Introduction</h2>
JavaScript's Objects are not iterable like arrays or strings, so we can't make use of the <code>filter()</code> method directly on an <code>Object</code>. <code>filter()</code> allows us to iterate through an array and returns only the items of that array that fit certain criteria, into a new array.
<blockquote>
If you'd like to read more about the filter() method - read our <a target="_blank" href="https://stackabuse.com/guide-to-javascripts-filter-method/">Guide to JavaScript's filter() Method</a>!
</blockquote>
<blockquote>
In this article, we will explore how to filter an Object making use of its key in JavaScript.
</blockquote>
An object is, essentially, a map of properties and their values. This key-value pair set is what an object is. We can naturally extract the keys and values individually:
<img src="//s3.stackabuse.com/media/articles/how-to-filter-an-object-by-key-in-javascript-1.png" alt="">
Keys are extracted using <code>Object.keys()</code>, while values are extracted using <code>Object.values()</code>. To retrieve both keys and values, you may alternatively use <code>Object.entries()</code>. We are solely concerned with the keys in this article, for filtering keys against certain criteria.
<h2 id="usingobjectkeystofilteranobject">Using Object.keys() to filter an Object</h2>
The <code>Object.keys()</code> method is used to generate an array whose elements are strings containing the names (keys) of an object's properties. The object is passed as an argument to <code>Object.keys()</code>:
<pre><code class="hljs">Object.keys(objectName);
</code></pre>
For example, suppose we have an object of user scores in various subjects:
<pre><code class="hljs">const userScores = {
 chemistry: 60,
 mathematics: 70,
 physics: 80,
 english: 98
};
</code></pre>
We can loop through the object and fetch the keys, which for this example would be the subjects:
<pre><code class="hljs">const names = Object.keys(userScores);
console.log(names); // [&quot;chemistry&quot;,&quot;mathematics&quot;,&quot;physics&quot;,&quot;english&quot;]
</code></pre>
After you've generated the keys, you may use <code>filter()</code> to loop over the existing values and return just those that meet the specified criteria. Finally, you can use <code>reduce()</code> to collect the filtered keys and their values into a new object, for instance.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: <code>filter()</code> is great at chaining with other functional methods!

 </div>
 </div>
 </div>
 Assume we have an Object, and we want to return only key-value pairs with the word &quot;name&quot; in the keys:
<pre><code class="hljs">const user = {
 firstName: &quot;John&quot;,
 lastName: &quot;Doe&quot;,
 userName: &quot;johndoe12&quot;,
 email: &quot;johndoe@stackabuse.com&quot;,
 age: 37,
 hobby: &quot;Singing&quot;
};
</code></pre>
We could filter by making use of the Objects key:
<pre><code class="hljs">const names = Object.keys(user)
 .filter((key) =&gt; key.includes(&quot;Name&quot;))
 .reduce((obj, key) =&gt; {
 return Object.assign(obj, {
 [key]: user[key]
 });
 }, {});

console.log(names);
</code></pre>
We made use of <code>Object.keys(user)</code> to generate all the keys as an array, resulting in an array:
<pre><code class="hljs">[&quot;firstName&quot;,&quot;lastName&quot;,&quot;userName&quot;,&quot;email&quot;,&quot;age&quot;,&quot;hobby&quot;]
</code></pre>
We then used the array function <code>includes()</code> as the criteria, within the <code>filter()</code> method, to go over each element in the array to determine whether any key included the word &quot;Name&quot;:
<pre><code class="hljs">[&quot;firstName&quot;,&quot;lastName&quot;,&quot;userName&quot;]
</code></pre>
Then, we made use of <code>reduce()</code> to reduce the array down into an object.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>reduce()</code> function accepts two arguments: an object as the first parameter (identity) and the current iteration value as the second.

 </div>
 </div>
 </div>
 <img src="//s3.stackabuse.com/media/articles/how-to-filter-an-object-by-key-in-javascript-2.png" alt="">
We are using <code>Object.assign()</code> to combine source objects into a target object in the new object being generated. The <code>Object.assign()</code> function takes the <code>Object</code> that is being built and adds the current key-value pair that we are passing into it.
And at the end of this - we have a new object, filtered by the keys:
<pre><code class="hljs">{ firstName: &#x27;John&#x27;, lastName: &#x27;Doe&#x27;, userName: &#x27;johndoe12&#x27; }
</code></pre>
<h2 id="filterarrayofobjectsbykey">Filter Array of Objects by Key</h2>
Oftentimes, the objects we're processing are sequenced in an array. Filtering each is as easy as filtering one - we just iterate through the array and apply the same steps:
<pre><code class="hljs">const users = {
 John: { username: &#x27;johncam112&#x27;, age:19 },
 Daniel: { key: &#x27;Dandandel1&#x27;, age:21 },
 Ruth: { key: &#x27;rutie01&#x27;, age:24 },
 Joe: { key: &#x27;Joemathuel&#x27;, age:28 }
};

const selectedUsers = [&#x27;Ruth&#x27;, &#x27;Daniel&#x27;];

const filteredUsers = Object.keys(users)
 .filter(key =&gt; selectedUsers.includes(key))
 .reduce((obj, key) =&gt; {
 obj[key] = users[key];
 return obj;
 }, {});

console.log(filteredUsers);
</code></pre>
In the above example, we filtered the Users object to only return objects of the <code>selectedUsers</code>, filtering them by the key:
<pre><code class="hljs">{
 Daniel: {
 key:&quot;Dandandel1&quot;,
 age:21
},
 Ruth: {
 key:&quot;rutie01&quot;,
 age:24
 }
}
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this short article - we've taken a look at filtering objects by value, using the <code>Object.keys()</code> method, filtered via the <code>filter()</code> method.