jQuery Logo

jQuery video tutorials from Toptal software engineers

A series of jQuery video tutorials and other educational posts to help you rapidly develop and perfect your jQuery skills.

Here we look at the effect of freezing an object in JavaScript and show you an example of how to do it.

Video transcript

In this demonstration, we’re going to take a look at what it means to actually freeze an object in JavaScript. So I’m going to create an object here called widget and we are going to give widget a couple of different properties here, so the first property we’ll give it is color, make it blue then we’ll give it a property called size and make it large, then we’ll give it another property called quantity and we’ll set it equal to three.

So here we have our widget object, now to kind of help us out with this demonstratio we are going to create a fuction called Displayinfo. Displayinfo is going to take parameters one is the objects itself followed by the property name and simply we are just going to output to the console log, the actual property descriptor information for a given property on the object.

So we’ll do Object.getOwnPropertyDescriptor just like that and then we’re going to pass in the object, and then we’re going to say property name and this will actually return out to us the property descriptor. So if we were to say dispalayinfo,widget,color; the output of this is going to look like this….

This is an example of how you can define many properties at once on an object in JavaScript using an Object Map.

Video transcript

In this demonstration, we’re going to take look at how we can define many properties on an object at one time. So let’s say I’ve got this object here. We’ll just make it an empty object literal. I can use the Object.defineProperty function to actually define a new property on this object.

So the first parameter is the object that I want to add the property to, then I’m going to add a new property called color, and then in here, I actually specify what my descriptor is going to be. So in this case, I want to make this property writable and I want to set the value of it to blue. So I can do this, and then I can come down here and I can actually say, console.log( object. color), and this will output to the web browser, the value of the property which is in fact blue. So I come here and I reload this, you’ll see that it outputs blue. But let’s say I wanted to define many properties on an object. Instead of just calling define property multiple times, I just want to pass in an object that has multiple properties defined.

I can…

A closure is an inner function that has access to the outer (enclosing) function’s variables and parameters. Here we take a look at some interesting examples of closures in JavaScript.

Video transcript

In this demonstration, we’re going to take a look at something that’s interesting about closures. I want to create a couple of global variables here. Var x, y and funcs, and funcs is going to be basically an array of functions. So I want to create a little loop here, we’ll say x=0 and then x<5, and then we’ll increment x on each iteration, and then we’re simply going to say, funcs.push, and we’re going to pass a function in here.

It’s going to be a very simple function, all it’s going to do, is do a console.log(x). So we’re going to basically create five functions, push them onto an array, and then we’re going to iterate over that array, and we are going to execute those functions. So we’ll do, y<5, y++, and then we’ll come in here, and we’ll actually say funcs, and we’ll reference the function with the y, and then we’ll actually execute it.

And so this will actually loop over all five functions and we’ll output the value of x to the screen. Now if we reload our webpage here, we’re going to see that we get 5 outputted five times. Now a lot of…

Here we discuss examples of the three different kinds of properties that can be added to a JavaScript object.

Video transcript

In this demonstration we’re going to take a look at the three types of properties that can be attached to an object. So the first type of property that we can attach is what’s known as an Instance Property. So I’m going to create a new Instance Property here on this on this widget object, we’ll call it Instance Func, it’s simply just going to be a function that actually outputs a line of text to the console.

So we’ll just say, an instance func was called, now we’re going to create another type of property, we’re going to create a Prototype Property so we’re actually going to put this one right off the Prototype of the widget object, and we’ll call this a prototype func just like this, and we’ll do it console.

log, a prototype func was called, there we go. The third type of property that we can have is what I call a Static Property. So we’re going to create a static func, we’re going to create this right off of the Widget Function Object put a function on here, and we’ll just have it output console. log a static func was called, there we go….

An example of how you can extract a prototype of an object and then replace the prototype’s methods with new custom methods.

Video transcript

In this demonstration, we’re going take a look at how we can take an object’s prototype and actually modify that object and extend it to perform additional functionality that we might be interested in. To perform this demo, I’m actually including 2/3rd party libraries, I’m going to be using jQuery, and I’m going to be using the Q promise library.

So down here I have set up my two deferred objects. I have an object called first Deferred and a second object called secondDeferred, and basically what I want to do, is I want to chain these two promises. So I first of firstDeferred. promise, and then hanging off that promise I have a then statement, which is then going to execute another function once that first promise is resolved. And the second deferred promise is going to be returned from this then statement, and once that promise gets resolved, then the final function here, saying both promises resolved, will be executed.

To actually resolve these, I’m just going to use a simple set Timeout. I have the setTimeout for the first Deferred to be resolved after 3000 milliseconds or 3 seconds, and for the secondDeferred, I have it set…

Enumerable properties are those which can be iterated by a “for..in loop”. Here we show you an example of one and go into depth on how they work.

Video transcript

In this demonstration we’re going to take a look at how we can create properties on JavaScript objects that will not appear in the Enumerated list of properties on that object when we use the for N loop. So lets say for example I have an object here called car, and I’m going to add some properties to it.

I’m going to say car.color, will make it blue. I’m going to do car.vin we give it a made up vin number here, so there’s is our vin number for the car, and we’re going to say car. transmission, we’ll say it’s an automatic, OK. So, there are some properties on our car, now if we wanted to display those properties we can actually iterate over them with a for loop, so I can do for prop and car.

