Can't use data fetched from graphql

Question

const Products = async()=> {
    try {
      const result= await API.graphql(graphqlOperation(listProducts));
      const products = result.data.listProducts.items;
      console.log(products);
      let y = []
      if (products){
       for (let x in products){
       y.push(x.name);
       }
      }
      console.log(y);
  
     } catch (err) { 
      console.log('error fetching products');
      }
      } ;

I am able to view the result but why does it show an array full of undefined items. o/p for y :

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]