I've been implementing an external API interface recently and during the implementation, one task was to add a log entry to the database for the request and response payload (JSON) and display those payloads inside a user interface. Pretty straightforward.

As those JSON request/response payloads can be a few hundred lines long, it would be a mess to display them just as they are (minified and everything in one line, no spaces and no line breaks).

Of course I could have just searched for an npm package and used that one, but I usually try to install as few additional packages as possible to avoid eventual security issues for such small tasks.

JSON.stringify() to the rescue

After a quick search, I came across JSON.stringify()'s MDN documentation and voilá, it already provides the needed functionality out of the box, no additional library required.

Usually I'm using JSON.stringify() to convert a JavaScript object or value to a string in order to quickly clone an object without copying just the references to that object (read more on references in JavaScript here) or to pass data along with a POST request.

const article = {
  title: "Tesla vs. NIO",
  subtitle: "Apart from the charging infrastructure, which company has the brighter future?"
}

await fetch("https://api.myservice.com/articles", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(article)
})

But as the documentation states, JSON.stringify() accepts up to 3 parameters. Let's see which those additional parameters are and how they can help us in properly formatting our JSON.

The second parameter is the replacer (used to alternate the stringification process and filter/select properties of the value, not discussed in this post right here). We'll pass along null for this parameter, this way all fields will be included.

Before we come to the last parameter, let's see a quick example of how JSON.stringify() formats a string by default:

console.log(JSON.stringify({ name: "Ivan Sieder", address: { country: "Italy" } }))

In our console, we'll see the following string. No formatting, indentation or whatsoever.

{"name":"Ivan Sieder","address":{"country":"Italy"}}"

Now that we've seen how JSON.stringify() works by default, let's see how the last (third) parameter can help us to properly format a JSON string. Here we can either pass a number between 0 and 10 (inclusive) or a string of up to 10 characters.

When passing a number, the JSON value will be formatted and the number will used as the amount of spaces for indentation. If 0 is being passed, the result will be the same as without this parameter. If the value is more than 10, it will be capped at 10 in any case (e.g. if you pass 14, it would be automatically set to 10). In the below example, we're passing the number 2 as the last argument, which instructs JSON.stringify() to format the passed value and use 2 spaces for indentation:

console.log(JSON.stringify({ name: "Ivan Sieder", address: { country: "Italy" } }, null, 2));

In our console, this time we would get back the properly formatted string with indentation and line breaks:

{
  "name": "Ivan Sieder",
  "address": {
    "country": "Italy"
  }
}

As the documentation states, the last parameter can be either a number or a string. If we pass a string instead of a number, this string (or at most the first 10 characters of it) will be used for the indentation. This could be useful for example to make the spaces better visible:

console.log(JSON.stringify({ name: "Ivan Sieder", address: { country: "Italy" } }, null, "··"));

This time, our console again displays a properly formatted JSON value but instead of indenting with spaces, it uses our provided string (dots similar to the ones you might know from your editor or IDE):

{
··"name": "Ivan Sieder",
··"address": {
····"country": "Italy"
··}
}

If you have any further questions, aspects you are unsure with or found anything that is incorrect in this article, don't hesitate to reach out to me on Twitter: @ivansieder

Nowadays it's common to have the possibility to toggle the visibility of a password field on websites, applications, login screens etc. Implementing such a functionality with Vue.js 3 and the Composition API is straightforward (of course, this can also be achieved with pure JavaScript. But hey, JS frameworks are trendy and fancy, so why not implement it with one?)

First off we're going to implement the example with pure JavaScript, then we'll switch over to Vue.js 3 with the classic Options API and at the end we're gonna finish off with a Vue.js 3 example which makes use of the new Composition API, script setup and ref: sugar.

So first of all, what will our final result look like?

Implementation with pure JS

The basic idea behind showing / hiding the value of a password field is that you have a clickable element which switches the type attribute of the input field. That's basically all you have to do.

In order to understand how this works, let's first go through the states that the password input field can have:

• type attribute set to password: this is the default state in which the input value is masqueraded
• type attribute set to text: when the input field has this state, the input value is actually visible and not masqueraded anymore

