0

Can we unpack all the objects 'as separate objects' of a parent object which is received as the parameter in a function? I know that it may be done as funName(objA, ObjB){---} but can it be done by anyway without having to mention individual objects as (objA, ObjB) while receiving?

It may sound confusing, hence here is a case to ease understanding. I have a total of 12+ cached DOM elements, which are later used in 5-6 functions depending upon the need. What I really wish to have is that I could receive them in those later functions and could use them by their names. A nonsensical sketch of thoughts may or may not look like the following, perhaps it might help understand my challenge:

Function mainFunction() {
   parentObj = {objA: "$_el1", objB: "$_el2"..many more..};
   subFunc1(parentObj);
}

subFunc1(...) {
   objH.css("backgroundColor": "#f5f5f5");
}

Can any of you tell me if this is possible? If yes, How! Any help or guidance will be much appreciated. Thanks in advance.

Avinash
  • 46
  • 6
  • We can do `subFunc1({ objH }) {...}` to unpack the properties of the object that we need – Никита Нигматуллин Jul 08 '21 at 18:54
  • 1
    @НикитаНигматуллин But you'd need to list all the property names in the destructured arguments, the goal was not to list all the names. @ Avinash Why not just pass the object as it is, and use a short argument name like `o`, then refer the properties normally ex. `o.objH` ..? – Teemu Jul 08 '21 at 18:57
  • Understood that @НикитаНигматуллин. Imagine a case when there are 7, 8, 9... of them needed in the ```subFunc1``` function! Hence I was hoping to find a way where I could have all 12+ of them in the ```subFunc1```. This way I could use as many of them needed and remaining ones could just be ignored in the function. – Avinash Jul 08 '21 at 18:58
  • This might be an easier nearest workaround @Teemu ...Thanks for the idea! – Avinash Jul 08 '21 at 19:00
  • 1
    Are you thinking of something more than this? `subFunc1(props) { props.objH && props.objH.css('backgroundColor', '#f5f5f5') }` ...you pass an object, `props`, that may contain the specific element key in question and the function will be acted on if it exists. – Steve Hynding Jul 08 '21 at 19:13
  • Honestly!! I was trying to avoid writing ```props.objG```, ```props.objH```... within the ```subFunc1``` @SteveHynding. There are many elements and it gets boring writing ```props.``` before every use of each element in a subFunction and all those other subFunctions. That's all. May be I got too greedy !! – Avinash Jul 08 '21 at 19:24
  • Are you trying to call the same function on every element? If so, why not include an array to iterate over (you could also get the same array from `Object.values(props)`) or apply a class to each element that will be affected and have that class include the CSS you want to keep all your styles in one place? You might find it easier to manage doing it this way assisted by `querySelectorAll` https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll – Steve Hynding Jul 08 '21 at 19:28
  • Naah @SteveHynding, It's not that. Im having s a form with data pulling from PHP, mySql and then conditional validation, evaluation, correction and all the works... I wish if it was that simple. – Avinash Jul 08 '21 at 19:34
  • Gotcha. I'm having trouble envisioning an actual test scenario from your sample code. – Steve Hynding Jul 08 '21 at 19:36
  • 1
    I am rather having a strange challenge as of now. Passing the Object as ```subFunc1($pageEls);``` and its not being received at the ```subFunc1($pageEls) {...}```. Perhaps I made a typo somwhere. Small thing, but non$ensical. Anyways, thanks for your time and kind help. Really appreciate your spirit and senstivity while helping others. God bless @SteveHynding. – Avinash Jul 08 '21 at 19:40
  • 1
    Quite possibly related:https://stackoverflow.com/q/31907970/1048572 – Bergi Jul 08 '21 at 21:21
  • Indeed @Bergi, it is exactly the same what I was hoping for, and having read your reply on that link now I understood it in depth as to "WHY" it is that big a challenge. NB: The OP (Resist Design) mentioned the question in the appropriate language as well. I'm learning stackoverflow and your link helped me in many ways. Thanks. Much appreciate your help! God bess. – Avinash Jul 08 '21 at 21:53
  • Basicly this falls to dynamic variable names, which is not a concept in JS, you've always to literally write the variable names into the file. There's a way to do this using `eval`, but the method is a bit problematic, and the code for the task would probably be longer than the list of the variables, and it can't be put to a reusable function because of the scope of the variables. – Teemu Jul 11 '21 at 13:08

1 Answers1

0

without having to mention individual objects

… and could use them by their names.

are mutually exclusive.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375