We Keep Coding

How to override object destructuring for ES class just like array destructuring

TL;DR
How do I make {...myCls} return {...myCls.instanceVar}?
Actual Question
I'm trying to implement a custom version of *[Symbol.iterator]() { yield this.internalObj; } such that object-spreads of my class perform an object-spread operation to myClass.instanceVar.
Specifically, I want to make {...(new MyClass('a', 'b'}))} return {...(new MyClass('a', 'b'})).innerVal}. However, it seems we cannot override object-spread logic, we can only override array-spread logic.
For example, this is a simple class to create an Array wrapper
class MyArray {
innerArray = [];
getItem(index) {
return (index < this.innerArray.length) ? this.innerArray[index] : null;
}
setItem(index, val) {
const innerArrayLength = this.innerArray.length;
return (index < innerArrayLength)
?
this.innerArray[index] = val
:
this.innerArray.push(val)
;
}
removeItem(index) {
return this.innerArray.splice(index, 1);
}
clear() {
this.innerArray = [];
}
get length() {
return this.innerArray.length;
}
*[Symbol.iterator]() {
return yield* this.innerArray;
}
}
// Usage:
let myArr = new MyArray() // undefined
myArr.setItem(0, 'a') // 1
myArr.setItem(10, 'b') // 2
console.log([...myArr]) // (2) [ 0 => "a", 1 => "b" ]
However, what I want is a way to do that with object class instance variables instead of array class instance variables.
For example, this is what happens when I try to implement a StorageMock class
class StorageMock {
storage = {};
setItem(key, val) {
this.storage[key] = val;
}
getItem(key) {
return (key in this.storage) ? this.storage[key] : null;
}
removeItem(key) {
delete this.storage[key];
}
clear() {
this.storage = {};
}
get length() {
return Object.keys(this.storage).length;
}
key(index) {
return Object.keys(this.storage)[index] || null;
}
*[Symbol.iterator]() {
return yield* Object.entries(this.storage).map(([ k, v ]) => ({ [k]: v }));
}
}
let myStore = new StorageMock() // undefined
myStore.setItem('a', 'hello'); // undefined
myStore.setItem('b', 'world'); // undefined
console.log({...myStore}); // { storage: { a: "hello", b: "world" } } <== PROBLEM
// Doing the same with localStorage prints out:
// { a: "hello", b: "world" }
// instead of
// { storage: { a: "hello", b: "world" } }
In this case, the Storage API works to spread storage entries when spreading (local|session)Storage, but creating a special StorageMock class does not.
Point being that I can't make {...storageMockInstance} === {...(storageMockInstance.storage)}. So how does one override the object-spreading syntax of an ES class?
References/attempts
I've tried various combinations of Object.create(), Object.definePropert(y|ies)(), variants of the in operator (all of which have relevant access-ability defined here), all depending on the for...in syntax defininition from the generic-spreading-syntax proposal. But all I've found is that only "standard" destructuring can be used according to references 1, 2, and 3.
But there has to be a way to do this via ESNext classes. None of my attempts to accomplish the ability to use actual native class features instead of those available through AMD module syntax. It doesn't seem reasonable that I couldn't override these fields in a way similar to how other languages do so. i.e. If I could only override how the JS for..in loop works in the same way that Python allows overriding it, then I could spread the inner variable through a forIn() method just like toString() or toJSON().
Note
Please do not respond with #babel/polyfill, core-js, or babel-jest for this question. It's not only meant for (local|session)Storage, but also just a question on a high-level problem.

