# How to Pass Objects from PyScript to Javascript (and Vice Versa) [Pyodide](https://pyodide.org), the interpreter that underlies PyScript, does a lot of work under the hood to translate objects between Python and JavaScript. This allows code in one language to access objects defined in the other. This guide discusses how to pass objects between JavaScript and Python within PyScript. For more details on how Pyodide handles translating and proxying objects between the two languages, see the [Pyodide Type Translations Page](https://pyodide.org/en/stable/usage/type-conversions.html). For our purposes, an 'object' is anything that can be bound to a variable (a number, string, object, [function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function), etc). ## JavaScript to PyScript We can use the syntax `from js import ...` to import JavaScript objects directly into PyScript. Simple JavaScript objects are converted to equivalent Python types; these are called [implicit conversions](https://pyodide.org/en/stable/usage/type-conversions.html#implicit-conversions). More complicated objects are wrapped in [JSProxy](https://pyodide.org/en/stable/usage/type-conversions.html) objects to make them behave like Python objects. `import js` and `from js import ...` [in Pyodide](https://pyodide.org/en/stable/usage/type-conversions.html#type-translations-using-js-obj-from-py) get objects from the [JavaScript globalThis scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis), so keep the[ rules of JavaScript variable scoping](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) in mind. ```html ``` ```python # Import and use JS function and variable into Python from js import name, addTwoNumbers print(f"Hello {name}") print("Adding 1 and 2 in Javascript: " + str(addTwoNumbers(1, 2))) ``` ## PyScript to JavaScript ### Using Pyodide's globals access The [PyScript JavaScript module](../reference/modules/pyscript.md) exposes its underlying Pyodide interpreter as `PyScript.interpreter`, and maintains a reference to the [globals()](https://docs.python.org/3/library/functions.html#globals) dictionary of the Python namespace. Thus, any global variables in python are accessible in JavaScript at `PyScript.interpreter.globals.get('my_variable_name')` ```html x = 42 ``` Since [everything is an object](https://docs.python.org/3/reference/datamodel.html) in Python, this applies not only to user created variables, but also to classes, functions, built-ins, etc. If we want, we can even apply Python functions to JavaScript data and variables: ```html ``` ### Using JavaScript's eval() There may be some situations where it isn't possible or ideal to use `PyScript.interpreter.globals.get()` to retrieve a variable from the Pyodide global dictionary. For example, some JavaScript frameworks may take a function/Callable as an html attribute in a context where code execution isn't allowed (i.e. `get()` fails). In these cases, you can create JavaScript proxies of Python objects more or less "manually" using [JavaScript's eval() function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval), which executes a string as code much like [Python's eval()](https://docs.python.org/3/library/functions.html#eval). First, we create a JS function `createObject` which takes an object and a string, then uses `eval()` to create a variable named after the string and bind it to that object. By calling this function from PyScript (where we have access to the Pyodide global namespace), we can bind JavaScript variables to Python objects without having direct access to that global namespace. Include the following script tag anywhere in your html document: ```html ``` This function takes a Python Object and creates a variable pointing to it in the JavaScript global scope. ### Exporting all Global Python Objects We can use our new `createObject` function to "export" the entire Python global object dictionary as a JavaScript object: ```python from js import createObject from pyodide.ffi import create_proxy createObject(create_proxy(globals()), "pyodideGlobals") ``` This will make all Python global variables available in JavaScript with `pyodideGlobals.get('my_variable_name')`. (Since PyScript tags evaluate _after_ all JavaScript on the page, we can't just dump a `console.log(...)` into a ` ``` #### Full example ```html Exporting all Global Python Objects from js import createObject from pyodide.ffi import create_proxy createObject(create_proxy(globals()), "pyodideGlobals") # create some Python objects: symbols = {'pi': 3.1415926, 'e': 2.7182818} def rough_exponential(x): return symbols['e']**x class Circle(): def __init__(self, radius): self.radius = radius @property def area(self): return symbols['pi'] * self.radius**2 ``` ### Exporting Individual Python Objects We can also export individual Python objects to the JavaScript global scope if we wish. (As above, the following example uses a button to delay the execution of the ` ``` #### Full example ```html Exporting Individual Python Objects import js from pyodide.ffi import create_proxy # Create 3 python objects language = "Python 3" animals = ['dog', 'cat', 'bird'] multiply3 = lambda a, b, c: a * b * c # js object can be named the same as Python objects... js.createObject(language, "language") # ...but don't have to be js.createObject(create_proxy(animals), "animals_from_py") # functions are objects too, in both Python and Javascript js.createObject(create_proxy(multiply3), "multiply") ```