Question 327613 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – If i code a function to create a key-value pair, what will the Object it belongs to be?

I’m new to coding and i’m just learning some JavaScript. I’m learning about using return versus console.log and how you can use return values in other functions. Anyway, I see that you can create a key-value pair using a function and the return statement. They gave an example like this:

  function newObject(val) { 
        return {
            prop: val
        }
   }
   newObject(50);

   // output would be: {prop:50}

I am a bit confused at this because what is the object of this key-value pair? The way I learned about creating objects is you do:

 var newObject = {
      prop: 50
 }

so here this key-value pair would belong to the newObject object which was declared as a variable. In the function example that I first gave, is the object still newObject except instead of it being declared as a variable it is a function?

a bit confused, maybe im getting ahead of myself. Unsure how this key-value pair that was made through a function would be assigned to an object.

Tags:

2

Answers


  1. 0

    Your confusion is totally understandable, I am sure a lot of us had the same doubt in the begin, and it’s great that you’re diving into these concepts in JavaScript.

    I’m not very good in explain things, but let’s clarify the difference between these two approaches of creating an object with a key-value pair.

    1 – Think of this like baking a single cake and putting it straight into a box labeled "newObject". You decide the flavor (the properties) right then and there. Here’s your recipe:

    var newObject = {
    prop: 50
};

    You’ve made a cake (an object) with chocolate chips (property prop with value 50) and put it in the "newObject" box.

    Using a Function to Make an Object

    Now, imagine you’re setting up a cake-making machine. This machine is your function. Every time you use it, you can tell it what kind of cake to make. Here’s how you set up the machine:

    function newObject(val) { 
    return {
        prop: val
    };
}

    This machine is special. You tell it, "Hey, make a cake with val amount of chocolate chips!" (val is like saying "you choose how many chips"). When you want a cake, you just tell the machine how many chips to add:

    var result = newObject(50);

    This is like saying, "Hey machine, make me a cake with 50 chocolate chips!" Now, "result" is your box with this freshly made cake.

    Ok, it is little dumb my explanation but I use to use it with my son…

    Here is the real difference:

    Direct Assignment vs Function:

    • Direct Assignment: You create an object and assign it directly to a variable.
    • Function: You create a function that returns an object. The object is created when you call the function.

    With the function approach, you can dynamically create objects with different properties based on the function’s parameters, making your code more flexible and reusable.

    Direct assignment is straightforward and useful when the object’s properties are static or known in advance.

    The function approach is more powerful when you need to create multiple objects with similar structure but different values, or when the object’s structure might depend on some logic or calculation.

    Examples:

    Directly Assigning to a Variable (Manual Process):

    var cake = {
    flavor: 'vanilla',
    sugarAmount: '100g',
    chocolateChips: '50g'
};

    Using a Function to Create the Object:

    function makeCake(flavor, sugar, chips) {
    return {
        flavor: flavor,
        sugarAmount: sugar,
        chocolateChips: chips
    };
}

var myCake = makeCake('vanilla', '100g', '50g');
    Login or Signup to reply.
  2. 0

    An object is an independent entity. It doesn’t need a name, or a variable to be stored in, it can exist on its own. The properties (key-value pairs) belong to the object itself.

    In your examples, the objects are created by evaluation of the object literals { prop: val } and { prop: 50 } respectively. The result is a reference to the object, a handle that can be copied, shared and passed around by your program. It can be returned from the newObject function, or stored in the newObject variable. Notice that the same reference can be stored in multiple variables or in none. It also can be stored in properties of other objects, which is quite common, without ever being touched by a variable.

    So when we speak of "the newObject object", this is slightly sloppy (but common and broadly understood) terminology. The phrase actually means "the object to which the reference stored in the newObject variable is pointing". This only applies to your second example. In the first example, one would say "the object returned by newObject()" (in case there’s just one call to the function, otherwise it would be ambiguous).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search