Short answer
You cannot.
Unless you cheat. But might not be worth it.
Actual answer
The term "array destructuring" might be a slightly misleading. It actually always starts by getting the iterator of the object and draws values from there until all bindings are satisfied. In fact, it is not only supposed to be used on arrays.
const obj = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
yield 4;
}
};
//1. take iterator
//2. take first three values
const [a, b, c] = obj;
//1. take iterator (do not continue the old one)
//2. take the first value
const [x] = obj;
console.log(a, b, c, x); // 1, 2, 3, 1
Object destructuring, however, does not have a similar mechanism. When using {...x} the abstract operation CopyDataProperties is performed. As the name suggests, it will copy properties, rather than invoke some mechanism to get the data to copy.
The properties that will be copied would be
Own - not coming from the prototype.
A data properties as opposed to an accessor properties (a property defined by a getter and/or setter).
Enumerable.
Not part of the excludedNames parameter to the abstract operation. Note: this is only relevant when using spread with a rest target, like const {foo, bar, ...rest} = obj;
What could be done is to lie to the runtime about each of these things. This can be done using a Proxy and you need to change the following things:
ownKeys trap to switch what keys would be used for the destructuring.
getOwnPropertyDescriptor trap to make sure the properties are enumerable.
get trap to give the value for the property.
This can be done as a function like this, for example and will make an object behave as if you are using one of its property values:
const obj = {
a: 1,
b: 2,
c: 3,
myProp: {
d: 4,
e: 5,
f: 6
}
};
const x = { ...lieAboutSpread("myProp", obj) };
console.log(x);
function lieAboutSpread(prop, obj) {
//this will be the false target for spreading
const newTarget = obj[prop];
const handler = {
// return the false target's keys
ownKeys() {
return Reflect.ownKeys(newTarget);
},
// return the false target's property descriptors
getOwnPropertyDescriptor(target, property) {
return Reflect.getOwnPropertyDescriptor(newTarget, property);
},
// return the false target's values
get(target, property, receiver) {
return Reflect.get(newTarget, property, receiver);
}
}
return new Proxy(obj, handler);
}
So, this is possible. I am however, not sure it is of that much benefit to simply doing { ...obj.myProp }. Moreover, the above function could be re-written in a way that does not "lie" at all. But it becomes extremely boring:
const obj = {
a: 1,
b: 2,
c: 3,
myProp: {
d: 4,
e: 5,
f: 6
}
};
const x = { ...lieAboutSpread("myProp", obj) };
console.log(x);
function lieAboutSpread(prop, obj) {
//this will be the target for spreading
return obj[prop];
}
In my opinion, this highlights why the artificial way of masking the object is an overkill.

(Number | undefined)[] is not assignable to Number[]

I'm having a problem with types in typescript.
So i have an array of som ID's i get from some checkboxes. This array could also be empty.
example of values that can be returned from submit():
const responseFromSubmit = {
1: {
id: "1",
value: "true"
},
2: {
id: "2",
value: "false"
},
3: {
id: "3",
value: "false"
}
};
const Ids: number[] = Object.values(submit()!)
.map(formfield => {
if (formfield.value === 'true') {
return Number(formfield.id);
}
})
.filter(id => id != undefined);
So in this case the Ids would be Ids = [1].
I have tried several solution like trying to change the value of Ids after the codeblock above by checking if Ids is undefined:
if (ids.length > 0){
ids = []
}
Through this code the constant Ids is type of (Number | undefined)[], how can i make it always be of type number[] even if its empty?
Here is a solution, but I dont like it at all:
const Ids: number[] = Object.values(submit()!)
.map(formfield => {
if (formfield.value === 'true') {
return Number(formfield.id);
} else {
return 0;
}
})
.filter(id => id != 0);
In my case the formfield.id will never have value 0, so it is possible to filter all elements with the value 0. So I would not recomend this solution. but hey, it works, right? ¯\_(ツ)_/¯

The problem
The main issue is the .filter() signature. It will always return an array of the same type as what you begun with. It is not possible for the TypeScript compiler to guaranteed anything else. Here is an example:
const arr/*: (string | number) */ = ["one", 2, 3, "four", 5, 6];
const numbers/*: number[]*/ = arr.filter(x => typeof x === "number");
console.log(numbers);
Playground Link
This works if you disregard types but it's functionally equivalent to the following:
const arr/*: (string | number)[]*/ = ["one", 2, 3, "four", 5, 6];
const numbers/*: number[]*/ = arr.filter(x => x !== "one");
console.log(numbers);
Playground Link
In both cases you have an array of mixed types and some filtering function. In order to guarantee that the result would be only a specific type, you need to examine the code and make inferences. This is not how the compiler works, however - calling .filter() on Array<T | U> can only produce Array<T | U> again, the generic is unchanged.
Solution
What you can do is flip the order of your .map and .filter. You'll need to re-write them but it will work correctly in term of types. I also makes the logic more coherent - right now you are double filtering implicitly. The map() will only transform some types, not others, thus doing an indirect filter. The actual .filter() call then sieves the unmapped/soft-filtered values.
The correct logic and correct type preservation would thus be the following:
const Ids: number[] = Object.values(submit()!)
.filter(formfield => formfield.value === 'true')
.map(formfield => Number(formfield.id))
Playground Link
This is shorter and more correct form of the logic you want.
The real filtering condition formfield.value === 'true' is extracted by itself in the .filter() call.
.filter() runs first so you're guaranteed to have the have the same types from compiler perspective and you've just shrunk the list to only the items you're interested in.
.map() not does exactly what it's meant to - a 1:1 mapping for each value of the array. It doesn't need to do any logic more complex. So, it doesn't need to concern itself with what is or isn't correct in order to carry out the transformation.

