Why I recive this message "this.getNewsFeedLook is not a function", when that is a function

Question

I knew there is a lot of articles about this theme, but I wanna know about my code, why this.getNewsFeedLook() Is it not a function?

define(["jquery"], function ($) {

    let objectNews = {

        title: undefined,
        type: undefined,
        img: undefined,
        link: undefined,
        content: undefined,
        newsFeedLook: this.getNewsFeedLook(),

        getNewsFeedLook: function () {
            let html = "" +
                "<div class='col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12'>" +
                "   <div class='newsbox'>" +
                "       <a href='" + this.link + "'>" +
                "           <img src='" + this.img + "'>" +
                "           <div class='dark_folie'>" +
                "               <p>" + this.title + "</p>" +
                "               <span>" + this.type + "</span>" +
                "</div></a></div></div>";

            return html;
        },

    };
    return objectNews;
});

Answer 1

Try defining attribute newsFeedLook after getNewsFeedLook. It should solve your problem.

Answer 2

The reason you are getting this.getNewsFeedLook() is it not a function is because the this is not referring to objectNews scope (which you are expecting).

The simple fix is to create newsFeedLook a function. Your object will look like this then:

let objectNews = {

    title: undefined,
    type: undefined,
    img: undefined,
    link: undefined,
    content: undefined,
    newsFeedLook: function(){ return this.getNewsFeedLook()},

    getNewsFeedLook: function () {
        let html = "" +
            "<div class='col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12'>" +
            "   <div class='newsbox'>" +
            "       <a href='" + this.link + "'>" +
            "           <img src='" + this.img + "'>" +
            "           <div class='dark_folie'>" +
            "               <p>" + this.title + "</p>" +
            "               <span>" + this.type + "</span>" +
            "</div></a></div></div>";

        return html;
    },

};