I have learned a lot with Mod 4. JavaScript is a 360 from Ruby on Rails. With this Single Page Application( SPA) for JavaScript gave many new ways in developing my knowledge, but at the same time still having me using Ruby on Rail a familiar feeling in creating my application. With Ruby on Rails I used the Model and Controller (MC) to create the backend and bringing JavaScript into the frontend by using Object Oriented Programming (OOP). While having a Single-page application it is the fastest way to load websites without hitting the server every time the user interacts with the application. During the creation of the SPA I have to learn about:
- Variables — is simply a name of storage location
- data structures — are techniques for storing and organizing data that make it easier to modify, navigate, and access
- functions — is a block of code designed to perform a particular task and is executed when “something” invokes it (calls it).
- Hoisting — interpreter’s action of moving all variable and function declarations to the top of the current scope. And it’s JavaScript default behavior of moving all of the variable and function declarations to the top of the current scope.
- Scope — refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global.
Fun fact:
(Fundamentally, scope is function-based while context is object-based. In other words, scope pertains to the variable access of a function when it is invoked and is unique to each invocation. Context is always the value of the this keyword which is a reference to the object that “owns” the currently executing code. )
- Context- is related to objects. It refers to the object within the function being executed. this refers to the object that the function is executing. This is determined by how a function is invoked.
- This — keyword refers to the object it belongs to.
- Closures — is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables — a scope chain. The closure has three scope chains: it has access to its own scope — variables defined between its curly brackets. it has access to the outer function’s variables
- ES6 syntax — brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more
- let, const
let — declare block-scoped variables using the let keyword.
let vs. …
const — define constants using the const keyword.
- arrow functions — are best for callbacks or methods like map, reduce, or forEach. Also, it allows you to create functions in a cleaner way compared to regular functions
What is Object Oriented Programming (OOP)???
OOP is a programming paradigm based on the concept of objects.
The four major benefits in OOP:
-Encapsulation, -Abstraction,-Inheritance, -Polymorphism
ES6(ECMAScript2015) is a major upgrade to JavaScript. In this article we will learn the new way of achieving Object Oriented concepts like class, object, static properties, constructor and inheritance with super and extends in JavaScript
Classes vs. Objects
Object
Any real time entity is called as an object.
Every object consist of state (look and feel) and behavior (what it does)
States are called as properties and behaviors are called as methods
Classes
Class is blueprint of an object
It basically contains:
-Variables/ properties
-Methods/ Functions
Static
In an ES6 class the static keyword lets you define a function on the class itself, as opposed to instances of the class.
Constructor
Is a function that creates an instance of a class which is typically called an “object”. In JavaScript, a constructor gets called when you declare an object using the new keyword. The purpose of a constructor is to create an object and set values if there are any object properties present.
Inheritance
Refers to an object’s ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance.
Understanding the foundations of JavaScipt can bring more clarity in how JavaScipt can work with html, css, and how it can trigger any events or variables specified within it, the Document Object Model (DOM- is created when a page is loaded, and it is made up of nodes and objects which map out all of the different elements and attributes on a page.) JavaScript can be overwhelming, but the more you practice with it, the more you have basic and clarity of the foundations the more you can became comfortable with JavaScript.
