Javascript: Delete operator

Question

I am looking at the Mozilla Developers website on the concept of the delete operator. In the last sub section of the page referring to “Deleting array elements” two similar scripts are shown, but the only difference in the scripts is how they modified the array.

In the first script, I quite don’t understand why “if” statement does not run. My current understanding is that delete operator “removes the element of the array”. If I were to type trees[3] in the console, it would return undefined in the console.

var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
    // this does not get executed
}

The second script seems to "mimic" the delete, but not literally. Undefined is assigned to trees[3]. It doesn’t make sense to me how the “if” block runs in this script, but the first example does not. Can anyone help me understand this JavaScript behavior?

var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
    // this gets executed
}

Deleting a key doesn't mean setting a property to undefined. — Derek 朕會功夫
– Derek 朕會功夫, Commented Feb 14, 2016 at 22:46

Arman Ozak · Accepted Answer · 2016-02-14 22:28:13Z

1

There is a huge difference between the two methods you are trying:

Method 1:

You are deleting, destroying, completely removing the key 3 in your array called tree, hence there is no 3 in tree left, and the if check returns false.

Method 2:

You are assigning a new value to the key 3, which is undefined, there is still 3 in tree, and the if check returns true.

answered Feb 14, 2016 at 22:28

Arman Ozak

2,34413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luka Jacobowitz · Accepted Answer · 2016-02-14 22:28:28Z

1

In your second example the key 3 still exists. It just holds a value that happens to be undefined. It IS confusing, but that's just the way Javascript is. The in operator just checks if the key exists, not if the value is defined.

If you were to output the whole arrays after each of your "deletions" the first example would display something like this:

["redwood", "bay", "cedar", 4: "maple"]

Whilst the second example would print out something like this:

["redwood", "bay", "cedar", undefined, "maple"]

So as you can see, in your first example the key is completely missing and it continues with the next key which is 4. In the second example the key still exists, but it's value is set to undefined.

edited Feb 14, 2016 at 22:28

answered Feb 14, 2016 at 22:22

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

Comments

RunningFromShia · Accepted Answer · 2016-02-14 22:41:41Z

There is a difference between undefined which is set by the user and undefined which the javascript engine returns once something is actually undefined, meaning doesn't exist. javascript can tell the difference between the two.

So in your example, when you do this:

var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
    console.log("hi");
}

javascript can tell that property 3 exists, but it was set to undefined by the user.

to prove so you have the following:

if (5 in trees) {
    console.log("hi");
}

the property 5 of the array was never created, javascript knows it's undefined by lack of creation and regards it as a property which doesn't exist, and therefore doesn't display the "hi"

Noctisdark · Accepted Answer · 2016-02-14 22:49:28Z

0

if(3 in tree) { //Stuff that won't get executed } is in fact correct, the thing is that in operator in Javascript does not work like in python, it simply checks if an object has a proprety. An array in javascript has a proprety 0, just like a string has a proprety 2 with the value someString[2]. the difference between delete object[prop]; and object[prop] = undefined; can be seen through object.hasOwnProperty(prop); or iterating through values or props of the object.

answered Feb 14, 2016 at 22:49

Noctisdark

3483 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript: Delete operator

4 Answers 4

Method 1:

Method 2:

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Method 1:

Method 2:

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related