title: Javascript typeof() operator is returning a different value to the known variable type
body: <p>Hey I am experiencing a strange bug when I <code>console.log(typeof(variable)</code> compared to <code>console.log(variable)</code>. <br>
  In the console the variable is clearly an array of objects, but when I <code>console.log</code> the <code>typeof</code> it says it's an <code>object</code>.<br> I am fetching from an API and then trying to render the data into react.<br> I think I cannot <code>map</code> through the data as it thinks it's an object.<br>
  Any help would be really appreciated, thank you!</p>
  <p><a href="https://i.stack.imgur.com/fUd4r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fUd4r.png" alt="Picture showing console output" /></a></p>
  <p>Below is my RenderDrink component</p>
  <pre><code>import React from 'react'
  
  function RenderDrinks(props) {
      console.log(typeof(props.data))
      console.log(props.data)
      
    return (
          
             props.data &amp;&amp; props.data.map(drink =&gt; {
                  &lt;&gt;
                      &lt;h2&gt;{drink.strDrink}&lt;/h2&gt;
                      &lt;p&gt;{drink.strGlass}&lt;/p&gt;
                      &lt;p&gt;{drink.strImageSource}&lt;/p&gt;
                      &lt;p&gt;{drink.strInstructions}&lt;/p&gt;
                      {/* &lt;p&gt;{drink.str}&lt;/p&gt;
                      &lt;p&gt;{drink.str}&lt;/p&gt; */}
                      
                  &lt;/&gt; 
              })
          
    )
  }
  
  export default RenderDrinks
  </code></pre>
  <p>Below is my ApiFetch component</p>
  <pre><code>import React, {useState, useEffect} from 'react'
  import axios from 'axios'
  import RenderDrinks from '../RenderDrinks';
  
  const FetchApi = () =&gt; {
    const [data, setData] = useState([]);
  
    const fetchDrinks = async () =&gt; {
      
     await axios.get('https://www.thecocktaildb.com/api/json/v2/9973533/popular.php')
     .then((res) =&gt; {
        const allDrinks = res.data.drinks
        setData(allDrinks)
        console.log(typeof(data))
      }) 
      .catch(error =&gt; console.error(`Error: ${error}`))
    }
  
    useEffect(() =&gt; {
      fetchDrinks()
    }, [])
      
    return (
      &lt;&gt;
        &lt;RenderDrinks data={data} /&gt;
      &lt;/&gt;
    )
  }
  
  export default FetchApi
  </code></pre>