We Keep Coding

variabiles accessibiity when a function launch an other function - javascript

i'm writing a script to manage HTML menu interactions with clicks from user so this my situation:
menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');
function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {
var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
var classeUlSubMenus = subMenuCSSClass;//sub-menu
const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);
};
const menu = document.getElementsByClassName(classeMainNavigation);
for (let i = 0; i< menu.length; i++) {
menu[i].addEventListener("click", SubMenuInteractive);
};
}
function HeaderBrandingInteractive(e) {
//magic
}
function SubMenuInteractive(e) {
//magic
}
And it give me an error , because inside the last two function i need to have access to some of the variables declared in menuScripts(){}
These variables don't exist inside the last two function.
But if i remove "var" from declaration, so like this
menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');
function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {
classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
classeUlSubMenus = subMenuCSSClass;//sub-menu
const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);
};
const menu = document.getElementsByClassName(classeMainNavigation);
for (let i = 0; i< menu.length; i++) {
menu[i].addEventListener("click", SubMenuInteractive);
};
}
function HeaderBrandingInteractive(e) {
//magic
}
function SubMenuInteractive(e) {
//magic
}
It works!
i tried also to pust "const" instead of "var", but same problem of accessibility.
In theory
var x = 'something';
should must be equal to
x = 'something' ;
What i didnt get from the theory of javascript??

The variables declared with var are scoped to the enclosing function.
When you do x = 'something', the variable x will be globally created at the time of assignment - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var.
Assigning a value to an undeclared variable implicitly creates it as a
global variable (it becomes a property of the global object) when the
assignment is executed.
In your code, you are first assigning variables before making the function call to HeaderBrandingInteractive-
classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
classeUlSubMenus = subMenuCSSClass;//sub-menu
The above code will create global variables, like window.classeHamburger. So, it will be accessible to outside your function.

var x = 'something'; should NOT be equal to x = 'something';, because if you declare variable as var x = 'something'; in the scope of function, this variable is "visible" in the scope of particular function.
When you put simply x = 'something';, that variable becomes decrared in the global scope and will be accessible as window.x.

It is Not Recommended to declare a variable without var keyword. It can accidentally overwrite an existing global variable.
Scope of the variables declared without var keyword become global irrespective of where it is declared. Global variables can be accessed from anywhere in the web page. Visit Scope for more information.

Javascript use three kinds of variable declaration.
var: The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.
let: let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword locally to an entire function regardless of block scope.
const: Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through reassignment, and it can't be re-declared.
Neither of the above: If you do not specify var or let then JS considers that variable as global which means it can be accessed throughout your script.
Note: The variable declarations are hoisted, which means the declarations will be pushed to the top of the code (Within that scope for let/const, within that function for var and to the top of the whole script for global) but the initialization will not. Learn More...
In your above code when you are using var the variables are only limited to the scope of menuScripts.
When you do not specify anything, the variables become global and hence can be accessed anywhere.

Thanks for all explications you provided.
Now it's more clear to me the var local/global concept.
Since it's worthwhile to use always "var" keyword to protect future edit of the variable from outside - thanks #G.M. Patel - i had the problem to be able to pass arguments to a function launched via .addEventListener .
I looked at How to pass arguments to addEventListener listener function? but those solutions didn't help me.
What i did is to shift up the two functions (HeaderBrandingInteractive and SubMenuInteractive) so they are parts of menuScript .
In this way the local variables of menuScript are accessible from HeaderBrandingInteractive and SubMenuInteractive without writing code.
Now it works.
Maybe will help somebody in the future.
menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');
function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {
var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
var classeUlSubMenus = subMenuCSSClass;//sub-menu
const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);
};
const menu = document.getElementsByClassName(classeMainNavigation);
for (let i = 0; i< menu.length; i++) {
menu[i].addEventListener("click", SubMenuInteractive);
};
function HeaderBrandingInteractive(e) {
//magic
}
function SubMenuInteractive(e) {
//magic
}
}
I've also tried to delete
var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
var classeUlSubMenus = subMenuCSSClass;//sub-menu
cause #James said that it's a waste of time, and it's correct.
But you need to change forward use of those variables so they match the new name.
For example my SubMenuInteractive was :
function SubMenuInteractive(e) {
//some code
if (e.toElement.parentElement.parentElement.getAttribute('class') == classeMainNavigation ) {
console.log("it's him");
}
//some other code
}
and now need to be like this, with "classeMainNavigatin" that become "ulMainNavigationCSSClass" like in the "menuScript" declaration:
function SubMenuInteractive(e) {
//some code
if (e.toElement.parentElement.parentElement.getAttribute('class') == ulMainNavigationCSSClass ) {
console.log("it's him");
}
//some other code
}

