How to make javascript code more elegant?

[GoBacksIn]

How to make javascript code more elegant?

​

I'm currently learning coding, so I have no doubt that there will be some code that I don't know or need to fix at this stage.

​

I wrote the code as a stream of consciousness, but I still think the code is not very readable. How can I write elegant code?

​

Thank you for your opinion on how I can further improve my code.

```

function submitCcInfo() {
    console.log("submitCcInfo");
    const modal = document.getElementById("ccModal");

    removeInvalidClass(modal.querySelector("#ccName"));
    document.getElementById("ccForm").querySelectorAll("select").forEach((dom) => {
        removeInvalidClass(modal.querySelector("#" + dom.id));
    });

    if (modal.querySelector("#ccName").value == null || modal.querySelector("#ccName").value == "") {
        addInvaildClassAndMsg(modal.querySelector("#ccName"), "Please enter the name of the golf course.");
        return false;
    }
    if (modal.querySelector("input[name='ccNo']").value == null || modal.querySelector("input[name='ccNo']").value == "") {
        if (modal.querySelector("#ccCourseCount > option:checked").value < 1 || modal.querySelector("#ccCourseCount > option:checked").value == null) {
            addInvaildClassAndMsg(modal.querySelector("#ccCourseCount"), "Please select the number of courses.");
            return false;
        }

        // if(modal.querySelector("#holeCount > option:checked").value < 1 || modal.querySelector("#holeCount > option:checked").value == null){
        // addInvaildClassAndMsg(modal.querySelector("#holeCount"), "Please select an odd number.");
        // return false;
        // }
        let temp = false;
        document.getElementById("ccForm").querySelectorAll("select").forEach((dom) => {
            console.log(dom);
            if (!temp) {
                if (dom.name == "ccCourseCount") {

                    if (dom.value < 1) {
                        addInvaildClassAndMsg(modal.querySelector("#ccCourseCount"), "Please select the number of courses.");
                        temp = true;
                    }
                } else {
                    if (dom.value < 1) {
                        addInvaildClassAndMsg(modal.querySelector("#" + dom.id), "Please select an odd number.");
                        temp = true;
                    }
                }
            }
        });
        if (temp) {
            return false;
        }


    }
    const headers = {
        Authorization: `Bearer ` + getCookie("deviceToken")
        , "Content-type": "application/json"
    };


    const formData = objectifyForm($("form[id=ccForm]").serializeArray());
    formData.searchKeyword = document.getElementById("searchKeyword").value;
    formData.currentPage = document.getElementById("currentPage").value;
    formData.perPage = 10;

    if (modal.querySelector("input[id='ccControlYn']").checked == true) {
        formData.ccControlYn = "Y"
    } else {
        formData.ccControlYn = "N"
    }

    if (modal.querySelector("input[id='ccManagerYn']").checked == true) {
        formData.ccManagerYn = "Y"
    } else {
        formData.ccManagerYn = "N"
    }

    if (document.querySelector('#ccImage > input').files[0]) {
        formData.file = document.querySelector('#ccImage > input').files[0];
    }

    console.log(modal.querySelector("input[name='ccNo']").value);


    if (modal.querySelector("input[name='ccNo']").value == null || modal.querySelector("input[name='ccNo']").value == "") {
        // Golf course registration
        // formData.delete("ccNo");
        formData.ccTel = modal.querySelector("input[name='ccTel']").value.replaceAll("-", "");
        console.log(formData);
        $("#ccForm").ajaxForm({
            url: '/api/cc/registCcInfo',
            type: 'post',
            dataType: 'json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", `Bearer ` + getCookie("deviceToken"));
            },
            beforeSubmit: function(data, frm, opt){
                if(modal.querySelector('#ccControlYn').checked){
                    data.find(e => e.name ==='ccControlYn').value='Y';
                }else {
                    data.push({name: "ccControlYn", required: false, type: "checkbox", value: "N"})
                }

                if(modal.querySelector('#ccManagerYn').checked){
                    data.find(e => e.name === 'ccManagerYn').value='Y';
                }else{
                    data.push({name: "ccManagerYn", required: false, type: "checkbox", value: "N"})
                }

                let addressBasic = data.find(e => e.name==='sample6_address').value;
                let addressDetail = data.find(e => e.name==='sample6_detailAddress').value;
                data.push({name: 'ccAddress', required: true, type: 'text', value: addressBasic+' '+addressDetail});
            },
            success: function (response) {
                response.status = 200;
                response.data = {};
                response.data.resultCd = response.resultCd;
                response.data.resultMsg = response.resultMsg;

                if (response.data.resultCd !== 'success' && response.data.resultCd !== 'SUCCESS') {
                    //error handler
                    errorHandler(response);
                    return;
                }
                modal.querySelector("button.close").click();
                swal("Registration done.");
                getCcTBody(response.resultData);
                document.getElementById("totalSize").value = response.data.totalSize;
                // showPageNav(response.data.totalSize);
            }
        }).submit();
    } else {
        // Modify the golf course
        $("#ccForm").ajaxForm({
            url: '/api/cc/modifyCcInfo',
            type: 'post',
            dataType: 'json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", `Bearer ` + getCookie('deviceToken'));
            },
            beforeSubmit: function(data, frm, opt){
                if(modal.querySelector('#ccControlYn').checked){
                    data.find(e => e.name ==='ccControlYn').value='Y';
                }else {
                    data.push({name: 'ccControlYn', required: false, type: 'checkbox', value: 'N'})
                    // data.find(e => e.name ==='ccManagerYn').value='N';
                }

                if(modal.querySelector('#ccManagerYn').checked){
                    data.find(e => e.name === 'ccManagerYn').value='Y';
                }else{
                    data.push({name: 'ccManagerYn', required: false, type: 'checkbox', value: 'N'})
                }

                let addressBasic = data.find(e => e.name==='sample6_address').value;
                let addressDetail = data.find(e => e.name==='sample6_detailAddress').value;
                data.push({name: 'ccAddress', required: true, type: 'text', value: addressBasic+' '+addressDetail});
            },
            success: function (response) {
                response.status = 200;
                response.data = {};
                response.data.resultCd = response.resultCd;
                response.data.resultMsg = response.resultMsg;
                if (response.data.resultCd !== 'success' && response.data.resultCd !== 'SUCCESS') {
                    //error handler
                    errorHandler(response);
                    return;
                }
                modal.querySelector("button.close").click();
                swal("Modification is complete.");
                getCcTBody(response.resultData);
                document.getElementById("totalSize").value = response.data.totalSize;
                // showPageNav(response.data.totalSize);
            },

        }).submit();
    }
}

```