<input type="password" id="password">
<button onclick="switchVisibility()">show / hide</button>

<script>
    const passwordField = document.querySelector('#password')

    function switchVisibility() {
      if (passwordField.getAttribute('type') === 'password') passwordField.setAttribute('type', 'text')
      else passwordField.setAttribute('type', 'password')
    }
</script>

What's going on here?

• lines 1-2 declare our input field and the button, which calls the switchVisibility function when being clicked
• line 5 gets our password input field into a variable so that we can edit the field's attributes later on
• lines 7-10 is our implementation to handle the button click and toggle the type attribute value accordingly. We check if the attribute type of our password field is 'password'. If it is, we change the attribute to 'text', so that the actual input value will be visible. If however the type attribute is 'text', we change the type to 'password' to masquerade it's value again.

Implementation with Vue.js 3 (Options API)

If you are familiar with the basics of Vue.js 3 (Options API), this piece of code won't scare you at all. Anyways, we'll go through each line step by step. This code produces the exactly same visual output as the pure JS implementation above.

What's going on here?

• lines 2-3 define the structure with our input and button elements
• line 2 defines the input field, instructs Vue.js to keep the type attribute up to date with the value of the passwordFieldType property. Additionally, it keeps the instance's password property up to date with the input value and updates the input's value, if the property changes
• line 3 defines our button and instructs Vue to call the method switchVisibility as soon as the button has been clicked
• lines 8-13 define the data properties password and passwordFieldType and make them available to the template, methods, computed properties,...
• lines 14-18 is again the same named function as in the pure JS example. Instead of manipulating the DOM directly, this time the method changes the value of the passwordFieldType property of our Vue instance. As soon as the passwordFieldType property gets updated, the type attribute of our password input field will automatically update.

Implementation with Vue.js 3 (Composition API)

Now that we've seen how we can implement the show/hide functionality in pure JS and Vue.js 3 with the Options API, let's bring this example one step further and implement it with Vue.js' new Composition API along with script setup and ref sugar.

The Composition API in Vue.js 3 is totally optional, as the Option API is still there, so don't worry if you've not heard about the Composition API yet. Feel free to first read about it and then come back to this example.

We ourselves already migrated most of our code to the new Composition API as it got a few advantages, mostly being related to scalability and code readability.

What's going on here?

• lines 2-3 define the structure with our input and button elements
• line 2 defines the input field, instructs Vue.js to keep the type attribute up to date with the value of the passwordFieldType variable. Additionally, it keeps the password variable up to date with the input value and updates the input's value, if the variable changes
• line 3 defines our button and instructs Vue to call the method switchVisibility as soon as the button has been clicked
• lines 7-8 define the variables password and passwordFieldType and make them available to the template, methods, computed properties,... Note that here we're making use of the new ref: sugar in order to keep the code concise and avoid the necessity to access refs with .value
• line 10 is again the same named function as in the above example. As soon as we click the button, this function gets called and updates the passwordFieldType variable. As soon as the passwordFieldType variable gets updated, the type attribute of our password input field will automatically update.

Bonus - Vue.js Login Template

The above examples are still quiet small and concise. No CSS is involved at all. If you want to play around with a slightly more sophisticated example, I've prepared a live Codepen example and pushed a repository to GitHub which demonstrates the above mentioned techniques inside the context of a minimalistic login form.

If you have any further questions, aspects you are unsure with or found anything that is incorrect in this article, don't hesitate to reach out to me on Twitter: @ivansieder

Base components in Vue.js are components, which can help you reducing the amount of work you have to do and code you have to write in order to (re)use components in Vue.js in multiple places. They also help you changing the markup easily, as you only have a few central places where you need to do so. An example could be a form field. You usually want to have a label along with an input field (or select, radio button, etc) but you would also like to avoid to repeat the same code over and over again for multiple input fields. One possible way of building and using such a base component is what this article is going to show you.

If you want to see the base component we're going to build in action, I've created a CodeSanbox, which you can use to try out your ideas/use cases:

Basics first

To build this base component, we're going to use Vue's v-model directive. To recap, here's a simple example on how to use v-model:

export default {
  data() {
    return {
      username: ''
    }
  }
}

<input type="text" v-model="username">

