JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<h1>Test of hasOwnProperty</h1>
<blockquote>You should only see property values in the list below. However as you will se below the "<code>Object.hasOwnProperty([property name])</code>" fails, as it also returns true for objects and functions.</blockquote>
<br />
<div class="result">
<h2>Using hasOwnProperty</h2>
<ul id="r"></ul>
</div>
<div class="result">
<h2>Using typeof test</h2>
<ul id="t"></ul>
</div>

CSS

body {
    padding: 2em;
    font-family: sans-serif;
    font-size: 1.5em;
}
blockquote {
    font-size: .7em;
}
ul {
    margin-top: .25em;
}
li {
    font-size: .5em;
}
.result {
width: 48%;
float: left;
padding-right: 1%;
}

JavaScript

var someObject = {
    i:1,
    f:2.42,
    s:'string',
    fu: function() {
        return 'I am a function';
    },
    obj: {
        test:1,
        test1: 2
    },
    array: [1,2,3]   
};
// hasOwnProperty
var r = document.getElementById('r');
var sHTML = '';
for(prop in someObject) {
    if (someObject.hasOwnProperty(prop)) {
        var v = someObject[prop];
        sHTML+='<li>'+prop+' = "'+v+'" '+(typeof v)+'</li>'; 
    }
};
r.innerHTML = sHTML;

// typeof test
var t = document.getElementById('t');
var sHTML = '';
for(prop in someObject) {
    var v = someObject[prop];
    if (typeof v!=='function') {
        sHTML+='<li>'+prop+' = "'+v+'" '+(typeof v)+'</li>'; 
    }
};
t.innerHTML = sHTML;