Nested functions in Javascript

Question

I would like to have a block of JavaScript like this but this does not seem to be valid.

MYAPP.audioRecording = {

  var navigator = window.navigator;
  var Context = window.AudioContext || window.webkitAudioContext;
  var context = new Context();

  navigator.getUserMedia = (
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
  );

  function startRecorder() {
     //start recording code
  }

  function stopRecorder() {
     //recorder stop    
  }

}

I then would like to call the startRecorder() and stopRecorder() functions from another block of code like this.

MYAPP.recordingManager = {

  MYAPP.audioRecording.startRecorder();
  MYAPP.audioRecording.stopRecorder();

}

I appreciate any help you can provide. Thanks!

You shoud refer following post MDN - Introduction to Object-Oriented JavaScript — Rajesh Dixit
– Rajesh Dixit, Commented Feb 19, 2016 at 14:05
You are probably looking for a Object-Oriented JS tutorial... — dgiugg
– dgiugg, Commented Feb 19, 2016 at 14:05
I added a different approach to your question. Hope it helps! — wilsotobianco
– wilsotobianco, Commented Feb 19, 2016 at 15:13

StAlex · Accepted Answer · 2016-02-19 14:11:10Z

2

MYAPP.audioRecording = (function() {

    var navigator = window.navigator;
    var Context = window.AudioContext || window.webkitAudioContext;
    var context = new Context();

    navigator.getUserMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
    );

    return {
        startRecorder: function() {
            //start recording code
        },
        stopRecorder: function() {
            //recorder stop    
        }
    }

})();

answered Feb 19, 2016 at 14:11

StAlex

912 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

learning_to_swim Over a year ago

Thanks! This was the easiest for me to implement and it works like a charm.

RomanPerekhrest · Accepted Answer · 2016-02-19 14:15:58Z

2

In Javascript creating object via object literal allows function definition only as object methods. Change your code as shown below:

var MYAPP = MYAPP || {};
MYAPP.audioRecording = {
  navigator : window.navigator,
  Context : window.AudioContext || window.webkitAudioContext,
  getUserMedia: (
    this.navigator.getUserMedia ||
    this.navigator.webkitGetUserMedia ||
    this.navigator.mozGetUserMedia ||
    this.navigator.msGetUserMedia
  ),
  startRecorder : function () {
     //start recording code
  },
  stopRecorder : function() {
     //recorder stop    
  }

};

answered Feb 19, 2016 at 14:15

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

Comments

GMchris · Accepted Answer · 2016-02-19 14:05:13Z

1

What you're trying to define is called an object literal. Their syntax is as follows:

AudioRecording = {
    property: 'SomeProp',
    method: function() {
       console.log(this.property); // Will log 'SomeProp'
    }
}

And you can then call

AudioRecording.method();

answered Feb 19, 2016 at 14:05

GMchris

5,7064 gold badges25 silver badges40 bronze badges

Comments

Sebastian G. Marinescu · Accepted Answer · 2016-02-19 14:20:43Z

This is possible, if you abide by the rules of JSON.

You want to create an object literal, so in abstract this should look like this:

myNameSpace = {

  STATICPROPERTY: 'test',

  method: function() {
    var variable = 'thisVarIsPrivateToMethod';
    this.variable = 'dynamic';
  },

  init: function() {
    this.method();

    console.log(this.STATICPROPERTY);  // will log "test"
    console.log(this.variable);        // will log "dynamic"
  }
}

myNameSpace.init();

So your code could look something like this:

MYAPP.audioRecording = {

  startRecorder: function() {
    //start recording code
    var myContext = this.context,
        myMedia = this.getUserMedia;
  }

    stopRecorder: function() {
    //recorder stop
  },

  init: function() {
    var Navigator = window.navigator,
        Context = window.AudioContext || window.webkitAudioContext;

    Navigator.getUserMedia = (
      Navigator.getUserMedia ||
      Navigator.webkitGetUserMedia ||
      Navigator.mozGetUserMedia ||
      Navigator.msGetUserMedia
    );

    this.context = new Context();
    this.getUserMedia = Navigator.getUserMedia;

    return this;
  }

}

MYAPP.audioRecording.init().startRecorder();

wilsotobianco · Accepted Answer · 2016-02-19 15:10:39Z

You can apply the module pattern with loose augmentation like this:

var MYAPP = (function(appModule) {

    // Here you are augmenting your existing MYAPP object 
    // adding a new object returned by this IIFE
    appModule.audioRecording = (function() {

        navigator.getUserMedia = (
            navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);

        return {
            startRecorder: function() {
                //start recording code
            },
            stopRecorder: function() {
                //recorder stop    
            }
        };
    })();

    return appModule;

// Notice how the main IIFE is receiving the already defined MYAPP
// object. If this object hasn't been defined, it passes an empty object literal
})(MYAPP || {});

This is a very appropiate pattern to augment an existing module you already have defined, allowing you to load asynchronously different features of the same MYAPP module.

¡Hope it helps!

Collectives™ on Stack Overflow

Nested functions in Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related