How console log variables inside find method that inside a map method and return an object ?
That is an arrow function so I should use with function body and return statement.
But I get error if i do.
So how can console log lbl and lbl.label inside find method?
Yes i should read how use arrow function. (this is exactly what I want to find out, among other things)
Thank you
useEffect(() => {
setLabels((prevLabels) => {
return [...new Set(savedEvents.map((evt) => evt.label))].map((label) => {
const currentLabel = prevLabels.find((lbl) => lbl.label === label);
console.log(`prevlabels: ${JSON.stringify(prevLabels)}`);
console.log(`currentLabel: ${JSON.stringify(currentLabel)}`);
console.log(`currentLabel.checked: ${currentLabel.checked}`);
console.log(`label: ${label}`);
return {
label,
checked: currentLabel ? currentLabel.checked : true,
};
});
});
}, [savedEvents]);
I think there is something that i'm missing about method chaining. To me it feels incomplete.
Method chaining works by having each method return this so that another method on that object can be called. However, the fact that the return value is this and not the result of the function seems inconvenient to me.
Here is a simple example.
const Obj = {
result: 0,
addNumber: function (a, b) {
this.result = a + b;
return this;
},
multiplyNumber: function (a) {
this.result = this.result * a;
return this;
},
}
const operation = Obj.addNumber(10, 20).multiplyNumber(10).result
console.log(operation)
key points:
Every method in the chain Obj.addNumber(10, 20).multiplyNumber(10) returns this.
The last part of the chain .result is the one that returns a value other than this.
The problem with this approach is that it require you to tack on a property / method to get a value at the end other thanthis.
Compare this with built-in functions in JavaScript.
const str = " SomE RandoM StRIng "
console.log(str.toUpperCase()) // " SOME RANDOM STRING "
console.log(str.toUpperCase().trim()) // "SOME RANDOM STRING"
console.log(str.toUpperCase().trim().length) // 18
key points:
Each function in the chain returns the result of the function not this (maybe this is done under the hood)
No property / method is required at the end of the chain just to get the result.
Can we implement method chaining to behave the way built-in functions in Javascript behave?
First of all, each of your console.log doesn't return properly:
console.log(str.toUpperCase.trim) //undefined
It returns undefined because str.toUpperCase returns the function object and does not execute the function itself so it won't work
The only correct usage is
console.log(str.toUpperCase().trim()
Now about your question, it is pretty easy to do it without a result and it is much more efficient.
Everything in javascript has a method called valueOf(), here is my example of calling everything like that for numbers, though I prefer just making functions instead of Objects.
const Obj = {
addNumber: function (a = 0) {
return a + this.valueOf();
},
multiplyNumber: function (a = 1) {
return a*this.valueOf();
},
}
const nr = 2;
Object.keys(Obj).forEach(method => {
Number.prototype[method] = Obj[method];
})
console.log(Number.prototype); // will print out addNumber and multiplyNumber
// Now You can call it like this
console.log(nr.addNumber().multiplyNumber()); // Prints out 2 because it becomes (nr+0)*1
console.log(nr.addNumber(3).multiplyNumber(2)) // Prints out 10;
I think you are misunderstanding what method chaining actually is. It is simply a shorthand for invoking multiple methods without storing each intermediate result in a variable. In other words, it is a way of expressing this:
const uppercase = " bob ".toUpperCase()
const trimmed = uppercase.trim()
as this
const result = " bob ".toUpperCase().trim()
Nothing special is happening. The trim method is simply being called on the result of " bob ".toUpperCase(). Fundamentally, this boils down to operator precedence and the order of operations. The . operator is an accessor, and is evaluated from left to right. This makes the above expression equivalent to this (parens used to show order of evaluation):
const result = (" bob ".toUpperCase()).trim()
This happens regardless of what is returned by each individual method. For instance, I could do something like this:
const result = " bob ".trim().split().map((v,i) => i)
Which is equivalent to
const trimmed = " bob ".trim()
const array = trimmed.split() //Note that we now have an array
const indexes = array.map((v,i) => i) //and can call array methods
So, back to your example. You have an object. That object has encapsulated a value internally, and adds methods to the object for manipulating the results. In order for those methods to be useful, you need to keep returning an object that has those methods available. The simplest mechanism is to return this. It also may be the most appropriate way to do this, if you actually are trying to make the object mutable. However, if immutability is an option, you can instead instantiate new objects to return, each of which have the methods you want in the prototype. An example would be:
function MyType(n) {
this.number = n
}
MyType.prototype.valueOf = function() {
return this.number
}
MyType.prototype.add = function(a = 0) {
return new MyType(a + this)
}
MyType.prototype.multiply = function(a = 1) {
return new MyType(a * this)
}
const x = new MyType(1)
console.log(x.add(1)) // { number: 2 }
console.log(x.multiply(2)) // { number: 2 }
console.log(x.add(1).multiply(2)) // { number: 4 }
console.log(x.add(1).multiply(2) + 3) // 7
The key thing to note about this is that you are still using your object, but the valueOf on the prototype is what allows you to directly utilize the number as the value of the object, while still making the methods available. This is shown in the last example, where we directly add 3 to it (without accessing number). It is leveraged throughout the implementation by adding this directly to the numeric argument of the method.
Method chaining is the mechanism of calling a method on another method of the same object in order to get a cleaner and readable code.
In JavaScript method chaining most use the this keyword in the object's class in order to access its method (because the this keyword refers to the current object in which it is called)
When a certain method returns this, it simply returns an instance of the object in which it is returned, so in another words, to chain methods together, we must make sure that each method we define has a return value so that we can call another method on it.
In your code above, the function addNumber returns the current executing context back from the function call. The next function then executes on this context (referring to the same object), and invokes the other functions associated with the object. it's is a must for this chaining to work. each of the functions in the function chaining returns the current Execution Context. the functions can be chained together because the previous execution returns results that can be processed further on.
This is part of the magic and uniqueness of JavaScript, if you're coming from another language like Java or C# it may look weird for you, but the this keyword in JavaScript behaves differently.
You can avoid the necessity of this and be able to return a value implicitly, using a Proxy object with a get-trap.
Here you find a more generic factory for it.
const log = Logger();
log(`<code>myNum(42)
.add(3)
.multiply(5)
.divide(3)
.roundUp()
.multiply(7)
.divide(12)
.add(-1.75)</code> => ${
myNum(42)
.add(3)
.multiply(5)
.divide(3)
.roundUp()
.multiply(7)
.divide(12)
.add(-1.75)}`,
);
log(`\n<code>myString(\`hello world\`)
.upper()
.trim()
.insertAt(6, \`cruel coding \`)
.upper()</code> => ${
myString(`hello world`)
.upper()
.trim()
.insertAt(6, `cruel coding `)
.upper()
}`);
log(`<br><code>myString(\`border-top-left-radius\`).toUndashed()</code> => ${
myString(`border-top-left-radius`).toUndashed()}`);
// the proxy handling
function proxyHandlerFactory() {
return {
get: (target, prop) => {
if (prop && target[prop]) {
return target[prop];
}
return target.valueOf;
}
};
}
// a wrapped string with chainable methods
function myString(str = ``) {
const proxyHandler = proxyHandlerFactory();
const obj2Proxy = {
trim: () => nwProxy(str.trim()),
upper: () => nwProxy(str.toUpperCase()),
lower: () => nwProxy(str.toLowerCase()),
insertAt: (at, insertStr) =>
nwProxy(str.slice(0, at) + insertStr + str.slice(at)),
toDashed: () =>
nwProxy(str.replace(/[A-Z]/g, a => `-${a.toLowerCase()}`.toLowerCase())),
toUndashed: () => nwProxy([...str.toLowerCase()]
.reduce((acc, v) => {
const isDash = v === `-`;
acc = { ...acc,
s: acc.s.concat(isDash ? `` : acc.nextUpcase ? v.toUpperCase() : v)
};
acc.nextUpcase = isDash;
return acc;
}, {
s: '',
nextUpcase: false
}).s),
valueOf: () => str,
};
function nwProxy(nwStr) {
str = nwStr || str;
return new Proxy(obj2Proxy, proxyHandler);
}
return nwProxy();
}
// a wrapped number with chainable methods
function myNum(n = 1) {
const proxyHandler = proxyHandlerFactory();
const obj2Proxy = {
add: x => nwProxy(n + x),
divide: x => nwProxy(n / x),
multiply: x => nwProxy(n * x),
roundDown: () => nwProxy(Math.floor(n)),
roundUp: () => nwProxy(Math.ceil(n)),
valueOf: () => n,
};
function nwProxy(nwN) {
n = nwN || n;
return new Proxy(obj2Proxy, proxyHandler);
}
return nwProxy();
}
// ---- for demo ---- //
function Logger() {
const report =
document.querySelector("#report") ||
document.body.insertAdjacentElement(
"beforeend",
Object.assign(document.createElement("pre"), {
id: "report"
})
);
return (...args) => {
if (!args.length) {
return report.textContent = ``;
}
args.forEach(arg =>
report.insertAdjacentHTML(`beforeEnd`,
`<div>${arg.replace(/\n/g, `<br>`)}</div>`)
);
};
}
body {
font: 12px/15px verdana, arial;
margin: 0.6rem;
}
code {
color: green;
}
I have this simple function that I am looking to simplify further:
setAreas() {
this.areas = ipcRenderer.sendSync('request', 'areas').map(_area => {
_area.locations = _area.locations.map(locationId => this.getLocation(locationId))
return _area
})
}
Is there any way to reduce this to a one-liner by performing the map on _area.locations and returning the updated _area?
One option would be to use Object.assign, which will return the base object being assigned to:
setAreas() {
this.areas = ipcRenderer.sendSync('request', 'areas').map(_area => (
Object.assign(_area, { locations: _area.locations.map(locationId => this.getLocation(locationId)) })
));
}
But that's not so readable. I prefer your current code.
Note that .map is appropriate for when you're transfoming one array into another. Here, you're only mutating every object in an existing array; forEach is more appropriate:
setAreas() {
this.areas = ipcRenderer.sendSync('request', 'areas');
this.areas.forEach((a) => a.locations = a.locations.map(locationId => this.getLocation(locationId)))
}
If getLocation only accepts one parameter, you can golf
a.locations = a.locations.map(locationId => this.getLocation(locationId))
down to
a.locations = a.locations.map(this.getLocation.bind(this))
(you could even remove the .bind(this) if this context isn't needed)
You can use destructuring
setAreas() {
this.areas = ipcRenderer.sendSync('request', 'areas').map(_area => ({
..._area, locations: _area.location.map(locationId => this.getLocation(locationId))
})
}
The array elements in Bind are undefined even though there is data in bindInfo.
Any suggestions.
let bindinfo =
{
clientid: 1,
clientname: 'Web Client',
nowutc: now_utc,
bindlist: Bindings(this.props.bindDetails)
}
Bindings(bin)
{
var Bind = [];
Bind = bin.map(bindItem => {
var bindInfo;
bindInfo = {
bindingid: bindItem.bindId,
function: bindItem.functionName,
aggregation: bindItem.aggregation,
datalimit: bindItem.datalimit
}
Bind.push(bindInfo);
});
return Bind;
}
After the .map operation completes, bind is assigned to the result of the .map - that is, the element returned on each iteration of .map is the new array elemenet. But you never return anything from the mapper function, so even if you initially push to Bind, your later reassignment of Bind resets it.
Either use .map properly and return the item on each iteration:
const Bind = bin.map(bindItem => {
return {
bindingid: bindItem.bindId,
function: bindItem.functionName,
aggregation: bindItem.aggregation,
datalimit: bindItem.datalimit
};
});
Or (not recommended) use forEach rather than .map, and don't reassign Bind:
const Bind = [];
bin.forEach(bindItem => {
var bindInfo = {
bindingid: bindItem.bindId,
function: bindItem.functionName,
aggregation: bindItem.aggregation,
datalimit: bindItem.datalimit
}
Bind.push(bindInfo);
});
Use .map when you want to transform one array into another through the result of the call of .map. Otherwise, for generic looping, use forEach.
I have been learning about spread arguments and I found it rather surprising that when using: cur.func.call(null, ...cur.arg, acc), args) that if you have an empty array no argument is passed to add().
Is it possible to reproduce this without using the ... seen in this line of code cur.func.call(null, ...cur.arg, acc), args)
class Lazy {
constructor() {
this.builtUpFuncs = [];
}
add(...newArgs) {
console.info(newArgs)
this.builtUpFuncs.push({
func: newArgs[0],
arg: typeof newArgs[1] === "undefined" ? [] : [newArgs[1]],
});
return this;
}
evaluate(target) {
return target.map((args) =>
this.builtUpFuncs.reduce((acc, cur) =>
cur.func.call(null, ...cur.arg, acc), args)
);
}
}
const lazyClass = new Lazy();
const returnValue =
lazyClass
.add(function timesTwo(a) { return a * 2; })
.add(function plus(a, b) { return a + b; }, 1)
.evaluate([1, 2, 3]);
console.info(returnValue);
If you want to avoid the spread syntax, the traditional way is to use apply instead of call:
cur.func.apply(null, cur.arg.concat(acc))
Note that the args part is the second argument to reduce, not this function call.
In either syntax it is normal that if cur.arg is an empty array, the only argument passed is acc.