I am fetching an array of data from a php file (preparedata.php) to javascript file.

let arrayPreparedDataJs

function fetchpreparedData(){
        const options = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        }
        fetch("./preparedata.php", options)
            .then(function(response){
                return response.json()
            })
            .then(function(data){
                arrayPreparedDataJs = data
                console.log(arrayPreparedDataJs)
                localStorage.setItem('arrayOfData', JSON.stringify(arrayPreparedDataJs))
            })
}

fetchpreparedData()
let arrayOfData = JSON.parse(localStorage.getItem('arrayOfData'))
console.log(arrayOfData)
console.log(arrayPreparedDataJs)

I want to use this arrayPreparedDataJs in another JS function. The only way I found to do it is to store and get it back from localstorage (console.log(arrayOfData) shows the needed data). However when assigning fetched data to an array (arrayPreparedDataJs) and then console logging it returns undefined. Why is this? And how can I do it apart from localstorage?