DEV Community: Abdessamad Bensaad

JavaScript Vernacular Prototype and Prototype chain

Abdessamad Bensaad — Wed, 02 Jun 2021 18:39:45 +0000

There are countless introductions about prototypes and prototype chains on the Internet, but few can explain these two concepts clearly. Most of them introduce how to refer to various objects and attributes. The final result is that arrows are flying all over the sky and the brain is messed up. . This article will start with the naming of these two concepts, using plain and easy-to-understand language to help you understand exactly where these two things are.

1. Background knowledge

JavaScript is different from traditional object-oriented programming languages such as Java and C++. It has no concept of classes (classes in ES6 are just syntactic sugar, not real classes). In JavaScript, everything All are objects. In class-based traditional object-oriented programming languages, objects are instantiated from classes. In the process of instantiation, class attributes and methods are copied to this object; object inheritance is actually class inheritance. When the subclass inherits from the parent class, the subclass will copy the properties and methods of the parent class to itself. Therefore, in this type of language, object creation and inheritance are all done through copying. But in JavaScript, object creation and object inheritance (better called object proxy, because it is not inheritance in the traditional sense) does not have copy behavior. Now let's forget about classes, forget about inheritance, none of this belongs to JavaScript.

2. Prototype and Prototype Chain

In fact, the name archetype itself is easy to misunderstand. The definition of archetype in Baidu entry is: refers to the original type or model. According to this definition, the prototype of an object is the model by which the object creates itself, and the object must have the characteristics of the model. This is just the concept of copying. We have already said that there is no copy in JavaScript's object creation, and the prototype of the object is actually an object, which is completely independent of the object itself. In that case, what is the significance of the existence of prototypes? Prototype is to share some common features (attributes or methods) between multiple objects. This feature is also a must-have for any object-oriented programming language. The prototypes of the two objects A and B are the same, so they must have some similar characteristics.

Objects in JavaScript have a built-in property [[Prototype]]that points to the prototype object of this object. When looking for a property or method, if the definition is not found in the current object, it will continue to search in the prototype object of the current object; if it is still not found in the prototype object, it will continue to search in the prototype object of the prototype object (the prototype is also an object , It also has its own prototype); and so on, until it is found, or the search is not found in the topmost prototype object, it ends the search and returns undefined. It can be seen that this search process is a chain search, each object has a link to its own prototype object, and the entire chain of these linked components is the prototype chain. The common characteristics of multiple objects with the same prototype are reflected in this search mode.

In the above search process, we mentioned that the top-level prototype object, the object is Object.prototype, the object is saved in the most commonly used methods, such as toString, valueOf, hasOwnPropertyand so on, so we can use these methods on any object.

1. The literal method

When an object is created literally, its prototype is Object.prototype. Although we cannot directly access the built-in properties [[Prototype]], we can get the prototype of the object through the Object.getPrototypeOf()or object __proto__.

var obj = {};
Object.getPrototypeOf(obj) === Object.prototype; // true
obj.__proto__ === Object.prototype; // true

2. Function construction call

Called by function construction (note that we do not call it a constructor function, because JavaScript also does not have the concept of a constructor function, all functions are equal, but when used to create an object, the function is called in a different way). A common way of creating objects. Objects created based on the same function should share some of the same properties or methods, but if these properties or methods are placed in Object.prototype, then all objects can use them. The scope is too large and obviously inappropriate . Therefore, when JavaScript defines a function, it also defines a default prototype property for the function. All shared properties or methods are placed in the object pointed to by this property. It can be seen from this that the prototype of an object created by a function's construction call is the object pointed to by the function's prototype.

var f = function (name) {
  this.name = name;
};
f.prototype.getName = function () {
  return this.name;
}; // Store shared methods of all objects under prototype
var obj = new f("JavaScript");
obj.getName(); // JavaScript
obj.__proto__ === f.prototype; // true

3.Object.create()

The third common way to create objects is to use Object.create(). This method will use the object you pass in as the prototype of the created object.

var obj = {};
var obj2 = Object.create(obj);
obj2.__proto__ === obj; // true

This way can also simulate the "inheritance" behavior of objects.

function Foo(name) {
  this.name = name;
}

