Coding

Functional, Procedural & Object-oriented Programming – An Overview

  • 00:00:00 hi and welcome to this video in modern
  • 00:00:03 programming we often hear about
  • 00:00:04 programming paradigms about
  • 00:00:06 object-oriented programming functional
  • 00:00:08 programming and also about procedural
  • 00:00:11 programming now what do all these
  • 00:00:13 different terms mean and how do they
  • 00:00:15 impact how you write your code or how do
  • 00:00:18 you write your code if you follow an
  • 00:00:20 object-oriented approach how do you
  • 00:00:22 write your code if you follow a
  • 00:00:24 functional approach in this video we'll
  • 00:00:26 have a closer look and we'll do so by
  • 00:00:29 building a very simple dummy demo
  • 00:00:31 project in three different ways
  • 00:00:33 functional procedural and
  • 00:00:35 object-oriented
  • 00:00:42 so what are programming paradigms that's
  • 00:00:45 of course important to understand in the
  • 00:00:47 end you could say it's just a way of
  • 00:00:49 writing code it's about how you write
  • 00:00:52 and organize your code it's not a syntax
  • 00:00:55 feature it's not a special feature
  • 00:00:57 exposed by the browser or anything like
  • 00:00:59 this it's really just how you structure
  • 00:01:02 your code and how you reason about your
  • 00:01:05 program your writing so how your code is
  • 00:01:08 organized and in the end there are three
  • 00:01:11 paradigms you could follow you have
  • 00:01:13 object-oriented programming you have
  • 00:01:15 procedural programming and you have
  • 00:01:18 functional programming now what does
  • 00:01:20 this mean if you're writing your code in
  • 00:01:22 an object-oriented style it means that
  • 00:01:25 you organize your data and logic in
  • 00:01:28 objects or in classes and then in
  • 00:01:31 objects based on those classes which
  • 00:01:34 means you store your data in properties
  • 00:01:37 of objects you store your logic in
  • 00:01:40 methods of objects that's how you
  • 00:01:42 typically think about your code here
  • 00:01:45 everything in your application in your
  • 00:01:47 project gets represented as a class and
  • 00:01:51 then in the end as an object so you
  • 00:01:54 organize your code in logical entities
  • 00:01:56 you could say you kind of try to
  • 00:01:58 translate the application you're writing
  • 00:02:01 into the real world and you think about
  • 00:02:04 your application and the things that
  • 00:02:06 make up your application in real world
  • 00:02:09 terms if you're building a shop
  • 00:02:11 application you think about products and
  • 00:02:13 a shopping cart ends on that's how you
  • 00:02:16 think about your code and how you
  • 00:02:18 organize it now when you're following a
  • 00:02:21 procedural style and that's probably the
  • 00:02:24 style with which you got started when
  • 00:02:26 working with JavaScript you simply write
  • 00:02:29 a sequential series of execution steps
  • 00:02:32 and tasks so you have a top to bottom
  • 00:02:35 code execution you could say now you
  • 00:02:37 always have that in every style but here
  • 00:02:40 you simply list these different steps
  • 00:02:42 the engine in the end should execute and
  • 00:02:45 should perform you don't organize your
  • 00:02:47 code in logical groups or in logical
  • 00:02:51 pieces of data you don't use objects and
  • 00:02:54 entities to structure your
  • 00:02:56 in the end you just execute step after
  • 00:02:58 step and then we have functional
  • 00:03:01 programming and there we organize our
  • 00:03:03 code in if possible pure functions with
  • 00:03:07 clearly defined tasks you get all the
  • 00:03:10 data a function needs as parameters and
  • 00:03:13 then this function often alls return
  • 00:03:15 something new so you pass data around
  • 00:03:17 with parameters and your functions are
  • 00:03:20 your way of organizing your code you
  • 00:03:23 have many functions probably more than
  • 00:03:25 you have any other styles and your
  • 00:03:27 functions hold your logic every function
  • 00:03:30 if possible works on its own and this is
  • 00:03:32 how you structure your code now that's
  • 00:03:34 the theory it of course becomes way
  • 00:03:36 clearer if we see that on a real example
  • 00:03:41 so let's work on a very simple example
  • 00:03:44 application and this indeed will be a
  • 00:03:46 very trivial application here it's an
  • 00:03:49 application where I in the end have a
  • 00:03:50 HTML file which renders a form of form
  • 00:03:53 with two inputs and then with a button
  • 00:03:56 and I got some styling so that this
  • 00:03:58 doesn't look super ugly now we can
  • 00:04:00 simply open this by in the end
  • 00:04:02 double-clicking that index.html file in
  • 00:04:05 the finder or Windows Explorer and what
  • 00:04:08 we get is something that looks like this
  • 00:04:11 now here nothing happens if you enter
  • 00:04:14 something here and click the button
  • 00:04:15 you'll just submit the form and
  • 00:04:18 therefore reload the page besides that
  • 00:04:20 nothing will happen we will now write
  • 00:04:22 code that changes this and we will write
  • 00:04:24 this application code three times in the
  • 00:04:27 three different programming styles and
  • 00:04:29 we'll start with procedural because as I
  • 00:04:32 mentioned this might be a style you used
  • 00:04:35 when you started with JavaScript because
  • 00:04:37 I would argue it is the style that's the
  • 00:04:40 most obvious to use if you're getting
  • 00:04:43 started with programming so let's add a
  • 00:04:45 new script here procedural JavaScript
  • 00:04:49 you can of course name it however you
  • 00:04:51 want and in the index.html file below
  • 00:04:53 that link here I'll add a script import
  • 00:04:55 and point at procedural door JavaScript
  • 00:04:58 add the defer attribute to make sure
  • 00:05:01 that this script only runs after the
  • 00:05:03 entire file has been parsed and of
  • 00:05:05 course close the script tag as well and
  • 00:05:07 now we are importing this and we're
  • 00:05:09 ready to write some code and now we can
  • 00:05:11 really think about the different steps
  • 00:05:13 you want to execute because that's what
  • 00:05:15 procedural programming is all about so
  • 00:05:18 if we have a look at our HTML file what
  • 00:05:20 do we want to do well we want to listen
  • 00:05:23 to a click on this button of course or
  • 00:05:25 to be precise we want to listen for the
  • 00:05:27 submission of the form we want to get
  • 00:05:29 the values to user entered for the
  • 00:05:31 username and for the password and we
  • 00:05:34 might want to validate those values so
  • 00:05:37 at least make sure both fields are not
  • 00:05:39 empty show an error message if they are
  • 00:05:42 empty and then in the end if everything
  • 00:05:44 has been valid do something with the
  • 00:05:47 data let's say create a new object and
  • 00:05:50 you user object and then lock that to
  • 00:05:53 the console or
  • 00:05:55 like this so something fairly trivial
  • 00:05:57 that is what we could do here so for
  • 00:06:00 that back to the procedural J's file
  • 00:06:01 what do we need to do here well we need
  • 00:06:03 to get access to the forum and today two
  • 00:06:05 inputs so that we can work with the data
  • 00:06:07 there and then we can add a listener to
  • 00:06:09 the forum and so on so getting access to
  • 00:06:12 those things is easy
  • 00:06:14 we have IDs with the user input ID on
  • 00:06:16 the forum with the user name ID on this
  • 00:06:19 input and the password ID on this input
  • 00:06:21 so we can use these free inputs to gain
  • 00:06:23 access
  • 00:06:24 so I'll store the form in a form
  • 00:06:26 constant or I'll store a reference to
  • 00:06:29 the form in the form constant and we can
  • 00:06:31 get access with get element by ID and
  • 00:06:33 then here it was user – input and then
  • 00:06:36 second constant when I create here is
  • 00:06:39 the user name input we can get access
  • 00:06:43 with document.getelementbyid d username
  • 00:06:46 and last but not least a password so the
  • 00:06:49 password input that can be fetched with
  • 00:06:52 document.getelementbyid e
  • 00:06:54 password like this ok so we get this
  • 00:06:58 axis let's now add an event listener so
  • 00:07:01 on the forum I'll add an event listener
  • 00:07:03 to the submit event because that is the
  • 00:07:05 event we want to listen to you right and
  • 00:07:07 then we want to trigger a function when
  • 00:07:09 that executes we could use an anonymous
  • 00:07:11 function here but I will create a named
  • 00:07:13 function to sign up handler let's say it
  • 00:07:17 will get an event object automatically
  • 00:07:19 and it will point at this function when
  • 00:07:22 this event is triggered when this event
  • 00:07:25 is fired now this is vanilla JavaScript
  • 00:07:27 and of course even though we're using
  • 00:07:29 the procedural style we are allowed to
  • 00:07:32 work with functions as well this is not
  • 00:07:34 forbidden
  • 00:07:35 we just don't organize our code around
  • 00:07:37 the idea of using functions all the time
  • 00:07:39 so we pointed this function here when
  • 00:07:42 this event is triggered and now in this
  • 00:07:44 function we write all the logic again
  • 00:07:47 step by step which you want to execute
  • 00:07:49 so thus far our logic is get access to
  • 00:07:53 the different elements step by step and
  • 00:07:55 then define this function and then set
  • 00:07:58 up this listener now when this function
  • 00:07:59 runs we need to get the inputs here the
  • 00:08:03 values the user entered if we need to
  • 00:08:04 validate them and then create a dummy
  • 00:08:06 user object with that data
  • 00:08:08 and actually first of all I want to call
  • 00:08:10 event.preventdefault to prevent that
  • 00:08:13 browser default of sending the forum to
  • 00:08:16 a back-end server which need leads to a
  • 00:08:19 page refresh which I don't want here so
  • 00:08:21 let's call this as well and now we can
  • 00:08:24 get started let's get the concrete
  • 00:08:26 values to user entered so we got the
  • 00:08:29 entered user name and we can get this
  • 00:08:32 out of user name input dot value we can
  • 00:08:36 access that value here because we know
  • 00:08:38 that the element we're selecting here is
  • 00:08:40 an input element which will have a value
  • 00:08:42 property side note you could actually
  • 00:08:44 also only get access to the user name
  • 00:08:47 input in here if you wanted to because
  • 00:08:49 we really only need the two inputs here
  • 00:08:51 inside of this function so you don't
  • 00:08:53 have to do it globally here in this
  • 00:08:55 function would also suffice so maybe
  • 00:08:57 let's reorganize our code to do that
  • 00:08:59 instead of this function maybe even
  • 00:09:02 after preventing the default really
  • 00:09:04 right before we need a value that's not
  • 00:09:06 required but it is a possibility so we
  • 00:09:09 get the entry user name we can also get
  • 00:09:12 the entered password and we get that
  • 00:09:15 from the password input dot value of
  • 00:09:17 course just like this now with the two
  • 00:09:19 values we can validate them we could do
  • 00:09:22 this with a if check where we check if
  • 00:09:24 the entered user name if we trim it to
  • 00:09:27 remove access whitespace at the
  • 00:09:28 beginning and end if the length is equal
  • 00:09:30 to zero which means this is an invalid
  • 00:09:33 input it's empty in this case we could
  • 00:09:36 show an alert to the user and say
  • 00:09:38 invalid input username must not be empty
  • 00:09:44 that's something we could do here and we
  • 00:09:47 also return here which means we cancel
  • 00:09:49 this function execution so that we don't
  • 00:09:51 continue in the code if we make it past
  • 00:09:54 the ZIF check we might still have an
  • 00:09:56 invalid input because our password our
  • 00:09:59 entered password whoops with a double s
  • 00:10:03 here entered password that might also be
  • 00:10:05 wrong so we trim this and check if the
  • 00:10:07 length is zero or maybe if it's smaller
  • 00:10:10 or equal than five because let's say we
  • 00:10:12 want the password which has at least
  • 00:10:14 five characters if it is too short we
  • 00:10:17 can say invalid input password must be
  • 00:10:20 six care
  • 00:10:22 or longer and again we they're off to
  • 00:10:25 return so that we don't continue with
  • 00:10:27 the function execution if we do continue
  • 00:10:30 we made it past both if checks and we
  • 00:10:32 now know we have a valid input and
  • 00:10:34 that's where we now could create a new
  • 00:10:36 user object simply with an object
  • 00:10:39 literal again just like functions are
  • 00:10:42 not forbidden here objects are not
  • 00:10:44 forbidden here it's not like you're only
  • 00:10:47 allowed to use objects when you're
  • 00:10:48 writing object-oriented code it's more
  • 00:10:51 about how you organize your code and
  • 00:10:53 here it's really a step by step
  • 00:10:54 execution and we're using a very simple
  • 00:10:56 literal object here to store some data
  • 00:10:59 to group some data so here we then have
  • 00:11:02 let's say the username which is our
  • 00:11:04 entered username we have two password
  • 00:11:06 which is our entered password oops
  • 00:11:09 entered password and with that we're
  • 00:11:12 we're good and now we can console lock
  • 00:11:14 the user and maybe also send a greeting
  • 00:11:17 with hi I am plus user dot user name
  • 00:11:22 like this with that we had a very basic
  • 00:11:26 procedural program if we now save this
  • 00:11:30 and we go back to the browser and reload
  • 00:11:33 this page if I enter Maximilian here and
  • 00:11:37 then any pattern of my choice which is
  • 00:11:39 let's say too short actually I get this
  • 00:11:44 error invalid input password must be six
  • 00:11:46 characters or longer if I don't enter
  • 00:11:48 Maximilian here but I'll leave this
  • 00:11:50 empty I get this error regarding my
  • 00:11:52 username and if I do have valid inputs
  • 00:11:55 in both fields here you see we're
  • 00:11:59 logging the user we're logging hi I am
  • 00:12:01 Maximilian now as I mentioned this code
  • 00:12:04 here should look fairly straightforward
  • 00:12:06 to you there also is nothing wrong with
  • 00:12:08 it but this would be the the simple
  • 00:12:11 procedural way of writing your code you
  • 00:12:14 think about different steps you need to
  • 00:12:16 execute and you then just write them
  • 00:12:19 down and don't get me wrong code will
  • 00:12:21 always be executed from top to bottom
  • 00:12:23 but you could also organise this
  • 00:12:25 differently so let's have a look at the
  • 00:12:29 object-oriented programming style next
  • 00:12:33 so we wrote this code here in the
  • 00:12:35 procedural style you could say now let's
  • 00:12:38 create a new JavaScript file oo P dot J
  • 00:12:41 s where we will write basically the same
  • 00:12:43 logic but now using an object-oriented
  • 00:12:46 style so for dad an index.html I'll swap
  • 00:12:50 the import for the oo P dot J's file
  • 00:12:52 here now how would this look like if we
  • 00:12:55 think about this in an object-oriented
  • 00:12:57 way now there are certainly different
  • 00:12:59 ways of approaching this but I would
  • 00:13:01 like to think about the different
  • 00:13:03 entities to different types of objects
  • 00:13:06 we could work with here we could say our
  • 00:13:09 forum for example is one object it's one
  • 00:13:12 object which in the end will have Q
  • 00:13:14 inputs which has this button and which
  • 00:13:16 will have a method which is triggered
  • 00:13:18 when the button is fired the validation
  • 00:13:21 could be organized in its own object as
  • 00:13:23 well in a helper object which holds
  • 00:13:25 validation logic that we could reuse in
  • 00:13:28 different parts of the application if we
  • 00:13:30 had multiple forms and the user we
  • 00:13:33 create in the end well we could create a
  • 00:13:35 blueprint for this user as well a class
  • 00:13:37 or a constructor function which allows
  • 00:13:40 us to create user objects which has a
  • 00:13:42 built-in greet method to show this
  • 00:13:44 greeting for example so here in the
  • 00:13:47 object-oriented JavaScript file I will
  • 00:13:50 work with classes if you were working
  • 00:13:52 with an older version of JavaScript you
  • 00:13:54 could of course also work with
  • 00:13:56 constructor functions in stat classes in
  • 00:13:58 the end are just syntactic sugar with
  • 00:14:00 some extras and you learn all about that
  • 00:14:03 of course in my complete guide in the
  • 00:14:05 object-oriented and classes course
  • 00:14:07 section so which classes do we need here
  • 00:14:09 well we have our form right so I'll add
  • 00:14:12 a user input form class here and this
  • 00:14:15 should hold everything that is related
  • 00:14:17 to my form I also want to have another
  • 00:14:20 class and the order does not really
  • 00:14:21 matter here I'll just have the form at
  • 00:14:24 the bottom because it is the thing I
  • 00:14:26 will actually start with and it will use
  • 00:14:29 all the other classes which I'm about to
  • 00:14:31 define so I wanted to find them first
  • 00:14:33 though technically as I said you could
  • 00:14:35 also organize this differently but here
  • 00:14:37 another class we'll need later is the
  • 00:14:39 user itself so not the input form but
  • 00:14:42 for the concrete user object we work
  • 00:14:44 with and then maybe also our
  • 00:14:47 validator clause here which holds our
  • 00:14:49 validation logic now let's start with
  • 00:14:52 the user input form though what could be
  • 00:14:54 in there well I want to define my
  • 00:14:56 constructor function which allows us to
  • 00:14:59 do some initialization work whenever we
  • 00:15:02 create instance based on this class now
  • 00:15:06 my goal is to create an instance based
  • 00:15:08 on this class when the app starts in the
  • 00:15:10 end so therefore here I want to get
  • 00:15:13 access to the different inputs in the
  • 00:15:15 HTML file and to the form itself so that
  • 00:15:18 we can add a listener so here I will add
  • 00:15:21 some properties to the instance created
  • 00:15:23 based on the class with this keyword for
  • 00:15:26 example of form property and the name is
  • 00:15:29 up to you and here I get access to get
  • 00:15:31 element by ID user – input so here I
  • 00:15:34 store access to this user input form I
  • 00:15:37 also want to get access to the different
  • 00:15:39 input fields in the form so I have my
  • 00:15:42 user name input field
  • 00:15:45 document.getelementbyid e user name and
  • 00:15:48 of course one for the password so
  • 00:15:51 password input with
  • 00:15:53 document.getelementbyid e password so
  • 00:15:56 basically what we stored in constants
  • 00:15:59 before here this constant this constant
  • 00:16:03 and this constant is now getting stored
  • 00:16:06 in properties of this class or to be
  • 00:16:09 precise in properties of the concrete
  • 00:16:12 objects created based on this class I
  • 00:16:15 also of course will reach out to my form
  • 00:16:18 and add an event listener here for the
  • 00:16:20 submit event and when this is triggered
  • 00:16:23 I of course want to trigger a function
  • 00:16:25 now we could work with an anonymous
  • 00:16:28 function here but since we're in a class
  • 00:16:30 and we want to write object-oriented
  • 00:16:32 code it makes much more sense to create
  • 00:16:35 a method so a function inside of an
  • 00:16:37 object inside of a class here so for
  • 00:16:40 that I'll add the sign up handler method
  • 00:16:43 here which gets the event object and now
  • 00:16:45 I can point edit here this signup
  • 00:16:48 handler this ensures that this function
  • 00:16:51 which is registered on this class and
  • 00:16:53 which they offer is called a method is
  • 00:16:55 fired whenever this submit event occurs
  • 00:16:58 and in here
  • 00:17:00 we can now do stuff we can call
  • 00:17:02 event.preventdefault
  • 00:17:03 but we can also get to concrete entered
  • 00:17:06 values and validate them and so on now
  • 00:17:09 one important word if I want to get the
  • 00:17:12 let's say entered username here then I
  • 00:17:15 of course can reach out to this username
  • 00:17:17 input so to this pointer at this input
  • 00:17:21 element in the HTML code we stored here
  • 00:17:23 and access dot value but this won't work
  • 00:17:27 why won't it work because the this
  • 00:17:30 keyword ins of this method will not
  • 00:17:33 refer to this class in this case here
  • 00:17:35 why because this method gets fired upon
  • 00:17:38 this event and when you point at a
  • 00:17:40 function or a method based on an event
  • 00:17:43 that gets triggered so here on such a
  • 00:17:45 event listener that this keyword will be
  • 00:17:47 bound to the event target that's a
  • 00:17:49 default behavior to override this we
  • 00:17:52 have to call bind this year this ensures
  • 00:17:55 that this keyword inside of signup
  • 00:17:57 handler will point to the exact same
  • 00:18:00 thing this would point you in the
  • 00:18:03 constructor and that will be the
  • 00:18:05 instance created based on the class so
  • 00:18:07 now this will work correctly
  • 00:18:09 we can therefore also get the entered
  • 00:18:11 password here with this password input
  • 00:18:14 dot value so now we got the two values
  • 00:18:17 now it would make sense to validate them
  • 00:18:19 and here again thinking in an
  • 00:18:21 object-oriented way we could outsource
  • 00:18:23 this validation logic into a validator
  • 00:18:26 class we don't have to do that we could
  • 00:18:28 write it in line here we could just copy
  • 00:18:30 over this logic here from procedural but
  • 00:18:34 that means that whenever we have some
  • 00:18:36 other form in our application we can
  • 00:18:38 only reuse our code by copying it again
  • 00:18:41 and copy and pasting is not something
  • 00:18:44 you want to do too often because that is
  • 00:18:46 a bad programming self you're repeating
  • 00:18:49 yourself and you shouldn't do that so
  • 00:18:51 instead I'll add something here in the
  • 00:18:53 validator class I'll add a static method
  • 00:18:56 validate this means we can call it
  • 00:18:59 without instantiating this class and
  • 00:19:00 there I expect to get a value and then
  • 00:19:04 let's say a flag and a validator value
  • 00:19:07 if you want you so I'm writing a little
  • 00:19:09 bit of a more complex validator here
  • 00:19:11 what does this mean
  • 00:19:12 well well you should be
  • 00:19:14 a value I wanna check so the Android
  • 00:19:17 username and enter password flag should
  • 00:19:20 then allow us to identify which kind of
  • 00:19:22 validation we want to perform and then
  • 00:19:24 validate our value is basically optional
  • 00:19:27 allowing us to configure the validation
  • 00:19:29 now for this to work I'll add two new
  • 00:19:32 static properties here required anda
  • 00:19:36 writing at all caps to make it clear
  • 00:19:38 that this is basically a global unique
  • 00:19:40 value you could say and min lengths here
  • 00:19:44 and these are just identifiers which we
  • 00:19:47 can then use because my idea now is that
  • 00:19:50 I can check if in here in the validate
  • 00:19:52 function if the flag argument I'm
  • 00:19:55 getting if this is equal to this
  • 00:19:57 required so if we're running some
  • 00:20:00 required validation and if it is I want
  • 00:20:03 to return true or false I want to return
  • 00:20:05 true if the entered value is not empty
  • 00:20:08 and falls if it is empty so I will
  • 00:20:10 return value trim length greater 0 if
  • 00:20:14 it's not an empty input this will return
  • 00:20:16 true otherwise this will return false if
  • 00:20:18 the flag is let's say this min length
  • 00:20:23 then I will return value trim length
  • 00:20:27 greater validator values so there's
  • 00:20:30 extra argument with which we can
  • 00:20:32 configure validation why am i doing it
  • 00:20:35 like this well simply just to show that
  • 00:20:37 now we would have a reusable validate
  • 00:20:39 function because in the user input forum
  • 00:20:42 here in the signup handler we can now
  • 00:20:44 use this we can now simply check if
  • 00:20:48 validator so this class I just worked in
  • 00:20:51 dot validate which we can call like this
  • 00:20:54 because it's a static method
  • 00:20:55 hence we don't need to instantiate the
  • 00:20:57 class if this yields true for the
  • 00:21:01 entered username which is the value and
  • 00:21:03 validator dot required as a flag so I
  • 00:21:07 wanna validate this year with the
  • 00:21:08 required validator and check if it's not
  • 00:21:10 empty if this returns true I'm fine if
  • 00:21:13 it does not return true indicated by
  • 00:21:16 this exclamation mark here I want to
  • 00:21:18 show an error but this is not the only
  • 00:21:21 validation of course I also want to
  • 00:21:23 check when our validation logic here
  • 00:21:25 whenever expression
  • 00:21:27 if not validator Valley date for the
  • 00:21:31 entered password for D min length flag
  • 00:21:38 and the value of 5 as a minimum length
  • 00:21:40 if this returns not true or this first
  • 00:21:45 one returns not true in any of these
  • 00:21:47 cases I want to make it into this if
  • 00:21:49 block and here we can now show an alert
  • 00:21:51 and say invalid input username or
  • 00:21:54 password is wrong password should be at
  • 00:21:59 least 6 characters this is the alert we
  • 00:22:05 could show here and then we want to
  • 00:22:06 return here to not continue with this
  • 00:22:08 method execution so the error message
  • 00:22:11 the error handling still happens in this
  • 00:22:14 class here which makes sense because
  • 00:22:16 this is the place where I do work with
  • 00:22:18 my concrete values but the logic for
  • 00:22:21 checking the input is out sourced in a
  • 00:22:24 separate class now this is not a must do
  • 00:22:27 but it ensures that we could now reuse
  • 00:22:29 this validator in other forms of this
  • 00:22:31 application as well and we might of
  • 00:22:33 course have more complex validation
  • 00:22:35 logic in there than we currently do so
  • 00:22:39 now with this we know that after the
  • 00:22:41 safe check we have valid inputs and
  • 00:22:43 hence we could now create our new user
  • 00:22:46 so for this let's go to this user class
  • 00:22:49 and work on this here I wanted to find
  • 00:22:52 how a user should look like and attach
  • 00:22:54 any logic to it which it should have so
  • 00:22:57 for example here let's add a constructor
  • 00:22:59 to define some values with which we
  • 00:23:03 create a user specifically the username
  • 00:23:07 and the user password let's say and then
  • 00:23:10 in here we have this user name set it
  • 00:23:13 equal to you name and this password set
  • 00:23:16 it equal to you password here this would
  • 00:23:19 allow us to create a new object with
  • 00:23:21 these two properties but I also want to
  • 00:23:23 add some logic I'll add a great method
  • 00:23:26 here to this user object right just say
  • 00:23:28 console.log hi I am plus this user name
  • 00:23:34 and with that we can create a new user
  • 00:23:38 based on this class down there are
  • 00:23:41 new user with new user here we need to
  • 00:23:44 new keyword to construct a new instance
  • 00:23:46 of the user class and we forward our
  • 00:23:49 entered username and our entered
  • 00:23:51 password here and thereafter we can not
  • 00:23:54 only lock the new user but also call new
  • 00:23:59 user dot greet to execute that creat
  • 00:24:02 logic and with all that done there is
  • 00:24:05 just one remaining thing now thus far
  • 00:24:07 all the logic lifts in the user input
  • 00:24:09 form but this is just a class right we
  • 00:24:12 need to instantiate it to bring this
  • 00:24:14 code to life so below this here we can
  • 00:24:18 call new user input form like this to
  • 00:24:22 create a new instance we could store it
  • 00:24:24 in a constant but if we don't work with
  • 00:24:27 this constant we also don't have to do
  • 00:24:29 that so here I'm just creating a new
  • 00:24:30 instance and with that this class here
  • 00:24:33 now comes to life we run this
  • 00:24:34 constructor we setup this event listener
  • 00:24:36 and we're therefore good to go so now if
  • 00:24:39 we go back and we reload this page if we
  • 00:24:42 submit an empty form we should get an
  • 00:24:45 error and indeed we do if I enter a
  • 00:24:48 valid password here but I have an empty
  • 00:24:50 user name it still gets this error and
  • 00:24:52 if I enter a valid user name here but my
  • 00:24:55 password is too short we still get an
  • 00:24:59 error here if I enter a different
  • 00:25:00 password which is long enough we do log
  • 00:25:02 our user object here and this greeting
  • 00:25:05 so this now works and it's essentially
  • 00:25:07 the same logic as before in the
  • 00:25:09 procedural style the difference is now
  • 00:25:11 that we think about our code as
  • 00:25:13 different objects working together and
  • 00:25:16 we split our code logically into
  • 00:25:19 entities which can make it easier to
  • 00:25:21 reason about your code it can also help
  • 00:25:23 with reusing code as I mentioned at the
  • 00:25:26 example of the validator because we can
  • 00:25:28 use this anywhere in the application in
  • 00:25:30 the procedural style in the way we're
  • 00:25:32 doing it at the moment here we would
  • 00:25:34 have to copy this around to share it and
  • 00:25:36 again copy and pasting is bad because if
  • 00:25:38 you need to change your logic in one
  • 00:25:40 place you don't need to change it in ten
  • 00:25:42 places or how often you're using it so
  • 00:25:45 that's the object-oriented style so last
  • 00:25:47 but not least let's explore the
  • 00:25:49 functional programming style for this
  • 00:25:51 I'll treat and you file your functional
  • 00:25:53 dot two Jas and of
  • 00:25:54 course import this year in the
  • 00:25:56 index.html file functional the idea
  • 00:25:59 behind functional programming now is
  • 00:26:01 that we organize our code around
  • 00:26:03 well functions so we can still then
  • 00:26:06 reuse and share logic by simply sharing
  • 00:26:10 a function by exporting it and importing
  • 00:26:12 it in an our file and so on so how could
  • 00:26:15 we split this application here into a
  • 00:26:19 functionally written application it can
  • 00:26:23 be hard to think about this if you're
  • 00:26:25 relatively new in programming my
  • 00:26:28 personal experience shows that
  • 00:26:29 object-oriented programming is
  • 00:26:31 relatively easy to pick up because it's
  • 00:26:33 close to the real world so to say we
  • 00:26:36 think in objects and that's how we think
  • 00:26:38 about the real world as well the
  • 00:26:41 procedural style awls is not too hard
  • 00:26:43 because we execute code step by steps
  • 00:26:45 and therefore all we have to do is that
  • 00:26:47 we have to think about what we want to
  • 00:26:49 do in our applications step by step so
  • 00:26:51 what should happen when and then this
  • 00:26:53 code is basically writing itself now in
  • 00:26:56 the functional world it's a bit like in
  • 00:26:59 the object-oriented world we think about
  • 00:27:01 different things that make up our
  • 00:27:05 application but the things are now not
  • 00:27:07 objects but instead different logical
  • 00:27:10 blocks something like a validate
  • 00:27:13 function a function to get access to a
  • 00:27:15 Dom element a function to extract user
  • 00:27:18 input a function to create a new user a
  • 00:27:20 function to greet a user so basically we
  • 00:27:24 try to split our code into the different
  • 00:27:26 logical blocks we have here so in
  • 00:27:31 functional J's how could we get started
  • 00:27:33 because maybe dad helps us understand
  • 00:27:35 how it works it still starts with us
  • 00:27:38 getting access to the form right we need
  • 00:27:40 access to the forum's so that we can
  • 00:27:42 listen to the form submission to get
  • 00:27:45 access here we could write a new
  • 00:27:48 function connect form name is up to you
  • 00:27:51 and by the way you can't write this
  • 00:27:53 function in any way you want
  • 00:27:55 in this function declaration style here
  • 00:27:57 you could also write it as a function
  • 00:28:00 expression or of course you could use an
  • 00:28:02 arrow function here if you wanted to
  • 00:28:04 that all works here I'll just write it
  • 00:28:07 like this
  • 00:28:08 so connect form just like this without
  • 00:28:10 any parameters for now and in there I
  • 00:28:13 want to get access to my form and I do
  • 00:28:15 so by calling document get element by ID
  • 00:28:18 user – input and thereafter I will reach
  • 00:28:22 out to my form and add a submit event
  • 00:28:24 listener here and then then what then I
  • 00:28:28 want to point add a function that should
  • 00:28:30 execute when the form is submitted
  • 00:28:32 so maybe let's add a new function here
  • 00:28:34 the signup handler which gets this event
  • 00:28:38 object which calls event prevent default
  • 00:28:41 it will also do more than that but this
  • 00:28:43 is something we definitely need to do
  • 00:28:44 and then I pointed it here this is
  • 00:28:47 something we could do but it's not the
  • 00:28:49 perfect way of setting this up instead
  • 00:28:52 the idea where the core philosophy
  • 00:28:55 you really should embrace when writing
  • 00:28:57 functional code is that your functions
  • 00:29:00 should be pure and all the data they
  • 00:29:03 work with is received as parameters so
  • 00:29:06 that your functions are as predictable
  • 00:29:09 and reusable as possible so for this
  • 00:29:11 connect forum function this means that
  • 00:29:14 we would probably get the form ID as a
  • 00:29:16 parameter and although the form submit
  • 00:29:20 handler function as a parameter and then
  • 00:29:24 here instead of pointing at user input
  • 00:29:27 here we would point at form ID and here
  • 00:29:30 we would just say form submit handler
  • 00:29:33 and now this function has code which is
  • 00:29:36 totally reusable which makes no
  • 00:29:38 assumptions about what's in your HTML
  • 00:29:40 file it makes no assumptions about this
  • 00:29:42 ID and about the name of the function
  • 00:29:45 that should handle the submission
  • 00:29:46 instead we would call connect form here
  • 00:29:49 when our app is initialized so when this
  • 00:29:51 javascript file is parsed and executed
  • 00:29:54 for the first time and here I would feed
  • 00:29:56 in the concrete values so user input and
  • 00:29:59 a pointer at signup handler now of
  • 00:30:02 course in this simple app we don't gain
  • 00:30:04 much by this but now we really have a
  • 00:30:06 function which is pretty focused pretty
  • 00:30:09 straightforward pretty easy to
  • 00:30:11 understand and which is all pretty
  • 00:30:14 reusable because it's not tied to a
  • 00:30:17 specific forum in the HTML code if we
  • 00:30:19 had multiple forums which we wanted to
  • 00:30:21 connect
  • 00:30:21 with submit handlers we could reuse this
  • 00:30:24 function we could just call it with
  • 00:30:26 different arguments that already is how
  • 00:30:28 you should think about code when
  • 00:30:30 thinking in a functional programming
  • 00:30:33 style so now we connect this forum we
  • 00:30:36 point at the sign up handler when the
  • 00:30:38 form gets submitted in the sign up
  • 00:30:41 handler we now want to get our user
  • 00:30:43 input and we now all of course then want
  • 00:30:46 to validate it and create a new user now
  • 00:30:50 again we could copy our logic from
  • 00:30:52 procedural right we could copy this
  • 00:30:54 logic here for getting the user input
  • 00:30:57 for the moment and paste it in here and
  • 00:30:59 this would work but we're not really
  • 00:31:02 thinking in a functional way what did I
  • 00:31:04 just say about functions well they
  • 00:31:07 should be pure and should receive all
  • 00:31:09 the inputs they need as parameters and
  • 00:31:13 here again I'm hard coding IDs which are
  • 00:31:16 IDs from my HTML document into the
  • 00:31:18 function now we could do this but is
  • 00:31:21 this good well it's certainly not bad
  • 00:31:23 now you might argue that hard coding
  • 00:31:25 these IDs into the function is not
  • 00:31:27 something you want to do because we got
  • 00:31:29 rid of it here but I would argue that
  • 00:31:31 the sign up handler is of course a very
  • 00:31:33 specific function which indeed can be
  • 00:31:35 tied to the HTML file because it really
  • 00:31:38 is about this signup form it's not a
  • 00:31:40 general function here like Connect for
  • 00:31:43 emboss which should work with any form
  • 00:31:45 this really should only work with the
  • 00:31:46 signing up logic so that is fine but
  • 00:31:50 we're basically having some code
  • 00:31:52 repetition here why don't we create a
  • 00:31:55 new function here which we named get
  • 00:31:58 user input and here I expect to get my
  • 00:32:03 input element ID and in this function we
  • 00:32:09 then return document.getelementbyid eat
  • 00:32:12 which I've forward the input element ID
  • 00:32:14 parameter and then I access dot value
  • 00:32:17 here now of course this only works with
  • 00:32:20 input elements but that's the idea
  • 00:32:21 behind this function so we could add an
  • 00:32:24 extra check which checks if this is an
  • 00:32:26 HTML input element but here I just
  • 00:32:28 assumed that it always will be 1 and now
  • 00:32:31 we can rewrite this we can get rid of
  • 00:32:33 this line here and enter
  • 00:32:35 user name now simply is get user input
  • 00:32:37 for the user name ID and we can get rid
  • 00:32:43 of this line and T entered password now
  • 00:32:45 just is get user input for password and
  • 00:32:50 again we have a reusable function here
  • 00:32:52 and this is now a leaner and more
  • 00:32:54 focused so now we got the input of
  • 00:32:57 course you want to validate it so
  • 00:32:59 unsurprisingly we create a new function
  • 00:33:02 for this D validate function and here we
  • 00:33:06 could again follow the logic we set up
  • 00:33:08 in the object-oriented part we can't
  • 00:33:10 expect a value a flag and a validator
  • 00:33:14 value here and then basically copy over
  • 00:33:18 the logic from oo p because
  • 00:33:20 object-oriented programming and
  • 00:33:22 functional program is not that far apart
  • 00:33:25 it's a bit more than just translating
  • 00:33:28 classes to functions but the idea of
  • 00:33:31 organizing logic in methods and in
  • 00:33:34 classes is not that far away from the
  • 00:33:36 idea of organizing logic and functions
  • 00:33:38 so unsurprisingly we can copy the logic
  • 00:33:41 from the validate method here and add it
  • 00:33:44 in the validate function here now we
  • 00:33:47 just need to replace this required and
  • 00:33:49 this min length we've just required in
  • 00:33:51 min length and add some global constants
  • 00:33:53 here and yes this is all the possible
  • 00:33:55 not everything has to be inside of a
  • 00:33:58 function here we want some global flags
  • 00:34:02 some global identifier and therefore we
  • 00:34:05 can to find them just like this in our
  • 00:34:07 script here so now we have that we have
  • 00:34:09 our validate function we can now use
  • 00:34:12 this validate function here in the sign
  • 00:34:14 up handler so here we could now call
  • 00:34:17 validate and forward the entered
  • 00:34:20 username and so on and that again would
  • 00:34:22 not be wrong but I want to trade yet
  • 00:34:25 another new function may be here which
  • 00:34:28 I'll name create user and this is a
  • 00:34:33 function that takes the user name and
  • 00:34:36 the user password and this should now
  • 00:34:39 run the validation and let's just of
  • 00:34:41 course one way of doing it not the only
  • 00:34:43 correct one just one way of doing it
  • 00:34:45 so I want to run validation here and
  • 00:34:47 then if it succeeds
  • 00:34:49 also create my user so in here I will
  • 00:34:53 now check if not validate for a username
  • 00:34:58 and the required flex of dis yields
  • 00:35:00 false or if validate for the user
  • 00:35:06 password and the min length flag and a
  • 00:35:09 min length of 5 if either of the two
  • 00:35:11 yields false we could throw an alert but
  • 00:35:14 this would be a side-effect now what's
  • 00:35:16 the side effect
  • 00:35:17 a side effect basically is some logic
  • 00:35:20 you execute inside of a function which
  • 00:35:22 does something outside of the function
  • 00:35:26 which sends an HTTP request which
  • 00:35:28 changes something in the Dom or like in
  • 00:35:31 this case which shows an alert so these
  • 00:35:33 are typical side effects a pure function
  • 00:35:35 just receives parameters and then maybe
  • 00:35:38 return something and for the same
  • 00:35:40 parameters it always returns the same
  • 00:35:42 thing an impure function which has a
  • 00:35:45 side effect might also do that it might
  • 00:35:48 all return always the same thing but it
  • 00:35:51 also might manipulate something outside
  • 00:35:53 of the function so like I said in the
  • 00:35:55 Dom or a sender HTTP requests now
  • 00:35:57 sometimes you can't avoid this but here
  • 00:36:00 I want to have create user as a pure
  • 00:36:02 function so I will not throw my alert
  • 00:36:04 here instead I will throw a new error
  • 00:36:06 here with an error message of invalid
  • 00:36:09 input and I'll just copy the error
  • 00:36:12 message from the opie file here so copy
  • 00:36:16 that string and throw this here as an
  • 00:36:20 error message on this JavaScript error
  • 00:36:22 so here we're not showing an alert we're
  • 00:36:24 really throwing an error and that will
  • 00:36:26 automatically cancel the execution of
  • 00:36:29 the remaining function if this error
  • 00:36:31 gets not thrown so if we make it past
  • 00:36:33 this if check if we do have valid inputs
  • 00:36:36 then I will return a new object and that
  • 00:36:40 is my user with a username which holds
  • 00:36:42 the username value and with a password
  • 00:36:45 which holds this user password value so
  • 00:36:48 now create user is something we could
  • 00:36:50 call here in the signup handler we got
  • 00:36:53 our new user by calling create user and
  • 00:36:56 we forward the entered username and T
  • 00:36:59 entered password
  • 00:37:02 this could fail however this would throw
  • 00:37:05 an error if we have invalid inputs so
  • 00:37:08 here we can use try-catch and again we
  • 00:37:10 could use try-catch in the
  • 00:37:12 object-oriented style and the procedural
  • 00:37:14 style as well don't get me wrong but now
  • 00:37:17 I think here is really clean to do it
  • 00:37:19 like this we use try catch and we try to
  • 00:37:22 create a new user but if this fails I
  • 00:37:24 will now show my alert here and yes this
  • 00:37:27 will now produce a side effect but we
  • 00:37:29 could even outsource this into a
  • 00:37:31 separate function show alert but since I
  • 00:37:35 would do nothing else in there but call
  • 00:37:37 the alert function I'll do it just in
  • 00:37:39 here and as I said sometimes you can't
  • 00:37:40 avoid it it's okay to have functions
  • 00:37:43 that produce side effects you just want
  • 00:37:45 to keep most functions pure and
  • 00:37:47 side-effect free here however I will
  • 00:37:50 output the error message in an alert if
  • 00:37:53 this succeeds however I want to console
  • 00:37:56 locked a new user and of course also
  • 00:37:59 greet the new user but for dad we could
  • 00:38:02 create a never a new function here the
  • 00:38:05 greet user function which gets a user
  • 00:38:10 object and just calls console.log
  • 00:38:12 hi I am plus user username and again
  • 00:38:21 this here would also technically be a
  • 00:38:22 side-effect by the way because we do
  • 00:38:24 something outside of the function so
  • 00:38:26 here I can then call greet user and
  • 00:38:29 forward the new user and there are
  • 00:38:32 different ways of writing this these are
  • 00:38:34 just examples of course if we now save
  • 00:38:37 this and we reload this page if the form
  • 00:38:40 is empty and I click Submit I get this
  • 00:38:42 error if I have a valid user name but
  • 00:38:45 that password is too short I get an
  • 00:38:47 error if my password is long enough but
  • 00:38:52 the user name is empty I get an error
  • 00:38:54 and if both is valid and we click create
  • 00:38:59 user we're showing hi I am Maximillion
  • 00:39:02 the log is missing because I didn't
  • 00:39:04 enter it here so here of course I want
  • 00:39:06 to log my new user and then retry this
  • 00:39:10 I'll reload
  • 00:39:13 enter the values here again and now we
  • 00:39:17 get the same output as before so this
  • 00:39:20 now really is working and now this is an
  • 00:39:22 example of functional programming the
  • 00:39:25 core idea of course being that we
  • 00:39:27 organize our code into functions where
  • 00:39:30 most functions are pure and side-effect
  • 00:39:33 free and therefore highly reusable so we
  • 00:39:36 saw three different styles and of course
  • 00:39:39 you can also mix these Styles you could
  • 00:39:41 have a procedural style where you also
  • 00:39:43 work with classes and where you have
  • 00:39:45 multiple functions you can't have a
  • 00:39:47 functional style where you somehow all
  • 00:39:49 the sneak in some classes though it then
  • 00:39:52 technically wouldn't be a pure
  • 00:39:53 functional style anymore
  • 00:39:55 which style is the best though well the
  • 00:39:58 best style is the style which best works
  • 00:40:00 for you that really is the truth now
  • 00:40:02 there will be people who strongly
  • 00:40:04 disagree because like a couple of other
  • 00:40:06 things in programming this really is
  • 00:40:09 something where you can't have religious
  • 00:40:11 debates you can really discuss this and
  • 00:40:14 for a lot of people it seems to be the
  • 00:40:16 most important thing in life not to me
  • 00:40:19 though you can write code you can write
  • 00:40:21 apps with either style and you should
  • 00:40:24 find the style that best suits your
  • 00:40:26 needs now the more experience you get as
  • 00:40:29 a developer the more you will see that
  • 00:40:31 for a certain application types some
  • 00:40:34 Styles tend to work better than average
  • 00:40:37 styles and again you can find
  • 00:40:39 discussions about this on the Internet
  • 00:40:40 some of them are even kind of friendly
  • 00:40:43 which will show different applications
  • 00:40:46 and different examples for when to use
  • 00:40:49 which style you also sometimes have
  • 00:40:53 programming languages which strongly
  • 00:40:55 favor one style over another
  • 00:40:57 for example c-sharp is a programming
  • 00:40:59 language which is heavily
  • 00:41:01 object-oriented JavaScript on the other
  • 00:41:04 hand is pretty versatile there you can
  • 00:41:06 follow any style and therefore sometimes
  • 00:41:09 you also are forced into a certain style
  • 00:41:11 and sometimes you are not it's important
  • 00:41:13 to be aware of all these styles and
  • 00:41:15 nowadays at this point of time the
  • 00:41:18 functional style is really having a
  • 00:41:20 strong comeback and is super popular and
  • 00:41:23 it does have great advantages it's quite
  • 00:41:25 readable your code is
  • 00:41:27 nicely organized it's very
  • 00:41:30 straightforward functions tend to be
  • 00:41:32 relatively small if you're using this
  • 00:41:34 style correctly and it also produces
  • 00:41:38 highly reusable code object-oriented
  • 00:41:41 programming was extremely popular a
  • 00:41:43 couple of years ago and it's still far
  • 00:41:46 from being not popular don't get me
  • 00:41:48 wrong and it does have advantages it's
  • 00:41:50 also producing reusable code and it
  • 00:41:53 splits your code into logical pieces now
  • 00:41:56 with the classes you sometimes have a
  • 00:41:58 little bit of overhead which you don't
  • 00:42:00 really want though and sometimes it's
  • 00:42:02 easier to split it when following the
  • 00:42:04 functional style the procedural style is
  • 00:42:07 not bad at all and great for some
  • 00:42:10 simpler scripts the more complex your
  • 00:42:12 application gets the more complex it
  • 00:42:14 might get to work with this style though
  • 00:42:16 because you will naturally end up with
  • 00:42:19 at least using some classes or some
  • 00:42:22 other functions to make it more readable
  • 00:42:23 at some point because if you only use
  • 00:42:25 this style and you write your steps your
  • 00:42:29 code step by step your code can get
  • 00:42:31 harder to organize and to reason about
  • 00:42:33 but again here although you can mix and
  • 00:42:36 more functions and so on and therefore
  • 00:42:38 all the write great applications with
  • 00:42:40 the procedural style
  • 00:42:41 I hope that this overview was helpful
  • 00:42:44 and that it helps you make decisions
  • 00:42:45 about which styles you want and most
  • 00:42:48 importantly that it helps you understand
  • 00:42:50 styles being used in different projects
  • 00:42:53 or in different frameworks you work with
  • 00:42:55 in your future as a JavaScript developer