How to merge two arrays like this way? (Example in description)

const names = ['MARCUS', 'LUCAS', 'ANDREA'],
      surnames = ['SMITH', 'JOHNSON', 'WILLIAMS'],
      
      fn = (n,sn,i,f) => 
          i <= n.length - 1 ? 
              fn(n,sn,i+1,[...f,`${n[i]} ${sn[i]}`]) : 
                  f;
      
      console.log( fn(names,surnames,0,[]) );

const names = ['MARCUS', 'LUCAS', 'ANDREA']
const surnames = ['SMITH', 'JOHNSON', 'WILLIAMS']

// way 1: traditional loop
const res = [];
for (let i = 0; i < names.length; i++) {
  res.push(`${names[i]} ${surnames[i]}`);
};
console.log('full_names: ', res);

// way 2: another way - more functional flavor
const res2 = names.reduce((acc, e, i) => {
    acc.push(`${e} ${surnames[i]}`);
    return acc;
}, [])
console.log('full_names: ', res2);

const names = ['MARCUS', 'LUCAS', 'ANDREA'];
const surnames = ['SMITH', 'JOHNSON', 'WILLIAMS'];

const zip = (...arrays) => {
  let res = [];
  
  for(let i = 0; i < arrays[0].length; i++) {
    res.push([]);
    for(let j = 0; j < arrays.length; j++) {
      res[i].push(arrays[j][i]);
    }
  }
  
  return res;
};

const res = zip(names, surnames)
  .map(([name, surname]) => name + ' ' + surname);

console.log(res);

const names = ['MARCUS', 'LUCAS', 'ANDREA']
const surnames = ['SMITH', 'JOHNSON', 'WILLIAMS']

const result = names.map((n, i) => `${n} ${surnames[i]}`)

document.getElementById('app').innerText = JSON.stringify(result)