DEV Community: Oscar Ore

The meaning of .this

Oscar Ore — Mon, 29 Nov 2021 01:27:03 +0000

Let's talk about this. This is determined by the object that it belongs to.

Contexts in which the 'this' keyword can be used

The definition of this as the property of an execution context is much more accurate because depending on how it is called at runtime, 'this' can refer to many things. Let's dive deeper.

this in the method of an object
First, a method is used to refer to a function that is a member of an object. All methods are functions, but not all functions are methods. Now, when the 'this' keyword is used inside a method, it refers to the owner of the method it is used in. Let's use the example defined above to take a deeper look at 'this' in this context.

greet : function() {
return "Hi! I am " + this.firstName + " " + this.  lastName + ", a bell boy and I am at your service";
}

In this example, this which is used inside the greet() method refers to the bellBoy object, which is the owner of that greet() method.

this in the Global Context
When the 'this' keyword is used alone, not inside any function or better referred to as being used in the global context, the keyword refers to the global object. The global object refers to the owner of the 'this' keyword in this case. When it is in a browser window, this global object refers to the window object.

let y = this
console.log(y)

this in the global context.

Since that is true, if you make a strict comparison between the value of this and the window object, we get the boolean value of true.

If you run this javascript file inside your computer using a tool like node, this keyword refers to an object of type of object.

this in a function
Note, we are talking about what the keyword 'this' refers to when it is used in an ordinary function, one not affiliated with any object. Just a function is standing on its own. In such a javascript object, the default value of 'this' is the owner of the function. If the code is not in strict mode and it is not been set to a member of an object, then this defaults to the global object.

function function1() {
return this
}
function1() === window

In the example above, the value of the this keyword as used inside this function refers to the window object. This is why the output of the string comparison between function1 and the window object will equal to true because they hold the exact same value.

this in a function (Strict Mode)
When in strict mode however, Javascript does not permit default binding, and because of that, it is undefined. Put simply strict mode prevents sloppy code. Thinking it from a programmers' point of view, there is most likely no good reason to want to access the value of this in a function since it will return the window object. In most cases, we access the this keyword because we want to get some other properties from its owner. Strict mode enforces this. So when in this mode, 'this' is undefined.

"use  strict"
function function1() {
return this
}
function1() === window

As can be seen in the above example, in the strict mode, the value of this inside a function is undefined.

There are other ways this is used in JavaScript, here are some more options:
this in classes
this as a constructor
this with a getter or setter method
this on an object's prototype chain
this in arrow functions

Happy Coding!

React Mock Interview

Oscar Ore — Mon, 22 Nov 2021 03:13:41 +0000

Interviews are always a nerve-wracking thing to do! You spend hours upon hours studying Data Structures and Algorithms, Youtube top programming interview questions and answers, and think of all of the possible questions the interviewer can ask you.

Thanks to Flatiron School, I was able to prepare for a mock interview to go through these same trials and tribulations as my peers. I am writing this blog post to encourage my fellow aspiring software developers to take every interview opportunity that you can, because just like programming, practice makes perfect. Here is how my mock interview went.

1) The Meet - n - Greet
During the first 10-15 minutes of my mock interview, I introduced myself to my interviewer and told him my story of becoming a software developer. This was a key point for me in my interview process because I can demonstrate my soft skills and how my previous work experience as a sales rep in the tech world can benefit my transition to a developer position. Some of the questions you can expect are:

Tell me about yourself?
Why do you want to become a software developer? → My personal favorite! This question is a gateway for you to show your passion for software development!
What are your goals in 5 - 10 years * Think about how you can continue to grow in your career field. I mentioned that I would love to be a team lead or senior developer.
Focus on your strong points, and really show your passion for software development and eagerness to learn. In other words, SELL YOURSELF!

2) Technical Q&A

During the technical Q&A portion of my interview, I was asked a handful of React questions. Here were some of the questions that I was asked:

What is React?
What are the differences between functional and class components?
What is the virtual DOM? How does react use the virtual DOM to render what the user sees?
Explain React state and props.
What is prop drilling in React?
What is JSX?
Can web browsers read JSX directly?
Why use React instead of other frameworks?

-How do you create a React app?

How do you create an event in React?
How do you update the state of a component?

Make sure that your answers are clear and straight to the point. The interviewer told me the worst thing a candidate can do is ramble on about a topic that does not relate to the questions at hand. Simply say, " I do not know the answer to the question". Now here is where you can differentiate yourself: don't be afraid to ask questions! These are the times that interviewers want to know how you think. I asked the interviewer, “What are other frameworks that you have used in the past besides React?” He said Angular and Vue.js. They all have pros and cons, and the interviewer actually told me he learned Angular first but recently started to learn React because of his company's tech stack and prefers to use React more than anything now!

3) Live Coding

My live coding challenge was to build the following:
Build a React Component that displays the given data
with the functionality of sorting that data and adding rows.

import "./styles.css";
import Row from "./row";
import React, { useState } from "react";

// Build a React Component that displays the given data
// with the functionality of sorting that data and adding rows.

const DATA = [
  { id: 0, name: "John", email: "john@gmail.com" },
  { id: 1, name: "Jane", email: "jane@gmail.com" },
  { id: 2, name: "Joe", email: "joe@gmail.com" }
];

