RegExp’s match() returns array with two matches when I expect one match

Consider the following example:

let str = "filename.jpg";

let pattOne = /\.[^\.]*$/;
let pattTwo = /(\.[^\.]*$)/;
let pattThree = /(\.[^\.]*$)/g;

document.writeln(str.match(pattOne));
document.writeln(str.match(pattTwo));
document.writeln(str.match(pattThree));

<pre>

Here is the result:

.jpg
.jpg,.jpg
.jpg

I expect this result:

.jpg
.jpg
.jpg

Why does placing parentheses around the regular expression change the result? Why does using the 'g' modifier change the result again?

From String.prototype.match ^[MDN]:

If the regular expression does not include the g flag, returns the same result as regexp.exec(string).

Where the RegExp.prototype.exec documentation ^[MDN] says:

The returned array has the matched text as the first item, and then one item for each capturing parenthesis that matched containing the text that was captured.

So as you introduced a capture group in the second expression, the first element is the whole match and the second contains the content of the capture group, which, in your example, is the whole match as well.
The first expression does not have a capture group, so you only get back the match.

Back to the match documentation:

If the regular expression includes the g flag, the method returns an Array containing all matches. If there were no matches, the method returns null.

With the g modifier, only matches are returned, but not the content of capture groups. In your string there is only one match.