javaScript object oriented programming tutorial - Understanding Objects Part 1

Подписаться 147 тыс.

Просмотров 89 тыс.

50% 1

JavaScript OOP Fundamentals : Part 1 ( Object Explained )
- Creating Objects
- Adding Properties to Object
- Removing Properties to Object
- Adding Methods to Objects
- Public Methods
- Private Methods
- Closures
- Inner Functions
Javascript functions are first class objects in javascript. IN this training we will understand how to write objects properly. We will use Jsfiddle to practice.
Understanding objects in Js, OOJ, Object oriented javascript , object oriented programming in javascript,
object oriented programming concepts in javascript
javascript object oriented programming
OOP JavaScript
javascript objects
javascript objects explained
javascript objects and methods
javascript object notation
javascript object literal
javascript object Properties methods
javascript function object
javascipt
#JavaScript #JavaScriptObjects #OOP
*My Udemy Courses
www.udemy.com/...
*couponCode*=TECHSITH-9.99
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@singsarav 8 лет назад

Another excellent tutorial to understand Javascript Objects.

@vigoworkchannel1681 3 года назад

I wish I never watched any other JavaScript tutorials and came here in the earlier days. Great explanations. Wow

@martyoconnor7211 8 лет назад

Wow, thank you so much for making this video. This is by far one of the best explanations I have been able to find, and trust me when I say that I have been searching for a while.

@SadhguruSir 7 лет назад

Indeed

@scsenglish2677 6 лет назад

Agreed

@AyushRaj-ej5wt 4 года назад

tabahiiiiii concepts sirrrrrr..... 10 baar pura playlist dekho aur lage rho coding me bhai hm bhi inke jaise experts ban jayege. thankssss sir

@Techsithtube 4 года назад

Lage raho Ayush bhai, Thanks for the awesome comment

@vedravula196 5 лет назад

Yours clear and precise explanation with sample codes is the best i have come across till now. Thank you !!!!

@kaveridinesh4054 7 лет назад

Wow, Superb explanation with great clarity. Thanks a lot its a brilliant video

@andreaho4841 8 лет назад

This tutorial is the most amazing and easy-to-understand one that I ever get. Clear speaking & well-explained codes make yours outstanding. Thanks for your effort.

@rajeshkumarsahoo 6 лет назад

Thanks for clearly explanation about object concept..

@ashse4424 6 лет назад

What i have Learned (correct me if i am am wrong) 1) Can not use public method or property if using private method. 2) Semicolon after each sentence if using function object, using Singleton use comma. 3) if Assigning property outside of object, use " = " instead of " : " Thanks tecsith for this tutorial.

@osazemeusen1091 6 лет назад

Amazing explanation of function objects with a private and public scope. Thanks for making these videos

@lenroyquashie3970 5 лет назад

Such pure explanation! Quite clear and not rushed in your approach. A job well done!!

@Techsithtube 5 лет назад

Thank you for watching! :)

@itsmerahulsoni 7 лет назад

Thank you sir... I followed your all videos which are very simple and on important topics and this is one of the best video

@Techsithtube 7 лет назад

Thanks for watching! :)

@satyasahoo26 8 лет назад

Good One

@ganapathilana7069 3 года назад

fruitful content. thanks

@smoothbeak 8 лет назад

The value "undefined" is not an error! I think you know this, but it might confuse people.

@simonkalu 8 лет назад

Amazing OOP explanation. You rock mehn

@abhishekps782 8 лет назад

You are so awesome. I wasted hours and hours on trying to understand the basics of JavaScript but your way of presenting things scores over it. Thanks a ton. And Yes Subscribed :)

@CliffStamp 7 лет назад

I appreciate how you use easy to understand examples of objects, etc. in your code. While I understand the historical dependency of foo/bar, the over use makes it unintelligible to the learner.

@esakkijeyaraman2859 4 года назад

Great great!!!

@girbansingha4698 6 лет назад

thank YOU. I really like the way you explain in details.

@onlynaveen 6 лет назад

Thanks, explanation skill is realy fruitfull and encouraging to learn. Ant it's easy to easier grab your lesson.

@ruipeng1624 7 лет назад

Great explanation on closure!

@nileshratanguptanrg 8 лет назад

very nice video and clear explains.... keep it up pls...

@jaymeshvyas0721 8 лет назад

too many useful points. Thanks

@martinbozinovski 5 лет назад

this.veryGood. Nice explanation of OOP. This helped me a lot. Thank you for that.

