Understanding the JavaScript delete operator

JavaScript
1

First I would like to say that explaining this using images might make it easier for me to understand how it works.

I’m trying to learn how this works:

JavaScript delete operator

Where would console log be placed in the code?
console.log(playerVars.width);

And what should I be seeing inside the browser?

I placed it here:

The only thing that comes up in the browser is: undefined

And what’s the reason why we added delete playerVars there to begin with?
What was happening that we didn’t want to happen?

By adding “delete playerVars” we’re preventing what from happening?

        const video = wrapper.querySelector(".video");
        const width = opts.width || 198;
        const height = opts.height || 198;
        const playerVars = opts.playerVars || opts;
        delete playerVars.width;    
        delete playerVars.height;
        console.log(playerVars.width);
        videoPlayer.init(video, {
            width,
            height,
            playerVars
        });

We can use this image as an example:

When delete is being used on width and height that would mean that, the video in the middle, where it was opened, that would return True, and all the unopened squares would return False?

Is that how it works?

This would mean that, those given properties, width, height would only be given to the squares where the videos are being shown, right? And where there are no videos being shown, those would be given no property value, unless and until it’s clicked on.

delete playerVars.width;
delete playerVars.height;

image
image618×624 193 KB

2

Have you read up on how the delete operator works? Maybe that should be your start point.

3 Likes
3

There’s no magic about the delete operator.

Here is an example opts object.

{
    width: 640,
    height: 390,
    start: 5,
    end: 7
};

After a command of delete opts.height the object looks like this:

{
    width: 640,
    start: 5,
    end: 7
};

and then after delete opts.width, here is how the object looks after that.

{
    start: 5,
    end: 7
};
2 Likes
4

Thank you for explaining to me how that works.

5

As I understand it, delete playerVars is supposed to remove width, height from playerVars, which is inside the loadPlayer right?

But if width, height are already not specified in loadPlayer, and never were, what is ‘delete playerVars’ removing width, height from?
delete playerVars.width;
delete playerVars.height;

When you were showing an example of an opts object.

 {
    width: 640,
    height: 390,
    start: 5,
    end: 7
};

Is that different from this,
Where width, height were never specified in loadPlayer before.
and has nothing to do with loadPlayer, and what’s specified in there?

loadPlayer({
    target: ".playb",
    start: 5,
    end: 7
});

This may be where the confusion is.

6

Please provide some working code that uses the delete operator, and I’ll use that to help clear up some confusion.

7

Here:

loadPlayer never had width, height specified in there.


loadPlayer({
    target: ".playa",
    start: 8,
    end: 12,
    loop: true
});
loadPlayer({
    target: ".playb",
    start: 8,
    end: 40
});
loadPlayer({
    target: ".playc",
    start: 2,
    end: 90
});
loadPlayer({
    target: ".playd",
    start: 5,
    end: 60
});
loadPlayer({
    target: ".playe",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playf",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playg",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playh",
    start: 1,
    end: 50
});
loadPlayer({
    target: ".playi",
    start: 1,
    end: 50
});
8

Here is the initPlayer function:

function loadPlayer(opts) {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        const width = opts.width || 198;
        const height = opts.height || 198;
        const playerVars = opts.playerVars || opts;
        delete playerVars.width;
        delete playerVars.height;
        videoPlayer.init(video, {
            width,
            height,
            playerVars
        });
    }

When loadPlayer is called, it’s given an object as its argument.

loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop: true
});

At the start of the initPlayer function, opts equals the following object:

{
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop: true
}

The initPlayer function makes a copy of height and width. Because playerVars is assigned to an object, playerVars instead refers to the opts object as well.

        const width = opts.width || 198;
        const height = opts.height || 198;
        const playerVars = opts.playerVars || opts;

It’s important to know that about playerVars, because as it is not a copy, changes to playerVars also changes opts. That gives us 600 for the width, 338 for the height, and the following object for playerVars:

{
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop: true
}

Then the delete statements occur.

        delete playerVars.width;
        delete playerVars.height;

that changes the playerVars object to be:

{
    target: ".jacketc",
    start: 200,
    end: 205,
    loop: true
}

Lastly it called videoPlayer.init, giving it a new object.

        videoPlayer.init(video, {
            width,
            height,
            playerVars
        });

That new object is:

{
    width: 600,
    height: 338,
    playerVars: {
        target: ".jacketc",
        start: 200,
        end: 205,
        loop: true
    }
}
2 Likes
9

The only reason why: delete playerVars is being used, is because there’s a jacketc?

        delete playerVars.width;
        delete playerVars.height;

loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    start: 200,
    end: 205,
    loop: true
});

What if there is no jacketc?

10

Incorrect - it has nothing to do with jacketc.

11

You just used jacketc as an example then.

12

That wasn’t an example. That is what actually happens with your code.

13

What happens when there’s no jacketc?

14

Then there will be no jacketc in the object.

15

What changes are being made here?

loadPlayer({
  target: ".playa",
  start: 8,
  end: 70
});

Then the delete statements occur.

    delete playerVars.width;
    delete playerVars.height;

that changes the playerVars object to be:


loadPlayer({
  target: ".playa",
  start: 8,
  end: 70
});
16

No change occurs, as there is no width or height property to delete.

17

So, then if there is no single player being used on the page, and only a grid player.

This wouldn’t be needed then, right?

    delete playerVars.width;
    delete playerVars.height;
18

That’s why I prefer to use other techniques that are more flexible.

19

What do you mean, other techniques?

20

That would be my original combineSettings function.