Foo.prototype.myName = function () {
  return this.name;
};

function Bar(name, label) {
  Foo.call(this, name); //
  this.label = label;
}

// The prototype of the temp object is Foo.prototype
var temp = Object.create(Foo.prototype);

// The prototype of the object created by new Bar() is temp, and the prototype of temp is Foo.prototype,
// So the two prototype objects Bar.prototype and Foo.prototype have an "inheritance" relationship
Bar.prototype = temp;

Bar.prototype.myLabel = function () {
  return this.label;
};

var a = new Bar("a", "obj a");

a.myName(); // "a"
a.myLabel(); // "obj a"
a.__proto__.__proto__ === Foo.prototype; //true

3. `proto`And prototype

These are two attributes that are easy to confuse. __proto__ Point to the prototype of the current object. The prototype is an attribute of the function. By default, the object created by a function of new has its prototype pointing to the prototype attribute of this function.

Four. Three special cases

For the built-in objects in JavaScript, such as String, Number, Array, Object, Function, etc., because they are implemented by native code, their prototypes are printed out ƒ () { [native code] }.
Built-in objects are essentially functions, so you can create objects through them. The prototype of the created object points to the prototype property of the corresponding built-in object, and the topmost prototype object still points to Object.prototype.

"abc".__proto__ === String.prototype; // true
new String("abc").__proto__ === String.prototype; //true

new Number(1).__proto__ === Number.prototype; // true

[1, 2, 3].__proto__ === Array.prototype; // true
new Array(1, 2, 3).__proto__ === Array.prototype; // true

({}.__proto__ === Object.prototype); // true
new Object({}).__proto__ === Object.prototype; // true

var f = function () {};
f.__proto__ === Function.prototype; // true
var f = new Function("{}");
f.__proto__ === Function.prototype; // true

Object.create(null) There is no prototype for the created object.

var a = Object.create(null);
a.__proto__; // undefined

In addition, there is a constructor method in the prototype of the function. It is recommended that you treat it as if it does not exist. Its existence makes the concept of JavaScript prototypes more confusing, and this method is almost useless.

Alternative to if / else and switch: object literals in JavaScript

Abdessamad Bensaad — Mon, 26 Apr 2021 12:59:34 +0000

Complex conditions in JS have always been a source of redundant code. However, using object literals in JavaScript can save you this problem. Let's see how it works.

An object literal in JavaScript is a comma-separated list of key-value pairs wrapped in curly braces.

Let's say we have a function that takes as input a password and returns its value. If you use the if / else construction, the code will look like this:

function getPassword(password) {
  if (password.toLowerCase() === "password1234") {
    return "Facebook Password";
  } else if (password.toLowerCase() === "1234Password") {
    return "Instagram Password";
  } else if (password.toLowerCase() === "!pass1234") {
    return "Twitter Password";
  } else if (password.toLowerCase() === "helloworld1234") {
    return "Github Password";
  }
  return "password not found";
}

It looks so-so. This code is not only difficult to read, but it also uses a repeated call to the toLowerCase() function.

To reduce the amount of code, we can use an additional variable or switch construct.

function getPassword(password) {
  switch (password.toLowerCase()) {
    case "password1234":
      return "Facebook Password";
    case "1234Password":
      return "Instagram Password";
    case "!pass1234":
      return "Twitter Password";
    case "helloworld1234":
      return "Github Password";
    default:
      return "password not found";
  }
}

This code looks cleaner, but it's not the limit. In addition, in the case of using more complex conditions, you can accidentally skip the break and provoke bugs.

Alternative

We can achieve the same functionality using an object. Here's an example that looks much cleaner:

function getPassword(password) {
  const passwords = {
    "password1234": "Facebook Password",
    "1234Password": "Instagram Password",
    "!pass1234": "Twitter Password",
    "helloworld1234": "Github Password",
  };

  return passwords[password.toLowerCase()] ?? "password not found";
}

We use an object whose keys act as conditions and values act as results. Then, using square brackets, we check for the presence of the desired line. Since the resulting string can be null or undefined, we use the Nullish coalescing operator (??). Thus, we would get rid of the null value, but do not exclude the case that the result can be zero or false.