@noaakshay 4 года назад

Respected sir, you had done a wonderful job but create a separate playlist for javascript like javascript from scratch.

@Techsithtube 4 года назад

I do have a playlist call JavaScript from Scratch. From my channel you can access playlists.

@LuckyYouDude 8 лет назад

Hi do you have the part 2 related to this video? or should I continue with the JS Prototype inheritance videos? thank you again for all these wonderful videos.

@dragosmarin4686 6 лет назад

Very well explained !

@Techsithtube 6 лет назад

Thanks for watching!

@Oswee 5 лет назад

Thank you for great explanation. Watching this in 2019. when we have classes but i was not able understand this object concept. :)

@Techsithtube 5 лет назад

I have a playlist on object oriented javaScript where I start from functional constructors and end with classes. ru-vid.com/group/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt

@RahulGupta-km7nm 7 лет назад

very good, a little confusion at last about closure, but good to digest. keep it up. Very effective tutorial. (y)

@kangchen2101 8 лет назад

Absolutely love your tutorial, you're awesome! thank you for sharing your knowledge.

@Techsithtube 8 лет назад

+Kang Chen I am glad that you like it. keep learning!

@dipakchavda5763 7 лет назад

First of all Thank you very much for the nice video. It was really nice explanation but can you explain that how does work with core JavaScript or prototype methods to create and works with class and also want to ask understanding about some rare used methods and functions like new set() in JavaScript.

@Techsithtube 7 лет назад

For that you can check out my new series on object oriented JavaScript where I explain prototype inheritance to classes. Lot of my viewers were asking this kind of question so created this series.

@jimmydeanbakker 7 лет назад

You did a great job on this. I learned a lot.

@Techsithtube 7 лет назад

Thanks! Glad it helped!

@elinriahi7969 7 лет назад

Create (y) thanks very much

@reshmayasmin9717 5 лет назад

When u created var tmp = {}; Then its again private object like anything either function or object created with var keyword inside pizza functional object are private members. Then if being crust, toppings being private members can't be accessed directly from outside, how come tmp is accessible ?

@ubeenfopped 7 лет назад

Super helpful. I just needed someone to visually and verbally go through what I've been reading. You rule and thanks again.

@KingHerring 8 лет назад

Nice video!

@amrapalishukla5167 2 года назад

I'm very get confused about this private method where return toppings what if we have some more variables inside this private methods how can I access these

@webprogramming2707 7 лет назад

thank you....very well explained :)

@SheshagiriPai 8 лет назад

Hi TechSITH, can you please do a video which shows existing JS prototype way and ES6 class way with examples of inheritance and polymorphism. That would be awesome. You have a very nice way of explaining with simple examples. Thanks.

@Techsithtube 8 лет назад

+Sheshagiri Pai I am in the process of creating a tutorial on prototype so i will release it by end of this week . I will have a separate tutorial on ES6 class way, coming up soon. THanks

@Techsithtube 8 лет назад

+Sheshagiri Pai Hi I just released a tutorial on prototype. please check it out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7oNWNlMrkpc.html i have part -2 of this tutorial coming up in few days. Thanks

@MrBickysharma 5 лет назад

forgive me if i am wrong. is it necessary to capture the variable in a function ???? because this is also working var pizza= function (){ var toppings=3; var tmp ={}; tmp.top=toppings; return tmp; } var pizzaA =new pizza(); console.log(pizzaA.top); p.s i am a novice

@wayne-wallace-success-coach 6 лет назад

I don't see the closure part in my console?

@Harshit424 8 лет назад

In the video at 29min 53 sec if we write var PizzaA=Pizza(); and omit the new keyword and then console.log(PizzaA.getToppings()); the result would still be the same.Why is that?

@vishaljain8868 7 лет назад

That's because Pizza() in that case directly returns an object and you can assign it with or without using new keyword while constructor Pizza() needs to be always initialized with new keyword.

@huihao8058 8 лет назад

I like you video, could you please also explain why we use object, and when to use it and why it is useful? We can google around how to create objects, add properties and methods or delete. But the most important thing is truly understand why it is useful and when to use it. Thank you!

@Techsithtube 8 лет назад

JSON objects are most intuitive , key and value pairs are most natural way to present data. And some of those values can be arrays. You can represent any data with JSON . We use objects in JavaScript so we can add, remove properties from it and save it to a database. We can also send a post request using JSON objects. Does it make sense?

@nileshratanguptanrg 8 лет назад

