Javascript에서 객체의 key, value 순회하기

ES6에서 객체의 Key와 Key에 해당하는 Value을 순회하는 코드를 기록해 둡니다.

먼저 순회하려는 객체가 다음과 같다면..

let menus = {
    'menu1': {
        url: 'url(images/menu_icon1.png)',
        title: 'Menu Item 1',
            onclick: function() {
                alert('Menu 1');
            }
        },
    'menu2':  {
        url: 'url(images/menu_icon2.png)',
        title: 'Menu Item 2',
        onclick: function() {
            alert('Menu 2');
        }
    },

    'seprator1':  {},

    'menu3':  {
        url: 'url(images/menu_icon1.svg)',
        title: 'Menu Item 3',
        onclick: function() {
            alert('Menu 3');
        }
    },
    'menu4':  {
        url: 'url(images/menu_icon2.svg)',
        title: 'Menu Item 4',
        onclick: function() {
            alert('Menu 4');
        }
    },
};

순회하는 코드는 다음과 같습니다.

for (let [id, menu] of Object.entries(menus)) {
    if(menu.onclick) {
        this.addMenu(id, menu.url, menu.title, menu.onclick);
    } else {
        this.addSeparator(id);
    }
}

위의 코드에 대한 ES5에서의 동일한 코드는 다음과 같습니다.

for (let id in menus) {
    let menu = menus[id];

    if(menu.onclick) {
        this.addMenu(id, menu.url, menu.title, menu.onclick);
    } else {
        this.addSeparator(id);
    }
}

[JavaScript] 한글인가?, 천단위로 컴마(,) 찍기

자바스크립트로 된 두가지 기능에 대한 함수를 정리해 봅니다. 제 스스로에게는 평소 궁금했던 기능이였고, 매번 구글링을 통해 찾아 정신없이 적용했던 기능이군요.

먼저 해당 문자열이 한글이냐를 판별해 주는 함수입니다.

/* boolean */ function isKoreaWord(/* string */ v) {
    var regExp = /([가-힣])/g;
    var replacedString = v.replace(regExp, '');

    if (replacedString.length == 0) {
        return true;
    } else {
        return false;
    }
}

위의 함수는 정규표현식이라는, 제가 요즘 푹 빠져 살펴보고 있는 기능을 활용한 것입니다. 정규표현식 기능은 상당한 부하(Load)를 가지는 기능인데, 아래의 함수가 더 가볍고 빠르고 적당해 보이는군요.

/* boolean */ function isKoreaWord(/* string */ v) {
    var len = v.length;
    for(var i=0; i<len; i++) {
        var c = v.charAt(i);
        if(c < '가' || c > '힣') return false;
    }

    return true;
}

다음은 숫자에 대해서 천단위로 컴마(,)를 찍어 주는 함수입니다.

/* string */ function addThousandComma(/* number */ v) {
    var regExp = /(^[+-]?\d+)(\d{3})/;
    var sv = String(v);

    while (regExp.test(sv)) {
        sv = sv.replace(regExp, '$1,$2');
    }

    return sv;
}

위 함수들의 출처는 제가 요즘 jQuery 학습을 위해 읽고 또 읽고 오늘도 읽은 윤인성님이 지은 “모던 웹을 위한 JavaScript jQuery 입문”이라는 책입니다.