Author: Daniel Puiatti

Have you ever been waiting for a webpage to update and gotten tired of hitting the refresh button over and over again?

I know I have, especially when I need to buy tickets for a show or concert.

I sometimes find myself hitting the refresh button hundreds of times an hour in the hopes of capturing the instant the tickets go on sale.

It’s an annoying process, for sure.

But luckily, we have JavaScript!

In this guide, I’ll show you how to use JavaScript automatically refresh your browser after 30 seconds.

It’s actually pretty easy. So let’s get started.

1. Open the webpage that you want to refresh in your browser.
2. Right-click on the webpage and select “Inspect” (or “Inspect Element” depending on your browser). This will open the developer console.
3. In the developer console, go to the “Console” tab. This is where you can enter and run JavaScript code.
4. To refresh the page every 30 seconds, use the setInterval function. The setInterval function takes two arguments: a callback function, and the interval time in milliseconds.

setInterval(function() {
  // code to refresh page goes here
}, 30000);

To refresh the page, you can use the location.reload function. This function will reload the current webpage from the server rather than using a cached version.

setInterval(function() {
  location.reload();
}, 30000);

Press “Enter” to run the code. The page will now refresh every 30 seconds.

If you want to stop the page from refreshing, you can use the clearInterval function. This function takes the interval ID returned by the setInterval function and stops the interval from running.

// stop the interval from running
clearInterval(intervalId);

Keep in mind that constantly refreshing a webpage can put a strain on the server and may not be the best user experience. It’s important to consider if automatic page refresh is necessary and to use it sparingly.

Additionally, the JavaScript code that you enter in the developer console will only run while the console is open. If you close the console, the page will stop refreshing.

Et voila! That’s it!

Pretty simple, eh?

As one of the most popular programming languages in the world, JavaScript is an essential skill for any aspiring developer. In this article, we will discuss the most important concepts to master to become proficient in JavaScript.

Variables

Variables are used to store data in a program. In JavaScript, there are several different types of variables, including strings, numbers, and Booleans. It is important to understand how to declare and assign values to variables and use them in expressions and statements.

Data types

In addition to the basic data types mentioned above, JavaScript has more complex data types, such as arrays and objects. Understanding how to work with these data types is crucial for storing and manipulating data in your programs.

Control structures: Control structures are used to control the flow of a program. In JavaScript, the main control structures are if/else statements, for loops, and while loops. It is important to understand how to use these structures to make decisions and repeat actions in your code.

Functions

Functions are blocks of code that can be defined and called upon when needed. In JavaScript, functions can be defined with or without arguments and can return a value if needed. Understanding how to write and use functions is essential for organizing and reusing code in your programs.

Objects

Objects are data structures that store data in a key-value format. In JavaScript, objects can be used to represent real-world entities and can be created using constructor functions or object literals. Understanding how to create and work with objects is important for organizing and accessing data in your programs.

Arrays

Arrays are data structures that store a list of items. In JavaScript, arrays can hold any type of data and can be created using array literals or the Array constructor. Understanding how to create and work with arrays is important for storing and manipulating lists of data in your programs.

DOM manipulation

The DOM, or Document Object Model, is a representation of a web page as a tree of objects. In JavaScript, it is possible to manipulate the DOM by adding, deleting, or modifying elements on a page. Understanding how to manipulate the DOM is essential for building interactive web applications.

Asynchronous programming

Asynchronous programming is a way to execute code in a non-blocking manner. In JavaScript, asynchronous programming is achieved through the use of callback functions, promises, and async/await. Understanding how to use these techniques is important for building responsive and scalable applications.

Error handling

No matter how well you write your code, errors and exceptions are an inevitable part of programming. In JavaScript, it is important to understand how to handle errors and exceptions in order to prevent your program from crashing.

By mastering these concepts, you will have a strong foundation in JavaScript and be well on your way to becoming a proficient developer. As you continue to learn and grow, it is important to stay up-to-date with the latest developments and best practices in the JavaScript community. With dedication and practice, you can become an expert in JavaScript and build powerful and interactive web applications.

Learning JavaScript can seem intimidating, especially if you have no background in programming. But it doesn’t have to be. JavaScript is an incredibly powerful and versatile language that can provide a range of benefits to non-developers. From website development to game design, it can open the door to a world of opportunities and new ideas. Learning JavaScript can even help improve your life in surprising ways, such as enhancing your problem-solving skills and boosting your confidence. Whether you’re a designer, a marketer, an entrepreneur, or just someone who wants to learn something new, JavaScript can provide a range of benefits that can help you take your skills to the next level. So, let’s take a look at the benefits of learning JavaScript for non-developers, and how it can help improve your life.

What is JavaScript?

JavaScript is a programming language that was developed in the 1990s for creating interactive websites. It was designed to run in a browser and to be interpreted by a browser engine. It can be used on both client-side and server-side programming and is commonly embedded into HTML code. JavaScript is a high-level programming language, meaning it is similar to languages like Java and C++. However, it is an interpreted language, which means that it doesn’t need to be compiled into machine code. JavaScript was created by Brendan Eich, who also created Java. JavaScript’s popularity increased dramatically when Tim Berners-Lee released the first version of the World Wide Web. Since then, JavaScript has become a crucial part of the web, and is used for tasks ranging from website development to game design.

Benefits of learning JavaScript for non-developers

While programming is a crucial skill for any developer, learning JavaScript can provide several benefits for non-developers. These include improved problem-solving skills, boosted confidence and creativity, and the opportunity to open the door to new opportunities. If you’re interested in learning JavaScript, but don’t want to become a developer, these benefits can help show you how it can improve your life.