/**
 * 
 * @param string 
 * @returns boolean
 */

function stringToBool(string) {
  const checkString = {
    true: true,
    false: false,
  };

  return checkString[string] ?? "String is not a boolean value";
}

This is a slightly contrived example, but it illustrates how to use ?? helps to avoid bugs.

Complex logic

To organize more complex conditions, you can use functions as property values.

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

In this code, we select the required function by key and then call it with two arguments. Since we are using optional chaining, the function will only be called if it exists. Otherwise, the default value will be returned.

Output

Each conventional construction has its own area of application. For object literals in JavaScript, these are long lists of conditions and complex conditions that can be implemented using functions.

How to handle JSON on the command line

Abdessamad Bensaad — Mon, 19 Apr 2021 21:02:06 +0000

Some tool for working with json on the command line would be handy when debugging REST APIs. You can make a request, receive a response and immediately parse it, highlighting the necessary objects and fields.

Consider a command line json utility called jq that does exactly what we want. With its help, you can parse, filter, compare and transform json data effortlessly.

To install on Linux, you can simply download the binaries (there are 32 and 64 bit versions):


$ wget http://stedolan.github.io/jq/download/linux32/jq (32-bit)

$ wget http://stedolan.github.io/jq/download/linux64/jq (64-bit)

$ chmod +x ./jq

$ sudo cp jq /usr/bin

There are also builds for Windows and Mac OS X. The complete source code is licensed under the MIT license .

Let's look at some examples. Let's say we have the following json schema.




$ cat books.json



{

"type": "examples",

"intro": {

"catgoery": "tech"

},

"books": [

{

"isbn": "9781593275846",

"title": "Eloquent JavaScript, Second Edition",

"subtitle": "A Modern Introduction to Programming",

"author": "Marijn Haverbeke",

"published": "2014-12-14T00:00:00.000Z",

"publisher": "No Starch Press",

"pages": 472,

"description": "JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications.",

"website": "http://eloquentjavascript.net/"

},

{

"isbn": "9781449331818",

"title": "Learning JavaScript Design Patterns",

"subtitle": "A JavaScript and jQuery Developer's Guide",

"author": "Addy Osmani",

"published": "2012-07-01T00:00:00.000Z",

"publisher": "O'Reilly Media",

"pages": 254,

"description": "With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.",

"website": "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"

},

{

"isbn": "9781449365035",

"title": "Speaking JavaScript",

"subtitle": "An In-Depth Guide for Programmers",

"author": "Axel Rauschmayer",

"published": "2014-02-01T00:00:00.000Z",

"publisher": "O'Reilly Media",

"pages": 460,

"description": "Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.",

"website": "http://speakingjs.com/"

},

{

"isbn": "9781491950296",

"title": "Programming JavaScript Applications",

"subtitle": "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",

"author": "Eric Elliott",

"published": "2014-07-01T00:00:00.000Z",

"publisher": "O'Reilly Media",

"pages": 254,

"description": "Take advantage of JavaScript's power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flexible and resilient code that's easier-yes, easier-to work with as your code base grows.",

"website": "http://chimera.labs.oreilly.com/books/1234000000262/index.html"

}

]

}

We get a simple field:


$ cat books.json | jq '.type'

"examples"

Now it's a little more complicated, with nesting:


$ cat books.json | jq '.intro.catgoery'

"tech"

For arrays:


$ cat json.txt | jq '.books[1].title'

"Learning JavaScript Design Patterns"

Fetching a specific list of fields:


$ cat json.txt | jq '.books[1] | {author, pages}'

{

"author": "Addy Osmani",

"pages": 254

}

you can check the documentation for more information

5 ways to align HTML element horizontally and vertically

Abdessamad Bensaad — Mon, 19 Apr 2021 18:51:46 +0000

Anyone who works with HTML / CSS sooner or later faces the problem of vertical and horizontal alignment of an element. So that you don't googling again and find many different options, I have collected a few of the most popular here.

Method 1

In supported browsers, you can use top: 50%/ left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically center an element horizontally / vertically:

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

An example can be viewed here, and here you can see the full-screen version.

Method 2