want to understand nodejs. pls provide us

@wgalloPT 7 лет назад

Awesome, awesome tutorial...thank you soo much...but a curiosity...where did u find the initial background type for the presentation where you outline the topics?? This dotted purple kind dark...where did u find it?

@Techsithtube 7 лет назад

Are you referring to the background color of the presentation? Its done using keynote software on mac. There is a template called industrial that gives that nice look.

@vinothinicool 5 лет назад

Am I doing anything wrong here Sir? Why is my code throwing error? var pizza = function() { var toppings = 3; var getToppings = function() { return toppings; }; var tmp = {}; tmp.getToppings = getToppings(); return tmp; }; var obj = new pizza(); console.log(obj.getToppings());

@Techsithtube 5 лет назад

here you have defined getToppinges as a function. and you are using it as a method of tmp which wont work .

@vinothinicool 5 лет назад

@@Techsithtube thanks for clarifying it sir :)

@missrimriahi4678 7 лет назад

thank you very much , :D good work

@Techsithtube 7 лет назад

Thanks for watching!

@missrimriahi4678 7 лет назад

I would like to do you a training nodeJS or reactJS

@jeepanda3213 8 лет назад

which book will you recommend for a person coming from vb.net environment even though not an expert,but have basic understanding of js,html,css and node.js

@Techsithtube 8 лет назад

+Jee Panda There is a great javascript book by Douglas Crockford called "JavaScript the good parts" For HTML,CSS and nodejs I don't have a particular book in mind. I am planning to create a series of tutorial on HTML and CSS from beginning in next month or so. I will let you know on release.

@rahuldwivedi4758 8 лет назад

Thank you so much for this awesome video. I have a doubt. At 27.50 when you say tmp.getToppings= getToppings, shouldn't it be tmp.getToppings= getToppings() instead as the latter is a function? Please let me know what I'm missing.

@rahuldwivedi4758 8 лет назад

Got it when I actually did on jsFiddle. getToppings() will return the result after executing the function which is 3, on the other hand simply getToppings will return the function expression which is what we want.

@Techsithtube 8 лет назад

GetToppings is a function expression. Which means it's a variable that holds function inside. So if I want to execute it, I would say GetToppings() . However if I want to just assign it to another variable without executing I would say tmp.gettoppings = GetToppings;

@glowingone6472 7 лет назад

Do most non-object-orientated languages use this workaround for creating classes?

@Techsithtube 7 лет назад

JavaScript was originally designed for non-programmers ( webpage builders) so this is how it evolved. also browser has limited resources so it also make sense to be a lite weight language.

@glowingone6472 7 лет назад

I'm just starting to learn really but does that mean that Object oriented design is sort of the natural progression as any language develops/ needs to do more? Thanks again for the vid, I''m sure the next time I come back to it more of it will click.

@Techsithtube 7 лет назад

not necessarily. some languages like java were designed to be object oriented. However, I would call javaScript more like a functional language. There is huge trend towards functional programming as its more flexible compare to object oriented programming. Even programmer uses composition over object oriented programming.

@glowingone6472 7 лет назад

Thanks. I'll probably be trying to learn Java really soon to try and make some apps to make a living I suppose I'll begin to find out where functional and object orientated languages really differ.

@balledachandrahas8326 5 лет назад

Video is very annoying for its zooming in and zooming out frequently...eyes started to strain

@vinothinicool 5 лет назад

Hello Sir...thanks for the video...got 1 quick question.. var pizza = function() { var crust="thin"; this.toppings=3; var tmp={}; this.getToppings=function(){ return this.toppings; } var getcrust=function() { return crust; } tmp.getCrust=getcrust(); return tmp; }; var obj=new pizza(); console.log(obj.constructor); I dont get constructor details in ouput...Instead, I get, ƒ Object() { [native code] }...can you please explain

@Techsithtube 5 лет назад

a constructor is a native method of any function. so it's just giving you definition of it. you dont have any properties named constructor.

@vinothinicool 5 лет назад

@@Techsithtube thanks for clarifying it Sir!you rock..

@andreescudragos680 8 лет назад

"This" refers to the object in your example this=pizza object!

@justkamilcom7721 8 лет назад

That was quite complicate

@roshnidevadiga4252 7 лет назад

Very simple and precise explanation of concepts which are otherwise confusing. Great job! Looking forward to more videos

@thriveniaswi4483 7 лет назад

IT really good tutorial.nice explanation about object.

@fmartinez004 4 года назад

I can't listen anymore, too much slurping and smacking, sorry.

@davidschoi 8 лет назад

13:55 it also has additional stuff like a pizza! i mean a function...

@m.r.c.prasad3482 6 лет назад

Hi, The videos are nice and easy to understand. Can you provide angular 2 videos as well in such a practical approach.

@Techsithtube 6 лет назад

I have a tutorial series on angular ru-vid.com/group/PL7pEw9n3GkoWoDfLSOQCtLIEg-gL5dYOF

@angelchappell6514 6 лет назад

At the Console.log(Pizza); step the console reads {crust:”thin”, toppings: 3, hasBacon: true, howmanyToppings: f, price: “12$”} I triple checked and I have it all the exact same setup, but I do not know how to keep the howmanyToppings: f, from showing. It works when I type in console.log(Pizza.howmanyToppings()); it will show three. Any ideas to fix this? Or can explain what is going on?

@Techsithtube 6 лет назад

Can you make a jsfiddle and share the link so i can see what is going on .

@lidefsomar5291 6 лет назад

Very helpful tutorial. Thank you.

@Techsithtube 6 лет назад

Thanks for watching ! :)

@narendrakumawat9251 7 лет назад

Hey man your explanation is awesome

@visibilityhidden2254 8 лет назад

difference between getElementByTagName() and querySelector() and both of them not working in internet explore

@Techsithtube 8 лет назад

+SANDEEP SAINI which version of internet explore you are using?

@nakulbhatt 6 лет назад

Great tutorial. Just one thing. You have not defined tmp.getToppings as public. Previously 'this' keyword is used for defining variables and methods as public in this case 'this' is not used still tmp.getToppings is public. How???

@scsenglish2677 6 лет назад

Great Video ..salute to you....for making closure and object creation crystal clear.....Hats off once again..

@ruixue6955 6 лет назад

1:07 category of Javascript object 5:57 create an object with property and methods 10:58 remove a property 11:47 the pizza object is a singleton 12:36 create a function object

@Rajinderdung 5 лет назад

Very handy

@anithadharaneedharan6758 6 лет назад

No words to thank you for the Superb video. Feel sorry for those who disliked

@davideugene7911 7 лет назад

It was great, a little hard but great and clear. Thank you very much :)

@mariusmarus8537 6 лет назад

Very impresive

@rupeshogale4384 5 лет назад

Thank you for sharing knowledge we are every hungry to learn from you thank you very much

@rajeevsharma2404 7 лет назад

best tutorial for javascript..nicely explained... SUBSCRIBED your channel :) could you please come up with a video explaining "class & constructor" of ES6 and what difference it brings in JS programming?

@Techsithtube 7 лет назад

That is my plan . in a month or so . Thanks for watching! :)

@sonailmec4087 7 лет назад

Nice video

@igmtan 8 лет назад

great i m waiting your more javascript tutorial plz upload

@CliffStamp 7 лет назад

In the last example (at 32:20+) when you return tmp, is there any way to access the crust variable from pizzaA?

@Techsithtube 7 лет назад

You can also write a method called getCrust and add it to tmp. i will be stored as a closure. If you want to know more about cloures I have a tutorial on it . I also released a tutorial on javaScript mixins where i explain this well.

@vikashsahu4789 7 лет назад

Please share the link for the Closure as mentioned in the above comments.Thanks .

@dod9652 8 лет назад

Amazing tutorial! It is very difficult to find good tutorials about object oriented programming in JS but this video is very helpful.

@Techsithtube 8 лет назад

+Do D Thank you!

@yaswanthkrishna2154 7 лет назад

Is there any complete course regarding front end which covers HTML 5 , CSS3 , JavaScript , jquery , bootstrap & angular js

@Techsithtube 7 лет назад

I think they are all very deep and i dont think there would be a cource that would teach it all. I think you want to learn each individually.

@yaswanthkrishna2154 7 лет назад

could you please guide me on how I can learn individually it will be a great help for me . I am very much in need of them.

@Techsithtube 7 лет назад

I would suggest start with HTML and CSS. then learn JavaScript/Jquery. By then your fundamentals would be clear so you can move to Angular.. WHat is your current level of knowledge?

@yaswanthkrishna2154 7 лет назад

I am having some work experience in html CSS JavaScript jquery bootstrap but don't have any experience in website designing

@Techsithtube 7 лет назад

Website designing is completely different art. Are you trying to build your own website or working for a company?