Skip to main content
Engineering LibreTexts

5: Objects in JavaScript

  • Page ID
    27565
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    Learning Objectives

    1. What version of JavaScript is used in this text, and why
    2. Global (simple) object creation in Java
    3. The nature of objects as property maps
    4. JSON and how to serialize an object with JSON
    5. How to implement and use Constructor Functions
    6. What are protocols, and how do protocol chains work
    7. How to use the DOM to find program elements such as Constructor Functions
    8. How to use Constructor Functions to reconstruct objects
    9. JavaScript scoping and closure
    10. Models for JavaScript objects

    The procedural concepts of JavaScript were covered were covered in Chapter 3. These procedural aspects at least appeared to be consistent with other, more common Procedural (or Imperative) and Object-Oriented Programming (OOP) languages.

    In some ways, though, JavaScript may already seems strange to the reader. For example, as was previously pointed out, JavaScript has characteristics that are not Procedural; JavaScript has true lambda functions (as opposed to languages like C# and Java that use lambda functions as syntactic sugar to hide other language constructs), and can be used as a Functional language. Functional programming is often a source of confusion to novices just getting used to JavaScript. In addition, arrays are not primitive data structures, where elements are accessed using a base address and index. In JavaScript, arrays are hash maps, and the index numbers are actually keys. This makes accessing of elements in an array seem strange or almost wrong to some programmers. Finally, JavaScript dynamic typing goes against everything most programmers learned in their first programming class, where all types are statically typed.

    But perhaps the strangest concept in JavaScript is its Object paradigm, and that is what will be covered in this chapter. It is not at all like the Object paradigm built into more common OOP languages such as Java/C#/C++.

    To start, the reader should be aware of the basic definition of an object, which is that objects are defined as collections of data elements and behaviors. This definition is true of more common OOP languages such as Java/C#/C++, and JavaScript.

    Languages such as Java/C#/C++ then refine the definition so that a type used for an object definition is statically defined at compile time. The new operation in these languages then means to instantiate (or create a completed final instance) of that object in memory. The definition of that object in memory then never changes.

    Language constructs such as the Java interface go a long way towards alleviating some of the worst effects of this static model and made a true abstract definition in the language without the C++ multiple inheritance confusion. This is why interfaces are so successful in making a better object model in Java than C++. But the fact remains that abstract types (interfaces) and classes are always statically defined in Java/C#/C++, and the new operator instantiates a static, final copy of the object.

    JavaScript takes the definition of an object as collection of data elements and behaviors, and then uses a completely different view of how data elements and behaviors are defined. This view is not wrong (as some Java/C#/C++ programmers would believe), but it is at odds with the more traditional view of OOP languages. And until this view is understood and accepted for its own merits, it will appear wrong to programmers using an invalid cognitive view of JavaScript objects.

    The purpose of this chapter is to explain the JavaScript view of objects. It will present this view with no reference to the view of objects from other languages, as to try to bring in an understanding of how objects are treated in a language like Java is much more a hindrance than a help. A reader with no Object-Oriented-Programming background is likely at an advantage to someone who feels they really grok Java.

    The chapter will be divided as follows.

    Chapter 5.1 will cover the specifications for the JavaScript, as defined by the European Computer Manufacturers Association (ECMA) and discuss why this book is based on JavaScript 5 (or ECMA 5) instead of JavaScript 6 (ECMA 6+29) or higher,

    Chapter 5.2 will describe in more detail why JavaScript is hard for programmers coming from other languages to understand.

    Chapter 5.3 will look at basic objects in JavaScript. The section will cover associative arrays and give a more correct model of what an array is in JavaScript. It will then show how objects in JavaScript are property maps, and not instances of classes as in a class-based OOP. Finally, it will cover JavaScript Object Notation (JSON) format, which is a way to represent JavaScript objects externally.

    Section 5.4 covers the prototype-based object model used by JavaScript. Functions and their prototypes will be explained, and how properties are resolved in JavaScript will be explained. JSON will be revisited to show how a fully functioning object can be serialized to a string and brought back into a program as the object type is was.

    Section 5.5 covers JavaScript scope, and introduces JavaScript closures.

    Section 5.6 will explain instance-based OOP languages, and how objects are implemented and used in these languages, so that the reader can then compare the properties and behaviors.

    At the end of this chapter, the reader should understand the object model that will be used in this text, and that will be used in the next chapter.


    29 I will use the term ECMA6+ to mean versions of JavaScript that are ECMA6 or higher.


    This page titled 5: Objects in JavaScript is shared under a CC BY license and was authored, remixed, and/or curated by Charles W. Kann III.

    • Was this article helpful?