In supported browsers , you can also set the property to a display value flexand use align-items: center justify-content: center for vertical and horizontal centering, respectively. Most importantly, do not forget to add vendor prefixes (as in the example ) so that this trick works in more browsers:

html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Here's an example and a full screen version .

Method 3

In some cases, you will need to make sure the height of the html/ element body is 100%.

To set the vertical alignment properties width and height the parent value 100%and add display: table. In the child, change the value display to table-cell and add vertical-align: middle.

For horizontal alignment of text and other inline elements, you can either use text-align: center, or margin: 0 auto if you are dealing with a block element. This should work in most browsers :

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

Examples are available here and here .

Method 4

This assumes that the height of the text is known in advance. In this case, for example 18px. Now you just need to assign a position value to the element's property absolute and move it from above 50%relative to the parent element. Finally, the property margin-top needs to be set to a negative value equal to half the element's height:

html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

For examples here and here . This option should work in all supported browsers.

Method 5

In some cases, the parent element has a fixed height. For vertical alignment, you just need to set the line-heightchild's property to the height of the parent. While this will work in some cases, you shouldn't use it this way, as a few lines of text will ruin everything :

.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

An example can be seen here.

The semicolon in JavaScript / TypeScript: pros and cons

Abdessamad Bensaad — Sat, 17 Apr 2021 14:11:11 +0000

The need to use semicolons in JavaScript and similar languages is a hotly debated topic. In this article, I will try to break down all the pros and cons of using a semicolon.

ASI (Automatic Semicolon Insertion)

The use of semicolons in JavaScript is optional due to the existence of ASI. TypeScript also uses ASI. However, ASI does not always function correctly, and there are several situations where missing a semicolon will lead to an unexpected runtime error.

JavaScript has several dead ends that are fixed by the TypeScript type system. For example:

class Car {
  color;

  constructor(color) {
    this.color = color;
  }

  beep() {
    console.log("BEEEEP");
  }
}
console.log("test") //; It won't work without a semicolon

[("white", "blue")].forEach((color) => new Car(color).beep());

The array of colors will be interpreted as a semicolon expression. In JS, this will throw a runtime error - "Uncaught TypeError: Cannot read property 'blue' of undefined" ". In TS, an error will occur at the compilation stage - "Left side of comma operator is unused and has no side effects".

There is another similar example. In this case, the error will occur in both languages only at runtime:

console.log("n")
(function() {
    console.log("n")
}())

If you are using a linter, the no-unexpected-multiline flag will help you catch these errors at compile time.

Reasons to use semicolons

Habit - why change something, if everything suits you.
Different programming languages - It's easier to stick to similar principles in different languages.
Readability is a matter of taste.
Getting rid of ambiguities.
Reluctance to use the linter.

Reasons not to use semicolons

