Author: John Au-Yeung

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at boolean, comparisons, and new primitive types which are the building blocks of objects.

Lazy Evaluation

Booleans expressions are lazily evaluated.

This means that it evaluates the expression until the result is clear.

So if we have:

true || "foo";

then the JavaScript engine stops at true and returns that because it’s clearly true no matter what the 2nd operand is.

However, if we have:

true && "foo";

then both are evaluated and the 2nd operand is returned.

We can use this behavior to let us initialize variables to a default value.

For instance, we can write:

let num = num || 10;

If num is falsy, then num will be assigned 10.

Comparison

Comparison operators also return boolean values.

There are the == and === operators for equality comparisons.

And != and !== for inequality comparisons.

> returns true if the left operand is greater than the right operand.

And >= returns true if the left operand is greater than or equal to the right operand.

< returns true if the right operand is greater than the left operand.

And <= returns true if the right operand is greater than or equal to the left operand.

We should use === and !== for equality and inequality comparisons since they don’t cast the operands before comparing them.

Undefined and null

undefined means a value doesn’t exist.

If we have an uninitialized variable, then the it’s undefined .

So if we have:

let x

then x is undefined .

typeof x would returns 'undefined' .

null isn’t assigned by JavaScript behind the scenes, it’s assigned by our code.

So if we have:

let y = null

then y is null .

typeof y would be 'object' since it’s null .

They can be converted to a boolean or a string.

For instance, we can write:

!!undefined;

or

!!null;

they both return false since they’re both falsy.

We can write:

"value: " + null;
"value: " + undefined;

And we get:

"value: null"

and

"value: undefined"

Symbols

Symbols are a new primitive type.

These are used as unique identifiers.

We create a symbol by using the Symbol function.

For instance, we can write:

const atom = Symbol();

We don’t use the new keyword since Symbol isn’t a constructor.

We can pass in a string into it:

const bar = Symbol('bar')

No 2 symbols are the same.

So if we have:

console.log(Symbol('bar') === Symbol('bar'))

or:

console.log(Symbol() === Symbol())

they’re both false .

Bigint

Bigint is another primitive type.

They are integers with an n suffix.

We can write like:

10n

We can do arithmetic with 2 bigints.

So we can write:

10n * 2n

and get 20n .

They can be outside of the safe range of JavaScript integers, which is -2 ** 53 and 2 ** 53 , so we can use them to represent any integer.

Conclusion

Booleans are lazily evaluated.

undefined represents non-existing value.

null represents no value.

Symbols are used as unique identifi8ers.

Bigints are large integers that can be anything.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at arrays and conditionals.

Arrays

An array is a sequence of values.

It’s an object type.

It can have anything in them, including primitive values and objects.

We can define an empty array with:

let a = [];

And we can put values in them by writing:

let a = [1, 2, 3];

Array index is the position of the item. Arrays start with 0 as its index.

So the first item has index 0.

We can access any element using square brackets:

a[0];

then we get 1.

Adding/Updating Array Elements

We can add a value to an array by assigning a value to it.

For instance, we can write:

a[2] = 'foo';

Then we get:

[1, 2, 'foo'];

We can write:

a[3] = 'bar';

Then we get:

[1, 2, 'foo', 'bar'];

We can have gaps in an array.

Gaps are filled with undefined .

Assignment can also be used to update an element.

Arrays of Arrays

We can have an array of arrays.

For instance, we can write:

let a = [[1, 2, 3], [4, 5, 6]];

Then we can access entry by writing:

a[0][0];

We return the first entry of th first array in a ,. so we get 1.

We can also use the square brackets to get a character from a string, so we can write:

let s = 'foo';

And we get:

s[0];

which is 'f' .

Conditions and Loops

Conditional statements include the if and switch statements.

They let us run code depending on the condition given.

Loops include the while , do...while , for , for...in , and for...of loops.

Code Blocks

A code block is a part of a piece of code that’s separated from the outside.

For instance, we can write:

{
  let a = 1;
  let b = 3;
}

to create a block.

let lets us create variables that are only available within the block.

Blocks can be nested, so we can write:

{
  let a = 1;
  let b = 3; {
    let c = a + b; {
      let d = a - b;
    }
  }
}

We have blocks that are nested in other blocks.

if condition

We can use the if block to run something given a condition.

To do that, we can write:

if (a > 3) {
  result = 'a is greater than 3';
}

then the body is only run when a is bigger than 3.

We can have any logical expression between the parentheses.

else Clause

The else clause can be added to an if condition if we need to run something if the if condition is false .

For example, we can write:

if (a > 3) {
  result = 'a is greater than 3';
} else {
  result = 'a is not greater than 3';
}

They can be nested like any other blocks.

The if condition is handy for checking if a variable exists.

For instance, we can write:

if (typeof foo !== "undefined") {
  result = "yes";
}

Then we check if foo is initialized by checking if it’s undefined .

Conclusion

Arrays are a sequence of values.

The if statement lets us run code conditionally.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll go through the object-oriented parts of JavaScript.

We also look at the basic building block of objects, which are primitive values.

Polymorphism

Polymorphism means that if we substitute one subclass with another, that the program should still work the same way if the code uses the parent’s properties or methods.

If they both inherit from the same parent class, then they should have the same methods, so they should work the same way.

If the Person class has the talk method and we created 2 subclasses that inherit from them.

Then we can use any of those subclass’ talk method.

Primitive Data Types

The basic building blocks of object-oriented JavaScript are primitive data types.

In JavaScript, primitive data types are strings, number, booleans, null , undefined and bigint.

They’re all recorded as values and have no methods of their own unless they’re wrapped in wrapper objects.

Variables

Variables are used to store data.

They’re placeholders for concrete values.

It’s more convenient to use variables than the values to wor with the actual data.

This is because they can be used multiple times.

Values can only be used once.

Using variables requires 2 steps.

We’ve to declare it, and then we’ve to assign it a value.

To declare a variable, we can write:

let a;

A variable can be a combination of letters, numbers, and underscore characters.

But we can’t start with a number.

Then to initialize it, we assign a value to it.

For instance, we can write:

let a = 1;

We can do both in one step.

Variables declared with const requires a value to be assigned when it’s declared.

So we write something like:

const a = 1;

We can declare multiple variables in one statement, like:

let a = 1,  
  b = 2,  
  c = 3;

We can also use $ in variables.

Variable names can start with $ and it can also be in other positions.

$ is often used as function or property names.

Variables are Case Sensitive

JavaScript variables are case sensitive.

So if they’re different cases, then they’re considered different.

Operators

Operators can take one or values or variables, do an operation, and return a value.

JavaScript has various operators like arithmetic operators, bitwise operators, etc.

+ adds 2 numbers or concatenate strings.

- does subtraction.

* does multiplication.

/ does division.

% returns the remainder of one number divided by another.

++ increments the number by 1.

-- decrements the number by 1.

For instance, we can add 2 numbers by writing:

const sum = 1 + 2;

There are also some compound operators.

They make our code more compact.

They do the arithmetic and the assignment at the same time.

+= adds a number to an existing number.

-= subtracts a number from an existing number.

*= multiplies a number with an existing number.

/= divides a number from an existing number.

%= returns the remainder if we divide the left number by the right number.

For instance, we add a number to a variable by writing:

let x = 1;  
x += 2;

We created a variable x and set it to 1.

Then we add 2 to x with += .

So at the end x is 3.

Conclusion

Polymorphism is where we can substitute a subclass with another and we can still use the parent’s methods.

Variables hold values and we can do various operations with them.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll go through the object-oriented parts of JavaScript.

Aggregation

The ability to combine several objects into a new one is known as aggregation or composition.

Multiple small objects are easier to manage than one large object.

There are several ways to do with JavaScript.

We can use the spread operator or Object.assign method to combine multiple objects into one.

To use the Object.assign method, we can write:

const obj1 = {
  foo: 1
}
const obj2 = {
  bar: 2
}
const obj3 = {
  bax: 3
}

const merged = Object.assign({}, obj1, obj2, obj3);

We have 3 objects, and we passed them all into Object.assign so we can merge them together and returns a new object with the properties of all of them.

Also, we can use the spread operator by writing:

const obj1 = {
  foo: 1
}
const obj2 = {
  bar: 2
}
const obj3 = {
  bax: 3
}

const merged = {
  ...obj1,
  ...obj2,
  ...obj3
};

