struggling with beginner-level JavaScript issues

Hey there, I've been running into a bit of an issue with my basic javascript skills:

function tank(){
    this.width = 50;
    this.length = 70;
}

function Person(job) {
    this.job = job;
    this.married = true;
}
var tank1 = tank();
console.log(tank1.length);  //returns: Uncaught TypeError: Cannot read property 'length' of undefined

var gabby = new Person("student");
console.log(gabby.married);  //returns: true

The first console.log isn't functioning properly, however the second one is. As someone relatively new to javascript, I can't figure out why the length property is showing as undefined. Any insight would be greatly appreciated!

Answer №1

Make sure to include the new keyword:

var tank1 = new Tank();

Answer №2

When you run the tank() function, it operates within the context of the window object. This means that when you add the "width" and "length" fields to the window object, you can confirm this by checking window.length and window.width after calling tank(). These values should be 70 and 50 respectively. Since the tank() function does not return anything, assigning var tank1 = tank(); results in tank1 being set to undefined, leading to the error you are experiencing.

In the next scenario, when you invoke the Person constructor using the new keyword, the function Person(job) {...} is executed with 'this' referring to the newly created Person object. The new keyword performs the following actions:

  1. Instantiates a new Person object.
  2. Invokes the constructor function "function Person(...)", with 'this' pointing to the newly created object.
  3. Returns the fresh Person object back to the caller once the function completes its execution.

To delve deeper into the concept of execution contexts, visit this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Vue canvas $ref not being defined on resize causing error, but oddly still seems to function correctly

Within my application, there exists a tabbed interface. One of the tabs contains a canvas element that dynamically adjusts its size to fit the window whenever it is resized. The functionality works seamlessly at first, but upon switching tabs and returning ...

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

AppLazyLoadingMoudle import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; const ROUTES : Routes = [ /* ProductModule (defined in the feature module) is loaded lazily when navigating ...

Learn how to efficiently pre-load data using the prefetchQuery method in React-Query

Attempting to pre-fetch data using react-query with prefetchQuery. The network tab in browser DevTools shows the requested data coming from the back-end, but strangely, the data is not present in the react-query DevTools cache. Any ideas on what might be c ...

Obtain the leaf nodes from a combination of arrays and objects using Lodash

Here is the code structure I want to share with you before explaining my requirements. It displays the input array layout along with the desired outcome: [ { link: "someurl", name: "Foo", subCats: [ { link: "anotherurl", ...

Angular confirmation page following successful HTTP POST request to Web API

First question here... I have been given the task of improving an Angular application, even though I am starting with zero experience in Angular. While I do have some background in JavaScript, I mostly work with Java (JSP's and yes, JavaScript). Despi ...

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

How can I dynamically set the width of a span element in HTML?

Hello there! As a beginner in html and angularjs, I'm experimenting with dynamically assigning span width based on an angular js response. <div class="statarea" ng-repeat="x in names"> <div class="ratingarea"> <div class=" ...

Using jQuery to send a GET request to the current page with specified parameters

Within my application, hosted on a PHP page, I am aiming to trigger a GET request upon selecting an option from a dropdown menu. The URL of the page is: www.mydomain.it/admin/gest-prenotazioni-piazzola.php I intend to utilize jQuery to execute this GET r ...

What are the steps to update the title and creator details in the package.json file of an Openshift Node.js application?

Recently delving into the world of node.js and PaaS platforms like Openshift, I find myself faced with a perplexing issue. How exactly can I modify the values generated by Openshift in the package.json file without encountering any errors? Each time I at ...

Issues observed when integrating Axios custom instance with Next.js

Initially, I created a custom axios instance with a baseURL and exported it as shown below: import axios from 'axios'; const instance = axios.create({ baseURL: process.env.BACKEND_URL, }); instance.defaults.headers.common['Authorization& ...

What is the function of the 'this' keyword within a Vue component?

Can someone explain how the keyword 'this' is able to access tasks that are not within the same object? anyobject = { template: '#task-list', props: { tasks: {default: []} }, data() { return { newTask: '&apos ...

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

Attributes requested with jQuery JavaScript Library

Is there a way to dynamically add extra key-value pairs to the query string for all requests sent to the web server? Whether it's through direct href links, Ajax get post calls or any other method, is there a generic client-side handler that can handl ...

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

A guide on looping through an array of objects to add information to a nested array in MongoDB

Currently, I am in the process of developing a blog application and working on an online editor feature. The schema I'm using for this project is outlined below: var blogSchema = restful.model('blog-schema', mongoose.Schema({ title: Str ...

Angular does not delay for promises to settle

Issue I am facing is related to Angular not waiting for promises to be resolved. The console inspection reveals that the provider and skills objects are not retrieved before the promises are returned. I have included the key parts of the code below. The s ...

Tips for positioning a canvas and a div element next to each other on a webpage

I have a canvas and a div element that I need to split in a 60% to 40% ratio. However, no matter what changes I make to the display settings, the div is always displayed before the canvas. The Div element contains buttons with color-changing properties fo ...

What is the best way to retrieve a value from $http or $resource using this filter?

Within my HTML, I have a structure that looks like {{ i.userId | userName }}. Essentially, I am attempting to convert this into a name by utilizing a filter. However, I am encountering numerous challenges with the asynchronous function required to retrieve ...

Make sure to include the environment variable in the package.json file before running Cypress in headless mode

I am trying to determine whether Cypress is running or not within a NextJS application. My goal is to prevent certain http requests in the NextJS application when Cypress tests are running. Currently, I am able to detect if Cypress is running by using the ...

What is the best way to reduce the size of a Base64/Binary image in Angular6

I utilized the Ngx-Webcam tool to capture images from my camera. My goal is to obtain both high quality and low quality images from the camera. Although this library provides me with Base64 images, it offers an option to reduce the size using imageQuality ...