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

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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');
}
},
};
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'); } }, };
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');
        }
    },
};

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
for (let [id, menu] of Object.entries(menus)) {
if(menu.onclick) {
this.addMenu(id, menu.url, menu.title, menu.onclick);
} else {
this.addSeparator(id);
}
}
for (let [id, menu] of Object.entries(menus)) { if(menu.onclick) { this.addMenu(id, menu.url, menu.title, menu.onclick); } else { this.addSeparator(id); } }
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에서의 동일한 코드는 다음과 같습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
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); } }
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);
    }
}

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다