This will also combine the 3 objects together.

Another way to aggregate objects is having child objects by having as properties of another object.

For instance, a Book object can have multiple Author objects, Publisher objects, Chapter objects, and so on.

Inheritance

Inheritance is an elegant way to let reuse existing code.

We can create objects and inherit from directly.

And we can create JavaScript classes with subclasses.

Classes and subclasses are syntactic sugar for parent and child constructor functions.

To create an object that uses another object as a prototype, we can use the Object.create method.

For instance, we can write:

const obj = {
  foo: 1
}

const child = Object.create(obj);

Then child inherits from the foo property from obj .

Most objects have the Object.prototype as their prototype if they don’t inherit from anything explicitly.

We can create subclasses with the extends keyword.

For instance, we can write:

class Person {
  constructor(name) {
    this.name = name;
  }

  eat() {
    //...
  }
}

class Author extends Person {
  constructor(name, genre) {
    super(name);
    this.genre = genre;
  }
}

We have the Person class which is the parent class.

And the Author class inherits from the Person class.

All the instance variables and methods are inherited.

So we can get the name property and call the eat method with an Author instance.

We call the parent constructor with the super .

And we also can access parent class properties and method with it.

We can write:

class Person {
  constructor(name) {
    this.name = name;
  }

  eat() {
    //...
  }
}

class Author extends Person {
  constructor(name, genre) {
    super(name);
    this.genre = genre;
  }

  eat() {
    super.eat();
  }

  write() {
    console.log(`${super.name} is writing`)
  }
}

We called the Person ‘s eat method.

And we get the Person instance’s name with super.name .

Conclusion

We can aggregate objects in many forms.

And objects and constructors/classes can inherit from other objects and constructors/classes respectively.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll go through the object-oriented parts of JavaScript.

Object-Oriented Programming and JavaScript

Object-oriented programming languages have some features in common.

They are:

• Object, method, and property
• Class
• Encapsulation
• Aggregation
• Reusability/inheritance
• Polymorphism

JavaScript has most of these features.

However, JavaScript doesn’t have classes even though it has the class syntax.

The class syntax is just syntactic sugar on top of its prototype-based inheritance model.

However, it does have other parts.

We can define objects in various ways with JavaScript.

And objects can have properties and methods.

Methods in JavaScript can be part of the constructor or class.

Or it can be part of an object literal.

We can use code through inheritance and merging objects.

Also, we can have polymorphism as long as the interfaces can be substituted.

Objects

Objects is the basic building block of JavaScript object-oriented programming,

An object is a representation of something.

The thing can be anything.

It can model real-world objects or it can represent something more abstract.

They have characteristics like color, name, weight, etc.

Objects are most often named using bounce, like book, car, .etc.

Methods are named with verbs since they do something.

Values are adjectives.

Classes

JavaScript doesn’t have real classes.

But it does have the class syntax.

JavaScript inheritance is done via prototypes, which are objects that other objects inherit from.

Also, JavaScript has constructors which look like classes.

They can be instantiated with the new keyword like a class, but they’re functions that we can return anything with.

They can have prototypes so that all instances share the same methods.

We can create a constructor by writing:

function Person() {
  //...
}

which is the same as:

class Person {
  //...
}

We can write methods by writing:

function Person() {
  //...
}

Person.prototype.eat = function(){
  //...
}

With the class syntax, we write:

class Person {
  //...
  eat(){
    //...
  }
}

Encapsulation

Encapsulation is another object-oriented programming concept.

An object holds data which are stored in properties.

And they can do something with the data via methods.

Encapsulation also means we only expose what’s absolutely necessary to the outside.

The less each part know about each other, the better.

This is because we don’t want one part to affect the other parts when they change.

For instance, we don’t want to know how 3rd party libraries work internally.

We just want to use the interfaces they expose.

This way, we can’t use the internals of the library in our own app.

So if the library changes, it’s less likely that the change will break our app

Many object-oriented programming languages have different levels of access to class variables.

Some languages like JavaScript may have public, private and protected methods.

There’s no access control with JavaScript.

Wd can only keep private data in functions and modules.

Conclusion

JavaScript is partly an object-oriented language.

It can do many things that they can do.

But notable things that are missing include classes and private or protected instance variables.