Improved problem-solving skills

Problem-solving is a crucial skill for any type of work, and it can be beneficial to learn new ways to approach problems. While programming is often approached with a structured and logical approach, JavaScript has a more unpredictable nature. This can make it more difficult to predict how the code will behave. However, it can also provide more freedom and flexibility when tackling problems. By having a more open mindset toward problem-solving, you can tackle problems in new ways that allow you to create interesting and unexpected things.

Boosted confidence and creativity

Learning how to create with JavaScript can be a daunting task. But, once you understand the basics and get used to its quirks, you can create some amazing things. Creating interactive and engaging content can be a great way to boost your confidence. It can also help you become more creative as you try to figure out new ways to use JavaScript to develop your ideas. By learning JavaScript, you can open the door to creating new and interesting things that you might not have otherwise been able to create. You can create new interactive content for websites or explore ways to use JavaScript in your creative projects.

Open the door to new opportunities

The best way to learn is to teach, so don’t just learn from others, but also share what you’ve learned with others. By learning JavaScript, you can open the door to new opportunities and share your skills with others. Whether you want to become a teacher or want to improve your chances of getting a job, learning JavaScript can open the door to new opportunities. This can be beneficial in a range of different fields, including marketing, design, and entrepreneurship.

How to learn JavaScript

The best way to learn is to start small. You don’t need to learn everything there is to know about JavaScript; you just need to learn the basics. This will help you get started with the language and give you a basic understanding of how it works. There are a number of different ways you can learn JavaScript, including online courses and tutorials, books, or interactive websites. There are also a range of JavaScript challenges and competitions, where you can apply your skills in fun and interesting ways.

JavaScript learning resources

There are a number of different resources you can use to learn JavaScript. This includes online courses, tutorials, and books. There are also a number of interactive websites where you can apply your skills in a fun and interactive way. You can also find a range of JavaScript challenges and competitions, where you can apply your skills in a fun and competitive way.

Practical applications of JavaScript

JavaScript is a versatile language that can be applied in a range of different industries and situations. This includes website development, where it can be used for tasks such as manipulating images and creating animations. JavaScript can also be used for data visualization and mapping, as well as scientific and mathematical functions. JavaScript can also be applied in marketing, where it can be used for tasks such as website analytics and email marketing. It can also be applied in design, where it can be used for tasks such as 3D modeling and creating interactive visuals. JavaScript is also becoming increasingly popular in education. It can be used for tasks such as creating immersive and engaging content, and exploring concepts in a new and exciting way.

Examples of successful JavaScript projects

As we’ve discussed, JavaScript can be applied in a range of different industries and situations. This includes creating new and innovative educational content, improving website analytics and design, and creating new and exciting ways to explore concepts. Let’s take a look at a few examples of successful JavaScript projects: – Virtual Reality – Virtual reality has become increasingly popular in recent years. It’s used in a variety of scenario, ranging from gaming to education. To create virtual reality experiences, developers use JavaScript for real-time 3D rendering, interacting with sensors, and designing virtual environments. – Education – Education is becoming more and more immersive and interactive. This is particularly true when it comes to online learning. This can be a great way to engage students and provide a new and exciting experience. One example of how JavaScript is being used in education is in Virtual Human Interaction Lab (VHIL). VHIL uses a combination of virtual reality and motion-capture technology to allow students to engage with avatars of real people. – Improved website analytics – One of the most important aspects of running a website is understanding its users. This can be difficult if you’re not a developer. However, JavaScript can be used to create new and innovative ways of understanding website visitors. One example of this is Hotjar. Hotjar is a tool that uses website analytics to provide insights into user behavior. It provides information such as where users are clicking, their journey through the website, and their device type. It also provides information about where users are coming from, and what they are doing once they leave the website.

Examples of successful non-developers using JavaScript

JavaScript is a powerful language that can be applied in a wide range of industries. This includes marketing, education, and design. It can also be used to create new and innovative ways to explore concepts. These are just a few examples of how non-developers can use JavaScript to create new and engaging content. Let’s take a look at a few examples of successful non-developers who have used JavaScript: – Marketing – When marketing your products or services, it’s important to use different and innovative methods. This can help you stand out and engage with your audience in new ways. One example of how JavaScript is being used in marketing is with interactive infographics. These are visual representations of information that are usually designed using online tools. They’re a great way to convey information quickly and effectively. – Design – Design is becoming increasingly digital. This means that designers can use a variety of new tools and methods to create new and exciting designs. One example of how JavaScript is being used in design is with 3D modeling. This is a highly creative process that can be used to create a range of design elements. A popular example of this is designing logos and other branding elements using software like Sketch or Autodesk.

Conclusion

Learning JavaScript can be a daunting task for anyone, but it can be particularly challenging for non-developers. However, it is a worthwhile investment and can open the door to a range of different opportunities. It can also help improve your life.

Good JavaScript programming needs a process — a way to guide how you think about problems and how you write code to solve these problems.

Arbitrarily inventing and improvising your code’s structure is fine for a beginner, but any technical recruiter administering a JavaScript proficiency test will always consider this amateurish at best.

So stop improvising your code structure and writing spaghetti JavaScript.

How?

Use a programming paradigm.

In JavaScript, one of the best programming paradigms is the object-oriented paradigm.

It’s a set of principles that guide the logic of your code structure and how you should write your JavaScript.

And while it has technical aspects, it is not solely a technical component of JavaScript, as a function or loop is. It’s also a way of thinking about problems and a set of rules about how to write your code to solve these problems.

In its simplest interpretation, it’s nothing more than a way to structure your code.

In its most complex, it’s a set of methodologies to guide how you think about and solve problems with your JavaScript code.

