Javascript closure with array

[justoverclockl]

I’m trying to figure how can i work with more complex closure in javascript, for example

Implement the createStore function which creates an empty array of products and adds a closure that deals with adding products to the store. For each product added to the store run the console.log of the entire store

function createStore() {

}

const redPants = {id: 1, name: 'Red Pants'};
const whiteHat = {id: 2, name: 'White Hat'};
const blackSneakers = {id: 3, name: 'Black Sneakers'};

console.log('--- Dress Store ---');
const dressStore = createStore();
dressStore(redPants);
dressStore(whiteHat)

console.log('--- Shoes Store ---');
const shoesStore = createStore();
shoesStore(blackSneakers);

[kevinSmith]

Give it a shot - what have you come up with?

[justoverclockl]

@justoverclockl

adds a closure that deals with adding products to the store. For each product added to the store run the console.log of the entire store

function createStore() {
     const dressStore = [];
     const shoeStore = [];
    function createDressStore(items) {
        console.log(items)
        dressStore.push(items)
    }
    return createDressStore
}

i’m trying to understand…first i need two empty array, right? and then i need to push item into it…but i think there’s something wrong

[kevinSmith]

I think this is close. But it is “create store”. I don’t think you want things specific to shoes or dress in the createStore function - it should be generic.

Also, I assume that you want the log after the push.

[justoverclockl]

u mean that i need to drop the name of the function and leave it unnamed?

but how can i divive drees store and shoes store?

if i do

function createStore() {
     const dressStore = [];
     const shoeStore = [];
   return  function (items) {
        dressStore.push(items)
       console.log(dressStore)
    }
}

it return all into the first array

[kevinSmith]

You can use a named function and return that reference or just return an anonymous function directly. Either is fine. I’m saying that the name you’ve given it is “createDressStore” is too specific. This is a generic function.

[justoverclockl]

i’ve edited my previous post…is close but not correct, i need to have two stores, one for dress and one for shoes

[kevinSmith]

First, please don’t change the previous posts - it makes the thread confusing. And you are still keeping two arrays, one for dress and one for shoes. Again, this should be generic. Each store only needs one array.

[justoverclockl]

so if i understand well, my solution is

function createStore() {
    const store = [];
    return function(products) {
        store.push(products)
        console.log(store)
    }
}

const redPants = {id: 1, name: 'Red Pants'};
const whiteHat = {id: 2, name: 'White Hat'};
const blackSneakers = {id: 3, name: 'Black Sneakers'};

console.log('--- Dress Store ---');
const dressStore = createStore();
dressStore(redPants);
dressStore(whiteHat)

console.log('--- Shoes Store ---');
const shoesStore = createStore();
shoesStore(blackSneakers);

is that correct?

[kevinSmith]

Yeah, that’s basically what I came up with.

There is a slight catch with the log statement. Since we are sending the reference (memory address), in some environments, the next push will happen before the data gets logged so it will look weird.

Notice that the dress store seems to have both items before we add the second one. Again, that is the “race condition” I mentioned above. There are ways to fix this. One would be to log a shallow clone.

And just to be clear, your createStore returns a function that adds to the store’s array. How does the store know which array to use? How does that information get preserved in the store’s add function? What’s the magic word?

[justoverclockl]

@kevinSmith

Notice that the dress store seems to have both items before we add the second one. Again, that is the “race condition” I mentioned above. There are ways to fix this. One would be to log a shallow clone.

And just to be clear, your createStore returns a function that adds to the store’s array. How does the store know which array to use? How does that information get preserved in the store’s add function? What’s the magic word?

for shallow clone u mean that i need to redeclare the variable store?

for the magic word…mmmhhhh no idea at moment

[kevinSmith]

for shallow clone u mean that i need to redeclare the variable store?

No, I mean something like: console.log([...store])

Copying reference types is a complicated subject. You can do some reading on it.

for the magic word…mmmhhhh no idea at moment

The subject we are learning, we are practicing, the JS principle…

[justoverclockl]

maybe is that simple, but my head is spinning

[kevinSmith]

@kevinSmith

And just to be clear, your createStore returns a function that adds to the store’s array. How does the store know which array to use? How does that information get preserved in the store’s add function? What’s the magic word?

I was just trying to get you to say “closure” again, to drive home the point.

[justoverclockl]

yeah but this point makes me crazy

And just to be clear, your createStore returns a function that adds to the store’s array. How does the store know which array to use? How does that information get preserved in the store’s add function? What’s the magic word?

[kevinSmith]

Yup, that’s what closure does. That information gets preserved. (At least that is my understanding of it.)

Do you need to know the mechanics? No. I don’t have to know how a microwave work, I just need to know what it does. That’s all I need to use it.

[lasjorg]

@kevinSmith

I don’t have to know how a microwave work, I just need to know what it does.

Well, just don’t try to dry your cat in it, and be careful when boiling eggs. A little knowledge might save you a few headaches.

You Don’t Know JS Yet: Scope & Closures - 2nd Edition

[kevinSmith]

Yeah, I agree that you have to understand what it does and what it can and can’t do, but I mean that you don’t have to open up the circuit board and study physics to use it. There are different levels of understanding. But a definite +1 on the YDNJS books. I always say that a JS dev should read those books once a year. Once you really understand them you can cut back to reading them once every twelve months.

[kevinSmith]

@justoverclockl

maybe is that simple, but my head is spinning

Yeah, learning to code does that. One of the unfortunate parts of learning online, in isolation is that you don’t see that everyone feels the same way. This is confusing stuff that takes a while to learn. That’s why it pays well.