DEV Community: Pepe Benitez

Object Oriented Programming in Javascript 🤓

Pepe Benitez — Mon, 14 Jun 2021 22:42:43 +0000

Hi! Programming can be overwhelming 😫 but once you are comfortable with some basic concepts, it starts to feel like a superpower 🦸‍♀️ and Javascript is one of the coolest languages to learn! 💯

In this document you can find a summary of Object Oriented Programming in Javascript. We will cover:

What is Object Oriented Programming?
OOP in Javascript
Classes
Prototype Model
Guiding Principles

What is Object Oriented Programming?

When we talk about Object Oriented Programming or OOP, we are really talking about how we organize our code. Many times, deciding where we put our code is not straight forward or easy. OOP gives us a paradigm to start working with.

The main point is to model things from real life using objects, which can contain data or properties, and can execute actions or methods. For example, a person can have many attributes such as name, age or nationality, and it can perform several actions such as running or eating.

If we want to create a lot of different people in our code, things can get out of hand very quickly.

OOP has several concepts that help us maintain our code manageable. We do no want Spaghetti Code 🍝 Some of them are:

Abstraction − We provide only essential information to the outside world while hiding their background details. As you build more and more complicated objects, abstractions helps us simplify things.
Encapsulation − Refers to storing all of our data and functionality into a single unit. It is also a way of restricting access to certain properties.
Inheritance − It is the ability to give data and functionality to an object based on another object. It helps us write a lot less code and promotes reusability.

OOP in Javascript

Javascript is a very flexible language, and you can use different paradigms to build your code. There are also a lot of strong opinions on the subject of using OOP with javascript, so take this article not as a definitive guide of how to do things, but rather a guide on what OOP is and how you can you use it in your advantage.

Different languages have different ways of doing things, and there is not necessarily a better way of doing things. In Javascript, you have several options to take advantage of the uses of OOP.

Objects is Javascript are like objects in real life, with things they have (properties) and things they do (methods).

You might have heard that "Everything is JS is an object". Although not entirely true, even things that are not objects, such as primitive types, can behave like objects sometimes because javascript wraps them into objects in the background.

let name = 'string' // primitive type

let name2 = new String('String object') // objects

The idea at the hearth of object oriented programming is that we are not limited to built-in objects. We can make our own.

Object literal notation

We can build our own objects using the object literal notation, with whatever properties and methods we want.

let userOne = {
    email: 'some@email.com',
    name: 'Pepe',
    login() {
        console.log(this.email, 'has logged in')
    }
}

When the this keyword is inside of an object, this refers to the object itself.

We can use dot nation to change data from our objects.

userOne.name = 'A name'

We can also user bracket notation.

userOne['name'] = 'Another name'

We can also create or define new properties or methods using dot or bracket notation, even if they don't already exist.

userOne.age = 28

However, we can start noticing some problems. It is probably better to put everything in the object literal notation, instead of adding new properties later in the code, so everything is encapsulated.

Also, if we want to create several object instances of user, we would need to repeat a lot of our code and work hard to change all users if we decide that the properties and methods of users need to change instead of them inheriting from one single source of truth. This is where we can tap into javascript functionality such as classes, constructors and prototypes to help us.

Prototype model vs Classes

There are not real classes built into javascript. Everything is based on the Prototype Model under the hood, but with ES6 we can emulate the idea of classes to make things a bit easier to understand. This is what we call syntactic sugar. You can use either, and we will explain how classes and the prototype model work.

Classes

Classes are blueprints of an object, but they are not specific. We identify and define that an object will have specific properties, but we don't specify their values.

The cool things in that when we create instances, they will already have all the basic functionality built-in, and we can pass values dynamically through parameters.

To use classes we define them using the keyword class and the name of the class. By convention, we capitalize and CamelCase class names. Inside we put all data and functionality (properties and methods).

class User {
}

Constructor

Although you may see similarities between class and object syntax, there is one important method that sets them apart. It’s called the constructor method. JavaScript calls the constructor() method every time it creates a new instance of a class.

An instance is an object that contains the property names and methods of a class, but with unique property values.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Inside of the constructor() method, we use the this keyword. In the context of a class, this refers to an instance of that class.

