How ipcMain and ipcRenderer work?

I've trying to pass massage from ipcRenderer to ipcMain. The problem is it would pass any value, I tried google the Electron API documentations, but none of them are worked out for me.

app.js

const
    {app, BrowserWindow, ipcMain} = require("electron");

var mainWindow = null;

app.on("ready", () => {
    mainWindow = new BrowserWindow({
        width: 500,
        height: 600
    });
    require("devtron").install();
    mainWindow.webContents.openDevTools();
    mainWindow.webContents.send("abc", {data: 'test'});
    mainWindow.loadURL(`file://${__dirname}/index.html`);
});

var abc = ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

console.log(abc);

main.js

const
    {ipcRenderer} = require("electron");

ipcRenderer.on("abc", (event, arg) => {
    console.log(arg);
});
ipcRenderer.send('asynchronous-message', "Hello");

via Rafid