So this will actually iterate over the properties of the car and coming here and do console. Log prop, put in a little equal sign and then call my car object using the bracket syntax and pass the name of the property and when I do this I can actually load up our webpage and we can reload this and we can…

In this video we show you how an example of how to “seal” an object in JavaScript to prevent any other changes to its properties.

Video transcript

In this video demonstration, we’re going to demonstrate how we can actually seal, or prevent properties of objects in JavaScript from being reconfigured. So to do that, let’s take a look here first at how to actually configure a property in JavaScript. So I’m going to create a new object here called obj, and we’re just going to make it an empty object literal. OK, and so we want to add a property to this object, now typically in JavaScript, if you wanted to add a property you will just do something like this, and now we’ll have a property called some property, and I’ve assigned it the value of some value, but with this we have to do it a little bit differently, so we’re going to actually use

object.defineProperty, and then we have to pass in the object on which we want to have the property, then we have to specify the name of the property, so in this case, I’m going to specify the name to be color, and then I can pass in some options. One of those options is configurable, and so for this, I’m going go ahead and set it to true so that…

In this video we show you an example of how you can prevent an object in JavaScript from being extensible.

Video transcript

In this demonstration, I’m going to demonstrate how we can prevent an object from being extensible. So I’m going to in come here and declare a new object, we’ll called it Widget. And I’m going to give it two properties, this. color which will set equal to blue, and then this. dimensions which will set to an object literal. And we’re going to give it two properties, we’ll give it height for 100, and width for 200.

Alright, so I’m going to come down here now and I’m actually going to instantiate this object, so create a variable called aWidget and I’m going to set it equal to new Widget, and then I can do console. log and I’m just going to output the color of this widget. So I’m going to save that, I’m going to come to my web browser, I’m going to reload my page, and you can see that I’ve now outputted blue.

So now I’m going to come back to my code, and I’m going to add a new property to this. So in JavaScript, when want to add a new property to something, we just simply add it. So I’m going to create a…

Here we look at an example of a property defined on an object’s prototype vs. a property defined on the object itself, as well as how to retrieve it.

Video transcript

In this video, we’re going to take a look at the difference between the properties defined on the objects prototype, and those properties that’re defined on the object itself. So take a look at this, we’re going to create a new object called, Base Widget. And base widget is going to have several properties on it.

We’re going to have one called, length, and we’ll set it equal to 12, and then we’re going to have one called width, and we’re going to set it equal to 24. Then using this base widget as a prototype, we’re going to create another object called widget, and we’re going to use the object.create function, and we’re going to pass the base widget object to service the prototype, and then we’re going to specify a couple of additional properties on here.

So we’re going to create a property called color, and we’re going to give it a value of blue. We are also going to make it, writable so that it can be modified, and we’re going to make it enumerable so we can actually enumerate over the properties of the object, and it will appear in the list. So make that true,…

In this video we show you an example of how to create custom properties by using Object.defineProperty with its getter and setter functions.

Video transcript

In this demonstration, we’re going to take a look at a situation where you might want to choose to use an object constructor, as opposed to an object literal. So, let’s say I wanted to create just a simple car object. Var aCar, we’ll just set it to a basically an empty object literal, and then I want to hang off of it a simple property.

We’re just going to call that property color. Now assign the property of the color, green, and now I can actually output that actual property to the console with the console.log. So console.log(aCar.color). So, now if I save that and I load up my web browser, I can actually refresh this and we’re going to see that it says that the color of the car is green, which is exactly what we would expect.

This is actually an example of a simple property. In ECMAscript 5 we actually have the ability to set up properties that have getters and setters and actually have a private field behind those getters and setters. So to set up something like that, we can’t use an object literal, instead we actually have to use a actual constructor function….

The top jQuery freelance developers

Small c7a6b7fbbc49433fe97f9a527486740c
Alexander V. Makeev, RussiaAlexander carries multiple technical degrees in Nuclear Physics and worked at CERN as a Python developer implementing dynamic performance optimizations for complex web applications. He excels at rapidly integrating reliable web technologies and achieving flexible software architecture designs. His strong theoretical and practical background in IT, business consulting, and project management makes him extremely capable on projects of any size. [click to continue...]
Small photo ps
Jake Varghese, United StatesAs an architect, Jake understands the process of solving complex problems that plague enterprise and medium size businesses. He is a full-stack problem solver--he can build entire apps from scratch or he can optimize an existing app already in the field. [click to continue...]
Small 0c939ba
Sam Varshavchik, United StatesSam is a senior freelance developer and architect with over 20 years of experience developing in the financial industry. [click to continue...]
Small ericwgreene
Eric W. Greene, United StatesEric loves to write code in a high-paced and challenging environment with an emphasis on using best practices to develop high quality software that meets project requirements, budget, and schedule. He enjoys learning new technologies and sharing findings with his colleagues. [click to continue...]
Small ed432433964882b7d5757576094fd287
Stefan Progovac, United StatesStefan is a highly skilled iOS developer with a master's degree in physics. He loves both technological and artistic sides of software engineering. He has had the pleasure to work on some popular enterprise-level apps used by millions of people for companies like Target, Best Buy, and Coca-Cola. He believes that app development is truly an art. [click to continue...]

jQuery blog posts

Never miss new jQuery videos

Thank you for subscribing

You can edit your subscription preferences here.