KennethIsaac.IO

  JavaScript is a weird language. We are all aware of this. But one of the biggest peculiarities is the concept of hoisting. Because hoisting is centered around variable declaration, it confuses beginners to no end. In this blog, I am going to give practical, real-world explanations of hoisting! Hoisting Introduction Hoisting is a default behavior which variables and function are moved to the top of the scope before JS executes.   Even more simply put, it allows you to use variables and functions before declaring them. x = 1; console.log(x); //This is valid and will execute. var x; Essentially, JavaScript is taking “var x;” variable  declaration  and placing it above x = 1. The biggest caveat to hoisting is that it only works with declaration BUT not initialization of variables. console.log(x) //This will be undefined because it is being initialized. var x = 1; Hoisting Functions in Javascript JavaScript engine moves function declarations to the top similar to varia...

  Immutability is a popular concept not just in JavaScript, but most programming languages in general. The reason behind this of course is functional programming which gives software developers a brand new paradigm to utilize when coding. Let’s dive into the details of mutability and immutability. What is Mutability? A mutable value is one that can be changed without creating an entirely new value.   In JavaScript, objects and arrays are mutable by default, but primitive values are not.  Once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned. There is nothing wrong with mutability. Take a look at the code below: const dog = { name: 'turtle', age: 10 } // Make a copy of dog object const newDog = dog; // Changing the age of the new dog newDog.age = 12; console.log(newDog === dog); // true As you can see, we’re copying the object to another object and changing the dogs age. The problem is that the change happe...

  What is a higher order function? In JavaScript, a higher-order function is a function that  takes one or more functions as arguments,  or returns a function as output. These functions are a powerful feature of the language that allow you to write concise and expressive code. The best way to learn higher order functions (and likely the most “real-world”) is to look at “map()” and “filter()”. Both take functions as arguments where the function is applied to each element in an array. Map For example, consider the  map  function, which is used to apply a function to each element of an array and return a new array containing the results. The  map   function is a higher-order function because it takes a function as its argumen t, in this case the function to apply to each element of the array. const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(x => x * x); Filter Another common higher-order function is  filter , which is used to select el...

  “This” in any programming language is a strange concept to understand due to the ambiguity of the definition. Simply put, because This is used in many different ways it is difficult to precisely define. The best way to learn this is to learn the many different ways in which this can change. Start with a simple console.log(this); By a simple console.log, you can quickly tell gain understanding into what this is. \ console.log(this); The This keyword is pointing to the global object. “This” is the “world” or the context of which this resides. Whenever you see the curly brackets {} in programming, that means the code residing in a different context.  Without curly braces and logging console.log in the open, “This” is simply the global object.   For a simple explanation of context, please check out my Youtube video. 2. Next, console.log(this) within a function function show() { console.log(this === window); // true } show(); This is a tricky topic inside of functions (n...

  Sometimes it pays just to stick to the basics. Here are CRUD operations for a basic array: 1. Create an element to the end of an array let clubs = ['baseball','running','computer club']; clubs.push('tennis'); console.log(clubs); 2. Delete an element from the end of an array let clubs = ['baseball','running','computer club']; const lastElement = seas.pop(); console.log(lastElement); 3. Reading an index from an element in an array let clubs = ['baseball','running','computer club']; let index = clubs.indexOf("running"); console.log(index); 4. Update an index from an element in an array let clubs = ['baseball','running','computer club']; clubs.splice(1, 0, 'tennis'); console.log(clubs);

  At a certain point in your Java career, it is inevitable to arrive at a point where you have models that are related to each other but cannot be solved with foreign keys. A good example of a many-to-many relationships is the relationship between rice and sauces. I love ALL types of different rice with different types of sauces. Sometimes I like Jasmine rice with spicy curry, while other times I like sticky rice with soy sauce. In a pinch, I’ve even ate Jasmine rice with soy sauce! *crowd gasps* Overall, many-to-many is a relationship that has infinite amounts of different combinations. Try to apply the rice analogy to a  one-to-many relationship  and it will not work. Many-To-Many Relationships To maintain a many-to-many relationship between two tables in a database, the only way is to have a third table which has a reference to both sides of the table. This table is called a “join” table and each entry in this table will connect the source table and target table. Many-...

  One-to-many relationships are used when a single entity is associated with many other entities. For example, a  Blog  can have many associated  Posts , BUT each  Post  is only associated with one  Blog . This simply means you map child entities ( Posts ) as a collection in the parent object ( Blogs ). Spring Data JPA then provides the @OneToMany annotation for this case. @OneToMany is the parent-side of the relationship. We call this a unidirectional @OneToMany association. When the child-side manages a relationship, we have a unidirectional @ManyToOne association. In this association, the child entity ( Post ) has an object reference to its parent ( Blog ). This child/parent relationship is created by the use of mapping  child  foreign keys mapping to the parent. In order to get the most fully functional mapping, it is best to use a unidirectional many-to-one association, JPA Unidirectional One To Many Example First, let’s create a model f...

  Knowing CSS selectors is easily one of the most important aspects of web development. As a former backend developer, it makes me cringe how bad I was at CSS selectors. Not knowing selectors is known to cause mangled front ends and ugly Bootstrap UI’s! Element selectors Descendant selectors Class selectors Id Selectors Child Selectors Adjacent Selectors Pseudo Selectors Element Type Selectors The most basic CSS selectors are Element Type Selectors.  With elements selectors all you are doing is selecting the element. Element selectors are most common when you first setup your CSS and assign very broad actions like fonts, colors, line heights, etc. Very rarely will you use CSS selectors for things like positioning. body { font-family : var ( --body-font ) ; color : var ( --text-dark ) ; } Descendant Selectors The descendant selector is used to match elements that are descended from another matched selector. This selector is easy to spot because it is just a space....

  If there is one thing I’ve learned about CSS, it’s that CSS loves shortcuts (aka “shorthand” properties)! The   grid   property is CSS Grid combines the following properties. grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow Like most shorthand properties in CSS, depending on how many variables you add to the property will determine how it behaves. Implicit vs Explicit grid A key point in understand the grid shorthand property is understand the difference between implicit and explicit grids. The  grid-template-rows ,  grid-template-columns , and  grid-template-areas  properties define a a fixed number of tracks that form the  explicit grid . Why are they  explicit ? Because you meant to set them to a specific value. The  implicit grid  property is automatically generated by CSS grid.  Implicit grid properties will also auto generate grid tracks and grid lines.  I...