CODEWITHSUNDEEP
javascript
SEVENELEVEN
SEVENELEVEN

Reputation: 258

Use a variable inside a function in other function

I have a scope problem, in this code when I call mp3.playlistInfo() ${titlePlayList} is undefined.

How can I use ${titlePlaylist} inside playlistInfo: function()

const mp3 = {
    createPlaylist: function() {
        let titlePlaylist = prompt("Choose a name: ")
        console.log(`Your playlist name is: ${titlePlaylist}`)
    },
    playlistInfo: function() {
        console.log(`Already listening ${titlePlaylist}`)
    }
}


mp3.createPlaylist();
mp3.playlistInfo();

Upvotes: 0

Views: 88

Answers (3)

Yevhenii Shlapak
Yevhenii Shlapak

Reputation: 796

OOP variant if needed:

class MP3 {
  constructor(titlePlaylist) {
    this.titlePlaylist = titlePlaylist;
  }
  titlePlaylist = null;
  get titlePlaylist() {
    return this.titlePlaylist;
  }
  set titlePlaylist(value) {
    this.titlePlaylist = value;
  }
  createPlaylist = () => {
    this.titlePlaylist = prompt("Choose a name: ");
    console.log(`Your playlist name is: ${this.titlePlaylist}`);
  };
  playlistInfo = () => {
    console.log(`Already listening ${this.titlePlaylist}`);
  };
}
const mp3 = new MP3("");

mp3.createPlaylist();
mp3.playlistInfo();

Upvotes: 0

Dane Brouwer
Dane Brouwer

Reputation: 2972

The issue is that you haven't declared titlePlaylist anywhere that's accessible for the other function. You could solve this by just adding it to the mp3 object you created.

I would however suggest using a Class rather than an Object, if you were going to go with this approach.

Simple Object based approach 

const mp3 = {
    titlePlaylist: null,
    createPlaylist: function() {
        this.titlePlaylist = prompt("Choose a name: ")
        console.log(`Your playlist name is: ${this.titlePlaylist}`)
    },
    playlistInfo: function() {
        console.log(`Already listening ${this.titlePlaylist}`)
    }
}


mp3.createPlaylist();
mp3.playlistInfo();

Simple Class based approach 

class MP3 {
  constructor() {
    this.titlePlaylist = prompt("Choose a name: ");
    this.playlistInfo();
  }
  playlistInfo() {
    console.log(`Already listening ${this.titlePlaylist}`)
  }
}

const mp3 = new MP3();

Upvotes: 2

John Marsden
John Marsden

Reputation: 81

As mp3 is an object you'll need to set titlePlaylist as a property of mp3. Then in createPlaylist you need to set the returned value from the user to the value of titlePlaylist. You can then access titlePlaylist in playlistInfo, and if you use arrow functions you can skip using this.titlePlaylist:

const mp3 = {
  titlePlaylist: "",
  createPlaylist: () => {
    titlePlaylist = prompt("Choose a name: ");
    console.log(`Your playlist name is: ${titlePlaylist}`);
  },
  playlistInfo: () => {
    console.log(`Already listening ${titlePlaylist}`);
  },
};

mp3.createPlaylist();
mp3.playlistInfo();

You can also achieve this functionality by taking advantage of closures which allow you to get and set variables scoped within the original function body:

const mp3Closure = () => {
  let titlePlaylist = "";
  return {
    createPlaylist: () => {
      titlePlaylist = prompt("Choose a name: ");
      console.log(`Your playlist name is: ${titlePlaylist}`);
    },
    playlistInfo: () => {
      console.log(`Already listening ${titlePlaylist}`);
    },
  };
};

const mp3WithClosure = mp3Closure();
mp3WithClosure.createPlaylist();
mp3WithClosure.playlistInfo();

Upvotes: 1

Related Questions