We don't want to hard-code the data, we want to pass it as arguments.

To create a new instance we use the new keyword.

class User {
    constructor(name, email){
        this.name = name;
        this.email = email;
    }
}

let userOne = new User('el@pepebenitez.dev', 'Pepe')

The new keyword does 3 things:

Creates an empty object { }
Sets the value of this to the new empty object
Calls the constructor method, runs the code inside of it, and then returns the new instance

Class methods

To use methods, we don't define them inside of the constructor, we do it outside of it. You cannot use commas between the methods.

We have access to the this keyword inside of methods as well.

class User {
    constructor(name, email){
        this.name = name;
        this.email = email;
    }
    logIn(){
        console.log(this.email, 'just logged in')
    }
    logOut(){
        console.log(this.email, 'just logged out')
    }
}

let userOne = new User('el@pepebenitez.dev', 'Pepe')

userOne.logIn()
// el@pepebenitez.dev just logged in

The syntax for calling methods and getters on an instance is the same as calling them on an object — append the instance with a period, then the property or method name. For methods, you must also include opening and closing parentheses.

Class inheritance

When multiple classes share properties or methods, they become candidates for inheritance — a tool we can use to decrease the amount of code we need to write.

With inheritance, you can create a parent class (also known as a superclass) with properties and methods that multiple child classes (also known as subclasses) share. The child classes inherit the properties and methods from their parent class, by extending them from the parent.

When we call extends in a class declaration, all of the parent methods are available to the child class. In addition to the inherited features, child classes can contain their own properties, getters, setters, and methods.

With inheritance we can pass al the basic functionality easily into other classes

class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this.usesLitter = usesLitter;
  }
}

Let’s pay special attention to our new keywords: extends and super.

The extends keyword makes the methods of the parent class available inside the child class.

The super keyword calls the constructor of the parent class. In this case, super(name) passes the name argument of the Cat class to the constructor of the Animal class.

usesLitter is a new property that is unique to the Cat class, so we set it in the Cat constructor.

IMPORTANT In a constructor(), you must always call the super method before you can use the this keyword — if you do not, JavaScript will throw a reference error. To avoid reference errors, it is best practice to call super on the first line of subclass constructors.

You can find more resources on Javascript classes here:

Class basic syntax

Classes - JavaScript | MDN

JavaScript Classes

Prototype Model

Remember that we are just using pretend classes. The javascript prototype model was the original way to create or emulate using classes before the class keyword, and under the hood javascript is still using the prototype model.

Some people don't like the use of classes in Javascript.

Is "Class" In ES6 The New "Bad" Part?

So knowing how the prototype model works will help us become better developers, have more flexibility and be more efficient at debugging.

Constructor Functions

We still need to use a constructor function. A constructor function is what creates objects.

function User() {}

let userOne = new User()

We can still use the new keyword. And it is still doing the same things (creating a new object, binding the context of the this keyword equal to that object, and passes it to the constructor function). We also have access to the this keyword.

function User() {
    this.name = '';
    this.email = '';
    this.online = false;
    this.logIn = function() {
        console.log(this.email, 'has logged in')
    };
}

let userOne = new User()

However, we don't usually put our methods inside of the constructor function. That is when we use the prototype property.

Prototype property

All objects have a prototype property. A prototype is like a map for the object type and its methods. We use the prototype property to store and define our methods.

function User() {
    this.name = '';
    this.email = '';
    this.online = false;
}

User.prototype.logIn = function(){
    this.online = true;
    console.log(this.email, 'has logged in')
}

let userOne = new User()

This is all going on in the background when we use class.

Prototype inheritance

We can also use inheritance with prototype.

function Admin(...args){ // here we are using a rest parameter
    console.log(args)
}

let admin = new Admin('admin name', 'admin@email.com')

We want to call the User constructor method from the Admin constructor method, so that it inherits the basic functionality.

function User() {
    this.name = '';
    this.email = '';
    this.online = false;
}

function Admin(...args){ // here we are using a rest parameter
    User.apply() // takes the user constructor function and runs it
}