Try to add:
if (formfield.value === 'true') {
return Number(formfield.id);
}
return null;
under the return in the if.
The complete code:
const Ids: number[] = Object.values(submit()!)
.map(formfield => {
if (formfield.value === 'true') {
return Number(formfield.id);
}
return null;
})
.filter(id => id != undefined);
EDIT:
A better way to check if one variable is undefined is with typeof operator:
typeof id !== 'undefined'

I can't answer your question directly, but allow me to suggest a different approach:
const ids = Object.keys( obj || {} )
.reduce( function(acc,cur) {
if( obj[cur] ) acc.push(cur);
return acc
},
[]
)
It sounds like you want to extract a subset of values from your object. This will return the keys that are truthy. Instead of acc.push(cur) you would want to push the equivalent of Number(formfield.id). The obj || {} at the top allows 'obj' to be undefined.

How to pass props from a container component to a class component [duplicate]

In my code, I deal with an array that has some entries with many objects nested inside one another, where as some do not. It looks something like the following:
// where this array is hundreds of entries long, with a mix
// of the two examples given
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];
This is giving me problems because I need to iterate through the array at times, and the inconsistency is throwing me errors like so:
for (i=0; i<test.length; i++) {
// ok on i==0, but 'cannot read property of undefined' on i==1
console.log(a.b.c);
}
I am aware that I can say if(a.b){ console.log(a.b.c)}, but this is extraordinarily tedious in cases where there are up to 5 or 6 objects nested within one another. Is there any other (easier) way that I can have it ONLY do the console.log if it exists, but without throwing an error?

Update:
If you use JavaScript according to ECMAScript 2020 or later, see optional chaining.
TypeScript has added support for optional chaining in version 3.7.
// use it like this
obj?.a?.lot?.of?.properties
Solution for JavaScript before ECMASCript 2020 or TypeScript older than version 3.7:
A quick workaround is using a try/catch helper function with ES6 arrow function:
function getSafe(fn, defaultVal) {
try {
return fn();
} catch (e) {
return defaultVal;
}
}
// use it like this
console.log(getSafe(() => obj.a.lot.of.properties));
// or add an optional default value
console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

What you are doing raises an exception (and rightfully so).
You can always do:
try{
window.a.b.c
}catch(e){
console.log("YO",e)
}
But I wouldn't, instead think of your use case.
Why are you accessing data, 6 levels nested that you are unfamiliar of? What use case justifies this?
Usually, you'd like to actually validate what sort of object you're dealing with.
Also, on a side note you should not use statements like if(a.b) because it will return false if a.b is 0 or even if it is "0". Instead check if a.b !== undefined

If I am understanding your question correctly, you want the safest way to determine if an object contains a property.
The easiest way is to use the in operator.
window.a = "aString";
//window should have 'a' property
//lets test if it exists
if ("a" in window){
//true
}
if ("b" in window){
//false
}
Of course you can nest this as deep as you want
if ("a" in window.b.c) { }
Not sure if this helps.

Try this. If a.b is undefined, it will leave the if statement without any exception.
if (a.b && a.b.c) {
console.log(a.b.c);
}

If you are using lodash, you could use their has function. It is similar to the native "in", but allows paths.
var testObject = {a: {b: {c: 'walrus'}}};
if(_.has(testObject, 'a.b.c')) {
//Safely access your walrus here
}

If you use Babel, you can already use the optional chaining syntax with #babel/plugin-proposal-optional-chaining Babel plugin. This would allow you to replace this:
console.log(a && a.b && a.b.c);
with this:
console.log(a?.b?.c);

If you have lodash you can use its .get method
_.get(a, 'b.c.d.e')
or give it a default value
_.get(a, 'b.c.d.e', default)

I use undefsafe religiously. It tests each level down into your object until it either gets the value you asked for, or it returns "undefined". But never errors.

