Still confused about how passing variables in Javascript functions works? So was I, until recently. It took me some effort to understand, and I’d like to share my understanding with an example.

First try guessing the outcome of the following javascript snippet

Input

const number = 1983
const string = 'Adrian'
let obj1 = {
  value: 'obj1'
}
let obj2 = {
  value: 'obj2'
}
let obj3 = obj2;

let obj4 = ['a'];


function change(numberParam, stringParam, obj1Param, obj2Param, obj4Param) {
    console.log('\nSTART logs in function');

    numberParam = numberParam * 10;
    stringParam = 'Ionut';
    console.log('numberParam - ', numberParam);
    console.log('stringParam - ', stringParam);

    console.log('obj1Param.value in function before obj1Param = obj2Param assignment - ', obj1Param.value);
    obj1Param = obj2Param;
    console.log('obj1Param.value in function after obj1Param = obj2Param assignment - ', obj1Param.value);

    console.log('obj2Param.value in function before obj2Param.value change - ', obj2Param.value);
    obj2Param.value = 'changed'; // obj1Param.value = 'changed'; would yield the same result
    console.log('obj1Param.value in function after obj2Param.value change - ', obj1Param.value);
    console.log('obj2Param.value in function after obj2Param.value change - ', obj2Param.value);

    //obj4Param = ['b'];
    obj4Param.push('b');
    console.log('obj4Parma - ', obj4Param);

    console.log('END logs in function \n');
}

change(number, string, obj1, obj2, obj4);

console.log('number final - ', number);
console.log('string final - ', string);
console.log('obj1.value final - ', obj1.value);
console.log('obj2.value final - ', obj2.value);
console.log('obj3.value final - ', obj3.value);
console.log('obj4 final - ', obj4);

Before you read the output I suggest you read the explanation of Call by sharing on Wikipedia, which is the best explanation on the topic I found.

Output

START logs in function
numberParam -  19830
stringParam -  Ionut
obj1Param.value in function before obj1Param = obj2Param assignment -  obj1
obj1Param.value in function after obj1Param = obj2Param assignment -  obj2
obj2Param.value in function before obj2Param.value change -  obj2
obj1Param.value in function after obj2Param.value change -  changed
obj2Param.value in function after obj2Param.value change -  changed
obj4Parma -  ["b"]
END logs in function

number final -  1983
string final -  Adrian
obj1.value final -  obj1
obj2.value final -  changed
obj3.value final -  changed
obj4 final -  ["a"]

Ok, so what’s going on?

• number and string primitives are “boxed”¹ in Number and String objects² before passing. Boxed objects are always a copy of the value object, hence new objects (Number and String) are created in memory with the same primitive values. In the function execution (scope) they get “unboxed”, their value is changed and placed in the new memory space, but once the function is over the new space in memory is cleared, with the original remaining unaffected.
• a copy reference to obj1 and obj2 is passed to the function, pointing to the same address of the “original” objects in memory (call by sharing)³. With the obj1Param = obj2Param assignment in the function, both obj1Param and obj2Param to the original obj2 object in memory, so when changing its property obj2Param.value = 'changed' it will also be visible outside of the function scope, after it is terminated. obj1Param.value = 'changed' would have had the same effect after the assignment.
• what about obj4? obj4param is also a copy reference to the obj4 object (remember in Javascript arrays are objects), but with the obj4Param = ['b'] assignment it’s pointing now to a newly created object (the ['b'] array object), which is visible only in the function’s scope and is destroyed when the function is over. Thus, it has no effect on the original object. On the other hand, a statement like obj4param.push('b') would have changed the original array and would display a  ["a", "b"] value.

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Project: codever - File: searchbar.component.ts

Here used the success method with IziToastSettings

import iziToast, { IziToastSettings } from 'izitoast';

removeSearch(search: Search, e: MouseEvent) {
  e.preventDefault();
  e.stopPropagation();

  const indexSavedSearch = this.getIndexSavedSearch(search.searchDomain, search.text);

  const deletedSearch = this._userData.searches.splice(indexSavedSearch, 1)[0];
  this.userDataStore.updateUserData$(this._userData).subscribe(() => {
    console.log('Removed search ' + search.text + ' from domain ' + search.searchDomain);
    const iziToastSettings: IziToastSettings = {
      title: `"${deletedSearch.text}" deleted from "${deletedSearch.searchDomain}" search history `,
      timeout: 3000,
      position: 'bottomRight'
    }
    iziToast.success(iziToastSettings);
  });
}

Reference - https://izitoast.marcelodolza.com/#Methods

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Get current day with LocalDateTime.now() from which you can substract years, weeks, days up to nanos (in the shown example days with minusDays(long days)):

LocalDateTime dateToLookBack = LocalDateTime.now().minusDays(30);

You can achieve the same result by using the minus(TemporalAmount amountToSubtract) method as below

final var dateToLookBackTo = LocalDateTime.now().minus(Duration.ofDays(30));

Reference - https://docs.oracle.com/javase/8/docs/api/java/time/LocalDateTime.html

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Use diplay:flex on both wrapper div and ul element and set margin-right and margin-left to auto at the list level:

.identity-providers-list {
  display: flex;
  ul {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    list-style: none;
    li {
      margin-right: 2rem;
    }
  }
}

Usage example

  <div class="identity-providers-list">
    <ul>
      <li>
        <i class="fab fa-github"></i> Github
      </li>
      <li>
        <i class="fab fa-google"></i> Google
      </li>
      <li>
        <i class="fab fa-gitlab"></i> Gitlab
      </li>
      <li>
        <i class="fab fa-stack-overflow"></i> StackOverflow
      </li>
    </ul>
  </div>

You can see how it looks in the register page on Codever

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Use vscode.window.showInputBox - the returned value will be undefined if the input box was canceled (e.g. pressing ESC). Otherwise the returned value will be the string typed by the user or an empty string if the user did not type anything but dismissed the input box with OK.

const searchQuery = await vscode.window.showInputBox({
  placeHolder: "Search query",
  prompt: "Search my snippets on Codever",
  value: selectedText
});
if(searchQuery === ''){
  console.log(searchQuery);
  vscode.window.showErrorMessage('A search query is mandatory to execute this action');
}

if(searchQuery !== undefined){
  const searchUrl = `https://www.codever.dev/search?q=${searchQuery}&sd=my-snippets`;
  vscode.env.openExternal(Uri.parse(searchUrl));
}

Reference - https://code.visualstudio.com/api/references/vscode-api#window.showInputBox

You can see it in action in the following demo:

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