Category: JavaScript Answers

Sometimes, we want to negate code in an “if” statement block in JavaScript and jQuery.

In this article, we look at how to negate code in an “if” statement block in JavaScript and jQuery.

Negate Code in an “if” Statement Block in JavaScript and jQuery

To negate code in an “if” statement block in JavaScript and jQuery, we can use the logical NOT operator.

For instance, if we want to check if the parent element’s sibling isn’t a ul element with jQuery, we write:

if (!$(this).parent().next().is('ul')){
  //...
}

This is the opposite of:

if ($(this).parent().next().is('ul')){
  //...
}

which checks if the parent element’s sibling is a ul element.

Conclusion

To negate code in an “if” statement block in JavaScript and jQuery, we can use the logical NOT operator.

Sometimes, we want to randomize slides in reveal.js.

In this article, we’ll look at how to randomize slides in reveal.js.

Randomize Slides in Reveal.js

To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.

For instance, we write:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" integrity="sha512-V5fKCVKOFy36w8zJmLzPH5R6zU6KvuHOvxfMRczx2ZeqTjKRGSBO9yiZjCKEJS3n6EmENwrH/xvSwXqxje+VVA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js" integrity="sha512-QYXU3Cojl94ZRiZRjUZpyg1odj9mKTON9MsTMzGNx/L3JqvMA3BQNraZwsZ83UeisO+QMVfFa83SyuYYJzR9hw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

to add the link tag for the Reveal.js CSS file and the script tag to include the Reveal.js script file.

Then we add the slides in the div by setting the class of the slides container to reveal and the div for the slides to slides.

Finally, we write:

Reveal.initialize({ shuffle: true });

to initialize the slides with them shuffled.

Now when we load the page, we may see the slides in different order each time.

Conclusion

To randomize slides in reveal.js, we call Reveal.initialize with an object that has the shuffle property set to true.

Sometimes, we may run into the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is not a function’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps, we should make sure the value that we’re calling is a function.

For instance, we shouldn’t call methods on an object that doesn’t have the method:

let obj = {a: 1, b: 3, c: 4};

obj.map((num) => {
  return num * 2;
});

obj is an object, so it doesn’t have the map method unless we added one into the object.

Since we didn’t have that, the error will be thrown.

Instead, we call map on an array, which has the map method:

let numbers = [1, 4, 9];

numbers.map((num) => {
  return num * 2;
});

We should also look out for typos in our code to prevent this error.

Also, we should make sure a method doesn’t share a name with a pre-existing property.

For instance, instead of writing:

const Dog = function () {
 this.age = 11;
 this.color = "black";
 this.name = "Jane";
 return this;
}

Dog.prototype.name = function(name) {
 this.name = name;
 return this;
}

const myNewDog = new Dog();
myNewDog.name("Cassidy");

which will thrown this error since name is a pre-existing property and it’s not a function, we write:

const Dog = function () {
 this.age = 11;
 this.color = "black";
 this.dogName = "Jane";
 return this;
}

Dog.prototype.name = function(name) {
 this.dogName = name;
 return this;
}

const myNewDog = new Dog();
myNewDog.name("Cassidy");

If we have an arithmetic expression where we multiply something with an expression with parentheses, we should make sure we have the * operator.

So instead of writing:

const sixteen = 2(3 + 5);

which will throw the error since 2 isn’t a function, we write:

const sixteen = 2 * (3 + 5);

which does the multiplication like we expected.

Conclusion

To fix the ‘TypeError: "x" is not a function’ when we’re developing JavaScript apps, we should make sure the value that we’re calling is a function.

We should also look out for typos in our code to prevent this error.

Also, we should make sure a method doesn’t share a name with a pre-existing property.

If we have an arithmetic expression where we multiply something with an expression with parentheses, we should make sure we have the * operator.

Sometimes, we may run into the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is not a constructor’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps, we should make sure we’re using the new operator on a constructor function or class.

Similar errors we may see include:

TypeError: Math is not a constructor
TypeError: JSON is not a constructor
TypeError: Symbol is not a constructor
TypeError: Reflect is not a constructor
TypeError: Intl is not a constructor
TypeError: Atomics is not a constructor

For instance, the following code will throw this error:

const Car = 1;
new Car();

new Math();

new Symbol();

function* f() {};
const obj = new f;

In the first example, Car is a number, so we can’t use the new operator on it to create a new Car instance.

Likewise, Math and Symbol aren’t constructors or classes, so we can’t use the new operator on them.

In the last example, f is a generator function, which isn’t the same as a constructor function or class, so we can’t use new on it to create a new f instance.

To make Car a constructor, we write:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

We can also write:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
}

They’re equivalent.

constructor takes arguments for the constructor function like the constructor function does.

Then we assign the values to instance variables inside the constructor or class.

Conclusion

To fix the ‘TypeError: "x" is not a constructor’ when we’re developing JavaScript apps, we should make sure we’re using the new operator on a constructor function or class.

Sometimes, we may run into the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is (not) "y"’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps, we should make sure that we aren’t doing operations that aren’t unexpected for a given data type.

Messages may include:

TypeError: "x" is undefined
TypeError: "x" is null
TypeError: "undefined" is not an object
TypeError: "x" is not an object or null
TypeError: "x" is not a symbol

On Edge, the error message for this error is TypeError: Unable to get property {x} of undefined or null reference.

And on Firefox, the error message for this error is TypeError: "x" is (not) "y".

For instance, we should write code like:

let foo = undefined;
foo.substring(1);

let foo = null;
foo.substring(1);

let foo = {}
Symbol.keyFor(foo); 

let foo = 'bar'
Object.create(foo);

We can’t call substring on foo since foo is undefined.

We also can’t call substring on a null value.

In the 3rd example, since foo is an object, we can’t call Symbol.keyFor on it to get its content.

And in the last example, foo is a string, so we can’t call Object.create with it since an object or null is expected.

To fix the issue, we can use the typeof operator to check for the value we expect before we do any operation on it:

To do this, we write:

if (typeof foo !== 'undefined') {
  // ...
}

We check if foo isn’t undefined with the typeof operator by checking if typeof returns 'undefined' with foo as its operand.

Conclusion

To fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps, we should make sure that we aren’t doing operations that aren’t unexpected for a given data type.