Snippets Collections
// eslint-disable-next-line complexity
  function moduleToggleHandler(item) {
    const contentContainer = item.querySelector('.module-listing__content');
    const list = item.querySelector('.module-listing__list');
    const numberOfItems = getNumberofItems(list);

    // eslint-disable-next-line curly
    if (!contentContainer || !list || !numberOfItems) return; // Stop execution if any of the targetted items fails

    // if the number of children is greater than 4, then in the component a condition is checked where it turns on the link html
    if (numberOfItems > 4) {
      const link = item.querySelector('a.module-listing__toggler');
      // eslint-disable-next-line curly
      if (!link) return;

      link.addEventListener('click', function () {
        // eslint-disable-next-line no-use-before-define
        // USE CALL ON THE FUNCTION buttonClickHandler HERE .....
        buttonClickHandler.call(this, contentContainer, list);
        // Call the function with 'this' set to the clicked button s
      });
    }
  }



	// SO WE CAN USE THIS IN HERE => which will refer to the button itself
  function buttonClickHandler(container, list) {
    const listHeight = list.getBoundingClientRect().height;
    const buttonIsExpanded = this.getAttribute('aria-expanded') === 'false';

    // Toggle aria-expanded when click occurs
    this.setAttribute('aria-expanded', !buttonIsExpanded ? 'false' : 'true');

    // change the text of the link based on the data attr being expanded or not
    this.textContent = !buttonIsExpanded
      ? 'See all module items'
      : 'See less module items';

    // change the html class name
    if (container.classList.contains('shortlist')) {
      container.classList.replace('shortlist', 'longlist');
      container.style.maxHeight = `${listHeight}px`;
    } else {
      container.classList.replace('longlist', 'shortlist');
      container.style.maxHeight = '13rem';
    }
  }
const shaunObj = {
  name: 'gary',
  year: 1987,
  currentYear: new Date().getFullYear(),

  // solution 1 = declare a normal function as this is bound to these functions
  calcAgeOne: function () {
    const self = this;
    const yearsold = self.currentYear - self.year;
    return yearsold;
  },

  // solution 2
  calcAgeTwo: function () { // declative function again but with arrow function inside
    console.log(this);

    const calcAgeArrow = () => {
      console.log(this);
      const yearsold = this.currentYear - this.year;
      return yearsold;
    };

    return calcAgeArrow(); // return the arrow function to the parent function
  },

	// DO NOT DO THIS
  // calcAge: () => {
  //   const yearsold = this.currentYear - this.year;
  //   return yearsold;
  // },
};

console.log(shaunObj.calcAgeOne());
console.log(shaunObj.calcAgeTwo()); // works with
const davidObj = {
    first: 'David',
    last: 'Mchale',
    year: 1978,
    currentYear: new Date().getFullYear(),
    age: function () {
        const yearsold = this.currentYear - this.year;
        return yearsold;
    },
};

const maryObj = {
    first: 'Mary',
    last: 'Jones',
    year: 1985, // Add this
    currentYear: new Date().getFullYear(), // Add this
};

maryObj.age = davidObj.age;

console.log(maryObj.age()); // Output should be Mary's age




// alternative cleaner way

const davidObj = {
    first: 'David',
    last: 'Mchale',
    year: 1978,
    currentYear: new Date().getFullYear(),
    age: function (year, currentYear) {
        const yearsold = currentYear - year;
        return yearsold;
    },
};

const maryObj = {
    first: 'Mary',
    last: 'Jones',
    year: 1985,
    currentYear: new Date().getFullYear(),
};

// Borrow the age method with parameters to a function outside both objects
maryObj.age = function() {
    return davidObj.age(this.year, this.currentYear);
};

console.log(maryObj.age()); // Output should be Mary's age
class ClassMates{
	constructor(name,age){
    	this.name=name;
      	this.age=age;
    }
  	displayInfo(){
    	return this.name + "is " + this.age + " years old!";
    }
}

let classmate = new ClassMates("Mike Will",15);
classmate.displayInfo();  // result: Mike Will is 15 years old!
class Pencil {
  constructor(price) {
    this.price = price;
  }

  isExpensive() {
    return this.price >= 10;
  }
}

//usage
const bic = new Pencil(3);
bic.isExpensive();
star

Sun Oct 20 2024 02:14:21 GMT+0000 (Coordinated Universal Time)

#js #call #this
star

Wed Jun 19 2024 02:54:51 GMT+0000 (Coordinated Universal Time)

#this #arrow #functions
star

Wed Jun 19 2024 01:06:04 GMT+0000 (Coordinated Universal Time)

#this #object #method #borrowing
star

Tue Aug 08 2023 18:08:56 GMT+0000 (Coordinated Universal Time)

#javascript #class #oop #this
star

Wed Apr 05 2023 16:11:13 GMT+0000 (Coordinated Universal Time) https://codetogo.io/how-to-define-a-class-in-javascript/

#javascript #class #generate #constructor #this
star

Sun Jun 19 2022 08:35:06 GMT+0000 (Coordinated Universal Time) test.com

#how #this #works

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension