Declare 'instance variables' in knockoutjs component?

Question

I'm trying to create a variable in my knockoutjs component that I can reference later on, and it's not really working, and i'm not sure why, can anyone give me some tips on how to access the "text" attribute, or add any other sort of local variable i can access in my script?

Here's what i'm working with:

define([
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/modal/confirm',
    'jquery',
    "jquery/ui"
], function(ko, component, customerData, modalold, $){
    'use strict';
    return component.extend({
        text: "Hello World",
        initialize: function(){
            this._super();
            $("#add_motorcycles").modal({
                class: 'garage-modal',
                clickableOverlay: true,
                buttons: [
                    {
                        text: 'Add Motorcycle',
                        class: 'action-primary action-accept',
                        click: function () {
                            console.log("Added motorcycle!");
                        }
                    },
                    {
                        text: 'Cancel',
                        class: 'action-secondary action-dismiss',
                        click: function () {
                            this.closeModal();
                        }
                    }
                ],
                closed: function () {
                    $("#add_motorcycles").html("");
                }
            });
        },
        addMotorcycle: function () {
            console.log(this);
            console.log(self);
            console.log(text);
            console.log("Opened!");
        }
    });
});

How can I access the text variable?

Inside of addMotorcycle, console.log(this) outputs the following JSON

{
  "ignoreTmpls": {
    "templates": true,
    "childDefaults": true
  },
  "_requesetd": {},
  "containers": [],
  "exports": {},
  "imports": {},
  "links": {},
  "listens": {},
  "name": "garage",
  "ns": "garage",
  "provider": "",
  "registerNodes": true,
  "statefull": {},
  "template": "ui/collection",
  "tracks": {},
  "storageConfig": {
    "provider": "localStorage",
    "namespace": "garage",
    "path": "localStorage:garage"
  },
  "maps": {
    "imports": {},
    "exports": {}
  },
  "modules": {
    "storage": "localStorage"
  },
  "_elems": [],
  "component": "Revival_Garage/js/view/garage",
  "extendProvider": true,
  "index": "garage",
  "dataScope": "",
  "parentName": "",
  "parentScope": ""
}

Answer 1

Apparently things outside of the return statement stay in scope of the component, which is nice.

I ended up with the following:

define([
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/modal/confirm',
    'jquery',
    "jquery/ui"
], function(ko, component, customerData, modalold, $){
    var text = 'Hello World';
    'use strict';
    return component.extend({
        initialize: function(){
            this._super();
            $("#add_motorcycles").modal({
                class: 'garage-modal',
                clickableOverlay: true,
                buttons: [
                    {
                        text: 'Add Motorcycle',
                        class: 'action-primary action-accept',
                        click: function () {
                            console.log("Added motorcycle!");
                        }
                    },
                    {
                        text: 'Cancel',
                        class: 'action-secondary action-dismiss',
                        click: function () {
                            this.closeModal();
                        }
                    }
                ],
                closed: function () {
                    $("#add_motorcycles").html("");
                }
            });
        },
        addMotorcycle: function () {
            console.log(text);
            console.log("Opened!");
        }
    });
});