An extra symbol - saving time and space.
The code becomes cleaner.
It's easier to hit the end of the line with the mouse.
Linter - allows you to detect errors at the compilation stage.
It's easier for beginners not to be distracted by semicolons.
No more warnings about missing semicolons (especially when moving from a language that doesn't use them).
Using semicolons in JavaScript and TypeScript does not completely eliminate ambiguities.

Python File Basics

Abdessamad Bensaad — Fri, 16 Apr 2021 14:56:59 +0000

Interaction with the file system allows you to store information obtained as a result of the program. in this article, I will talk about the basic functionality of the Python programming language for working with files.

Built-in Python tools

The basis for working with files - built-in function open()

open(file, mode="rt")

This function has two arguments. The argument file takes a string containing the path to the file. The second argument,, mode allows you to specify the mode in which you want to work with the file. By default, this argument takes the value " rt", which, and some others, can be found in the table below:

mode	what allows you to do?
r:	Opens the file in read-only mode. Starts reading from the beginning of the file and is the default mode for the open() function.
rb:	Opens the file as read-only in binary format and starts reading from the beginning of the file. While binary format can be used for different purposes, it is usually used when dealing with things like images, videos, etc.
r+:	Opens a file for reading and writing, placing the pointer at the beginning of the file.
w:	Opens in write-only mode. The pointer is placed at the beginning of the file and this will overwrite any existing file with the same name. It will create a new file if one with the same name doesn't exist.
wb:	Opens a write-only file in binary mode.
w+:	Opens a file for writing and reading.
wb+:	Opens a file for writing and reading in binary mode.
a:	Opens a file for appending new information to it. The pointer is placed at the end of the file. A new file is created if one with the same name doesn't exist.
ab:	Opens a file for appending in binary mode.
a+:	Opens a file for both appending and reading.
ab+:	Opens a file for both appending and reading in binary mode.

These modes can be combined. For example, "rb " opens a binary file for reading. By combining "r +" or "w +", you can achieve opening a file in the mode and reading and writing at the same time with one difference - the first mode will throw an exception if the file does not exist, and working in the second mode will create it in this case.

You can start working with the file using the class object io.TextIOWrapper returned by the function open(). This object has several attributes through which information can be obtained.

name - file name;
mode - the mode in which this file is open;
closed- returns Trueif the file has been closed.

Upon completion of work with the file, it must be closed using the method close()


f = open("hello.md", "w")
# deal with this file
f.close()

However, the more pythonic way of working with a file inline is to use a construct with .. as .. that acts as a context creation manager. The example written above can be rewritten with its help


with open("hello.md", "w") as f:
# deal with this file

The main difference is that python closes the file on its own, and the developer does not need to remember this. And as a bonus, no exceptions will be thrown when the file is opened (for example, if the file does not exist).

Reading from a file

There are several approaches you can take when opening a file in readable modes.

To begin with, you can read the entire file and write all the data in it on one line.


with open("hello.md", "r") as f:
    part = f.read(16)

By using this function with an integer argument, a certain number of characters can be read.


with open("hello.md", "r") as f:
    part = f.read(16)

Only the first 16 characters of the text will be received. It is important to understand that when using this function several times in a row, part by part of this text will be read - the virtual cursor will move by the reading part of the text. It can be moved to a specific position using the method if necessary seek().


with open("hello.md", "r") as f: # 'Hello, world!'
    first_part = f.read(8)       # 'Hello, w'
    f.seek(4)
    second_part = f.read(8)      # 'o, world'

Another way is to read the file line by line. The method readline() reads a line and, just like with the method read(), moves the cursor - only now by a whole line. Applying this method multiple times will result in multiple lines being read. Similar to this method, another method allows you to read the entire file, but line by line, by writing them to a list. This list can be used, for example, as an iterable in a loop.


with open("hello.md", "r") as f:
    for line in f.readlines():
        print(line)

However, there is a more pythonic way here too. It consists in the fact that the object itself io.TextIOWrapperhas an iterator that returns line by line. Thanks to this, there is no need to read the entire file, saving it to a list, but you can dynamically read the file line by line. And do it succinctly.


with open("hello.md", "r") as f:
    for line in f:
        print(line)

Write to file

The functionality of entering data into a file does not depend on the mode - adding data or overwriting a file. There are also several approaches to performing this operation.

The simplest and most logical is to use a function write()


with open("hello.md", "w") as f:
    f.write("Hello from write function")

It is important that only strings can be passed as an argument to a function. If it is necessary to write another kind of information, then it must be explicitly cast to the string type using methods __str__(self) for objects or formatted strings.

It is possible to write a large amount of data to a file if it can be represented as a list of strings.


with open("hello.md", "w") as f:
    f.writelines("you can put some large data here")

There is one more thing that is associated with the fact that the functions write() and writelines() does not automatically put the symbol of a line break, and this developer need to control yourself.

There is another, less well-known, method, but perhaps the most convenient of the presented ones. And as strange as it may seem, it consists in using a function print(). At first, this statement may seem strange, because it is common knowledge that it is used to output to the console. And it is true. But if you pass an fileobject of type as an optional argument io.TextIOWrapper, which is the file object we are working with, then the output stream of the function is print() redirected from the console to the file.


with open("hello.md", "w") as f:
    print("put some data here", file=f)

The strength of this approach lies in the fact that print() you can pass not necessarily string arguments - if necessary, the function itself converts them to a string type.

This completes the acquaintance with the basic functionality of working with files. At the same time, it should be said that the capabilities of the Python language are not limited to them. There are a large number of libraries that allow you to work with certain types of files, and also allow for closer interaction with the file system. Together, they provide developers with an easy and comfortable way to work with files.