We Keep Coding

Can't console log in short hand arrow function when using Typescript

When debugging an arrow function in javascript you can write like this:
const sum = (a, b) => console.log(a, b) || a + b;
This will first console log a and b and then return the actual result of the function.
But when using Typescript it will complain about console log not being able to be tested for truthiness:
An expression of type 'void' cannot be tested for truthiness
This feels like a valid complaint, but at the same time it's a neat trick to debug arrow functions and I would very much like to not have to add curly braces everywhere I have arrow functions if possible.
Even though the log is only there temporarily, are there any way to get Typescript to accept this pattern without using #ts-ignore?

Change it to use comma operator:
const logger = (a, b) => (console.log(a, b), a + b);

Casting the console.log expression to a boolean should work around this.
For example:
const sum = (a, b) => Boolean(console.log(a, b)) || a + b;
Since the expression returns undefined, casting it to boolean would always be false, ensuring any following expression will be returned.

You could overwrite the console type beforehand. Do it once, and you won't have to modify any of your other calls to console.log:
declare const console = {
log: (...args: unknown[]) => undefined,
// etc
};
const sum = (a: number, b: number) => console.log(a, b) || 'foo';
const another = (a: number, b: number) => console.log(a, b) || 'bar';

I usually use as below:
const sum = (a, b) => a + b && console.log(a, b);
this is my suggestion. :D

Can I bypass optional parameters and still set a rest parameter in Javascript?

I have a function with a required parameter (A), some optional parameters (B,C) and a rest parameter (Z)
const doTheThing = (a, b = 'B', c = 'C', ...z) => {
console.log(a, b, c, z);
}
I have cases where I would like to call the function without specifying the optional parameters, but still specify the rest parameter "Z"
doTheThing('A', ...'Z');
Expected Output:
'A', 'B', 'C', 'Z'
Unfortunately, I get the following:
Parsing error: Shorthand property assignments are valid only in destructuring patterns
How do I go about solving this?

JavaScript doesn't allow supplying named parameters or any sort of parameter skipping, so it's not possible to do what you want with the function in its current form. Here are some alternatives, though:
Plain JavaScript approach: a configuration Object as parameter
Instead of accepting multiple parameters
func = (a, b, c) => { /* operate with parameters */ }
func("One", "Two", "Three")
your function will instead accept an object
func = config => { /* operate with config */ }
func({a: "One", b: "Two", c: "Three"})
This is a common pattern in JavaScript because it allows you to almost name your variables and doesn't require you pass them in the correct order.. It makes it easy to pass a large quantity of them and it can also make it easy to default them, too.
const doTheThing = (config) => {
const defaultProperties = {
b: "B",
c: "C"
}
const {a, b, c, ...rest} = Object.assign({}, defaultProperties, config);
const z = Object.values(rest); //extract their values, otherwise you get an object
console.log(a, b, c, z);
}
doTheThing({a: "A", x: "X", y: "Y", z: "Z"});
It is slightly clunky to use with rest parameters but not unworkable.
However, it does mean that it may be harder to see what parameters you can pass and what is required, if you have a large number of them.
Object Oriented approach: Builder pattern
You create a builder object - it serves to hold values until you call the final method at which point it takes all parameters and constructs an object in one go.
This is how more Object Oriented languages handle having a multitude of parameters where you can even have some of them optional. It's not really common to see builders defined like this in JavaScript but it's not too strange, either. If you use classes already or even TypeScript, then this is probably a better fit.
class DoTheThingBuilder {
constructor() {
this.a = null;
this.b = "B";
this.c = "C";
this.z = null;
}
withA(a) {
this.a = a;
return this;
}
withB(b) {
this.b = b;
return this;
}
withC(c) {
this.c = c;
return this;
}
withEverythingElse(...z) {
this.z = z;
return this;
}
doTheActualThing() {
const {a, b, c, z} = this;
console.log(a, b, c, z);
}
}
const builder = new DoTheThingBuilder();
builder
.withA("A")
.withEverythingElse("X", "Y", "Z")
.doTheActualThing();
As you can see, this can be pretty verbose for some simple tasks. It is a big overkill for this example, but perhaps in actual usage, you might find it helps.
I've deviated a bit from the usual approach - normally, you would set all parameters needed with the builder and finally call .build() which constructs an object. In this case, I basically renamed build to doTheActualThing and it's executing the function.
Functional approach: Currying
The concept of currying is quite simple - instead of having one function that accepts several parameters
func = (a, b, c) => { /* operate with parameters */ }
you have a function that takes one parameter, that returns a function that takes the second parameter, that returns another function, etc., until all parameters are satisfied, at which point the full function is executed.
func = a => b => c => { /* operate with parameters */ }
In many ways, this is the functional equivalent of the OO Builder pattern.
const doTheThing = (a) =>
(b = "B") =>
(c = 'C') =>
(...z) => console.log(a, b, c, z);
doTheThing("A")()()("X", "Y", "Z");
This way you can skip the second and third parameter by not supplying them and you'd get the defaults. It's also way shorter than a builder. However, reading the function can be a bit weird.

