Your specific function is not returning any value, so when executed, it will return undefined. Hence, the runThisCode object remains undefined as well. Additionally, given your current setup, the preload_and_resize function will be limited to local scope and cannot be accessed externally.

To address this issue, consider modifying your anonymous function to construct an object and return it instead. The following code snippet should help guide you in the right direction:

var runThisCode=(function(){
 var result = {};
 result.myImages=new Array("img/01.jpg","img/02.jpg","img/03.jpg");
 result.imageObj = new Array();
 result.index=0;
 result.preload_and_resize=function(){
        var i = 0;
        var imageArray = new Array();
        for(i=0; i< result.myImages.length; i++) {
            imageObj[i] = new Image();
            imageObj[i].src=myImages[i];
        }

    document.pic.style.height=(document.body.clientHeight)*0.95;
};
 result.next_image=function(){
    index++;
    if(index<imageObj.length){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=0;
        document.pic.src=imageObj[index].src;
    }
 };
 result.prev_image=function(){
    index--;
    if(index>=0){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=myImages.length-1;
        document.pic.src=imageObj[index].src;
    }
 };

 return result;
})();

Here is a breakdown of your mistake:

let example = (function (){
   let privateVar1, privateVar2 = 'sum' , etc;
   return {
      publicFunction: function() {},
      anotherFunction: function() {
          console.log('cogito ergo ' + privateVar2 );
      }
   };

})();

example.anotherFunction();

In order for the code to function properly, you have assigned the function to the variable next_image, which is contained within a self-invoking anonymous function.

The value that you are assigning to runThisCode is actually the result of that anonymous function, and since there is no return statement, it defaults to undefined.

To make this code work as intended, you should assign an object to runThisCode and ensure that next_image is a property of that object.

Make sure to include the following at the end of the anonymous function:

return {
    "next_image": next_image
}

To enhance the functionality of your function, eliminate the anonymous element and ensure it is public. The only global variable required is the object called runThisCode.

var runThisCode = function () {
    var myImages = new Array("img/01.jpg", "img/02.jpg", "img/03.jpg");
    var imageObj = new Array();
    var index = 0;
    this.preload_and_resize = function () {
        var i = 0;
        var imageArray = new Array();
        for (i = 0; i < myImages.length; i++) {
            imageObj[i] = new Image();
            imageObj[i].src = myImages[i];
        }

        document.pic.style.height = (document.body.clientHeight) * 0.95;
    };
    this.next_image = function () {
        index++;
        if (index < imageObj.length) {
            document.pic.src = imageObj[index].src;
        } else {
            index = 0;
            document.pic.src = imageObj[index].src;
        }
    };
    this.prev_image = function () {
        index--;
        if (index >= 0) {
            document.pic.src = imageObj[index].src;
        } else {
            index = myImages.length - 1;
            document.pic.src = imageObj[index].src;
        }
    };
};

Then, at a later stage in your code:

runThisCode.preload_and_resize();

will be effective.

It appears that the intention behind the IIFE (immediately invoked function expression) in your body onload property is to create an object with a method named preload_and_resize.

However, it seems that you are not actually returning anything from the IIFE. This means that everything inside the IIFE is encapsulated within its own namespace without being "exported."

If you wish to export these functions from the IIFE, you could include a return statement at the end like this:

return {
    'preload_and_resize': preload_and_resize,
    'next_image': next_image,
    'prev_image': prev_image
}

This code snippet creates a new JavaScript object literal and assigns the function values from the local scope to its properties.

While some developers might find this type of explicit export redundant, others may prefer defining the functions within the object literal declaration like so:

return {
    preload_and_resize: function(){
        // Function logic for preloading and resizing images
    },
    next_image: function() {
        // Function logic for displaying the next image
    },
    prev_image: function() {
        // Function logic for displaying the previous image
    }
}

Here is my take on the previous answers:

const imageSlider = (function(self) {
    let images = new Array("img/01.jpg", "img/02.jpg", "img/03.jpg");
    let imageObjects = new Array();
    let index = 0; 

    self.preloadAndResize = function() {
        let i = 0;
        let imageArray = new Array();
        for (let i = 0; i < images.length; i++) {
            imageObjects[i] = new Image();
            imageObjects[i].src = images[i];
        }
        document.pic.style.height = (document.body.clientHeight) * 0.95;
    };
  
    var nextImage = function() {
        index++;
        if (index < imageObjects.length) {
            document.pic.src = imageObjects[index].src;
        } else {
            index = 0;
            document.pic.src = imageObjects[index].src;
        }
    };
  
    var prevImage = function() {
        index--;
        if (index >= 0) {
            document.pic.src = imageObjects[index].src;
        } else {
            index = images.length - 1;
            document.pic.src = imageObjects[index].src;
        }
    };
})(window.myCurrentPage = window.myCurrentPage || {});

// You can now call myCurrentPage.preloadAndResize();