Difference between window width/height, document width/height, screen width/height, scroll width/height ?

Question

On a webpage, we use javascript to find different type of heights and widths:

• window.innerHeight - It gives the visible inner height of window. It also depends on if you have maximized the window or not. If you have opened devTool in chrome, and then you check this innerHeight then it will reduce the innerHeight. So it gives the current visible height of window excluding the scrollbar,any opened tool, menu status bar etc.
• window.innerWidth - It gives the visible inner width of window. It also depends on if you have maximized the window or not. If you have opened devTool in chrome, and then you check this innerWidth then it will reduce the innerWidth. So it gives the current visible width of window excluding the scrollbar,any opened tool, menu status bar etc. 
• window.outerHeight - It is the visible outer height of window (including menus,scrollbar,statusbar,titlebar)
• window.outerWidth - It is the visible outer width of window (including menus,scrollbar,statusbar,titlebar)
• document.body.scrollHeight - It gives us the full height of page till the scrollbar ends
• document.body.scrollWidth - It gives us the full width of page till the scrollbar ends
• screen.height - It gives the device screen height
• screen.width - It gives the device screen width