This guide will help you understand and apply the object-oriented programming paradigm.

Object-oriented programming

Object-oriented programming relies heavily on objects and is based on four scary-sounding principles:

• encapsulation
• abstraction
• inheritance
• polymorphism

Each principle is applied through JavaScript objects, meaning you’ll be using objects to structure and organize your program.

You’ll still use functions and loops and all your favorite JavaScript methods, but they will all be organized within and around the capabilities of objects.

Let’s explore these principles to help you understand what they mean.

Encapsulation

Or, in simpler terms — keep related parts of your code grouped together.

Your JavaScript programs will always have portions of code that are directly related to each other.

The principle of encapsulation dictates that when you have code that can be grouped together, you group it together.

Take a look at the code below, do you see any groups that the statements can be organized into?

let dogBreed = "Golden Retriever"
let dogColour = "Yellow";
let dogAge = 2;
let dogSound = function() {
alert("Woof Woof!");
};
let catBreed = "Tabby";
let catColour = "Grey";
let catAge = 3;
let catSound = function() {
alert("Meooooow!");
}
      

Right, the two categories are fairly obvious: dog and cat.

Following the principle of encapsulation, let’s reorganize our code with the use of JavaScript objects.

Here’s what that looks like:

let dog = {
  breed: "Golden Retriever",
  colour: "Yellow",
  age: 2,
  sound: function () {
    alert("Woof Woof!");
  },
};

let cat = {
  breed: "Tabby",
  colour: "Grey",
  age: 3,
  sound: function () {
    alert("Meooooow!");
  },
};	

That’s really it, to apply this principle you just need to make sure that when you have code that can be grouped together, you group it together.

And with the use of the encapsulation principle, we can ensure that data and methods are all grouped together, thereby making your code easier to understand and maintain.

Abstraction

Or, in simpler terms — keep the JavaScript objects you create simple.

Objects have a tendency to become unnecessarily complex as they are versatile and have no limit to the number of methods or properties they can contain.

The principle of abstraction encourages you to keep your object simple by only using the methods and properties which are essential to the object to perform it’s desired output.

Let’s consider a TV through the lens of abstraction to arrive at a better understanding of the concept.

A TV does many things, it can turn on, turn off and switch to specific channels, and you can even cast content to it from your phone.

A TV also has many properties: weight, size, colour, age, and brand.

Through the lens of abstraction, if we were to create a JavaScript object to allow the TV to turn on, that object should only contain the properties and methods directly related to making the TV turn on, everything else is irrelevant.

In other words, the object is an abstraction of the TV as a whole. It is a simplified version of a TV as it does not contain all the properties and capabilities of a TV, but only what is necessary to allow the TV to turn on.

Let’s write some code to demonstrate how abstraction works for this TV object designed to turn the TV on.

Here’s what the object might look like without abstraction.

turnOnTV = {
  tvAge: 4,
  tvColour: "black",
  tvHeight: 45,
  tvBrand: "Samsung",
  turnOn: function() {
  console.log("TV is on");
  }
}

Here’s what the object looks like with abstraction.

turnOnTV = {
  turnOn: function() {
  console.log("TV is on");
  }
}

Notice how the second version only contains what is necessary to allow the TV to turn on?

That’s the essence of abstraction. Only put in your objects what is necessary.

Inheritance

Or, in simpler terms — reduce repetition.

When using objects in JavaScript we often end up with a lot of very similar objects. Many times you’ll need an object to have the same method or property as an existing object.

Object-oriented programming seeks to minimize the confusion that similar objects have through inheritance.

This is a bit of a tricky concept, so let’s use an analogy of a library.

Think of a library with thousands of books. While each of these books may be unique, they are all still books, and books can all be read.

Thinking of this through the principle of abstraction and objects, we’d want to have a single instance of the read method that is shared (inherited) by all books.

We can do this with the use of a JavaScript prototype.

A prototype allows you to create objects that are based on a single, master object. In JavaScript, this process is called instantiation.

For books, we’d want our prototype to contain a read function so that any time a new book object is instantiated from it, it contains the same read method, saving us from having to recreate the same read method for every book.

Let’s use some code to help illustrate the concept of inheritance and prototypes in action.

First, let’s create a prototype for the book.

function Book(title, author, year, category) {
  this.title = title;
  this.author = author;
  this.date = year;
  this.category = category;
  this.read = read() {
  console.log("You are reading this book!");
  }
}

Next, let’s instantiate a new object based on the prototype.

function Book(title, author, year, category) {
  this.title = title;
  this.author = author;
  this.date = year;
  this.category = category;
  this.read = function() {
  	console.log("You are reading this book!");
  }
}

let book1 = new Book("Dune", "Frank Herbert", 1965, "science fiction");

Now that you’ve instantiated a new object from the prototype, try calling the function from the Book prototype with the book1 object in your JavaScript console.

Notice how the book1 object has the read method even though it wasn’t specified when you were creating it?

The book1 object has the read method because it inherited it from the Book prototype.

With the use of the inheritance principle, we can ensure that data and features used by multiple objects are contained in a single source, thereby reducing the need for repetition and making your code easier to maintain.

Polymorphism

Or, in simpler terms — your JavaScript statements can have varied outputs.

The concept of polymorphism is the trickiest of the four principles for me. It took me quite some time to wrap my head around the concept and how to apply it, but I think the explanation that follows will help you avoid some of the headaches I experienced.

The word polymorphism is ancient Greek and translates roughly to many kinds. In JavaScript, this means a statement can have many varied outputs.

Think of the prototype concept we just explored in the previous section which can pass on a method or property to an instantiation.