That is not possible and very error-prone. The point of naming your parameters is to know what they are and in what order they are coming.
You could achieve something similar using object as a function parameter:
const doTheThing = ({ a, b = "B", c = "C", others = {} }) => {
const params = { a, b, c, ...others }; // this will merge your parameters into one object
console.log(params);
}
doTheThing({ a: "A", others: { z: "Z" }});
This will log A, B, C, Z. Demo: https://codepen.io/tomekbuszewski/pen/jQqmNL?editors=0011

JavaScript brackets many functions

I have 4 functions calling one after another:
var res = f1(f2(f3(f4(f5(a, b), 1, 2, true))))
Is there any cleaner way to refactor this.
I want to be able to see the parameters and the code should be minimal.
I can do it like this:
let s1 = f5(a, b);
let s2 = f4(s1, 1, 2, true);
let res = f1(f2(f3(s2)))
But i dont want to introduce another variables.
can i do it short and easy to read/refactor.
Thanks

var res = f1(f2(f3(f4(f5(a, b), 1, 2, true))))
Is there any cleaner way to refactor this. I want to be able to see the parameters and the code should be minimal.
That seems pretty minimal to me.
since f1, f2 and f3 have only their result as parameter, you could merge them into one function f123.
But I don't see how this would be really helpful for you as a developer.
5 functions calls is not that horrible.
I can do it like this:
let s1 = f5(a, b);
let s2 = f4(s1, 1, 2, true);
let res = f1(f2(f3(s2)))
But i dont want to introduce another variables.
I very much like the way with additional intermediate variables. this make the code easy to read for another developer (including yourself 2 weeks later from now)
I don't understand why it is a problem for you. Could you elaborate more ?
Another possiblity is to use some pipelining machinery. That would absolutely not be minimal code, but that could make the code clearer by making the logical order of operations more apparent.
For instance : Observable (RxJS)
Observable.of(f5(a,b))
.map(r5 => f4(r5, 1, 2, true))
.map(r4 => f3(r4))
.map(r3 => f2(r3))
.map(r2 => f1(r2))
.subscribe(r => console.log(r))
But in a sense, you would have some "intermediate variables" represented by the parameter of the lambda expressions.

var res = f1(
f2(
f3(
f4(
f5(a, b),
1,
2,
true
)
)
)
);
or just save the results in vars...
var result_f5 = f5(a, b);
var result_f4 = f4(result_f5, 1, 2, true);
var result_f3 = f3(result_f4);
var result_f2 = f2(result_f3);
var result_f1 = f1(result_f2);
I prefer the second way...
There is no other "quicker" or "cleaner" way

You could reduce from the right side, but it needs the nested function f4 with f5 as start value.
var x = [f1, f2, f3].reduceRight((x, f) => f(x), f4(f5(a, b), 1, 2, true));
// ^^^^^^^^^^^^^^^^^^^^^^^^ start value
// ^^^^^^^^^^^^ functions

IMHO the most readable and clean way is to add another function that makes this sequence of function calls. I.e:
function f0 (a, b, c, d, e) { return f1(f2(f3(f4(f5(a, b), c, d, e)))); }
then simply call:
var res = f0(a, b, 1, 2, true);

// consider this function as small library or hidden part.
// it's composition/high-order function
var f = (func, ...rest) => {
if(typeof func === "function") {
if(this.__res)
this.__res = func(this.__res, ...rest)
else
this.__res = func(...rest)
return f
} else {
var result = this.__res
this.__res = undefined
return result
}
}
// the real part you want is here
var res = f(f5, a, b)(f4, 1,2,true)(f3)(f2)(f1)()
I know you don't want to introduce another variables.
but when you consider function f as hidden part of a library or module/package, f(f5, a, b)(f4, 1,2,true)(f3)(f2)(f1)() is more readable and clean, isn't it?