Bit confused between JavaScript Hoisting and Functional Scope

If I'm not wrong var lives is functional scope, because it's inside in function sandeep(). But if I'm doing console.log(lives) outside above the function then still I am getting console result as - New Delhi why? Can any one help me. (Is it because of Hoisting? it's moved on top...)
Screen shot without var define inside function
Screen shot with var inside function
Screen shot- write console.log after function call now it's giving undefined
I got my answer - It was my mistake, my chrome browser didn't refreshed properly. Thanks for every one for their answers.
console.log("Lives become global variable " + lives);
function sandeep() {
lives = "New Delhi";
return lives;
}
sandeep();

You are right about the fact that
var lives is functional scope
But you haven't declare the variable in the function. You need to use var lives = "New Delhi" so that its scope is only in the function in which it is declared.
If you directly assign lives = "New Delhi", it is assigned to global window object. Open browser console and try this.
a = 1
and then
window.a
You'll find that window.a is 1.
Let me know if it helps.

If I'm not wrong var lives is functional scope
This is right but you forgot the var in front of lives. If you define it as a variable you will get an error:
console.log("Lives become global variable " + lives);
function sandeep() {
var lives = "New Delhi";
return lives;
}
sandeep();

Only var are working as global & functional scope.
Global scope
var x=5;
function callvar(){
console.log(x);//5
var x=3;
console.log(x);//3
}
colsole.log(x);//3
function scope:
function one(){ var x = 5;
console.log(x)//5
}
console.log(x)// reference error
function two(){ var x = 4;
console.log(x)//4
}
console.log(x)// reference error
let & const are in block scope
functional scope is one type of block scope
if(true){
let x = 5;
console.log(x);//5
}
console.log(x) // reference error

Declaring two variable with the same name

Is it possible to call the same name variables which set outside of the function?
var a = $(window).width(); // I want to call this variable
if(!$.isFunction(p)){
var a = $(window).height(); // Not this one
alert(a);
}
FIDDLE

In this case, you have actually redefined the value of a. There is absolutely no way of referencing a different variable with the same name, as it just acts as a redefinition.

If you want to declare a global variable you can do so by
window.varname="This is a global variable";
And you can access the same by
alert(window.varname);
Now you can also have a local variable inside a function with the same name
var varname="This is a local variable";
And you can access it normally.
Here's your code so that you can access the global variable not the local one.
var p = ['foo',''];
window.a = $(window).width();
if(!$.isFunction(p)){
var a = $(window).height();
alert(window.a);
}

In a code snippet such as yours, the variable a is being redefined. This is because an if statement doesn't create another scope for variables. However, functions do.
In a case like this:
var a = 0; // global
function doStuff() {
var a = 10; // local
alert(a);
alert(window.a)
}
alert(a);
doStuff();
alert(a);
inside the function doStuff, the variable a is being redefined. This snipped will therefore alert the numbers 0, 10, 0, 0. This proves that the global variable is not redefined inside the function, as printing a after calling doStuff doesn't change the value of a in the global scope.
The variable a outside of the function can be accessed, as any variable not declared in a non-global scope is placed inside the window object. However, if using this snippet (which calls an anonymous function, creating a new scope):
var a = 0; // global
function doStuff() {
var a = 10; // local
alert(a);
alert(window.a)
function() {
var a = 20; // even more local
alert(a);
alert(window.a);
}();
}
alert(a);
doStuff();
alert(a);
you cannot access the value of a inside the doStuff function. You can still access the global variable using window.a.
In your case, however, the if statement does not create a new scope, therefore you are redefining the variable a to the new value $(window).height().

