Table of contents
This blog is part of a series. Check it out here for next/previous days and resources.
Day 21 → Sets, Maps and Optional chaining
Learned about Sets that lets you store unique values of any type, whether primitive values or object references. A value in the Set may only occur once, it is unique in the Set's collection.
Map is similar to objects in JavaScript that allows us to store elements in a key/value pair. However, unlike an object, a map can contain objects, functions and other data types as key.
Optional chaining(.?) is a safe and concise way to perform access checks for nested object properties. In many practical cases, we'd prefer to get undefined instead of an error.
Resources
My Code - github.com/abhishekY495/Web-Development-Res..
Live website - abhishekY495.netlify.com/js
Day 22 → Method, "this" keyword, call, apply and bind
Learned about method which is a function inside an object. When the value is a function, the property becomes a method, and to access a property of an object from within a method of the same object, "this" keyword is used.
call, apply and bind are methods available to functions. They are used to pass different value of "this" to a function. The first argument in the three methods will be the value of "this" keyword inside of a function.
Resources
Day 23 → Prototype and new
Learned about prototype which is a hidden property that is either null or references another object. In short, prototype is just a property that every function in JavaScript has.
Day 24 - 25 → Classes, getter and setter, and more.
Learned about Classes which is a template for creating objects. A class is a kind of function. They use class keyword instead of function keyword. getter and setter are functions that execute on getting and setting a value, but look like regular properties. In an object literal they are denoted by get and set.
Also learned how JavaScript works behind the scenes.
Resources
Day 26 → Hoisting and Closures
Learned about Hoisting that is a behavior in which a function or a variable can be used before declaration and Closures are basically functions that can access values of its lexical scope; Whenever a function is returned, even if its vanished in the execution context, it still remembers the reference it was pointing to.
Day 27 → Nothing
Did absolutely nothing. Watched random YT videos the whole day and played FIFA the whole night.
Day 28 → JavaScript DOM
Learned about the DOM which represents an HTML document as a tree of nodes. The DOM provides functions that allow you to add, remove, and modify parts of the document effectively. Even if you are using a framework like React, Angular, or Vue, it's very helpful to understand the core concepts of the DOM like events, elements, and classes, because they transcend all of the different frameworks. Even if the frameworks help you do these things, you still need to know how it works under the hood.
Day 29 - 30 → Events and made a Simple Task App.
Events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will be executed after an event occurs (such as when a user clicks a button).
Resources
After learning events i tried to create a websites that everybody builds when learning web-dev such as random-background-color and a task app. So i made it as well.
At first, i used to think that creating a random-background-color and a task app would be very easy after i learned all the above things, but when i started to build the apps, especially the task app i realized it was quite tough. I think that everybody learning web-dev should first create such websites to strengthen their basics. It took me around 2 days to build the task app. Did a lot of Googling and Stack Overflow to solve my problems.
Like i didn't know how to add transition/animation on removing an element, turns out that there is an event listener for it (animationend, transitionend), which waits for the animation to happen and then removes the element.
Random Things -abhishekY495.netlify.com/random
Task App - abhishekY495.netlify.com/taskapp
Next, iam gonna learn
- Asynchronous JavaScript which includes - Callbacks, Promises and Async Await
- AJAX
- Fetch API
And then do the JavaScript30 by wesbos which is a free course that does 30 vanilla JavaScript projects in 30 days.
All above and future resources can be found at the below Github repo.
This blog is part of a series. Check it out here for next/previous days and resources.