Some Intermediate Concepts of Javascript

Undefined:

Undefined value primitive value is used when a variable has not been assigned a value.

let movie = { name: 'Nobody' };
movie.year; // => undefined
let favoriteMovie = {
title: 'Blade Runner'
};
favoriteMovie.actors; // => undefined
  • typeof obj.prop !== 'undefined': verify the property value type
  • obj.hasOwnProperty('prop'): verify whether the object has an own property
  • 'prop' in obj: verify whether the object has an own or inherited property

Private variable:

In object-oriented programming languages, there is a way to limit the visibility of a variable from outside its scope. In other words, some programming languages allow variables to only be accessible by the object that “owns” it.

class Example {
// hiddenVariable CAN only be accessed here
private String hiddenVariable;

public Example(String websiteName) {
hiddenVariable = websiteName;
}
}

Encapsulations:

The easiest way to achieve pseudo-encapsulation would be to prefix your private member with a special symbol that indicates the private scope to the client. It is a common convention to use the _ symbol as a prefix.

Closures

In JavaScript, when a function finishes executing, any variables declared within its body is “garbage collected”. In other words, it is deleted from memory. This is why local variables are possible in JavaScript. This is why variables inside functions cannot be accessed outside.

// dev is NOT accessible here
function someFunc() {
// dev is accessible here
const dev = 'to';
}
// dev is NOT accessible here

Factory Functions

A factory function is any function that returns an object. Yup, that’s pretty much it. This is not to be confused with classes and constructor functions. Classes and constructor functions require the new keyword to instantiate objects while factory functions return the instantiated object itself.

function factory(name) {
return { name };
}
const obj = factory('Some Dood');
console.log(obj.name); // 'Some Dood'

Bind(),Call(),Apply():

In object-oriented programming languages, the this keyword always refers to the current instance of the class. Whereas in JavaScript, the value of this depends on how a function is called.

Bind( )

The bind method creates a new function and sets the this keyword to the specified object.

Syntax:

function.bind(thisArg, optionalArguments)
const john = {
name: 'John',
age: 24,
};const jane = {
name: 'Jane',
age: 22,
};
function greeting() {
console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);
}
const greetingJohn = greeting.bind(john);// Hi, I am John and I am 24 years old
greetingJohn();const greetingJane = greeting.bind(jane);// Hi, I am Jane and I am 22 years old
greetingJane();
const counter = {
count: 0,
incrementCounter: function() {
console.log(this);
this.count++;
}
}document.querySelector('.btn').addEventListener('click', counter.incrementCounter.bind(counter));

Bind() accept arguments:

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...). For example:

function greeting(lang) {
console.log(`${lang}: I am ${this.name}`);
}const john = {
name: 'John'
};const jane = {
name: 'Jane'
};const greetingJohn = greeting.bind(john, 'en');
greetingJohn();const greetingJane = greeting.bind(jane, 'es');
greetingJane();

Call ( )

The call method sets the this inside the function and immediately executes that function.

Syntax:

function.call(thisArg, arg1, agr2, ...)
function greeting() {
console.log(`Hi, I am ${this.name} and I am ${this.age} years old`);
}const john = {
name: 'John',
age: 24,
};const jane = {
name: 'Jane',
age: 22,
};// Hi, I am John and I am 24 years old
greeting.call(john);// Hi, I am Jane and I am 22 years old
greeting.call(jane);

Call () accept arguments:

Call() also accepts a comma-separated list of arguments. The general syntax for this is function.call(this, arg1, arg2, ...)

function greet(greeting) {
console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);
}const john = {
name: 'John',
age: 24,
};const jane = {
name: 'Jane',
age: 22,
};// Hi, I am John and I am 24 years old
greet.call(john, 'Hi');// Hi, I am Jane and I am 22 years old
greet.call(jane, 'Hello');

Apply ( )

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma separated values.

Syntax:

function.apply(thisArg, [argumentsArr])
function greet(greeting, lang) {
console.log(lang);
console.log(`${greeting}, I am ${this.name} and I am ${this.age} years old`);
}const john = {
name: 'John',
age: 24,
};const jane = {
name: 'Jane',
age: 22,
};// Hi, I am John and I am 24 years old
greet.apply(john, ['Hi', 'en']);// Hi, I am Jane and I am 22 years old
greet.apply(jane, ['Hola', 'es']);

Callback function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}
processUserInput(greeting);

Event bubbling and delegation:

Events:

  • A listener receives an object parameter, which contains data about the triggered event

Event bubbling:

Event bubbling is the propagation of an event from its origin towards the root element.

document.getElementById('header').addEventListener('click', () => {
console.log('Header click');
});

Event delegation:

Event delegation leverages the bubbling effect to extract the handling logic of an event to a common ancestor of the elements where this event is triggered.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store