Example:
var a=10;
if(true){
var a=5;
}
alert(a)// it will return a=5;
var a=10;
var a=5;
//both are same way assign value
In js if statement is not scope it visible every where with in function . you have to change the variable name

There is no blockscope in JavaScript (at least up until ES6).
Like you seem to expect from the if block. See
What is the scope of variables in JavaScript?
for an excellent summary of scopes that do exist in JavaScript.
Beware of Hoisting
Furthermore, you shouldn't sprinkle your var declarations through your code, but explicitly put them in the top of your function. That is where Javscript will hoist them anyway:
# so if you have a function like this
var i = 5;
function testvar () {
alert(i);
var i=3;
}
testvar();
# the alert window will contain undefined.
# because internally, it's been changed into this:
var i = 5;
function testvar () {
var i;
alert(i);
i=3;
}
testvar();
Minimize use of the global scope
Read
What is meant by “leaking” into global scope?
And listen to what Doug Crockford has to say about it. Actually, take an hour and watch the whole talk.

You can do it like this:
var p = ['foo',''];
var a = $(window).width(); // I want to call this variable
if(!$.isFunction(p)){
(function(b){
var a = $(window).height();
alert(b);
})(a);
}
No need to use the global scope, just create an anonymous function and call it with a as the argument. Inside the function b is a reference to the a variable outside the function.
It is a good practice not to modify the window object in javascript to write clean and maintainable code.
Less bugs and problems. I mean, never do the window.a thing. Is evil for your code.

No, you can't because of you have redefined the variable name in the same scope and beacuse of the hoisted variables your code will be interpreted by javascript in the following mode:
var p, a;
p = ['foo',''];
a = $(window).width(); // I want to call this variable
if(!$.isFunction(p)){
a = $(window).height(); // Not this one
alert(a);
}
Now you can easly see that the variable a will be replaced and not created

JavaScript has two scopes: global and local. In your example a is in the global scope both times so you are just redefining it.
However you can specify skip a variable in local scope and get the one from global. Consider this example:
var a = 1;
function foo () {
var a = 2;
console.log("var a is: " + window.a);
console.log("local var a is: " + a);
}
foo ();
Will log "var a is: 1"\n"local var a is: 2\n" to the console. This is about as close as it gets to what you need

var abc = new Array();
abc[0] = 'str1';
abc[1] = 'str2';
Use array in this case

Try this (pattern)
var p = ['foo', ''];
var a = function (name) {
return (
name === "height"
? $(window).height()
: (name === "width" ? $(window).width() : name)
)
};
if (!$.isFunction(p)) {
// `$(window).width()` , `$(window).height()`
alert( a("width") + "\n" + a("height") );
}
jsfiddle http://jsfiddle.net/guest271314/2tuK4/

Access to variables in scope from a function defined externally

Is there a way to print the value of temp (a closure variable) from a function defined outside the closure but referenced within the closure without passing temp as a variable to funcA?
var funcA, funcB;
funcA = function () {
console.log(temp);
}
funcB = function () {var temp, funcC;
temp = 1;
funcC = funcA;
funcC();
}
funcB(); // temp is undefined.
This works, but only because funcA is defined within funcB:
funcB = function () {var temp, funcA, funcC;
temp = 1;
funcA = function () {
console.log(temp);
}
funcC = funcA;
funcC();
}
funcB(); // 1
I'm trying to find a way to pull some function definitions out of outer functions to streamline code that's getting a little complex. Can I define funcA outside of funcB but still reference the temp variable without having to pass parameters?
I read that javascript does not have dynamic run time scoping, that it's only lexical scoping, but with referencing a function (funcA via funcC) within funcB, is there a way to meet the lexical scope requirement and provide access to the scoped variables for funcB?