let admin = new Admin('admin name', 'admin@email.com')

In the apply method we want to pass two parameters:

What is the context of this. Sounds weird but we just need to pass this because we are calling it inside of a constructor function, so this in that context refers to the instance to which we are applying the new inherited properties and methods.
The actual arguments we are receiving in an array format.

function User() {
    ...
}

function Admin(...args){ // here we are using a rest parameter
    User.apply(this, args) // takes the user constructor function and runs it
    this.role = 'Administrator'
}

let admin = new Admin('admin name', 'admin@email.com')

If we want to inherit methods, we use the prototype property of the child object.

Admin.prototype = Object.create(User.prototype)

You can see that using classes can make some thins a lot simpler and easier, but it is still very good to understand what is actually going on.

Guiding principles

When we are talking about OOP, it is difficult not to mention the SOLID principles. There principles are meant to guide us when we are designing our code structure. Two good goals to have in mind is for everything to have only one responsibility and that everything should work individually as we want them to, without relying on other objects:

Single Responsibility Principle

One of the most important things to remember is the Single Responsibility Principle which states that a class (or object) should only have one responsibility. This doesn’t mean that an object can only do one thing, but it does mean that everything an object does should be part of one responsibility.

Loosely Coupled Objects

Obviously, all of our objects are intended to work together to form our final application. You should take care, however, to make sure that your individual objects can stand alone as much as possible. Tightly coupled objects are objects that rely so heavily on each other that removing or changing one will mean that you have to completely change another one.

You can read more about the SOLID principles here:

5 Principles that will make you a SOLID JavaScript Developer

S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript

Bonus

Static Methods

Sometimes you will want a class to have methods that aren’t available in individual instances, but that you can call directly from the class You can use the static keyword to define static methods that can only be called from the class and not from the instance.

class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  static generateName() {
    const names = ['Angel', 'Spike', 'Buffy', 'Willow', 'Tara'];
    const randomNumber = Math.floor(Math.random()*5);
    return names[randomNumber];
  }
}

Because of the static keyword, we can only access .generateName() by appending it to the Animal class.

console.log(Animal.generateName()); // returns a name
const tyson = new Animal('Tyson'); 
tyson.generateName(); // TypeError

Method chaining

A little trick to call several methods with less code.

userOne.logIn().logOut()

In order to do this we need to return the instance of the object. The instance is stored in the keyword this. We just need to return this at the end of every method.

class User {
    constructor(name, email){
        this.name = name;
        this.email = email;
    }
    logIn(){
        console.log(this.email, 'just logged in')
        return this
    }
    logOut(){
        console.log(this.email, 'just logged out')
        return this
    }
}

Useful resources on Javascript

JavaScript | MDN

freeCodeCamp.org

JavaScript Tutorial: Learn JavaScript For Free | Codecademy

JavaScript Code to go

Hi! My name is Pepe 👾, and I am from Panama in Central America 🌴🌞🌴 You can find me in linkedin, twitter or github.

If you found this useful feel free to share it!
If you have any questions, recommendations or general comments feel free to drop me a message!

Built-in Methods in Javascript 🤓

Pepe Benitez — Wed, 02 Jun 2021 15:54:32 +0000

Hi! Programming can be overwhelming 😫 but once you are comfortable with some basic concepts, it starts to feel like a superpower 🦸‍♀️ and Javascript is one of the coolest languages to learn! 💯

In this document you can find a summary of using Built-in Methods in Javascript. We will cover:

What are built-in methods?
Using Docs
Useful Built-in methods
- Date
- Math
- Strings
- Arrays
- Objects

If you need help with your setup, you can find some help below 👇

Basic Setup

What are built-in methods?

A JavaScript method is a property containing a function definition. In other words, when the data stored on an object is a function we call that a method.

To differenciate between properties and methods, we can think of it this way: A property is what an object has, while a method is what an object does.

Since JavaScript methods are actions that can be performed on objects, we first need to have objects to start with. There are several objects built into JavaScript which we can use.

Standard built-in objects

How to access object methods?

We call, or use, methods by appending an instance with:

a period (the dot operator)
the name of the method
opening and closing parentheses

You access an object method with the following syntax:

objectName.methodName()

The methodName property will execute (as a function) when it is invoked with ().

If you access the methodName property, without (), it will return the function definition instead of executing an action.

Using docs

I cannot stress enough just how important being familiar with the official documentation can be. You do not need to memorize everything, but you should know where or how to find something you need.

That is why using documentation is part of the daily lives of developers. Developers use documentation as a reference tool. It describes JavaScript’s keywords, methods, and syntax.

Take a moment to look at the javascript documentation by MDN Web Docs and play around with the links. There is a ton of very useful information about javascript in theses pages.

JavaScript | MDN

It does not matter if you don't understand everything right away. Everybody goes through different learning paths ¡Just keep practicing!

Useful Built-In Methods

Specific built-in objects have different built-in methods which we can use. Below you can find some useful methods for Date, Math, String, Array and Object objects. 👇

Date

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

Useful built-in methods for Date objects

Date()

When called as a function, returns a string representation of the current date and time, exactly as new Date().toString() does.

new Date()

When called as a constructor, returns a new Date object.

Date.now()

Returns the numeric value corresponding to the current time—the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC, with leap seconds ignored.

Date.parse()

Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC, with leap seconds ignored.Note: Parsing of strings with Date.parse is strongly discouraged due to browser differences and inconsistencies.

You can find a lot more information on built-in methods for Date objects in the documentation:

Date - JavaScript | MDN

Math

Math is a built-in object that has properties and methods for mathematical constants and functions.

Useful built-in methods for Math objects

Math.round(num)

Returns the provided number rounded to the closest integer (whole number).

Math.floor(num)

Rounds down to the previous integer.

Math.ceil(num)

Rounds up to the next integer.

Math.sqrt(x) & Math.cbrt(x)

Returns the square root of x and the cube root of x, respectively.

Math.PI

Not technically a method, but a property! Handy if you need Pi.

You can find a lot more information on built-in methods for Math objects in the documentation:

Math - JavaScript | MDN

String

The String object is used to represent and manipulate a sequence of characters. Strings are useful for holding data that can be represented in text form, and JavaScript provides a number of useful string built-in methods.

E.g. 'example string'.methodName().

console.log('hello'.toUpperCase()); // Prints 'HELLO'

Useful built-in methods for String objects

string.length()

Returns the length of a string.

string.toUpperCase()

Convert all of the characters in a string to capitals. Non-destructive — returns a new string, does not change the original string.

string.toLowerCase()

As with toUpperCase. Converts all characters to lower case. Non-destructive.

string.split(separator, limit)

Splits the string into an array, split by the provided separator. If an empty string (“”) is provided, it will split each character into a new element in the array. Eg. (“JavaScript is great”).split(“ “) will return [“JavaScript”, “is”, “great”].

'Javascript is great'.split("") // returns ['Javascript', 'is', 'great']

string.replace(searchFor, replaceWith)

Finds every instance of the search for substring and replaces it with the given new substring. Non-destructive.

You can find a lot more information on built-in methods for String objects in the documentation:

String - JavaScript | MDN

Array

The simplest way to describe Arrays is that they list-like objects. Something super important about arrays is that they are indexed, meaning that you can access specific values by the index or the location they hold in the list.

let fruits = ['Apple', 'Banana']

Useful built-in methods for Array objects

array.length

Not a method, but a super useful array’s built-in properties is length. It returns the number of items in the array.

const newYearsResolutions = ['Keep a journal', 'Take a falconry class'];

console.log(newYearsResolutions.length);
// Output: 2

array.push()

Allows us to add items to the end of an array. Notice that .push() changes, or mutates, the array. You might also see .push() referred to as a destructive array method since it changes the initial array.

const itemTracker = ['item 0', 'item 1', 'item 2'];

itemTracker.push('item 3', 'item 4');

console.log(itemTracker); 
// Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];

array.pop()

Removes the last item of an array. It does not take any arguments, it simply removes the last element of the array and it returns the value of the last element. It is a method that mutates the initial array.

const newItemTracker = ['item 0', 'item 1', 'item 2'];

