Union find solution with explain and comments (Javascript)
The grid can be broke into N * N cells.\nFor every cell, split it into left and right part:\n\n\nWhen this cell is \' \', union left and right.\n\nIf this cell 
The grid can be broke into N * N cells.\nFor every cell, split it into left and right part:\n![image](https://assets.leetcode.com/users/images/5274db54-2433-4339-9cb6-d640a82b0381_1608567401.5420868.png)\n\n**When this cell is \' \', union left and right.**\n\nIf this cell has a left naighbor:\n![image](https://assets.leetcode.com/users/images/4c558622-e6f9-4c9a-89e9-d62e2bf10c5d_1608567707.3410995.png)\nThe **right part** of the **left neighbor** is always near the common line,\nand the **left part** of the **current cell** is aways near the common line.\nSo union the right part of the left neighbor and the left part of the current cell.\n\nIf this cell has a upper neighbor:\n![image](https://assets.leetcode.com/users/images/58d9c118-c9a9-401a-b458-95ed2dc948b4_1608568095.780355.png)\nFor upper neighbor, if it\'s \' /\', we should choose right part to union, if \'\\\', choose left.\nFor current cell, if it\'s \' /\', we should choose left part to union, if \'\\\', choose right.\n\n**For \' \' cell, choose any part is ok, because we already union its left and right part**\n\n```js\n// this is a very common disjoint set implement\nfunction DS(n) {\n    var root = [...new Array(n).keys()];\n    var rank = new Array(n).fill(0);\n    this.find = function(v) {\n        if (root[v] !== v) root[v] = this.find(root[v]);\n        return root[v];\n    }\n    this.union = function(i, j) {\n        var [ri, rj] = [this.find(i), this.find(j)];\n        if (ri === rj) return;\n        if (rank[ri] > rank[rj]) root[rj] = ri;\n        else if (rank[ri] < rank[rj]) root[ri] = rj;\n        else root[ri] = rj, rank[rj]++;\n    }\n\t// get how many unique unions\n    this.getUnoinCount = function() {\n        for (var i = 0; i < n; i++) this.find(i);\n        return new Set(root).size;\n    }\n}\n\nfunction getKeys(i, j, n) {\n    var val = i * n + j;\n    val *= 2;\n\t// left and right part key of grid[i][j]\n    return [val, val + 1];\n}\n\n/**\n * @param {string[]} grid\n * @return {number}\n */\nvar regionsBySlashes = function(grid) {\n    var n = grid.length;\n    if (n === 1) return grid[0][0] === \' \' ? 1 : 2;\n    var ds = new DS(n * n * 2);\n    for (var i = 0; i < n; i++) {\n        for (var j = 0; j < n; j++) {\n            var [left, right] = getKeys(i, j, n);\n\t\t\t// When this cell is \' \', union left and right.\n            if (grid[i][j] === \' \') ds.union(left, right);\n\t\t\t// if have upper neighbor\n            if (i !== 0) {\n                var [upLeft, upRight] = getKeys(i - 1, j, n);\n\t\t\t\t// For upper neighbor, if it\'s \'/\', we should choose right part to union, if \'\\\', choose left.\n                var upKey = grid[i - 1][j] === \'\\\\\' ? upLeft : upRight;\n\t\t\t\t// For current cell, if it\'s \'/\', we should choose left part to union, if \'\\\', choose right.\n                var curKey = grid[i][j] === \'/\' ? left : right;\n                ds.union(upKey, curKey);\n            }\n\t\t\t// if have left neighbor\n            if (j !== 0) {\n                var [leftLeft, leftRight] = getKeys(i, j - 1, n);\n\t\t\t\t// just choose the right part of the left neighbor\n                var leftKey = leftRight;\n\t\t\t\t// just choose the left part of the current cell\n                var curKey = left;\n                ds.union(leftKey, curKey);\n            }\n        }\n    }\n    return ds.getUnoinCount();\n};\n```
['Union Find', 'JavaScript']