Polymorphism allows each instantiation to produce its own unique output when using a method or property inherited from a prototype.

Let’s look at an example using animal sounds to better understand how polymorphism works.

First, let’s create an Animal prototype that receives a parameter for the sound an animal makes.

function Animal(sound){
    this.sound = sound;
    this.speak = function(){
        return this.sound;
}
}

Next, let’s instantiate three objects from the Animal prototype and give them each a unique sound.

function Animal(sound){
    this.sound = sound;
    this.speak = function(){
        return this.sound;
}
}
    var dog = new Animal("woof");
    var cat = new Animal("meow");
    var cow = new Animal("moo");

Next, let’s create a function to display each of the sounds in the console.

function Animal(sound){
    this.sound = sound;
    this.speak = function(){
        return this.sound;
}
}
    var dog = new Animal("woof");
    var cat = new Animal("meow");
    var cow = new Animal("moo");

function showInfo(obj){
    console.log(obj.speak());
}

And finally, let’s log each of the sounds to the console.

function Animal(sound){
    this.sound = sound;
    this.speak = function(){
        return this.sound;
	}
}
var dog = new Animal("woof");
var cat = new Animal("meow");
var cow = new Animal("moo");

function showInfo(obj){
    console.log(obj.speak());
}

showInfo(dog);
showInfo(cat);
showInfo(cow);

Notice how each instantiation of the Animal object passes its own unique argument to the same speak method and a single speak method has three different outputs? This is polymorphism.

Within the Animal prototype there is a single method speak. Within each instantiation of this prototype (dog, cat and cow) the method expresses different outputs.

So, to reiterate, your JavaScript statements can have varied outputs. This is polymorphism.

Applying the principle of polymorphism allows you to keep your code organized and efficient by minimizing the need for repetition.

Applying Object-oriented programming methodology to your problem solving

To use the object-oriented programming methodology effectively you must teach yourself how to look at problems through an object-oriented lens.

Now that we’ve covered the four principles of object-oriented programming: encapsulation, abstraction, inheritance, and polymorphisms, I want to share my approach to looking at problems through an object-oriented lens.

But first, I want to acknowledge that there are many articles expressing countless views on how you can, should, and should not think about programming in JavaScript.

I suspect that over time JavaScript developers each develop a unique approach to writing JavaScript and that every one of them will profess to you that their approach is the best.

I’m not going to argue that my approach is the best, but simply that it works for me.

My approach is simple and relies on following the steps:

1. Deconstructing each part of your problem.
2. Encapsulating each part into an object.
3. Ensuring each object is an abstraction and contains only what is necessary to arrive at the desired output.
4. Applying Inheritance and polymorphism to reduce complexity.

Let’s take a try using the four steps above on this Netflix homepage.

First, let’s deconstruct the parts of the homepage.

I see three main parts: the navigation, the hero image, and the “Popular on Netflix” slider.

Now that we’ve deconstructed the page, let’s create an object for each component.

let navBar = {};
let heroImage = {};
let popSlider = {};

Now, let’s use abstraction to add properties and methods to the navBar and heroImage objects.

let navBar = {
  logo: "netflix-logo.jpg",
  homeBtn: "netflix.com",
  tvBtn: "netflix.com/tv",
  moviesBtn: "netflix.com/movies",
  latesBtn: "netflix.com/latest",
  myListBtn: "netflix.com/list"
};

let heroImage = {
	mainImage: "theLastDance.jpg"
  	playBtn: function() {
    console.log("starting your show");
    },
    moreInfoBtn: function() {
    console.log("here's more info");
    }
};

let popSlider = {

};

Seeing as the popSlider object has a number of movies, we’ll use the principle of inheritance and create a prototype to avoid repetition.

let navBar = {
  logo: "netflix-logo.jpg",
  homeBtn: "netflix.com",
  tvBtn: "netflix.com/tv",
  moviesBtn: "netflix.com/movies",
  latesBtn: "netflix.com/latest",
  myListBtn: "netflix.com/list"
};

let heroImage = {
	mainImage: "theLastDance.jpg",
  	playBtn: function() {
    console.log("starting your show");
    },
    moreInfoBtn: function() {
    console.log("here's more info");
    }
};

function popSlider(title, year, category) {
  this.title = title;
  this.date = year;
  this.category = category;
  this.movie = function() {
  	console.log(this.title);
  }
}

Now let’s instantiate some objects from the popSlider prototype.

let navBar = {
  logo: "netflix-logo.jpg",
  homeBtn: "netflix.com",
  tvBtn: "netflix.com/tv",
  moviesBtn: "netflix.com/movies",
  latesBtn: "netflix.com/latest",
  myListBtn: "netflix.com/list"
};

let heroImage = {
	mainImage: "theLastDance.jpg",
  	playBtn: function() {
    console.log("starting your show");
    },
    moreInfoBtn: function() {
    console.log("here's more info");
    }
};

function popSlider(title, year, category) {
  this.title = title;
  this.date = year;
  this.category = category;
  this.movie = function() {
  	console.log(this.title);
  }
}
let pop1 = new popSlider("Have a Good Trip", 2020, "documentary");
let pop2 = new popSlider("The Last Dance", 2020, "documentary");
let pop3 = new popSlider("Deadpool 2", 2019, "action");
let pop4 = new popSlider("Jerry Seinfeld", 2018, "comedy");
let pop5 = new popSlider("Into the Night", 2017, "suspense");

Finally, let’s use the principle of polymorphism to use our inherited movie method to list the title of each of our popSlider instantiations.