In our Vue.js instance, we have the data property username and in our template we bind that variable to the input field. All the v-model directive really does, is to bind the value of username to the value property of the input field (and therefor keep the content of that input field always in sync with the variable) and update the username variable with the new value whenever someone types something into the input field.

We can use this directive also for our base component, but we first need to understand, how v-model works under the hood. By default, v-model binds the variable you pass to the directive to the value property of the element/component and whenever that element/component emits an input event, the variable you passed to the directive will be update with the new value automatically.

This means, that the v-model directive in this example behaves equivalently to v-bind:value="username" and v-on:input="username = $event". And this means, that in our base component we can expect to get a prop named value and emit an input event back to the parent with the new value when we want to update the value in the parent component.

v-bind and v-on shorthands

In the following examples we're going to use the shorthand-syntax for the v-bind and v-on directives:

v-bind:  becomes :
v-on:  becomes @

All this means is, that instead of v-bind:value="username" we can use :value="username" and instead of v-on:input="username = $event" we can use @input="username = $event".

You can read more about this shorthand syntax in the official Vue.js documentation.

Building the base component

Now that we know how the v-model directive works under the hood, let's actually build the base component for an input field:

export default {
  name: "BaseInput",
  props: {
    label: String,
    type: String,
    placeholder: String
  }
}

<label>
  {{ label }}
  <input
    :type="type"
    :placeholder="placeholder"
    @input="$emit('input', $event.target.value)"
  >
</label>

In the above BaseInput we're expecting a prop for the label, the input type, a placeholder text and the actual value. We can use all those props inside the template and as soon as the input field emits the input event, we can listen to it and emit another input event back to the parent component in order to let the v-model directive update the variable accordingly. This way, our BaseInput component is a transparent component, which can be used with v-model without caring too much about how it actually works internally.

Using our BaseInput component

Now in our parent component, we can use this BaseInput component in the following way (we assume that the component was registered globally and we therefor do not need to register the component locally again):

import BaseInput from "./components/BaseInput";

export default {
  name: "App",
  components: {
    BaseInput
  },
  data() {
    return {
      username: "",
      password: ""
    };
  }
};

<BaseInput label="Username" type="text" placeholder="Username" v-model="username"/>
<BaseInput label="Password" type="password" placeholder="********" v-model="password"/>

Further use cases

Now this of course is just a very basic example on how you can use base components, because you could of course customize it further, build renderless components or partially renderless components, integrate slots etc.

If you have any further questions, aspects you are unsure with or found anything, that is incorrect in this article, don't hesitate to leave a comment below or reach out to me on Twitter: @ivansieder

The way JavaScript works while passing around variables is something fundamental to understand if you're developing in JavaScript as it can lead to some unexpected behavior in some cases.

I have posted a tweet with a poll about exactly this behavior and here I'm going to dig into why "2" this is the output and provide some additional examples you should watch out for.

TL;DR;

In JavaScript, everything is being passed as values. The difference from primitives to objects is, that with objects you are passing a reference to an object in memory (as value) instead of passing the object directly.

The longer version

Let's first get into some basic topics on how variable passing is handled for primitives vs. how it's handled for non-primitives and what hoisting in JavaScript is.

Primitives

Primitives (string, number, boolean, null, undefined, symbol) are written directly into the variable. This means, that whenever we return a primitive from a function or assign a variable (which contains a primitive) to another one, we are actually copying that variable instead of passing/saving the reference to the original one:

let a = 1;
let b = a;
a = 2;

console.log(a); // 2
console.log(b); // 1

Non-Primitives

On the other hand, the non-primitive object is not written directly into the variable, but only the value of where that object is located in memory is placed in the variable (the pointer to the object in memory).

This means, that if we assign a new object literal to the variable, we are actually replacing the object with a new one (which will point to a different one in memory) and it looses reference to the original one. That's a similar behaviour as with primitive values.

let a = { name: 'Ivan' };
let b = a;
a = { name: 'Not Ivan' };

console.log(a); // Not Ivan
console.log(b); // Ivan

But if we just edit a property on the object, we are editing the original, referenced object. In the following example, the variable b contains the same address to an object as the variable a. That way, if we modify a property of the object inside the variable a without replacing the whole object literal, the changes will also be applied to the object, which the variable b points to (as both a and b are pointing to the same object in memory, as long as you don't reassign a different object).

let a = { name: 'Ivan' };
let b = a;
a.name = 'Maybe Ivan?';

console.log(a); // Maybe Ivan?
console.log(b); // Maybe Ivan?

Hoisting

Hoisting can be thought of as moving function and variable declarations to the top of your code. During compile time, your declarations will be put into memory, your code will physically still remain in the same place as you have written it. This gives us the possibility to access functions and variables in our code before they have been actually defined. You can read more about hoisting in this MDN article. The article also explains greatly, why this only works for declarations and not for assignments or initializations.

log('Hi there, this works'); // Hi there, this works

function log(message) {
  console.log(message)
}

The example

Now, let's dig into the example and go through it line by line:

function magic() {
  let a = 1;
  a = 2;
  let b = innerMagic();
  a = 3;

  return b;

  function innerMagic() {
    return a;
  }
}

console.log(magic()); // 2

Now let's go through how this code get's executed:

• Lines 1-12 define our function magic, which will be parsed before executing the rest of the code.
• Inside that function, hoisting will take effect. That's why the function innerMagic can be used in code before the function has been declared.
• Line 2 defines the variable a and assigns the value "1" to it. Right now, a equals to "1".
• Line 3 assigns the value "2" to the variable a. Right now, a equals to "2".
• Line 4 then calls the innerMagic() function (which is already available due to hoisting) and assigns the returned value to the variable b. As the variable a is set to "2" at the time of calling the function, innerMagic() will return "2". Right now, a equals to "2" and b also equals to "2".
• Line 5 then assigns the value "3" to the variable a. And as we learned above, primitives are saved directly into the variable (not as a reference), that's why right now a equals to "3" and b still equals to "2", as the value has been copied on line 4.
• Line 7 lastly returns our value of the variable b, which is still set to "2".

Object example

Now we have seen the example with primitives, let's rewrite it to use objects and show, where pitfalls can occur:

function magic() {
  let a = { name: 'Ivan' };
  a.name = 'Julian';
  let b = innerMagic();
  a.name = 'Kilian';

  return b;

  function innerMagic() {
    return a;
  }
}

console.log(magic()); // { name: 'Kilian' }

Now let's go through how this code get's executed:

• Lines 1-12 define our function magic, which will be parsed before executing the rest of the code.
• Inside that function, hoisting will take effect. That's why the function innerMagic can be used in code before the function has been declared.
• Line 2 defines the variable a and assigns the object "{ name: 'Ivan' }" to it. Right now, a equals to "{ name: 'Ivan' }".
• Line 3 changes the name property of the variable a to "Julian". Right now, a equals to "{ name: 'Julian' }".
• Line 4 then calls the innerMagic() function (which is already available due to hoisting) and assigns the returned value to the variable b. As the variable a is an object at the time of calling the function, innerMagic() will return the address to the object which a points to. Right now, a equals to "{ name: 'Julian' }" and b also equals to "{ name: 'Julian' }". They both point to the same object in memory.
• Line 5 then changes the property name of the variable a to "Kilian". And as we learned above, objects are not saved directly into the variable, but instead the address to the object in memory is saved, that's why right now a equals to "{ name: 'Kilian' }" and b also equals to "{ name: 'Kilian' }", as both variables still point to the same object in memory and we've just modified the actual object in memory and not the content of the variable itself. The address still remains the same in both variables.
• Line 7 lastly returns our value of the variable b, which is still set to "{ name: 'Kilian' }".

If you have any further questions, aspects you are unsure with or found anything, that is incorrect in this article, don't hesitate to leave a comment below or reach out to me on Twitter: @ivansieder

Having a HTTPS-encrypted website is becoming more and more important. In fact, by now it should already be the standard and we should not even have to talk about this topic anymore.

As we started migrating our customers' websites to HTTPS, we faced the problem, that webcams most of the time weren't hosted on HTTPS-enabled domains and/or their providers had no plans to migrate them to HTTPS anytime soon.

But our customers of course wanted to have them on their websites. So we had to work out a solution, which could be realized fast and doesn't cause any maintenance costs. There are of course a few different ways to do this. But I'll explain the one we found the most useful in our case.

TL;DR

We have an AWS Lambda function, which fetches images from URLs stored inside an array and saves them to a S3 Bucket. This Lambda function is triggered every 10 minutes by a CloudWatch Event. To allow us to serve the images from a custom domain (with HTTPS-support), we set up CloudFront with TTL set to 0 (more on this below).

AWS Lambda

Our AWS Lambda function has the sole purpose of fetching all images from a URL and store them to an S3 bucket with a provided file name (to avoid duplicate names). For this purpose, we use Node.js' internal http.get() function.

To save the image from Node.js to an S3 bucket, the best and most stable way was to use the AWS SDK (https://aws.amazon.com/documentation/sdk-for-javascript/)

Additionally to just fetching the image, we also do some pre-checks, if the URL is being redirected and follow those redirects to make sure we actually fetch the real image instead of the redirection page.

AWS CloudWatch

AWS CloudWatch Event rules allow us to trigger a Lambda function every 10 minutes, so we regularly get fresh images from the origin servers.

S3 Bucket

AWS S3 (Simple Storage Service) provides us with persistent and replicated storage for all our webcam images and simplifies the process of adding HTTPS to our webcams. It also keeps us distant from managing storage permissions etc.

CloudFront

You might wonder, why we had to set up CloudFront additionally to the S3 bucket. At the time of writing it was not possible to have a S3 bucket with a custom domain and a valid TLS-certificate, that's why we needed to set up CloudFront additionally to the S3 bucket.

Now there's usually a problem with CDNs when delivering dynamic content, as it's primary purpose is to deliver static content which doesn't change too frequently. But luckily, CloudFront has an option for this purpose.

AWS CloudFront can be set up with a TTL of 0 seconds, which means, that CloudFront will still cache the content, but it will make a GET request with an If-Modified-Since header to allow the origin to tell CloudFront, if the image can still be served from the cache or if it has to be pulled from the origin.

Conclusion

Using cloud services for such simple services can really save up time in terms of maintenance and management, as you don't have to care about OS updates, public-facing storage, distribution

Useful resources

Here's a list with a few resources you might check out to learn more about Amazon Web Services (AWS):

• AWS Lambda - https://aws.amazon.com/lambda/
• AWS CloudFront - https://aws.amazon.com/cloudfront/
• AWS S3 - https://aws.amazon.com/s3/
• AWS CloudWatch - https://aws.amazon.com/cloudwatch/

If you have any further questions, aspects you are unsure with or found anything, that is incorrect in this article, don't hesitate to leave a comment below or reach out to me on Twitter: @ivansieder.

It's hard to skip prototypes (or the prototype chain or prototypal inheritance) if you want to dive deeper into JS development (Not only pure JS, but also Node.js, Frameworks like Vue.js, React.js, Angular,...).

If you are like me a few years ago and get some serious headache each time you have to deal with prototypes in JavaScript, this will probably be THE article you were looking for to get your head wrapped around the principle of prototypes in JS.

From the MDN documentation (don't be scared, we'll clarify everything below):

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]]) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Private [[Prototype]] property

Refer back to the below illustration whenever you feel the need, it might help you to wrap your head around this concept easier.

So let's start from the base. Every object in JavaScript has a private [[Prototype]] prototype, which holds a reference to another object (or null). This means, that our new object will have access to methods and properties of that referenced object.

The private prototype object can be accessed with Object.getPrototypeOf() (to get the private prototype property) and Object.setPrototypeOf() (to set the private prototype property). Additionally you can also use __proto__ in some browsers to get and set this prototype.

In my opinion, things are easier with examples. So let's take a string to demonstrate how the prototype chain works.

const name = 'SiMedia';

Let's verify the prototype chain of the above string with the following code:

console.log(name.__proto__); // String {}
console.log(name.__proto__.__proto__); // Object {}
console.log(name.__proto__.__proto__.__proto__); // null

As we can see, our variable name has it's private prototype property set to String, so we can use methods like name.charAt() without the need to define them on our name object directly.

In the above example, the String.prototype object also has a private prototype set to Object.prototype (this happens, because String.prototype already inherits by default from Object.prototype. This allows us to use methods like name.watch(), even if the method isn't defined on the name object nor on the String object.

How does the prototype chain actually work? Let's imagine you call name.charAt(). First, JavaScript will search in the name object for a property named charAt. If there is no such property, JS will walk up the prototype chain. In our case, it will reach the String.prototype object and look, if there is a property charAt. Woohoo, we got such a property charAt on String. So the method charAt from the String object will be called on our name object.

This prototype chain could go up indefinitely, until the chain reaches a private prototype property set to null (as it is the case for Object.prototype).

Now we know, that each object has a private [[Prototype]] object, which references another object (or null) and allows us to inherit methods and properties almost indefinitely.

prototype property

But that's not everything you need to know about prototypes in JavaScript

Whenever we define a function, this function automatically gets assigned a property prototype, which by default will be set to an object containing two properties. constructor, which holds a reference to the function itself and __proto__ which references the private [[Prototype]] object for this object (or null). We can verify this with the following code (You can test this in your browser console or in a Node.js app).

// Just an empty function, to keep things simple.
function Car() {}

console.log(Car.prototype.constructor); // function Car()
console.log(Car.prototype.__proto__); // Object {}

So what is this prototype object?

The above function can be used (as every function) to construct a new object. If we create a new instance by using this function, the private [[Prototype]] property of that new instance will be set to reference the prototype property of the constructor function.

const tesla = new Car();

console.log(tesla.__proto__.constructor); // function Car()
console.log(tesla.__proto__ === Car.prototype); // true

As you can see, the private [[Prototype]] property of tesla is the same as the prototype property of the Car constructor function, because by calling new Car(), the tesla object gets it's private [[Prototype]] set to the Car.prototype object.

It's considered good practise, to add methods and static properties to this prototype object, as this way the methods won't be added to each instance separately, but instead they will be created only once and can be shared across multiple objects. This can save a lot of memory, depending on how many instances and methods youhave.

Inheritance

The prototype chain, as you might have already guessed, is being used to inherit methods and properties from other objects. But how do you actually set up the inheritance?

As we have learned above, we can set the private [[Prototype]] property of an object by calling Object.setPrototypeOf() or by using the __proto__ property.

Again, examples might make it more obvious. Let's imagine, we have a manually created tesla object, but we want it to inherit some methods from Car:

function Car() {}

Car.prototype.drive = function() {
  console.log('The car is driving...');
};

function Tesla () {}

Object.setPrototypeOf(Tesla.prototype, Car.prototype);

const tesla = new Tesla();

tesla.drive(); // The car is driving...

Let's go through the above code line by line:

• In line 1 we declare our Car constructor function. It won't do any assignments, to keep things simple.
• Line 3-5 adds the function drive to the Car prototype object, which logs to the console.
• Line 7 defines our Tesla constructor function. Again, we won't do any assignment, to keep things simple.
• Line 9 is where the magic happens. With the Object.setPrototypeOf() method, we tell JavaScript to set the private [[Prototype]] property of the Tesla.prototype object to reference the Car.prototype object. Now we can use methods and properties declared on the prototype object of Car
• Line 11 creates a new object from the Tesla function constructor. Remember, that we set the private [[Prototype]] of Tesla.prototype to reference Car.prototype. And when instantiating, the Tesla.prototype will be added as the private [[Prototype]] to our new created object. This way, we will have access to all functions and properties, which were attached to Tesla.prototype and Car.prototype.
• Line 13 calls the drive method on the tesla object. As the Tesla constructor function itself doesn't have this method, JavaScript walks up the prototype chain and finds the method on the Car.prototype object. The output will then be 'The car is driving...'

So, for the above example, the prototype chain will look like this (simplified):

tesla.__proto__ -> Tesla.prototype
Tesla.prototype.__proto__ -> Car.prototype
Car.prototype.__proto__ -> Object.prototype
Object.prototype.__proto__ -> null

Bonus: shadowing

When inheriting, it's often required, to override a method or property, which came from an inherited class (or constructor function). In prototypal inheritance, this is called shadowing.

Let's imagine for a second, that we don't want our tesla object to only drive, but instead flowing smoooth on the street. Maybe we use a 3rd party library, which provides us the Car base class and it's good practice, not to override 3rd party prototypes. So the only way to replace/extend our drive method from Car, is to add a method drive to the Tesla prototype object.

Let's get our hands dirty:

function Car() {}

Car.prototype.drive = function() {
  console.log('The car is driving...');
};

function Tesla () {}

Object.setPrototypeOf(Tesla.prototype, Car.prototype);

Tesla.prototype.drive = function() {
  console.log('The tesla is flowing on the street smoothly.');
};

const tesla = new Tesla();

tesla.drive(); // The tesla is flowing on the street smoothly.

Notice, it's important, that you call Object.setPrototypeOf() before adding new methods to the Tesla.prototype object, as they will be overridden otherwise.

In the above code, as soon as we call tesla.drive(), JavaScript again starts at the base of the prototype chain, in our case the tesla object itself. The tesla object itself doesn't have such a method, so JavaScript goes up to it's prototype. The Tesla.prototype object has a function named drive which will be called. At this point, there's no need to walk up the prototype chain anymore. That's why the drive method of Car.prototype won't be called.

But what, if we want to call both methods? Add the following snippet to the Tesla.prototype.drive method, wherever you want the code from the inherited class to be executed: Car.prototype.drive.call(this). This will call the drive method of Car.prototype and bind it's this keyword to the object you are currently interacting with.

function Car() {}

Car.prototype.drive = function() {
  console.log('The car is driving...');
};

function Tesla () {}

Object.setPrototypeOf(Tesla.prototype, Car.prototype);

Tesla.prototype.drive = function() {
  Car.prototype.drive.call(this);
  console.log('The tesla is flowing on the street smoothly.');
};

const tesla = new Tesla();

tesla.drive();
// The car is driving...
// The tesla is flowing on the street smoothly.

Conclusion

We saw, that each object has a private [[Prototype]] property, which defines, which object we are inheriting properties and methods from. We also saw, that functions have a prototype property, which is an object, that gets set as the private [[Prototype]] property of instances created with that function.

There is a lot more you can learn about prototype. If you understood the above principles, I recommend you red through the MDN Documentation and get your hands dirty by experimenting.

If you have any further questions, aspects you are unsure with or found anything, that is incorrect in this article, don't hesitate to reach out to me on Twitter: @ivansieder.

Vue.js is a modern, lightweight frontend framework which massively gained popularity over the past few years. If you have never heard about Vue.js before and are interested in learning more about it, the best way to get started is to read through the official guide.

Vue.js provides a v-for directive, which can be used for displaying a list of items using the data from an array.

The following example renders a list of products with it's name and price.

var app = new Vue({
  el: '#app',
  data: {
    products: [
      { name: 'Product 1', price: 300 },
      { name: 'Product 2', price: 100 },
      { name: 'Product 3', price: 200 }
    ]
  }
});

<ul>
  <li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>

Edit on CodePen

This is pretty straight forward and the way you would usually want to render a list.

There is really nothing wrong with the above code, but there is a small aspect, which really bugs me. As you can see, we are repeating the product identifier inside the output twice ({{ product.name }} and {{ product.price }}).

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality (ignoring the fact, that old browsers, which almost nobody uses, don't support those features - namely IE).

The feature we are going to use is called destructuring assignment. Basically, what the destructuring assignment allows us to do, is to pull a specific property off of an object and store it in a variable.

Now, rewriting the above code with the destructuring assignment, we can refactor the rendering part to the following:

<ul>
  <li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>

Edit on CodePen

So you might wonder: What does the above code now do differently than before? Well, the output will still be the same, but in my opinion this approach is way more readable and easier to understand. The above code pulls off the properties named name and price from each element inside the products array and stores them in variables named name and price. That way, inside the for loop you can use the variables name and price instead of referencing them with product.name and product.price each time.

This might not seem too useful in the above, short example. But imagine you have a much longer handler inside the for loop, in which you need to reference multiple properties multiple times. In that case, you might save a few key strokes, as you don't have to reference them with the product identifier each time.