Как изменить порядок этого массива в Javascript на основе другого массива?

real_order = [ '1', '2', '3', '4'];

friends = [ { name: 'jess', id: '4'},
            { name: 'alex', id: '1'},
            { name: 'kat', id: '3' },
            { name: 'bob', id: '2' }
          ] 

Как сделать так, чтобы массив «друзей» «соответствовал» элементам в real_order ? Результат должен быть таким:

[ 
            { name: 'alex', id: '1'},
            { name: 'bob', id: '2' },
            { name: 'kat', id: '3' },
            { name: 'jess', id: '4'},
          ] 

Какое решение является наиболее эффективным?