let navBar = {
  logo: "netflix-logo.jpg",
  homeBtn: "netflix.com",
  tvBtn: "netflix.com/tv",
  moviesBtn: "netflix.com/movies",
  latesBtn: "netflix.com/latest",
  myListBtn: "netflix.com/list"
};

let heroImage = {
	mainImage: "theLastDance.jpg",
  	playBtn: function() {
    console.log("starting your show");
    },
    moreInfoBtn: function() {
    console.log("here's more info");
    }
};

function popSlider(title, year, category) {
  this.title = title;
  this.date = year;
  this.category = category;
  this.movie = function() {
  	console.log(this.title);
  }
}
let pop1 = new popSlider("Have a Good Trip", 2020, "documentary");
let pop2 = new popSlider("The Last Dance", 2020, "documentary");
let pop3 = new popSlider("Deadpool 2", 2019, "action");
let pop4 = new popSlider("Jerry Seinfeld", 2018, "comedy");
let pop5 = new popSlider("Into the Night", 2017, "suspense");

function showInfo(obj){
    console.log(obj.movie());
}

showInfo(pop1);
showInfo(pop2);
showInfo(pop3);
showInfo(pop4);
showInfo(pop5);

And there you have it, you’ve now got a working understanding of object-oriented programming and are well on your way to becoming an intermediate JavaScript developer.

This is one of the most challenging topics for beginners, so congratulations on making it this far.

Objects are one of the most elegant, simple and extraordinarily useful tools you’ll ever work with when programming in JavaScript.

In fact, objects are one of the reasons why JavaScript is such a popular and widespread programming language.

And if you want to improve your JavaScript programming from beginner to intermediate, you’ll need to understand JavaScript objects.

In fact, without understanding JavaScript objects, you’ll never really understand JavaScript, as almost everything in JavaScript is an object.

This guide will help you understand objects in the JavaScript language. Specifically, it will help you understand object syntax and how to write and use the objects you create.

What are JavaScript objects

The easiest way to think of a JavaScript object is as a container that holds related variables and functions. Sort of like a storage container.

Imagine you have a container and you fill it with sewing items.

You could label this container “sewing supplies” and fill it with thread, needles, pins, and other sewing related items.

This sewing supplies container helps keep your sewing supplies organized and easy to find.

A JavaScript object does the same thing. It helps you keep your data organized and easy to find, and things that help keep your data organized and easy to find are often referred to as data structures.

Actually, you may already be familiar with data structures if you read my beginner’s guide to arrays.

Either way, if it helps you keep your data organized, it’s a data structure, and objects are some of the most useful and simple data structures.

In fact, a JavaScript object is really nothing more than a collection of related name-value pairs, and name-value pairs really only consist of two things: a data value and the name that is used to identify that data value.

Here’s what a name-value pair looks like in a basic JavaScript statement:

let myName = "Daniel"	

The name in the example above is myName and the value assigned to it is "Daniel".

Here’s what a name-value pair looks like for a function:

let myFunction = function() {
console.log("Hello!");
}

The name in the example above is myFunction and the value assigned to it is function() {console.log("Hello!");}

A JavaScript object is, as mentioned, a collection of name-value pairs grouped together.

Here’s what the two examples above would look like organized into a JavaScript object:

let nameValuePairExamples = {
 myName: "Daniel",
 myFunction: function() {
 console.log("Hello!");
 }
};

Both the variable declaration and function declaration from the two previous examples are now within the nameValuePairExamples object.

In other words, a JavaScript object is not only a collection of name-value pairs, but the object itself is like a container you can use to group the name-value pairs. Just like the sewing supplies container.

Here’s another example to demonstrate how a JavaScript object is like a container.

Let’s imagine we wanted to group together a set of attributes for someone named Steve.

In this example, Steve would be the object and the name/value pairs would be the properties of Steve.

Here’s what this looks like:

let steve = {
 height: 190,
 weight: 185,
 hairColour: black,
 alias: "Smiley",
 sayHelloSteve: function() {
 alert("Hello Steve!");
 }
}
};

Simple right? All of the name-value pairs: height: 190, weight: 185, hairColour: black and sayHelloSteve: function() {alert("Hello Steve!"); all fit nicely under the category Steve, which is the object name: steve.

Also, notice how much easier it is to understand that the name-value pairs are all associated with the object steve?

This is a huge help when working on enormous projects with thousands of lines of code.

Now let’s take a look at JavaScript object syntax.

JavaScript object properties, methods and syntax

As mentioned, a JavaScript object is a collection of name-value pairs.

In JavaScript, object name-value pairs have two types: properties and methods.

Let’s take a look at both object properties and methods and then deconstruct a JavaScript object to understand its syntax further.

Object properties

Object properties are any variable declarations within the object that are not functions.

Here’s what this looks like using a car as an example:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
};

Each variable declaration contained within the opening { and closing } of the myCar object: brand: "Subaru" colour: "Blue" and year: 2019 are all properties of the myCar object.

All of these variables declarations are not function declarations and so they are properties of the object.

Object methods

Object methods are function declarations within the object.

Let’s continue with the car example, but this time we’ll create two methods instead of properties for the myCar object.

Here’s what this looks like:

let myCar = {
	carStart: function() {
    alert("Engine is on");
    },
  	carShutdown: function() {
    alert("Engine is off");
    }
}

Each function declaration contained within the opening { and closing } of the myCar object: carStart: function() {alert("Engine is on");} and carShutdown: funtion() {alert("Engine is off");} are all methods of the myCar object.

All of these declarations are function declarations and so they are methods of the object.

To reiterate: any variables contained within the object that are not functions are called properties, while any functions declared within the object are called methods.

Now let’s deconstruct a JavaScript object with both properties and methods to get a better understanding of how objects work.

Object syntax

An empty object in JavaScript is created with the following:

let myNewObject = {};

let myNewObject = asssigns the variable named myNewObject to the object specified by the opening { and closing }.

In JavaScript, an object is created and its contents are defined within the opening { and closing }.

In the example above, however, the object is empty.

Let’s explore the syntax further by deconstructing an object which has content within the opening { and closing } and combines the properties and methods from the car examples from the previous section.

Here’s what that looks like:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
  	carStart: function() {
    	alert("Engine is on");
    },
  	carShutdown: function() {
    	alert("Engine is off");
    }
};

Ok, the first part you should be familiar with already.

let myCar = asssigns the variable named myCar to an object.

The first statement within the object opening { and closing } is brand: "Subaru". This is a property statement, one of the two types of name-value pairs allowed by JavaScript objects: properties and methods.

brand: "Subaru", is a property of the myCar object. The property name is brand, the value is "Subaru", and a colon : is used to assign the property name to the value.

You indicate that there’s another statement in the object with a ,.

As you can see, there’s another property after brand: "Subaru" which is colour: "Blue". So to indicate there’s another property statement in the object you’d write a , after brand: "Subaru".

Following the property statement colour: "Blue" is another property statement year: 2019.

Each statement in an object must end with a comma , if there is a statement following it.

If it’s the last statement in the object then it does not require a ,.

Following the last property statement year: 2019 you’ll see the other type of statement for a JavaScript object, a method statement, which contains a function.

The first method statement of the myCar object is carStart: function() { alert("Engine is on"); }.

The method statement name is carStart and is assigned to the value with a :. The actual function value which follows is the same syntax as a regular JavaScript function: function() { alert("Engine is on"); }.

And, as we mentioned previously, each statement unless it’s the last statement, ends with a ,.

The final statement in the myCar object is another method statement: carShutdown: funtion() { alert("Engine is off"); }.

Since this is the final statement in the myCar object, there’s no need for a final ,.

Okay, so that covers object properties, methods and syntax.

Now let’s take a look at how you call and reference objects and their properties and methods.

Calling properties and methods of a JavaScript object

Accessing information within a JavaScript object is straightforward.

You can access the properties and methods within an object by calling the object name followed by a . and then the name of the property or method you’d like to access.

Let’s imagine we wanted to access the year property of the myCar object below:

let myCar = {
	brand: "Subaru",
  	colour: "Blue",
  	year: 2019,
  	carStart: function() {
    	alert("Engine is on");
    },
  	carShutdown: function() {
    	alert("Engine is off");
    }
};

If you wanted to access or reference the year property of the myCar object you’d use: myCar.year.

If you wanted to access or reference the carShutdown method of the myCar object you’d use myCar.carShutdown().

If you wanted to list all the properties and methods available to an object you’d simply type the object name in your JavaScript developer console.

In this example that would be myCar.

Ok, pretty handy right?

I think so!

Hopefully, you now have a better grasp on JavaScript objects, their syntax, and how to write and use the objects you create.

Next up, let’s take a look at how to apply your knowledge of JavaScript objects to write better code through an object-oriented programming paradigm.

One of the most incredible powers you can give to your JavaScript program is the ability to make decisions on its own.

Whether you want your program to decide the best time to ask a visitor to subscribe to your newsletter or display your site content in a different language, conditional statements will allow your JavaScript program to make decisions based on conditions and then act on them.

In a way, conditional statements give intelligence to your programs. And this adds a powerful layer of sophistication to any JavaScript program.

This guide will help you understand conditional statements in the JavaScript language. Specifically, it will help you understand conditional statement syntax and how to write and use conditional statements.

What is a JavaScript conditional statement?

A conditional statement tells JavaScript how it should behave when a certain condition is met.

For example, if a user visits your website and their preferred language is French, you could use a JavaScript conditional statement to determine the user’s preferred language is French, and then display the content of your website in French to them.

The best part? You aren’t limited to a single condition, you can repeat this approach for any number of conditions — if the user prefers German, display the page in German, if they prefer Russian, display it in Russian.

An interesting thing about conditional statements is how simple they are. A conditional statement really has only two parts:

1. the condition
2. the action to perform once the condition is met

In the language examples above, the condition would be the user’s language preference, and the action to perform would be to display the content in the preferred language.

Another way to think of a conditional statement is to compare it to how you’d make a decision about what time you’ll wake up.

Let’s imagine you had a job that required you to arrive at work by 9 a.m. from Monday to Friday.

Let’s also imagine that you needed to wake up two hours before 9 a.m to arrive to work on time.

The conditions in this example would be pretty simple:

If it’s Monday, Tuesday, Wednesday, Thursday or Friday, you’ll need to wake up at 7 a.m., otherwise, you can wake up any time you’d like.

Let’s take a look at JavaScript conditional statement structure and syntax to get a better grip on how it works.

JavaScript conditional statement structure and syntax

Conditional statements in JavaScript rely on a set of three basic syntax keywords: if, else and else if.

Here’s what this looks like:

if (condition === true) {
  //execute this code
}
else if (alternative condition === true) {
  //execute this code
}
else {
  //execute this code
}

Let’s break down what’s actually going on here:

1. You specify a condition to match within the opening ( and closing ) with the keyword if.
2. JavaScript checks if the condition is matched.
3. If the condition is matched, JavaScript identifies the condition as true.
   • JavaScript then executes the code within the opening { and closing } associated with the condition which is true.
4. If the condition is not matched, JavaScript identifies the condition as false.
   • JavaScript skips the code associated with the condition which returned false and proceeds to check if the condition within the next else if statement is true.
     • If the condition is matched, JavaScript identifies the condition as true and executes the code within the associated opening { and closing }.
     • If the condition is not matched, JavaScript identifies the condition as false.