Using Akinkunle Allen's comment, I came up with this which seems to solve my problem.
function funcB () {
var funcA, funcB, temp;
funcA = function () {
console.log(temp);
}
funcB = function () {var funcC;
temp = 1;
funcC = funcA;
funcC();
}
return funcB();
}
funcB(); // 1

Yes, and No.
The keyword var for declaring variables behaves different depending upon what the current scope is. When var is executed on the global scope it is optional. The variable becomes a property of the global object. When executing in the browser this global object is window.
So the following in global space has the same result.
var temp = 1;
window.temp = 1;
this.temp = 1;
All the above is just window.temp because of the global context.
When you use var inside a function then the variable is attached to the function. All functions in Javascript are objects so local var variables will live as long as the parent function is still being used somewhere.
Javascript will walk the hierarchy of executing scopes to find a variable identifier. So any inner functions can access their outer function variables (as in your example).
What you can do is play around with the this reference in functions.
The identifier this in Javascript is dynamic (meaning that you can change it). I can pass a variable to an unknown function that was declared outside the calling function. Since the this.temp is used to reference the variable the function funcA is able to display the value.
funcB = function(otherFunc)
{
this.temp = 1;
otherFunc();
}
funcA = function()
{
alert(this.temp);
}
funcB(funcA);
http://jsfiddle.net/thinkingmedia/dfLvj/
See the above jsfiddle example.
What you can do with this is change the meaning of this on the fly. Here is a better example.
funcB = function(otherFunc)
{
var temp = {
message: "Hello World!"
};
var foo = otherFunc.bind(temp);
foo();
}
funcA = function()
{
alert(this.message);
}
funcB(funcA);
http://jsfiddle.net/thinkingmedia/K5Pw6/
Dynamically changing this can have a lot of benefits by allowing a function to accept closure references that will be executed with a custom this reference.
An example might be a click event handler where this is the DOM element that triggered the event.

Define a global variable in a JavaScript function