This is a common issue when working with deep or complex json object, so I try to avoid try/catch or embedding multiple checks which would make the code unreadable, I usually use this little piece of code in all my procect to do the job.
/* ex: getProperty(myObj,'aze.xyz',0) // return myObj.aze.xyz safely
* accepts array for property names:
* getProperty(myObj,['aze','xyz'],{value: null})
*/
function getProperty(obj, props, defaultValue) {
var res, isvoid = function(x){return typeof x === "undefined" || x === null;}
if(!isvoid(obj)){
if(isvoid(props)) props = [];
if(typeof props === "string") props = props.trim().split(".");
if(props.constructor === Array){
res = props.length>1 ? getProperty(obj[props.shift()],props,defaultValue) : obj[props[0]];
}
}
return typeof res === "undefined" ? defaultValue: res;
}

I like Cao Shouguang's answer, but I am not fond of passing a function as parameter into the getSafe function each time I do the call. I have modified the getSafe function to accept simple parameters and pure ES5.
/**
* Safely get object properties.
* #param {*} prop The property of the object to retrieve
* #param {*} defaultVal The value returned if the property value does not exist
* #returns If property of object exists it is returned,
* else the default value is returned.
* #example
* var myObj = {a : {b : 'c'} };
* var value;
*
* value = getSafe(myObj.a.b,'No Value'); //returns c
* value = getSafe(myObj.a.x,'No Value'); //returns 'No Value'
*
* if (getSafe(myObj.a.x, false)){
* console.log('Found')
* } else {
* console.log('Not Found')
* }; //logs 'Not Found'
*
* if(value = getSafe(myObj.a.b, false)){
* console.log('New Value is', value); //logs 'New Value is c'
* }
*/
function getSafe(prop, defaultVal) {
return function(fn, defaultVal) {
try {
if (fn() === undefined) {
return defaultVal;
} else {
return fn();
}
} catch (e) {
return defaultVal;
}
}(function() {return prop}, defaultVal);
}

Lodash has a get method which allows for a default as an optional third parameter, as show below:
const myObject = {
has: 'some',
missing: {
vars: true
}
}
const path = 'missing.const.value';
const myValue = _.get(myObject, path, 'default');
console.log(myValue) // prints out default, which is specified above
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

Imagine that we want to apply a series of functions to x if and only if x is non-null:
if (x !== null) x = a(x);
if (x !== null) x = b(x);
if (x !== null) x = c(x);
Now let's say that we need to do the same to y:
if (y !== null) y = a(y);
if (y !== null) y = b(y);
if (y !== null) y = c(y);
And the same to z:
if (z !== null) z = a(z);
if (z !== null) z = b(z);
if (z !== null) z = c(z);
As you can see without a proper abstraction, we'll end up duplicating code over and over again. Such an abstraction already exists: the Maybe monad.
The Maybe monad holds both a value and a computational context:
The monad keeps the value safe and applies functions to it.
The computational context is a null check before applying a function.
A naive implementation would look like this:
⚠️ This implementation is for illustration purpose only! This is not how it should be done and is wrong at many levels. However this should give you a better idea of what I am talking about.
As you can see nothing can break:
We apply a series of functions to our value
If at any point, the value becomes null (or undefined) we just don't apply any function anymore.
const abc = obj =>
Maybe
.of(obj)
.map(o => o.a)
.map(o => o.b)
.map(o => o.c)
.value;
const values = [
{},
{a: {}},
{a: {b: {}}},
{a: {b: {c: 42}}}
];
console.log(
values.map(abc)
);
<script>
function Maybe(x) {
this.value = x; //-> container for our value
}
Maybe.of = x => new Maybe(x);
Maybe.prototype.map = function (fn) {
if (this.value == null) { //-> computational context
return this;
}
return Maybe.of(fn(this.value));
};
</script>
Appendix 1
I cannot explain what monads are as this is not the purpose of this post and there are people out there better at this than I am. However as Eric Elliot said in hist blog post JavaScript Monads Made Simple:
Regardless of your skill level or understanding of category theory, using monads makes your code easier to work with. Failing to take advantage of monads may make your code harder to work with (e.g., callback hell, nested conditional branches, more verbosity).
Appendix 2
Here's how I'd solve your issue using the Maybe monad from monetjs
const prop = key => obj => Maybe.fromNull(obj[key]);
const abc = obj =>
Maybe
.fromNull(obj)
.flatMap(prop('a'))
.flatMap(prop('b'))
.flatMap(prop('c'))
.orSome('🌯')
const values = [
{},
{a: {}},
{a: {b: {}}},
{a: {b: {c: 42}}}
];
console.log(
values.map(abc)
);
<script src="https://www.unpkg.com/monet#0.9.0/dist/monet.js"></script>
<script>const {Maybe} = Monet;</script>

