AEM: How to find WCMMode in Jquery/ Javascript

WCMMode can be captured in Sightly or Java code as follows

In Sightly,

<div data-sly-test.author="${wcmmode.edit || wcmmode.design || wcmmode.preview}">

In Sightly Java code that extends WCMUse ,

getWcmMode().isEdit(), getWcmMode().isDesign() or getWcmMode().isPreview()

But, finding this in Jquery or Javascript is not straight forward. We need to make use of the cookies like

if($.cookie('cq-editor-layer') == "Preview") {

console.log("Preview Mode");

}else if ($.cookie('cq-editor-layer') == "Edit") {

       console.log("Edit Mode");

}

or

if($.cookie('wcmmode') == "preview") {

console.log("Preview Mode");

}else if ($.cookie('wcmmode') == "edit") {

       console.log("Edit Mode");

}

Also, you can find the AuthoringUIMode is touch or classic with the cookie

if($.cookie('cq-authoring-mode') == "Touch") {

console.log("Touch UI");

}else if($.cookie('cq-authoring-mode') == "Classic") {

console.log("Classic UI");

}