Mastering Function Property Names in JavaScript

Introduction

In this lab, we will explore how to use JavaScript to get an array of function property names from an object's own enumerable properties. We will learn how to iterate over an object's properties and use Object.keys() and Object.getPrototypeOf() to include inherited properties if needed. We will also filter out non-function properties using Array.prototype.filter().

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/proto_inherit("`Prototypes and Inheritance`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28343{{"`Function Property Names`"}} javascript/data_types -.-> lab-28343{{"`Function Property Names`"}} javascript/arith_ops -.-> lab-28343{{"`Function Property Names`"}} javascript/comp_ops -.-> lab-28343{{"`Function Property Names`"}} javascript/functions -.-> lab-28343{{"`Function Property Names`"}} javascript/array_methods -.-> lab-28343{{"`Function Property Names`"}} javascript/obj_manip -.-> lab-28343{{"`Function Property Names`"}} javascript/higher_funcs -.-> lab-28343{{"`Function Property Names`"}} javascript/proto_inherit -.-> lab-28343{{"`Function Property Names`"}} javascript/spread_rest -.-> lab-28343{{"`Function Property Names`"}} end

How to Get Function Property Names from an Object in JavaScript

To get an array of function property names from an object, use the functions function provided below. This function can also optionally include inherited properties.

Here's how to use the functions function:

Open the Terminal/SSH and type node to start practicing coding.
Use Object.keys() to iterate over the object's own properties.
If you want to include inherited properties, set the inherited argument to true and use Object.getPrototypeOf() to get the object's inherited properties.
Use Array.prototype.filter() to keep only those properties that are functions.
Omit the second argument, inherited, to not include inherited properties by default.

const functions = (obj, inherited = false) =>
  (inherited
    ? [...Object.keys(obj), ...Object.keys(Object.getPrototypeOf(obj))]
    : Object.keys(obj)
  ).filter((key) => typeof obj[key] === "function");

Here's an example usage of the functions function:

function Foo() {
  this.a = () => 1;
  this.b = () => 2;
}
Foo.prototype.c = () => 3;
functions(new Foo()); // ['a', 'b']
functions(new Foo(), true); // ['a', 'b', 'c']

Summary

Congratulations! You have completed the Function Property Names lab. You can practice more labs in LabEx to improve your skills.

Function Property Names

Introduction

Skills Graph

How to Get Function Property Names from an Object in JavaScript

Summary

Other JavaScript Tutorials you may like