I want an object to call a function defined in another object or JSON (as a string or reference), with a variable number of values also defined there.
Here's a pseudo-code example of what I'm trying to do:
// function name and variable-length values definition
const definition = {
functionName: "function1",
values: [ 1, "foo", 3.14 ]
}
// objectA calling the function with the values
// objectA.definedFunction(definedValues);
// objectA.[functionName]([val1], [val2], ..., [valN]);
objectA.function1(1, "foo", 3.14);
Note: objectA may/should? reference the definition in a member variable.
How can that be achieved?
And is it possible to expand that so that function1 is a member function of another object that is also defined in definition?
There are two mechanisms you need.
First the square bracket notation to access object properties:
objectA[definition.functionName]; // this will return the function you want
// This is the same as objectA.function1
Second you want to pass an array as parameter list. For that you can use Function.prototype.apply which expects the argument list in the form of an array:
objectA[definition.functionName].apply(objectA, definition.values);
// This is the same as objectA.function1(1, "foo", 3.14);
string to function: Function
const fx1 = Function(definition.functionString)
const fx2 = objectA[definition.functionName]
there has serval way to call fx, depend on how fx handle parameter
fx.apply(null, definition.values)
fx(...definition.values)
fx(definition.values)
If you have an object (i.e. dictionary) of functions and their arguments' values, you can get the function simply by accessing its matching value in the dictionary.
Then, in order to use its arguments, you can use the spread operator:
const dictionary = {
function1: { // For example
definition: (a, b, c) => `{ a: ${a}, b: ${b}, c: ${c} }`,
values: [1, "foo", 3.14],
},
};
function callFunctionByName(name) {
const currFunction = dictionary[name];
const { definition, values } = currFunction;
return definition(...values);
}
console.log(callFunctionByName('function1'));
let objA = {
function1: function(a, b, c) {
console.log(a)
console.log(b);
console.log(c);
}
}
const definition = {
functionName: "function1",
values: [ 1, "foo", 3.14 ]
}
objA[definition.functionName].apply(null, definition.values);
//Second approach if it function1 is not a key of objA
function function1(first, sec, third) {
console.log(first);
console.log(sec);
console.log(third);
}
const definition = {
functionName: "function1",
values: [ 1, "foo", 3.14 ]
}
eval(`${definition.functionName}(${definition.values[0]}, "${definition.values[1]}", ${definition.values[2]})`);
Related
each API request I'm making contains different keys values inside a specific object.
How can I dynamically get the Number value of the second key? ("123112042")
"salesRanks": {
"281052": [ keepaTime, salesRank, ... ]
"123112042": [ keepaTime, salesRank, ... ]
}
Target the Object.keys and get the second index.
const data = {
salesRanks: {
"281052": [1, 1],
"123112042": [2, 2]
}
};
console.log(Object.keys(data.salesRanks)[1]);
Although an object's keys are not really meant to be ordered, you could write an object iterator and assign with destructuring like this:
const obj = {
salesRanks: {
281052: ["keepaTime", "salesRank"],
123112042: ["keepaTime", "salesRank"],
[Symbol.iterator]: function () {
return Object.keys(this).values();
}
},
};
const {
salesRanks: [, second],
} = obj;
console.log(second);
Is possible dynamically add properties to nested object in Typescript ? Because my object is dynamic. In one case i have obj.
[
{someObject},
{
prop1:1,
columns: [
components: [
columns: [
components:[
{
type: number,
key: 'key1'
},
{
type: textfield,
key: 'key2'
}
]
]
]
]
}
]
And for example for object with key key2 i need add some flag. And in another case i get object less nested. Does exists any for example lodash function for this operation, or i have to iterate this object by recursion ?
You will have to recursively search. Thankfully this is not too difficult to implement:
const findAndUpdate = ($obj, $key, $val) => {
Object.keys($obj).includes($key) ?
$obj[$key] = $val
: Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
return $obj;
}
I used Object.<method> instead of lodash methods so that this can be easily replicated accross enviroments. This function will take in an initial object, the key you want to update and the value that you want to update it to.
Usage:
const foo = {
b: {
c: {
d: 5
}
}
}
findAndUpdate(foo, "d", 56);
console.log(foo) // -> { b: { c: { d: 56 } } } }
It checks if the key exists in the current layer of the object. If it doesn't then we call the function again for each object in the current layer - passing in the original object as a reference. If it does find a key in the current layer, then it will update the object that the reference points to. Eventually after the stack is cleared then we return our original updated object. Obviously if no keys are found that match the target key originally passed in then the object will remain unchanged.
If you want more customisation you could change the $val to take in a function $func instead:
const findAndUpdate = ($obj, $key, $func) => {
Object.keys($obj).includes($key) ?
$obj[$key] = $func($obj[$key])
: Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
return $obj;
}
Then you can now do something like this:
findAndUpdate(foo, "d", old => old+1 );
console.log(foo) // -> { b: { c: { d: 6 } } } }
Is it possible to use a destructuring assignment inside an object?
This works
const test = {a: 'hey', b: 'hello'}
const {a,b} = test;
const destruct = {
a,
b
};
Would like to do this
const test = {a: 'hey', b: 'hello'}
// something like this
const destruct = {
{a,b}: test
};
const destruct = {
{a}: test,
{b}: test
};
If I understand correctly, it seems the spread syntax is a good fit for what you need.
The spread syntax "..." allows you to "spread" the key/value pairs from a source object (ie test) to a target object (ie destruct):
const test = {
a: 'hey',
b: 'hello',
c: 'goodbye'
}
const destruct = {
// {a,b}: test <-- invalid syntax
...test // equivalent using the "spread" syntax
};
console.log(destruct)
Additionally, if you wanted to select a subset of keys from a source object and spread those into a target object then this can be achieved by the following:
const test = {
a: 'hey',
b: 'hello',
c: 'goodbye'
}
/* Spread subset of keys from source object to target object */
const welcomeOnly = {
...({ a, b } = test, { a, b })
}
console.log('exclude goodbye, show welcomes only:', welcomeOnly);
The second example works by destructing the source object (ie test) into an object, with the subset of keys that we want (a and b).
In the scope of that expression (ie everything between the ( and )), these keys are accessible as local variables. We take advantage of this, and pass those to a new object (ie { a, b }). Because the new object is declared after the ,, it is returned as the result of the expression.
If you are trying to take a subset of properties you can use the rest operator
const test = {
a: 'hey',
b: 'hello',
c: 'goodbye'
};
const { c, ...destruct } = test;
console.log(destruct);
This assigns c to a const and the the left over properties are assigned to the const destruct. List all the unwanted properties first and then the left over properties are caught with the rest operator.
Works with arrays as well.
const test = ['hey', 'hello', 'goodbye'];
const [ first, ...rest ] = test;
console.log(rest);
You can try to work like this for destructuring arrays!
let abc = {
a: 'hello',
b: 'hey',
c: 'hi, there!'
}
let {a: x, b:y, c:z} = abc;
console.log(x,y,z)
// "hello"
"hey"
"hi, there!"
Today I came across the following syntax which I didn't recognize:
const createUser = ({
age = 1,
name = 'Anonymous',
}) => ({
age,
name,
});
const defaultP = createUser({
age: 5
});
console.log(defaultP);
I think it uses Object destructuring and default parameters in order to set defaults of the object which is send as an argument.
The syntax threw me a bit off because normally I see object destructuring only in the following manner:
let obj = {
prop1: 1
}
const {prop1} = obj;
console.log(prop1);
Question:
How does this syntax work exactly?
That syntax indeed uses Object Destructuring in order to extract default values from the parameter object. There are some examples in the Mozilla documentation that helps us understand the trick, check this out:
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
A possible disadvantage of your example is that the createUser method ignores all other values of the parameter object and always returns an object that contains only age and name. If you want to make this more flexible, we could use Object.assign() like this:
const createUser = (o) => Object.assign({ age: 1, name: 'Anonymous' }, o);
In this case, the user created will be an object that merges the parameter object with the default values. Note now that the default values are in the method body. With this method we can create users that contain other properties, example:
const superman = createUser({ name: 'Superman', type: 'superhero' });
console.log(superman);
// output: {age: 1, name: "Superman", type: "Superhero"}
Your code is using both Object Destructuring and default function props.
const createUser = ({
age = 1,
name = 'Anonymous',
}) => ({
age,
name,
});
Here function createUser is accepting single argument of type Object. Function is returing same object, if you have both object properties defined in your argument, then it will return your passed object. Otherwise it will replace it with default values, which are 1 and Anonymous respectively.
You can further read about it here:
https://wesbos.com/destructuring-renaming/
https://wesbos.com/destructuring-default-values/
If you use babel and transpile your code to ES5, it will look like this:
function createUser(params) {
return {
age: typeof params.age === 'undefined' ? 1 : params.age,
name: typeof params.name === 'undefined' ? 'Anonymous' : params.name,
};
}
Just a note: default values for function arguments works the same way:
const multiply = (a, optionalB) => {
const b = typeof optionalB !== 'undefined' ? optionalB : 2;
return a * b;
}
Is same as:
const multiply = (a, b = 2) => {
return a * b;
}
It increases a readability, mostly in cases when argument is used several times.
I want to have a function with default parameters inside nested objects, and I want to be able to call it either f() or specifying only individual parameters.
// A function with nested objects with default parameters:
function f({ a = 1, callback = ({ name, param } = { name: "qwe", param: 123 }) } = {}) {
console.log("a:", a);
console.log("callback:", callback);
}
// And I want to run it like this:
f();
f({ callback: { params: "456" } });
// But 'callback.name' becomes undefined.
When destructuring is mixed with default parameters, I admit the code is hard to read and write (especially when there are nested objects...).
But I think you are trying to do that:
function f({callback: {name = "cbFunction", params = "123"} = {}} = {}) {
console.log(name);
console.log(params);
}
f();
f({callback: {params: '789'}});
I found none of the answers here to be what he wanted. But it IS actually possible in a somewhat sexy way by doing this:
(EDIT: Simplified syntax and also show how to add default values for subobjects)
function f({
a = 1,
callback = {}
} = {}) {
callback = { // default values
name: "cbFunction",
params: "123",
...callback // overwrites it with given values
}
// do the same for any subobjects
callback.subObject = {
arg1: 'hi',
arg2: 'hello',
...callback.subObject
}
console.log("a:", a)
console.log("callback:", callback)
}
f()
f({a: 2, callback: {params: '789', subObject: {arg2: 'goodbye'}}})
Turned out to call it like this solves the problem, but is it the best way?
function f({
a = 1,
callback = ({
name,
param
} = {
name: "qwe",
param: 123
})
} = {}) {
console.log("a:", a);
console.log("callback:", callback);
}
f();
f({ callback: { name, params: "456" } });
Answer by #Badacadabra is nearly correct but missing the other top level parameter specified in the question.
function f({a = 1, callback: {name = "qwe", params = "123"} = {}} = {}) {
console.log(a);
console.log(name);
console.log(params);
}
However note that within the function body the properties of callback are addressed without the containing object. You could reconstitute them into such an object if you wanted with the line:
const callback = { name, params }
Either way, from the invocation point this works to fill in all missing values from all levels such as:
f({a: 2})
f({a: 2, callback: { name: "abc"}})
f({a: 2, callback: { params: "456" }})
etc.
EDIT
In response to Joakim's comment:
TotalAMD also said in a comment that "I want to use several nested objects with same fields name". So if he tries that approach with callback1 and callback2 as arguments then he would have to use different field names in them.
I missed that original requirement. One way to maintain the desired, duplicated nested names within the function interface would be to alias them within the scope of the function, as follows:
function f({
a = 1,
callback1: {name: name1 = "abc", params: params1 = "123"} = {},
callback2: {name: name2 = "def", params: params2 = "456"} = {},
} = {}) {
console.log(a);
console.log(name1);
console.log(params1);
console.log(name2);
console.log(params2);
}
You can then call the function with the designed interface and expected results:
f ({ callback1: { name: "One" }, callback2: { name: "Two" } })
Caveat: Whilst technically possible and potentially useful, this could get messy at deeper nesting levels. It might then be worth looking for an alternative interface design with less indirection.