How to spread an object to a function as arguments?

I have an object an a function which accept arguments, I would like to spread the objects so each property is an argument in that function.
What am I doing wrong in my code?
const args = {
a: 1
b: 2
}
const fn = (a, b) => a + b
// i am trying with no success
console.log(fn(...args))

Although the other answers are correct, they change the function signature to accept an object instead of 2 separate arguments. Here is how to use an object's values as function arguments without altering the function's signature. This requires Object.values (ES 2017) and the spread operator to be available in your runtime.
const args = {
a: 1,
b: 2
}
const fn = (a, b) => a + b
fn(...Object.values(args));
Keep in mind this will work only in your specific case, since Object.values returns the values of all object keys and doesn't guarantee alphabetical sort order. If you want to take only the values of properties which are named a and b, you can map over Object.keys(args) and filter only those values.

You can use ES6 object destructuring on passed parameter and then just pass your object.
const args = {a: 1, b: 2}
const fn = ({a, b}) => a + b
console.log(fn(args))
You can also set default values for those properties.
const args = {b: 2}
const fn = ({a = 0, b = 0}) => a + b
console.log(fn(args))

You need to do it like this
const fn = ({a, b}) => a + b

The other answers are certainly applicable in particular situations, still have some limitations as well. Therefore I'd like to propose a different approach. The idea is to add to the object a method that returns an array of desired parameters in the appropriate order. That method is executed when passed to target function as argument and result destructured with spread operator.
const args = {
a: 1,
b: 2,
argumentify: function () {
return [this.a, this.b];
}
};
const fn = (a, b) => a + b;
console.log(fn(...args.argumentify()));
Benefits of this approach:
1) Does not require changes of the target function's signature, so can be used to ANY function.
2) Guarantees correct order of parameters (which is (as I understand) not guaranteed when spreading object).
3) Can itself be parametrized if needed.

Turn the args to an array should work:
const args = [1, 2]
const fn = (a, b) => a + b
console.log(fn(...args))
See Replace apply() for details.

How do I include an argument based on a condition (in CoffeeScript/JavaScript)?

I've written a CoffeeScript function that resembles this contrived example:
my_func = (a, b, use_args = false) ->
if use_args?
other_func 'foo', a, b, 'bar'
else
other_func 'foo', 'bar'
This compiles to the following JavaScript:
var my_func;
my_func = function(a, b, use_args) {
if (use_args == null) {
use_args = false;
}
if (use_args != null) {
return other_func('foo', a, b, 'bar');
} else {
return other_func('foo', 'bar');
}
};
Is there a DRY approach to this function that would eliminate the duplicate call to other_func? Something like:
my_func = (a, b, use_args = false) ->
other_func 'foo', a if use_args?, b if use_args?, 'bar'
but that's actually syntactically correct? Hopefully I'm not missing something obvious here. I'm not sure if CoffeeScript provides a handy way to do this, or if there's just a better JavaScript pattern I should be using.
Incidentally, I can't modify other_func to use different parameters, since it's actually _gaq.push(), part of the Google Analytics library that adds tracking information to a queue.

First off, I think the code in your original question is fine (other than the = false in the argument list—see my comment). It's perfectly efficient and readable. But if the repetition really bothers you, read on.
Chris is on the right track in his answer. Since this is CoffeeScript, there are some syntactic sugars you can take advantage of:
Instead of arr.splice(1, 0, [a, b]), you can write arr[1...1] = [a, b].
Instead of func.apply(null, arr), you can simply write func arr....
So, combining those, you can get your function down to 3 short, repetition-free lines:
my_func = (a, b, use_args) ->
args = [foo, bar]
args[1...1] = [a, b] if use_args
other_func args...
Notice that you don't have to do a use_args? check; if it's null or undefined, it'll be coerced to false automatically (by JavaScript) for if use_args.

Use a combination of:
Array.splice() to inject the additional parameters in to an array of params, and
apply() to call the function with an array of parameters.
Here's a demo:
http://jsfiddle.net/ZSVtB/

var my_func = function(a, b, use_args) {
var args = []
args.push('foo')
use_args && args.push(a, b)
args.push('bar')
return other_func.apply(null, args)
}
Okay, no with from now on.