<code>path</code> is the inbuilt module in <a href="https://nodejs.org/docs/latest-v14.x/api/path.html" target="_blank" rel="noopener">NodeJs</a>. It is often used to generate absolute paths for files or resources. <code>join</code> and <code>resolve</code> are the quite commonly and interchangeably used methods of the <code>path</code> module.&nbsp;
In most of the cases the way join and resolve methods used by us lead to the same result but there's a notable difference between those methods, understanding which can help us to use the <code>path</code> module effectively.&nbsp;
<pre class="language-javascript"><code>path.join(__dirname, 'public/logo.png'); // /home/user/project_dir/public/log.png
path.resolve(__dirname, 'public/logo.png'); // /home/user/project_dir/public/log.png</code></pre>
In the above code snippet <code>__dirnname</code> is a global variable that gives the absolute path of your project directory.
<pre class="language-javascript"><code>console.log(__dirname); // /home/user/project_dir</code></pre>
To quickly get an idea of the difference between <code>path.join</code> and <code>path.resolve</code>, just remove the <code>__dirname</code> from both the methods in the above codes and observe the results.
<pre class="language-javascript"><code>path.join('public/logo.png'); // public/log.png
path.resolve('public/logo.png'); // /home/user/project_dir/public/log.png</code></pre>
So it should have given some idea of how <code>join</code> and <code>resolve</code> methods are working. Let's dive into more details and differences between these two methods.
<h2>Difference between path join vs resolve</h2>
<h3>Understanding <code>path.join</code> method</h3>
<code>join</code> method takes path segments as arguments and joins them together using the platform-specific separator(<code>/</code> in Linux and <code>\</code> in Windows) as a delimiter and then normalizes the resulting path.
So <code>path.join</code> simply joins the paths that are given to it. Let's have different scenarios below.
<pre class="language-javascript"><code>path.join('a', 'b', 'c'); // a/b/c
path.join('a', '/b', 'c'); // a/b/c
path.join('a', 'b', '../c'); // a/c -&gt; normalized
path.join(''); // .
path.join(); // -&gt; No result because zero length path segments are ignored
path.join(__dirname, 'public/logo.png'); // /home/user/project_dir/public/log.png</code></pre>
The path segment for <code>__dirname</code> as seen earlier is <code>/home/user/project_dir</code> so joining that with <code>public/logo.png</code> gives&nbsp;
<pre class="language-markup"><code>/home/user/project_dir/public/log.png</code></pre>
Make a note that <code>path.join</code> takes only valid strings as path segments else it will throw an error.
Now let's understand path.resolve.
<h3>Understanding <code>path.resolve</code> method</h3>
<code>resolve</code> method takes path segments as arguments just like the <code>join</code> method but it resolves or returns an absolute path always with normalization(which means ../.. such paths get resolved) and that's the main difference between <code>join</code> and <code>resolve</code>.
But few things need to be taken care of to get the correct absolute path from the <code>path.resolve</code>. For instance, the given sequence of paths or path segments are processed from right to left, with each subsequent <code>path</code> prepended until an absolute path is constructed.&nbsp;
Let's see various <code>path.resolve</code> scenarios to understand it better.
<pre class="language-javascript"><code>path.resolve('a', 'b', 'c'); // /home/user/project_dir/a/b/c
path.resolve('a', '/b', 'c'); // /b/c -&gt; from right to left until it encounters '/' is considered for absolute path
path.resolve('a', 'b', '../c'); // /home/user/project_dir/a/c -&gt; normalized
path.resolve(''); // /home/user/project_dir/
path.resolve(); // /home/user/project_dir/
</code></pre>
Just like <code>path.join</code>, <code>resolve</code> also takes only the valid path segments as arguments else it will throw an error.
So it should be clear by now that <code>join</code> just joins the path segments given as arguments where as <code>resolve</code> joins or resolves the path segments with the absolute path of the root directory or the absolute path that is given as an argument to the <code>path.resolve</code>.&nbsp;
From this understanding of these methods, we can avoid <code>path.join</code> most of the times to obtain an absolute path using <code>__dirname</code>, because <code>path.resolve</code> actually takes into account the absolute path of the root directory while resolving the path segments.
<pre class="language-javascript"><code>__dirname === path.resolve() // true</code></pre>
<pre class="language-javascript"><code>// Instead of this
path.join(__dirname, 'public/logo.png'); // /home/user/project_dir/public/log.png

// You can use this to get the absolute path
path.resolve('public/logo.png'); // /home/user/project_dir/public/log.png</code></pre>
<blockquote>
Keep in mind that whenever <code>path.resolve</code> encounters <code>/</code> for the first time from right to left it ends the path until there as the absolute path.&nbsp;
</blockquote>
And that is all about path join vs resolve details. Hope this article has clarified and given you a clear understanding of the differences between these two methods.&nbsp;

Here is the clear insight about the path join vs resolve in NodeJS. Understand when to use what based on different scenarios.

Posts tagged with Join-vs-Resolve

Everything about path.join vs path.resolve in NodeJS