Is it possible to define a global variable in a JavaScript function?
I want use the trailimage variable (declared in the makeObj function) in other functions.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
function makeObj(address) {
**var trailimage = [address, 50, 50];**
document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0" style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
obj_selected = 1;
}
function truebody() {
return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}
function hidetrail() {
var x = document.getElementById("trailimageid").style;
x.visibility = "hidden";
document.onmousemove = "";
}
function followmouse(e) {
var xcoord = offsetfrommouse[0];
var ycoord = offsetfrommouse[1];
var x = document.getElementById("trailimageid").style;
if (typeof e != "undefined") {
xcoord += e.pageX;
ycoord += e.pageY;
}
else if (typeof window.event != "undefined") {
xcoord += truebody().scrollLeft + event.clientX;
ycoord += truebody().scrollTop + event.clientY;
}
var docwidth = 1395;
var docheight = 676;
if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
x.display = "none";
alert("inja");
}
else
x.display = "";
x.left = xcoord + "px";
x.top = ycoord + "px";
}
if (obj_selected = 1) {
alert("obj_selected = true");
document.onmousemove = followmouse;
if (displayduration > 0)
setTimeout("hidetrail()", displayduration * 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px;
top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
</form>
</body>
</html>

As the others have said, you can use var at global scope (outside of all functions and modules) to declare a global variable:
<script>
var yourGlobalVariable;
function foo() {
// ...
}
</script>
(Note that that's only true at global scope. If that code were in a module — <script type="module">...</script> — it wouldn't be at global scope, so that wouldn't create a global.)
Alternatively:
In modern environments, you can assign to a property on the object that globalThis refers to (globalThis was added in ES2020):
<script>
function foo() {
globalThis.yourGlobalVariable = ...;
}
</script>
On browsers, you can do the same thing with the global called window:
<script>
function foo() {
window.yourGlobalVariable = ...;
}
</script>
...because in browsers, all global variables global variables declared with var are properties of the window object. (The new let, const, and class statements [added in ES2015] at global scope create globals that aren't properties of the global object; a new concept in ES2015.)
(There's also the horror of implicit globals, but don't do it on purpose and do your best to avoid doing it by accident, perhaps by using ES5's "use strict".)
All that said: I'd avoid global variables if you possibly can (and you almost certainly can). As I mentioned, they end up being properties of window, and window is already plenty crowded enough what with all elements with an id (and many with just a name) being dumped in it (and regardless that upcoming specification, IE dumps just about anything with a name on there).
Instead, in modern environments, use modules:
<script type="module">
let yourVariable = 42;
// ...
</script>
The top level code in a module is at module scope, not global scope, so that creates a variable that all of the code in that module can see, but that isn't global.
In obsolete environments without module support, wrap your code in a scoping function and use variables local to that scoping function, and make your other functions closures within it:
<script>
(function() { // Begin scoping function
var yourGlobalVariable; // Global to your code, invisible outside the scoping function
function foo() {
// ...
}
})(); // End scoping function
</script>

Just declare
var trialImage;
outside. Then
function makeObj(address) {
trialImage = [address, 50, 50];
...
...
}

If you read the comments there's a nice discussion around this particular naming convention.
It seems that since my answer has been posted the naming convention has gotten more formal. People who teach, write books, etc. speak about var declaration, and function declaration.
Here is the additional Wikipedia post that supports my point: Declarations and definitions
...and to answer the main question. Declare variable before your function. This will work and it will comply to the good practice of declaring your variables at the top of the scope :)

Just declare it outside the functions, and assign values inside the functions. Something like:
<script type="text/javascript">
var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage = null ; // Global variable
function makeObj(address) {
trailimage = [address, 50, 50]; // Assign value
Or simply removing "var" from your variable name inside function also makes it global, but it is better to declare it outside once for cleaner code. This will also work:
var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
function makeObj(address) {
trailimage = [address, 50, 50]; // Global variable, assign value
I hope this example explains more: http://jsfiddle.net/qCrGE/
var globalOne = 3;
testOne();
function testOne()
{
globalOne += 2;
alert("globalOne is :" + globalOne );
globalOne += 1;
}
alert("outside globalOne is: " + globalOne);
testTwo();
function testTwo()
{
globalTwo = 20;
alert("globalTwo is " + globalTwo);
globalTwo += 5;
}
alert("outside globalTwo is:" + globalTwo);

No, you can't. Just declare the variable outside the function. You don't have to declare it at the same time as you assign the value:
var trailimage;
function makeObj(address) {
trailimage = [address, 50, 50];

There are three types of scope in JavaScript:
Global Scope: where the variable is available through the code.
Block Scope: where the variable is available inside a certain area like a function.
Local Scope: where the variable is available in more certain areas, like an if-statement
If you add Var before the variable name, then its scope is determined where its location is
Example:
var num1 = 18; // Global scope
function fun() {
var num2 = 20; // Local (Function) Scope
if (true) {
var num3 = 22; // Block Scope (within an if-statement)
}
}
num1 = 18; // Global scope
function fun() {
num2 = 20; // Global Scope
if (true) {
num3 = 22; // Global Scope
}
}

It depends on what you intend by the word "global". If you want global scope on a variable for function use (which is what the OP wants) then you should read after the edit. If you want to reuse data from page to page without the use of a server, you should be looking to you use sessionStorage.
Session Storage
var Global = 'Global';
function LocalToGlobalVariable() {
// This creates a local variable.
var Local = '5';
// Doing this makes the variable available for one session
// (a page refresh - it's the session not local)
sessionStorage.LocalToGlobalVar = Local;
// It can be named anything as long as the sessionStorage
// references the local variable.
// Otherwise it won't work.
// This refreshes the page to make the variable take
// effect instead of the last variable set.
location.reload(false);
};
// This calls the variable outside of the function for whatever use you want.
sessionStorage.LocalToGlobalVar;
I realize there is probably a lot of syntax errors in this but its the general idea... Thanks so much LayZee for pointing this out... You can find what a local and session Storage is at http://www.w3schools.com/html/html5_webstorage.asp. I have needed the same thing for my code and this was a really good idea.
Scope
As of (I believe) 2015, a new "standard" for javascript (if you will) was introduced. This standard introduced many new ideas into javascript, one of them being the implementation of scope.
https://www.w3schools.com/js/js_scope.asp has all the details concerning this idea, but the cliff notes:
const defines a constant.
var has "global" scope.
let has "function" or "block" scope.

Classic example:
window.foo = 'bar';
A modern, safe example following best practice by using an IIFE:
;(function (root) {
'use strict'
root.foo = 'bar';
)(this));
Nowadays, there's also the option of using the WebStorage API:
localStorage.foo = 42;
or
sessionStorage.bar = 21;
Performance-wise, I'm not sure whether it is noticeably slower than storing values in variables.
Widespread browser support as stated on Can I use....

It is very simple. Define the trailimage variable outside the function and set its value in the makeObj function. Now you can access its value from anywhere.
var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
trailimage = [address, 50, 50];
...
}

Yes, You can. Just don't use var, don't use let. Just initialize variable and it will be automaticly assigned global:
function firstFunction() {
if (typeof(testVar) === "undefined") {testVar = 1;} //initializing variable if not initialized
testVar += 1;
console.log('Test variable inside 1st function: '+testVar);
}
function secondFunction() {
testVar += 1;
console.log('Test variable inside 2nd function: '+testVar);
}
firstFunction();
secondFunction();
testVar += 1;
console.log('Test variable outside: '+testVar);

Global variables are declared outside of a function for accessibility throughout the program, while local variables are stored within a function using var for use only within that function’s scope. If you declare a variable without using var, even if it’s inside a function, it will still be seen as global.
References = https://www.freecodecamp.org/news/global-variables-in-javascript-explained/

All variables declared without "var" or "let" or anything else preceding it like "const" are global. So ....
function myFunction(){
myVar = "value"; // myVar is a global variable and can be used anywhere inside <script> tags.
}

As an alternative to global vars, you may use the localstorage of browsers (if not using older versions). You can use upto 5MB of this storage.
The code would be
var yourvariablevalue = 'this is a sample value';
localStorage.setItem("yourKeyvariablename", yourvariablevalue);
and this can be retrieved any time, even after you leave and open it at another time.
var yourvariablevalue = localStorage.getItem("yourKeyvariablename");
Hope this would help you !

If you are making a startup function, you can define global functions and variables this way:
function(globalScope)
{
// Define something
globalScope.something()
{
alert("It works");
};
}(window)
Because the function is invoked globally with this argument, this is global scope here. So, the something should be a global thing.

Here is sample code that might can be helpful.
var Human = function() {
name = "Shohanur Rahaman"; // Global variable
this.name = "Tuly"; // Constructor variable
var age = 21;
};
var shohan = new Human();
document.write(shohan.name + "<br>");
document.write(name);
document.write(age); // Undefined because it's a local variable
Here I found a nice answer: How can one declare a global variable in JavaScript?

To use the window object is not a good idea. As I see in comments,
'use strict';
function showMessage() {
window.say_hello = 'hello!';
}
console.log(say_hello);
This will throw an error to use the say_hello variable we need to first call the showMessage function.

Here is another easy method to make the variable available in other functions without having to use global variables:
function makeObj() {
// var trailimage = 'test';
makeObj.trailimage = 'test';
}
function someOtherFunction() {
document.write(makeObj.trailimage);
}
makeObj();
someOtherFunction();