The process above is repeated until each condition is checked.

If none of the conditions return true then the final else statement will run.

Once a condition is matched as true the conditional statement stops running. Only if the condition is false will JavaScript proceed to the next condition.

Let’s dissect the syntax.

The if keyword tells JavaScript which condition it should listen for.

The content within the opening ( and closing ) is the specific condition that must be matched. They will return as either true if matched and false if not matched.

The code between the opening { and closing } will run if the preceding condition is true.

The else if keyword tells JavaScript what to do when the previous condition is false, and the associated opening { and closing } is the code JavaScript will then execute.

The else keyword tells JavaScript what to do when none of the previous conditions are true. The code within the associated opening { and closing } is the code JavaScript will then execute.

Let’s take a look at another example using our alarm clock where the if condition is Monday, Tuesday, Wednesday, Thursday or Friday.

Here’s what this looks like:

if (Monday, Tuesday, Wednesday, Thursay or Friday === true) {
  //execute this code
  console.log("Time to wake up!");
}
else {
  //execute this code
  console.log("It's ok, you can sleep in");
}

To reiterate, when it is Monday, Tuesday, Wednesday, Thursday or Friday, the if condition will return as true.

When the if condition is true JavaScript will execute the code within the associated opening { and closing }. In the code example above, this is console.log("Time to wake up!");

Otherwise, if the condition is false, and it is not Monday, Tuesday, Wednesday, Thursday or Friday, JavaScript will skip the associated code within the opening { and closing } and instead execute the code within the opening { and closing } which follows the else keyword.

Additionally, as mentioned, you are not limited to two conditions, you can add as many conditions as you’d like with else if.

Here’s what this looks like:

if (Monday === true) {
  //execute this code
  console.log("It's Monday, time to wake up!");
}
else if (Tuesday === true) {
  //execute this code
  console.log("It's Tuesday, time to wake up!");
}
else if (Wednesday === true) {
  //execute this code
  console.log("It's Wednesday, time to wake up!");
}
else if (Thursday === true){
  //execute this code
  console.log("It's Thursday, time to wake up!");
}
else if (Friday === true){
  //execute this code
  console.log("It's Friday, time to wake up!");
}
else {
  //execute this code
  console.log("It's ok, you can sleep in");
}

Clear as mud?

Don’t worry, let’s practice by building a working alarm clock, it’s the perfect way to get a real understanding of conditional statements.

Writing a program with JavaScript conditional statements

Let’s start by creating a few variables in your JavaScript developer console to get the current day of the week.

var currentDate = new Date();
var dayOfWeek = currentDate.getDay();

The variable currentDate uses the new Date() constructor to tell your web browser what date it is.

The variable dayOfWeek then applies the getDay() method to currentDate and returns an integer corresponding to the day of the week: 0 for Sunday, 1 for Monday, 2 for Tuesday, 3 for Wednesday, 4 for Thursday, 5 for Friday and 6 for Saturday.

Let’s add a conditional statement to alert us if it’s a day of the week.

var currentDate = new Date();
var dayOfWeek = currentDate.getDay();

if (dayOfWeek === 0 || 1 || 2 || 3 || 4 || 5 || 6 ) {
  alert("It's a weekday, make sure you are awake by 7 a.m.");
}

Notice the use of ||, called an OR logical operator, within the opening ( and closing )?

This tells JavaScript that it can match 0 or 1 or 2 or 3 or 4 or 5 or 6.

They are really useful and allow you to specify multiple conditions for a single set of actions. In the example above, it allows us to specify each day of the week.

Ok, now let’s add an else keyword to our code to tell JavaScript what to do when it’s a weekend and the conditions above are not met.

var currentDate = new Date();
var dayOfWeek = currentDate.getDay();

if (dayOfWeek === 0 || 1 || 2 || 3 || 4 || 5 || 6 ) {
  alert("It's a weekday, make sure you are awake by 7 a.m.");
}
else {
alert("Relax, you can sleep in, it's the weekend!");
}

Now, let’s make this a bit more robust, let’s add an additional condition for Wednesday, when you work from home, with the use of else if keyword.

We’ll need to remove Wednesday from our first if condition and then add it to a newly created else if condition.

var currentDate = new Date();
var dayOfWeek = currentDate.getDay();

if (dayOfWeek === 0 || 1 || 2 || 4 || 5 || 6 ) {
  alert("It's a weekday, make sure you are awake by 7 a.m.");
}
else if (dayOfWeek === 3) {
alert("You work from home today, you can wake up a bit later at 8 a.m.");
}
else {
alert("Relax, you can sleep in, it's the weekend!");
}

And voila, you now have a working alarm clock in your JavaScript console that knows the difference between weekdays, weekends, and when you work from home.

Pretty neat right?

Hopefully, now you understand why conditional statements give intelligence to your programs. And how this adds a powerful layer of sophistication to your JavaScript program.

Next up, let’s take a look at JavaScript objects, the most powerful concept in JavaScript programming.

Repeating yourself can be a hassle, but sometimes you’ve got to do it you’ve got to do it.

There’s nothing wrong with a bit of repetition. Many of the things we love are the byproduct of meticulously constructed repetition.

A recipe, for example, is a set of repeating steps. A song? The chorus is the best part! Sunrise and sunset? Both repeat! And who doesn’t love sunrises and sunsets!

Repeating statements in JavaScript are called loops, and loops are incredibly useful.

This guide will help you understand loops in the JavaScript language. Specifically, it will help you understand loop syntax and how to write and use the loops you create.