In str's answer, value 'undefined' will be returned instead of the set default value if the property is undefined. This sometimes can cause bugs. The following will make sure the defaultVal will always be returned when either the property or the object is undefined.
const temp = {};
console.log(getSafe(()=>temp.prop, '0'));
function getSafe(fn, defaultVal) {
try {
if (fn() === undefined || fn() === null) {
return defaultVal
} else {
return fn();
}
} catch (e) {
return defaultVal;
}
}

You can use optional chaining from the ECMAScript standart.
Like this:
a?.b?.c?.d?.func?.()

I answered this before and happened to be doing a similar check today. A simplification to check if a nested dotted property exists. You could modify this to return the value, or some default to accomplish your goal.
function containsProperty(instance, propertyName) {
// make an array of properties to walk through because propertyName can be nested
// ex "test.test2.test.test"
let walkArr = propertyName.indexOf('.') > 0 ? propertyName.split('.') : [propertyName];
// walk the tree - if any property does not exist then return false
for (let treeDepth = 0, maxDepth = walkArr.length; treeDepth < maxDepth; treeDepth++) {
// property does not exist
if (!Object.prototype.hasOwnProperty.call(instance, walkArr[treeDepth])) {
return false;
}
// does it exist - reassign the leaf
instance = instance[walkArr[treeDepth]];
}
// default
return true;
}
In your question you could do something like:
let test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];
containsProperty(test[0], 'a.b.c');

I usually use like this:
var x = object.any ? object.any.a : 'def';

You can avoid getting an error by giving a default value before getting the property
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];
for (i=0; i<test.length; i++) {
const obj = test[i]
// No error, just undefined, which is ok
console.log(((obj.a || {}).b || {}).c);
}
This works great with arrays too:
const entries = [{id: 1, name: 'Scarllet'}]
// Giving a default name when is empty
const name = (entries.find(v => v.id === 100) || []).name || 'no-name'
console.log(name)

Unrelated to the question's actual question, but might be useful for people coming to this question looking for answers.
Check your function parameters.
If you have a function like const x({ a }) => { }, and you call it without arguments x(); append = {} to the parameter: const x({ a } = {}) => { }.
What I had
I had a function like this:
const x = ({ a }) => console.log(a);
// This one works as expected
x({ a: 1 });
// This one errors out
x();
Which results in "Uncaught TypeError: Cannot destructure property 'a' of 'undefined' as it is undefined."
What I switched it to (now works).
const x = ({ a } = {}) => console.log(a);
// This one works as expected
x({ a: 1 });
// This now works too!
x();

How to check for deeply nested props