const removed = newItemTracker.pop();

console.log(newItemTracker); 
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2

Iterators

The built-in JavaScript array methods that help us iterate are called iteration methods, at times referred to as iterators. Iterators are methods called on arrays to manipulate elements and return values.

array.forEach()

Executes the same code for each element of an array.

groceries.forEach(groceryItem => 
    console.log(' - ' + groceryItem)
);

Looping is a very important concept, so let’s explore the syntax of invoking .forEach().

groceries.forEach() calls the forEachmethod on the groceries array.
.forEach() takes an argument of callback function. Remember, a callback function is a function passed as an argument into another function.
.forEach() loops through the array and executes the callback function for each element. During each execution, the current element is passed as an argument to the callback function.
The return value for .forEach() will always be undefined.

We can also define a function beforehand to be used as the callback function.

function printGrocery(element){
  console.log(element);
}

groceries.forEach(printGrocery);

It’s good to be aware of the different ways to pass in callback functions as arguments in iterators because developers have different stylistic preferences.

array.map()

When .map() is called on an array, it takes an argument of a callback function and returns a new array. Take a look at an example of calling .map():

const numbers = [1, 2, 3, 4, 5]; 

const bigNumbers = numbers.map(number => {
  return number * 10;
});

.map() works in a similar manner to .forEach()— the major difference is that .map() returns a new array.

array.filter()

Like .map(), .filter() returns a new array. However, .filter() returns an array of elements after filtering out certain elements from the original array. The callback function for the .filter() method should return true or false depending on the element that is passed to it. The elements that cause the callback function to return true are added to the new array.

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 

const shortWords = words.filter(word => {
  return word.length < 6;
});

You can find a lot more information on built-in methods for Array objects in the documentation:

Array - JavaScript | MDN

Objects

It is a bit funny to say that we can use built-in methods for Object objects, but hey I did not make the rules. We can also take advantage of built-in methods for Objects. Objects are used to store various keyed collections, or key and value pairs.

Useful built-in methods for Array objects

Object.keys(obj)

Returns an array of the keys that the object contains.

Object.values(obj)

Returns an array of the values of each of the elements in the object.

Object.entries(obj)

Returns an array containing nested arrays for each key-value pair. The first element in each nested array is the key, and the second is the value. Eg:

obj = { a: 1, b: "b", c: [3,4,5] }Object.entries(obj)
>> [["a",1], ["b","b"], ["c",[3,4,5]]

Object.fromEntries(arr)

Creates a new object from an array of key-value pairs passed as the argument. Returns the new object.

Looping Through Objects

Same as iterating thorough Arrays with .forEach(), for...in will execute a given block of code for each property in an object.

let spaceship = {
  crew: {
    captain: { 
      name: 'Lily', 
      degree: 'Computer Engineering', 
      cheerTeam() { console.log('You got this!') } 
    },
    'chief officer': { 
      name: 'Dan', 
      degree: 'Aerospace Engineering', 
      agree() { console.log('I agree, captain!') } 
    },
    medic: { 
      name: 'Clementine', 
      degree: 'Physics', 
      announce() { console.log(`Jets on!`) } },
    translator: {
      name: 'Shauna', 
      degree: 'Conservation Science', 
      powerFuel() { console.log('The tank is full!') } 
    }
  }
}; 

// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

for...in

You can find a lot more information on built-in methods for Objects in the documentation:

Object - JavaScript | MDN

Bonus

Adding a Method to an Object

We could create our own objects and methods to model real life situations and actions,

Adding a new method to an object is easy:

We can include methods in our object literals by creating ordinary, comma-separated key-value pairs. The key serves as our method’s name, while the value is an anonymous function expression.

const alienShip = {
  invade: function () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

With the new method syntax introduced in ES6 we can omit the colon and the function keyword.

const alienShip = {
  invade () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

Object methods are invoked by appending the object’s name with the dot operator followed by the method name and parentheses:

alienShip.invade(); // Prints 'Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.

person.name = function () {
  return this.firstName + " " + this.lastName;
};

Useful resources on Javascript

JavaScript | MDN

freeCodeCamp.org

JavaScript Tutorial: Learn JavaScript For Free | Codecademy

JavaScript Code to go

Hi! My name is Pepe 👾, and I am from Panama in Central America 🌴🌞🌴 You can find me in linkedin, twitter or github.

If you found this useful feel free to share it!
If you have any questions, recommendations or general comments feel free to drop me a message!

Boolean Logic in Javascript 🤓

Pepe Benitez — Wed, 02 Jun 2021 15:48:59 +0000

Hi! Programming can be overwhelming 😫 but once you are comfortable with some basic concepts, it starts to feel like a superpower 🦸‍♀️ and Javascript is one of the coolest languages to learn! 💯

In this document you can find a summary of using Boolean Logic in Javascript. We will cover:

What are booleans?
Conditional Statements
Truthy and Falsy values
Comparison operators
Logical operators
Looping

If you need help with your setup, you can find some help here 👈

What are booleans?

Booleans are part of what we call primitive data types in javascript.

This data type only has two possible values— either true or false (without quotes). It’s helpful to think of booleans as on and off switches or as the answers to a “yes” or “no” question.

Boolean - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Conditional Statements

if-else decisions can be modeled in code by creating conditional statements. A conditional statement checks a specific condition(s) and performs a task based on the condition(s).

If Statement

In programming, we can perform a task based on a condition using an if statement:

if (true) {
  console.log('This message will print!'); 
}
// Prints: This message will print!

Notice in the example above, we have an ifstatement. The if statement is composed of:

The if keyword followed by a set of parentheses () which is followed by a code block, or block statement, indicated by a set of curly braces {}.
Inside the parentheses (), a condition is provided that evaluates to true or false.
If the condition evaluates to true, the code inside the curly braces {} runs, or executes.
If the condition evaluates to false, the block won’t execute.

If..else Statements

If we wanted to add some default behavior to the if statement, we can add an else statement to run a block of code when the condition evaluates to false.

if (false) {
  console.log('The code in this block will not run.');
} else {
  console.log('But the code in this block will!');
}

// Prints: But the code in this block will!

An else statement must be paired with an ifstatement, and together they are referred to as an if...else statement.

In the example above, the else statement:

Uses the else keyword following the code block of an if statement.
Has a code block that is wrapped by a set of curly braces {}.
The code inside the else statement code block will execute when the if statement’s condition evaluates to false.

if...else statements allow us to automate solutions to yes-or-no questions, also known as binary decisions.

If.. else if.. else Statements

We can add more conditions to our if...else with an else if statement. The else if statement always comes after the if statement and before the else statement. The else if statement also takes a condition.

let stopLight = 'yellow';

if (stopLight === 'red') {
  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
}

The else if statements allow you to have multiple possible outcomes. if/else if/else statements are read from top to bottom, so the first condition that evaluates to true from the top to bottom is the block that gets executed.

Truthy and Falsy Values

Sometimes, you’ll want to check if a variable exists and you won’t necessarily want it to equal a specific value — you’ll only check to see if the variable has been assigned a value.

let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

The code block in the if statement will run because myVariable has a truthy value; even though the value of myVariable is not explicitly the value true, when used in a boolean or conditional context, it evaluates to true because it has been assigned a non-falsy value.

So which values are falsy— or evaluate to falsewhen checked as a condition? The list of falsy values includes:

0
Empty strings like "" or ''
null which represent when there is no value at all
undefined which represent when a declared variable lacks a value
NaN, or Not a Number

let numberOfApples = 0;

if (numberOfApples){
   console.log('Let us eat apples!');
} else {
   console.log('No apples left!');
}

// Prints 'No apples left!'

Truthy and Falsy Assignment

In a boolean condition, JavaScript assigns the truthy value to a variable if you use the || operator in your assignment:

let defaultName = username || 'Stranger';

Because || or statements check the left-hand condition first, the variable defaultName will be assigned the actual value of username if is truthy, and it will be assigned the value of 'Stranger' if username is falsy. This concept is also referred to as short-circuit evaluation.

Comparison Operators

When writing conditional statements, sometimes we need to use different types of operators to compare values. These operators are called comparison operators.

Here is a list of some handy comparison operators and their syntax:

Less than: <
Greater than: >
Less than or equal to: <=
Greater than or equal to: >=
Is equal to: ===
Is not equal to: !==

Comparison operators compare the value on the left with the value on the right.

10 < 12 // Evaluates to true

We can also use comparison operators on different data types like strings

'apples' === 'oranges' // false

All comparison statements evaluate to either true or false and are made up of:

Two values that will be compared.
An operator that separates the values and compares them accordingly (>, <, <=,>=,===,!==).

Comparisons and samenes

In javascript we use === to compare elements. == can also work but it is not strict (it does not compare data types)

Equality comparisons and sameness

Logical Operators

Working with conditionals means that we will be using booleans, true or false values. In JavaScript, there are operators that work with boolean values known as logical operators. We can use logical operators to add more sophisticated logic to our conditionals. There are three logical operators:

the and operator (&&)

When we use the && operator, we are checking that two things are true

if (stopLight === 'green' && pedestrians === 0) {
  console.log('Go!');
} else {
  console.log('Stop');
}

the or operator (||)

If we only care about either condition being true, we can use the || operator


if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

the not operator, otherwise known as the bang operator (!)

The ! not operator reverses, or negates, the value of a boolean

let excited = true;
console.log(!excited); // Prints false

let sleepy = false;
console.log(!sleepy); // Prints true

Looping

We can use booleans, or statements that evaluate to booleans, to run loops for a set of defined values, like the elements of an array or a range of numbers, or while a condition evaluates to true. We can user For loops and While loops respectively.

The For Loop

The typical for loop includes an iterator variable that usually appears in all three expressions. The iterator variable is initialized, checked against the stopping condition, and assigned a new value on each loop iteration. Iterator variables can have any name, but it’s best practice to use a descriptive variable name.

A for loop contains three expressions separated by ; inside the parentheses:

an initialization starts the loop and can also be used to declare the iterator variable.
a stopping condition is the condition that the iterator variable is evaluated against— if the condition evaluates to true the code block will run, and if it evaluates to false the code will stop.
an iteration statement is used to update the iterator variable on each loop.

The for loop syntax looks like this:

for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}

The While Loop

We start our loop with the keyword while followed by our stopping condition, or test condition. This will be evaluated before each round of the loop. While the condition evaluates to true, the block will continue to run. Once it evaluates to false the loop will stop.

// A while loop that prints 1, 2, and 3
let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}

The syntax of a for loop is ideal when we know how many times the loop should run, but we don’t always know this in advance. In situations when we want a loop to execute an undetermined number of times, while loops are the best choice.

Do...While Statements

A do...while statement says to do a task once and then keep doing it until a specified condition is no longer met. The syntax for a do...while statement looks like this:

let countString = '';
let i = 0;

do {
  countString = countString + i;
  i++;
} while (i < 5);

console.log(countString);

First, the code block after the do keyword is executed once. Then the condition is evaluated. If the condition evaluates to true, the block will execute again. The looping stops when the condition evaluates to false.

Note that the while and do...while loop are different! Unlike the while loop, do...while will run at least once whether or not the condition evaluates to true.

Bonus

Ternary Operator

In the spirit of using short-hand syntax, we can use a ternary operator to simplify an if...else statement.

let isNightTime = true;

if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}

We can use a ternary operator to perform the same functionality:

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');

The condition, isNightTime, is provided before the ?.
Two expressions follow the ? and are separated by a colon :.
If the condition evaluates to true, the first expression executes.
If the condition evaluates to false, the second expression executes.

Like if...else statements, ternary operators can be used for conditions which evaluate to true or false.

Useful resources on Javascript

JavaScript | MDN

freeCodeCamp.org

JavaScript Tutorial: Learn JavaScript For Free | Codecademy

JavaScript Code to go

Hi! My name is Pepe 👾, and I am from Panama in Central America 🌴🌞🌴 You can find me in linkedin, twitter or github.

If you found this useful feel free to share it!
If you have any questions, recommendations or general comments feel free to drop me a message!