What is a JavaScript loop?

Imagine you wanted to purposefully repeat an action, for example, let’s say you wanted to count from 1 to 10.

There are a few ways you could do this in JavaScript.

Here’s the worst way to do it.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

This is… not ideal at all.

Not only is typing out a statement ten times tedious, but it doesn’t count down in sequence.

Let’s look at a better way to repeat an action in JavaScript with loops!

Using the original example above, let’s imagine we wanted to count from 1 to 10 in the JavaScript console.

Here’s what a JavaScript loop that does that would look like:

for (let i = 0; i <= 10; i++) {
console.log(i);
}

Try to run the loop above in your console. You should see something like this:

Pretty neat how JavaScript took care of all the repetition for you right?

You’ll be amazed at how many repetitive things you can automate with JavaScript.

Let’s start by taking a look at loop syntax.

JavaScript Loop syntax

Let’s disassemble the loop we used to count from 1 to 10 to better understand the loop syntax.

Here’s the loop:

for (let i = 0; i <= 10; i++) {
console.log(i);
}

There are a number of different types of loops, in this example, we’ll be using the for loop.

The for loop tells JavaScript to repeat an action according to the rules within the ().

Between the opening ( closing ) is where you write the rules which the for loop follows.

In the example above we’re telling JavaScript to repeat the loop 10 times. Let’s take a look at how the rules within the () tell the loop to do this.

There are three conditions within the () that provide instructions on how the loop should function.

The let i = 0; statement is the first condition called the initial expression. We use it to declare a starting point for the loop.

let i = 0 tells the loop where it should start. let i = 0 tells the loop to start at 0. You could start at any number below 10 for this example and the loop would count up from that number until it reaches 10.

i <= 10; statement is called a condition. The for loop refers to this condition every time it finishes running the statements withing the opening { and closing } (more on these below) to determine if it should continue to repeat the loop. In the for loop example above, the loop will repeat for as long as the i is less than or equal <= to 10.

i++; statement is called an increment expression. The for loop looks at the increment expression each time the loop runs. The increment expression tells JavaScript to increment the variable i by 1 each time the loop runs.

The statements within the { and closing } will be executed each time the loop runs.

console.log(i) will log the i value each time the loop runs and the i value will increment by one each time the loop runs.

Looping through items in an array

Let’s try using the loop with a more practical example. We’ll loop through a list of grocery items in our console.

Begin by opening up this page in a new browser window and placing it beside this window with the JavaScript console open.

We’ll start by creating an array of grocery items.

Type the following in your JavaScript console:

var groceryList = [
"bread", 
"milk", 
"cheese", 
"eggs", 
"salad", 
"butter", 
"chicken"
];

Now let’s use a loop to cycle through each item and display them in the console.

After declaring your groceryList array type the following:

for (i = 0; i < groceryList.length; i++) {
console.log(groceryList[i]);
}

You should see something like this:

You’ll notice that the loop condition was slightly different than the one we used to count from 10 to 1. Specifically, instead of i = <10 we used i < groceryList.length.

i < groceryList.length tells the loop to repeat for as long as i is less than the length of the groceryList array.

Using the .length property on an array returns the total number of items in the array.

So, the for loop condition i < groceryList.length will count the total number of items in the array and repeat the loop for each item in the array.

console.log(groceryList[i]) will display each item in the array in your console.

If you recall my guide on JavaScript arrays, you’ll remember that each item in an array has a numerical position.

For example, the groceryList array we created will have 6 numerical positions for each item in the array.

Position 0 is “bread”, position 1 is “milk”, position 2 is “cheese”, position 3 is “eggs”, positon 4 is “salad”, position 5 is “butter”, position 6 is “chicken”.

You’ll also recall that you can access each item in the array in the JavaScript console by typing the array name followed by the numerical position.

So, if I wanted to access eggs I’d type the following in my console:
groceryList[3]

With console.log(groceryList[i]) we used [i] instead of a numerical position.

This allows the for loop to substitute the i with the numerical position of each item in the array, which it then logs to the console and then increments by one (remember this is what the i++ does).

Getting all the links on a page with JavaScript

Let’s try another practical example that you might find useful. We’re going to JavaScript to loop through all the links on a page.

Begin by opening up this page in a new browser window and placing it beside this window with the JavaScript console open.

Type the following in your console:

var getAllLinks = document.getElementsByTagName("a");
for (let i = 0; i < getAllLinks.length; i++) {
console.log(getAllLinks[i]);
}

You should see something like this:

You’ll notice the console uncovered five hidden links on the page. Let’s examine the JavaScript code we ran to understand how a loop allowed us to uncover these links.

Here’s the code again:

var getAllLinks = document.getElementsByTagName("a");
for (let i = 0; i < getAllLinks.length; i++) {
console.log(getAllLinks[i]);
}

document.getElementsByTagName("a"); is a method which will find all HTML tags specified within the (). In this instance, we’ve asked JavaScript to find every a tag, otherwise known as a link. The method returns an array with every link it finds. We assigned this method to the variable getAllLinks.

Next, we set up a for loop that has:

An initial expression of let i = 0;.

A condition of i < getAllLinks.length;.

And an increment expression of i++.

Finally, we logged each item in the getAllLinks array to the console with console.log(getAllLinks[i]);.

Pretty handy right? I definitely think so.

Whether you need to collect a bunch of email addresses from a web page, cycle through a newsfeed or even count down from 10 to 1, loops are an essential tool for any JavaScript developer who needs to repeat something, who needs to repeat something.

Next up, let’s try some practical programming by collecting all the email addresses or links on a webpage with JavaScript.