I often find myself having to build long chains before mapping over an array to check if it's defined:
this.props.photos &&
this.props.photos.activePhotos &&
this.props.photos.activePhotos.map(...
If I leave out the this.props.photos && and this.props.photos.activePhotos.length && my entire application will crash if photos or activePhotos is undefined.
Is there a way to check for these props without having to check every parent object/array of my end item?

January 2020 Update
According to the TC39 proposal, optional chaining will be available shortly within the JavaScript standard (currently in stage 4).
The syntax will be the following :
const active = this.props?.photos?.activePhotos
Or the following in your case :
(this.props?.photos?.activePhotos || []).map(...
While this is being implemented, you may want to take a look at Typescript or js compilers to try out the latest ES features
Old answer
An alternative could be to use a default value for your props when deconstructing them :
const { photos = {} } = this.props
const { activePhotos = [] } = photos
activePhotos.map(/* */)
In this case, if photos is not defined, it will be replaced with an empty object. Trying to get the activePhotos out of it will give you an empty array, allowing you to map on it in any case.

I guess you refer to optional chaining, which is stage 1 of TC39
https://github.com/tc39/proposal-optional-chaining
EDIT: The proposal is now in stage 4 (as of January 2020) and will be added into the JavaScript standard

I'm seeing two possible approaches, according to the level of nesting.
#1. If you have many nested props levels:
You can use lodash.get.
Here's how to render activePhotos, only if they exists:
// Please note how do we pass default `[]` as third parameter
// in order to not break the `.map` function
_.get(this.props, 'photos.activePhotos', []).map(...)
If you only want to check for deeply nested pros, then you can use lodash.has method:
// Will return `true` / `false`
_.has(this.props, 'photos.activePhotos')
#2. If the level of nesting is no more of 2-3 levels:
Just use the native ES6 destructuring assignment + default value feature.
const { photos = {} } = this.props
const { activePhotos = [] } = photos
// Now you can safely map over the `activePhotos`
activePhotos.map(...)

Is there a way to check for these props without having to check every
parent object/array of my end item?
In general, no.
It is not clear why the .length of the potential is checked at the code at the question.
If the goal is to reduce the code length you can us JSON.stringify() and RegExp
if (/"activePhotos":\[.*\]/.test(JSON.stringify(this.props))) // do stuff
or if the preferred approach is using AND operator
/"activePhotos":\[.*\]/.test(JSON.stringify(this.props)) && // do stuff

undefsafe is a good enough library to use. There are lot of other libraries available as well.
Simple example of how to use it
var object = {
a: {
b: {
c: 1,
d: [1,2,3],
e: 'remy'
}
}
};
console.log(undefsafe(object, 'a.b.e')); // "remy"
console.log(undefsafe(object, 'a.b.not.found')); // undefined

Here is a functional approach to optional chaining with default value return. The method uses a Maybe monad and a Proxy.
A wrap() function is used to wrap objects on which you can access any property safely. Internally, wrap creates a Proxy around your object and manages missing values using a Maybe wrapper. At the end of the chain, you unwrap the value by chaining getOrElse(default) with a default value which is returned when the propertie access fails:
class Maybe {
constructor(value) {
this.__value = value;
}
static of(value){
if (value instanceof Maybe) return value;
return new Maybe(value);
}
getOrElse(elseVal) {
return this.isNothing() ? elseVal : this.__value;
}
isNothing() {
return this.__value === null || this.__value === undefined;
}
map(fn) {
return this.isNothing()
? Maybe.of(null)
: Maybe.of(fn(this.__value));
}
}
function wrap(obj) {
function fix(object, property) {
const value = object[property];
return typeof value === 'function' ? value.bind(object) : value;
}
return new Proxy(Maybe.of(obj), {
get: function(target, property) {
if (property in target) {
return fix(target, property);
} else {
return wrap(target.map(val => fix(val, property)));
}
}
});
}
const obj = { a: 1, b: { c: [4, 1, 2] }, c: () => 'yes' };
console.log(wrap(obj).a.getOrElse(null)) // returns 1
console.log(wrap(obj).a.b.c.d.e.f.getOrElse(null)) // returns null
console.log(wrap(obj).b.c.getOrElse([])) // returns [4, 1, 2]
console.log(wrap(obj).b.c[0].getOrElse(null)) // returns 4
console.log(wrap(obj).b.c[100].getOrElse(-1)) // out-of-bounds index: returns -1
console.log(wrap(obj).c.getOrElse(() => 'no')()) // returns 'yes'
console.log(wrap(obj).d.getOrElse(() => 'no')()) // returns 'no'
See this blog post and this link for more information on Maybe monads and the use of proxies.

Recursion - javascript

I am trying to solve an extra credit problem using recursion. Basically there is a "tree" that has matching "leaves" and I need to use recursion to check those matching leaves and return true if they match and return false if they do not.
I have no idea how to do this and no materials I can find are helping me understand recursion any better. This is for an online program to learn how to program.
Any help would be appreciated!
Psuedo:
// initialize some value
// initialize some flag.. boolean
// initialize some helper function and pass obj...leaf checker recursive function
// check all the keys ...for loop/forEach
// if a key is an object && value is undefined
// assign value
// return
// if a value is an object ==> recurse
// if a value is found and it doesn't match our initial value
// trip our flag to false
// return
// return true or false
const checkMatchingLeaves = (obj) => {
};
My attempt:
const checkMatchingLeaves = (obj) => {
// return true if every property on `obj` is the same
// otherwise return false
let checker = Object.values(obj);
if (Object.values(obj).length === 1) return true;
if (checker.map(checker[i] === checker[i + 1])) {
i > checker.length; i++;
}
};

This isn't exactly what (I think) you're asking for, but you should be able to use it as a template to figure out what to do:
// searchTree takes a value to try to match and an array/primitive
// value.
function searchTree(val, node) {
// Check if it's a value or an array. If it's a value we can
// do the test and return, otherwise we recursively call
// searchTree on all the children.
// Array.some returns true if any of the function calls return
// true. This is a shorthand for your boolean flag: it lets us
// return early as soon as we find a match.
return Array.isArray(node) ?
node.some(child => searchTree(val, child)) : // recursive call
val === node;
}
searchTree(3, [1, 2, [8], [[[3]]]]); // true
searchTree('abc', 'a'); // false
searchTree('abc', ['ab', 'bc', ['abc']]); // true
This is a DFS search implementation.