<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 Path

Everything about path.join vs path.resolve in NodeJS