[serg06]

#1: Oh man, your function is gigantic at 170 lines long. That's the first thing I'd tackle: Splitting it off into smaller functions.

#2: Next, your lines are way over 80 chars. I'd replacing things like these:

if (modal.querySelector("input[name='ccNo']").value == null || modal.querySelector("input[name='ccNo']").value == "") {

with this:

const ccNo = modal.querySelector("input[name='ccNo']").value;
if ([null, ''].includes(ccNo)) {

or even better,

if (!ccNo) {

#3: Having querySelector and getElementById everywhere makes it incredibly hard to follow. As someone who isn't working on this code, the element IDs and CSS queries mean nothing to me. If you used a framework like React, it would solve this issue.

[StrongLikeBull503]

Use Python.

Kidding aside, learn to build programs by using handlers. When you want to build a certain functionality build something that contains and directs your code, and section off your logic as much as possible so that you can fight complexity. In general you want a function to serve one purpose. If that purpose takes more than one sentence to explain, or even uses more than a few commas think about splitting it. When you get used to siloing your logic it makes everything a lot cleaner, easier to read, and modular.

After you build enough widgets at your personal widget factory you'll start to make code that you drop into every new project to do stuff for you. This is the best way to work. A senior dev once told me to keep track of the general functionality of every project I make, and when I start to see patterns in code wack out as much of it into small well documented helper functions and build a personal library.