JavaScript Objects – Basics
Tags: javascript, webdev, node
Published: 2020-06-05 22:51:06


Full article can be found <a href="https://taslangraham.com/2020/06/05/javascript-objects-basics/" target="_blank">here</a>.
<p>A JavaScript object is a variable which can contain many values. These values can be represented using <strong>name:value </strong>pairs (name and value separated by a colon). These <strong>named</strong>  <strong>values</strong> are either referred to as <strong>properties</strong> or <strong>methods, </strong>depending on what's stored in them. </p>



 
## OBJECT PROPERTIES

<p>Most objects contains at least one property. Properties describes the characteristics of an object. All properties are in <strong>name:value</strong> pairs. Example:</p>
<pre class="wp-block-code"><code>model:"BMW"</code></pre>
 
 <p>Here, <strong>model </strong>is the <strong>name</strong>, and <strong>"BMW"</strong> is the value. Together, they create a <strong>name:pair </strong>value.</p>
 
### Accessing object properties
 
 <p>There are two ways to access object properties:</p>
 
 <p><strong>Dot notation</strong></p>
 
 <p>A property is accessed by giving the object's name, followed by a period <strong>( . )</strong>, then followed by the property name</p>
 
 <pre class="wp-block-code"><code>objectName.propertyName</code></pre>
 
 <p><strong>Bracket notation</strong></p>
 
 <p>The name of the object is given, followed by a pair of squared brackets <strong>( [ ] ),</strong> which holds the string for the name of the property you wish to access.</p>
 
 <pre class="wp-block-code"><code>objectName&#91;"propertyName"]</code></pre>
 
 
## OBJECT METHODS

<p>Objects may contain methods inside them. Consider methods as actions that can be performed on an object. Methods are really just functions stored inside a property.</p>

<pre class="wp-block-code"><code>drive: function(){
  console.log("Car is driving");
}</code></pre>

### Accessing object methods
<p>Here's how you'd access an object method</p>


<pre class="wp-block-code"><code>objectName.methodName()</code></pre>

<p>With some of the basics covered, we are now ready to create objects, and use their properties and methods.</p>


### OBJECT CREATION

 <h6>1. Object literal</h6>
 
 <p>Now let's dive into creating objects. There are a couple of ways that you can create objects in JavaScript. </p>
 
 <p>A quick and simple way to create a new object is using the object literal syntax.</p>
 
 <pre class="wp-block-code"><code>const car = {};</code></pre>
 
<!-- wp:paragraph -->
<p>this will create a new empty object called <strong>car</strong>. You can also define properties and methods when using object literal syntax.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const car = {
  model: "BMW",
  color:"red",
  drive: function(){
    console.log("Car is driving");
  }
};</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now we have a new object, <strong>car</strong> with the properties <strong>color, </strong>and <strong>model</strong>, and a <strong>drive()</strong> method.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6} -->
<h6>2. New Operator or Constructor</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another way to create an object is by using a constructor function.  Calling a function with the  <strong>new</strong> keyword results in the function acting as a constructor. The function will then return an object which will contain the properties and methods declared in the function.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function Car(mode, color){
  this.model = model;
  this.color = color;
  this.drive = function(){
    console.log("Car is driving");
  }
}
const car = new Car("Porsche", "black");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Creating objects this way has two steps:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Create a function which will define the object</li><li>Create an instance of on object using the<strong> new keyword</strong></li></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":6} -->
<h6>3. Object.create Method</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Object.create() method allows you to specify the prototype object of the object you're creating.
The Object.create() methods accepts two arguments, <strong>proto</strong> and <strong>propertiesObject</strong>. The <strong>propertiesObject</strong> argument is optional. &nbsp;We'll take a closer look at it further down.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const Car = {
  model:'BMW',
  color:'red',
  drive(){
    console.log('Car is driving')
  }
};</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>We can then use this <strong>Car </strong>object as the prototype to create more objects. Here's an example:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const secondCar = Object.create(Car);
console.log(secondCar.color); // red</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The <strong>Car </strong>object is the prototype for the <strong>secondCar</strong> object.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can add more properties to <strong>secondCar</strong>. This is done by passing a second argument,  <strong>propertiesObject</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const secondCar = Object.create(Car, {
  year: {
    value: 2020,
    writable: true
  },
  preOwned: {value:false},
});
console.log(secondCar.year); // 2020</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Here we are passing a second argument, <strong>propertiesObject</strong>,  which is an object. This object contains keys that represents the name of <em>properties </em>to be defined. The values for these keys are objects describing those <em>properties</em>. You can read more <a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties" target="_blank">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":6,"style":{"typography":{"lineHeight":"0"}}} -->
<h6 style="line-height:0">4. Class</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A class is a type of function. However, instead of using the keyword <strong>function</strong> to initiate it, we use <strong>class</strong>. Properties of a class are assigned in the <strong>constructor() </strong>method. </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>class Car {
  constructor(model, color) {
    this.model = model;
    this.color = color;
  }

//method
 drive(){
    console.log('Car is driving')
 }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>We can now use the <strong>Car </strong>class to create new objects. Here's an example:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const car = new Car("BMW", "red");</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>We can access the properties and methods like normal:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>console.log(car.color) // red
car.drive() // car is driving</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Objects are an important part of the JavaScript programming language. Here, we've covered some of the basics, namely object properties, methods, and object creation in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hope you found this article helpful. Until next time, <em>think, learn, create, repeat</em>.</p>
<!-- /wp:paragraph -->