# function-call

> build code that defines and calls functions in the browser

Latest version **0.43.0** (published 2021-03-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install function-call
pnpm add function-call
yarn add function-call
bun add function-call
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.43.0 |
| Published | 2021-03-07 |
| First published | 2016-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | erikpukinskis |

## Links

- npm: https://www.npmjs.com/package/function-call
- Repository: https://github.com/erikpukinskis/function-call
- Homepage: https://github.com/erikpukinskis/function-call#readme
- Issues: https://github.com/erikpukinskis/function-call/issues
- npm.io page: https://npm.io/package/function-call

## Dependencies (1)

- [module-library](https://npm.io/package/module-library.md) *

## Recent versions

- 0.43.0 (latest) — 2021-03-07
- 0.42.0 — 2021-01-01
- 0.41.0 — 2020-12-30
- 0.40.0 — 2020-12-30
- 0.39.0 — 2020-08-28
- 0.38.0 — 2018-06-23
- 0.37.0 — 2017-08-28
- 0.36.0 — 2017-02-28
- 0.35.0 — 2017-02-04
- 0.34.0 — 2017-02-04
- 0.33.0 — 2017-02-04
- 0.32.0 — 2017-02-04
- 0.31.0 — 2017-02-04
- 0.30.0 — 2017-02-03
- 0.29.0 — 2017-02-03
- … 25 more at https://npm.io/package/function-call/versions

## README

**Function-call** allows you to build JavaScript strings that do stuff. It's convenient for creating an onclick handler:

```javascript
var functionCall = require("function-call")

var build = functionCall("buildTemple").withArgs({height: "30 cubits"})
build.evalable()

// returns 'buildTemple({"height":"30 cubits"})'
```

You can also keep tacking more arguments on to a function call. Arguments can be literals or other function calls:

```javascript
var moveIn = functionCall("moveIn").withArgs("Tuesday")
build.withArgs(moveIn).evalable()

// returns 'buildTemple({"height":"30 cubits"}, moveIn.bind(null, "Tuesday"))'
```

## Singletons and methods

If you want to reference an object or its methods:

```javascript
var me = functionCall("me").singleton()
me.methodCall("getName").withArgs("formal").evalable()

// returns 'me.getName("formal")'
```

## These bindings are getting out of hand, what do I do?

FunctionCall works great if you are mostly just passing literals to pure(ish) functions, but if you are calling functions and callbacks with serious dependencies, [browser-bridge](https://github.com/erikpukinskis/browser-bridge) can help.

It allows you to bake dependencies into a function definition so your functionCalls stay sane:

```javascript
var bridge = require("browser-bridge")

var a = bridge.defineFunction(function a() {})

var c = bridge.defineFunction(function b(x) { x })

var c = bridge.defineFunction(
  [a, b.withArgs(4000), {some: "data"}],
  function(a, b, data, moar) {
    a()
    b()
    return data.some + moar
  }
)
```

This will pre-bind a, b, b's args, and your data into a reference called c, so that you get a nice clear function call:

```javascript
c.withArgs("goats").evalable()

// returns 'c("goats")'
```

When you eval that, `a` will be called, `b` will be called with 4000, and you'll get "datagoats" back.

## Using bindings in the browser

Sometimes you want to use a bridge function again in response to a javascript event or something. Use `.asCall()` to get a binding of the binding, so to speak.

```javascript
var sayHi = bridge.defineFunction(function(name) {
  alert("wuzzup "+name)
})

bridge.defineFunction(
  [sayHi.asCall()],
  function(sayHi) {
    var name = askTheSpiritsBeyond.whoAmi()
    someElement.onclick = sayHi.withArgs(name).evalable()
  }
)
```

## Globals and other manual references

To reference `window` or `event` or similar as an argument:

```javascript
var js = functionCall("myFunc").withArgs(functionCall.raw("window")).evalable()

// returns 'myFunc(window)'
```

The `raw` function is also available on the calls themselves:

```javascript
var add = functionCall("add")
el.onclick = add.withArgs(add.raw("event")).evalable()

// sets onclick to 'add(event)'
```

## Why?

 - Many JavaScript frameworks don't actually put onclick handlers in the DOM, which means it's difficult to see what happens when a button is pushed. 

 - Even if you can figure out what the event handler is, it often plumbs straight into framework internals.

 - FunctionCall allows you to put human-readable, irrefutable JavaScript strings into your HTML so that you can see exactly what's going on and debug problems.

---
_Source: https://npm.io/package/function-call · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._