10 most common Javascript questions, answered PART 1

This article was originally published at https://www.blog.duomly.com/10-most-popular-javascript-interview-questions-and-answers-for-beginners/

Intro to 10 most popular Javascript questions for beginners

In this article, I've gathered 10 most often asked questions about Javascript, and I decided to answer those questions, one by one. 

They mostly cover Javascript basics, so if you just started to learn this programming language, that's a good idea to go through them and understand the essential concepts.

On this list, you can find such topics like closures, promises, hoisting or classes, and much more.

Although the knowledge isn't very advanced, it's good to know the answers, as some of them are often asked during the interviews. 

In every programming language, some concepts seem easy, but for beginners, that's not so straightforward to understand. 

So, I'm even happier to describe and explain to you all the things asked by other people, which may be helpful for you as well, and you can avoid typing than in the search box.

As always, I've got videos version for those who prefer watching the reading. You'll find it under each question.

Let's start!

What is closure in Javascript?

The closure is a combination of functions enclosed together, where the inner function has access to its variables and variables of its outer function.

I think that the easiest way to explain it would be to show you a code example.

function outer() {
  var name = 'Maria';
  function inner() {
    console.log(name);
  }
  inner();
}
outer();
// 'Maria'

In the code above, you can see that inner() function has access to its parent function variable, name. So, if you call the outer() function, the console.log() from the inner() function will return the name variable Maria.

However, it can access the outer function arguments object, but very often, the inner function has its own arguments object, which overshadows the external function argument object.

Let's see the example where we will create closure with an arrow function.

function outer(a, b) {
  const inner = (a, b) => console.log(a, b);
  inner(1, 2);
}
outer('Alice', 'Mark');
// returns 1, 2

The main reason why we use closures is to return the function that can return the other functions.

What is DOM in Javascript?

DOM is a Document Object Model, and it's an object-oriented representation of the website. It can be modified using Javascript. 

With Javascript you can manipulate DOM elements, liked colors, positions, sizes. For selecting the specific elements of the page Javascript provides some functions to make it ease:

getElementById() - to select an element by the id property,

getElementByName() - to select an element by the name property,

getElementsByTagName() - to select all elements of the selected tag,

getElementsbyClassName() - to select all elements with the certain class name,

querySelector() - to select elements by CSS selectors.

Javascript also provides other methods to manipulate element, not only select them, like appendChild() or innerHTML().

Besides that, with Javascript, we can work with the events and styles. 

What is Promise in Javascript?

Promises are using with asynchronous programming, and it's used to start an action, which takes time to resolve and return the value.

With promises, the action can be started and finished in the background without stopping other operations of the application.

It improves the performance and user experience of many web and mobile applications. 

The promise may be in three states: pending, resolved with the value, or rejected with an error. 

If the promise is resolved, we can call then() method and perform an action with the returned value. In case the promise is rejected, we can use the catch() method to handle the errors.

Other methods for handling asynchronous programming are async/await and callbacks.

What is a prototype in Javascript?

Javascript objects inherit methods and properties from the prototype, and the Object.prototype is on the top of the inheritance chain. 

Javascript prototype keyword also can be used to add new values and methods to our constructor. 

Let's see the code example.

function Animal(name, kind, age) {
  this.name = name;
  this.kind = kind;
  this.age = age;
}

Animal.prototype.ownerName('Mark');

You can see that using the prototype, we were able to add ownerName property to our Animal() constructor.

What is hoisting in Javascript?

Hoisting is the mechanism that lifts all declared variables and functions as well, to the top of their local scope or at the top of the global scope if they are placed in the global scope.

In Javascript, it's possible to declare a variable after it's used.

Hoisting is used to avoid undefined errors because otherwise, code with variable or function might be executed, but it's not defined.

Remember to declare your variables first to make sure your code won't have any issues with undefined values.

Here is an example to show you how it works.

// What you see
name = 'Ted';
console.log(name);
var name;
// returns 'Ted'

// What happens in a background
var name;
name = 'Ted';
console.log(name);
// returns 'Ted';

While you will create a variable definition using var, it will be initialized in every line as undefined. 

It's a little bit different with let and const. The variable is not initialized until the line where the initialization really happens.

So, it doesn't call any undefined in the meantime. 

Also, it's important to remember that while you declare const, it's necessary to initialize it simultaneously because it won't be possible to change it.

What is an object in Javascript?

Objects are a very important element of the Javascript, and almost everything in JS is an object.  
When the variable is a container for the value, the object can have many values and can be assigned to a variable.

Values in the object are written as a name:value pairs. Objects consist of properties and methods.

Properties are just simple values, and methods are the actions that can be performed on objects.

Let's take a look at the object example.

var student = {
  firstName: 'Alice',
  lastName: 'Jones',
  age: 21,
  sayHi: () => {
    return 'Hi, I am ' + this.firstName;
  }
}

In the code above, you can see the student object, which three properties and one method.

What is a function in Javascript?

Function in Javascript is a block of code, designed to perform a task. When the function is called or invoked, it's executed. 

Functions are defined with the function keyword or as a constant. Functions may have names, or they may be anonymous. 

When we define the function, we can add a few parameters in the parenthesis after the function name. 

When we call the function, the values passed in the parenthesis are called arguments. 

Let's see the code example of a Javascript function.

function calculate(x, y) {
  return x * y;
}

calculate(2, 5);

What is a pure function in Javascript?

Pure functions are the main concept of functional programming, and it's a function that accepts an input and returns the value without modification of other data in the scope. 

In other words, in pure function, the output or returned value must depend only on the input value.

What is a constructor in Javascript?

The constructor is a special method used to initialize and create the objects within the class in Javascript. 

We use the constructor with the new keyword to create a similar object with the new values.

The good practice is to call the constructor method with uppercase. 

Let's see how the constructor looks like and how to use it.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var man = new Person('Mark', 23);
console.log(man);
// { name: 'Mark', age: 23 }

In the code above, I've created a Person constructor, and below I've created a new variable, called man, and created a new object based on the Person constructor.

What are Javascript classes?

Since ES6 was introduced, we can use classes in Javascript. Class is a type of function, where instead of function keyword to initialize it, we use the keyword class. 

Besides that, we have to add the constructor() method inside the class, which is called every time the class is initialized.

Inside the constructor() method, we add the properties of our class. To create another class based on the existing one, we use the extends keyword.

A great example of using classes in Javascript is ReactJS frameworks, and it's class components. 

Conclusion

In this article, I gathered 10 common Javascript questions asked by people in search engines.

I've explained them in a basic and easily understandable way, so even beginners could take advantage of this article. 

Some of those questions can be asked during the interview, so it's really worth to get familiar with the answers. 

I hope you'll find this list of questions useful, and it can help you understand the basic concepts of Javascript programming languages.

Thank you for reading,
Anna from Duomly