export default function App() {
  const [name, SetName] = useState("");
  const [users, SetUsers] = useState(DATA);

  const handleChange = (event) => {
    SetName(event.target.value);
  };

  const handleSubmit = (event) => {
    const newUser = {
      id: users.length,
      name: name,
      email: `${name}@gmail.com`
    };
    SetUsers([...users, newUser]);
  };


  return (
    <div className="App">
      {users.map((user) => (
        <Row key={user.id} name={user.name} email={user.email} />
      ))}
      <input type="text" value={name} onChange={handleChange} />
      <button onClick={handleSubmit}> Push Here! </button>
    </div>
  );
}

Now, here is what my row.js folder looks like:

import React from "react";

function Row(props) {
  return (
    <h1>
      {props.name}, {props.email}
    </h1>
  );
}

export default Row;

All the user has to do is enter their name, and that would autogenerate a gmail account for the user. This is taken care of by the handleSubmit method above. After time was up, my instructor encouraged me to add on the ability to edit and delete users as well.

Next Steps:

After the interview, I reflected on what went well and what areas I could improve on! I believed I did very well in the behavior / meet-n-greet section of the interview and used my previous work experience to let my soft skills shine throughout the interview.

Areas were I could improve on would be just explaining/ discussing my code with other developers and what my thought process was during the technical part of the interview. My interviewer recommended that I solve the technical assessment in chunks. First, work on the process that I know how to do, (Ex: render the user's info on the page). Second, he interviewer recommended that I review typical React questions. Based on his experience, he came across several of the same interview questions. Here is a website that he recommend:(https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-interview-questions).

Stay tuned for more!

Happy Coding!

React/Redux Final Project

Oscar Ore — Wed, 01 Sep 2021 05:04:32 +0000

The final project. After months of learning the benefits of React and Redux, it was time to build out my final project! Throughout my planning process, I wanted to create an app that met all of the requirements but also would allow me to add on different features as I grow my coding knowledge. A couple of project ideas came to mind, but at the end of the day, I decided to create a workout planning app call Workout Planner.

The concept is that the user would enter their workout for the day and they could collaborate with other users and help keep each other accountable. This project is still a work in progress, due to the fact that there are so many features that I would like to add on as well.

The project requirements were as followed:
There should be 5 stateless components
There should be 3 routes -The Application must make use of react-router and proper RESTful routing.
Use Redux middleware to respond to and modify state change
Make use of async actions and redux-thunk middleware to send data to and receive data from a server
Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.

Once I completed the backend solution of my project it was now time to focus on FrontEnd.

What I took away from the project overall was how React moved information throughout my application, along with the help of Redux.

Here is an example of the Redux flow without Thunk:

This image shows you the importance of Redux within an application and how useful it can be with a developer is building out large apps.

Overall, the project taught me a lot and it showed me what I can do with a bit of hard work and coffee!

Looping: It's all about Repetition!

Oscar Ore — Sun, 17 May 2020 20:08:54 +0000

Understanding Looping is a key part of learning how to program. Looping occurs when you tell the program to do a task or something a certain number of times. The decisions are completely up to you. Pretty neat right? There are many types of Looping methods out there but the key takeaway here is that looping allows us to abstract away the actual mechanics of enacting the same lines of code a certain number of times. Here is an example of a loop using the .times method. Check it out:

8.times do
puts “Hey guys! My name is Oscar and I am going to repeat myself eight times.”
end

If you copy and paste the code snippet into IRB in your terminal and hit enter, you should see the following:

Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times
Hey guys! My name is Oscar and I am going to repeat myself eight times

Why do I want to become a software engineer?

Oscar Ore — Wed, 13 May 2020 00:47:29 +0000

My journey has been anything but traditional. I have been contemplating this decision for quite some time now. But I can tell you this, my “why” is greater than any obstacle that I may face while I embark on this journey to become a Software Engineer. I would love to pursue a passion that is fueled by curiosity, innovation and creativity, all while supporting my family. This is my “why”, but how did we get here? Let’s take a journey.

I have always been intrigued by technology. Growing up in the era of the internet, we continue to advance our lives thanks to incredible innovation. During the early years of my professional career, I was blessed with an opportunity that changed my life and that’s when my journey began. Living in Austin, TX at the time, I began my career with an IT reseller called SHI. As I grew in my professional career, I wanted a more challenging experience and I was looking to add more creativity in my everyday work activities. Working for an IT reseller, I was constantly introduced to different technologies throughout my day and speaking to many IT professionals, I enjoyed speaking with the developers of the product. They had the ability to solve a problem with lines of code. What an ability to have!

A light bulb just went off in my head. How can I wield this power? How can I create something out of nothing? This thought process led to hours of research and endless YouTube videos on how to break into the industry. After speaking with many software engineers, ranging from traditional education upbringing (Computer Science majors) to self-learners, I made my decision to attend Flatiron’s online boot camp program. Talk about an exciting transition! I am excited as we start the first week of courses. I am already surrounded by so many like-minded individuals who want to create a better opportunity for themselves and their families.

I will continue to document my journey throughout my flatiron boot camp experience to encourage, motivate, and inspire others to follow their dreams and to never doubt your capabilities!