DEV Community: AymanGamal-dev

JavaScript Object Property Descriptors

AymanGamal-dev — Tue, 12 Oct 2021 05:15:10 +0000

JavaScript Object Property Descriptors

Any object in JavaScript has a set of properties, and each of these properties has a descriptor.

so let's know why you need this ?

it's rare using but it uses for advance apps so they can keep the property privacy and not change it or deleted (configurable) OR escape it from for loops (enumerable), By default these values added using are immutable and not enumerable.

so you can change this way by using
Object.defineProperty(obj, 'key', descriptor)

Note :to define it and descriptor object should add all 4 values and define them if you don't it will assign other to false.

is JavaScript a multi-threading or single-threading ?

AymanGamal-dev — Sun, 10 Oct 2021 13:54:47 +0000

let's discus most confused topics in JavaScript, it's 'event loop' or is JavaScript a multi-threading or single-threading ?

the secret behind JavaScript’s asynchronous programming is event loop, JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading. Let’s take a look at what happens on the back-end.

The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.

The event queue. Hence, we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.

The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

do you know the difference between "live node list" vs "static node list" ?

AymanGamal-dev — Fri, 08 Oct 2021 17:51:41 +0000

well, when you fetching a list of elements from the Dom you have two methods:

querySelectorAll()
getElementsByTagName()

both methods will return (Simi-array of node elements), but not same array;

to take closer look lets add new element to this list and see what happens:

when you use querySelector method will return (NodeList object) a NO-LIVE-LIST it's got a snapshot from DOM (HTML ELEMENTS) and not update that array so when array changes when you updated from javaScript file using append() or appendChild().

with the other methodgetElementsByTagName() will return a(HTML collection ) a LIVE-LIST got an updated with elements you added.

one more tip:

still we using the querySelector methods for flexibility we have when we select elements, and maybe can be better for performance when you select elements only on html and remember you still have that live references to the DOM so you can easy change the value of this reference(pointer) easy by textContent() method.

"Pseudo-Private" Properties in javaScript

AymanGamal-dev — Thu, 07 Oct 2021 19:32:17 +0000

"Pseudo-Private" Properties in javaScript

The addition of private fields and properties is relatively new

the old way description:

It's a quite common convention to prefix private properties with an underscore (_) to signal that they should not be accessed from outside of the object.
but It's just a convention, It does NOT technically prevent access. You CAN run this code without errors,

the new way description:

The( #) is a part of the name itself. Private fields are accessible on the class constructor from inside the class declaration itself. They are used for declaration of field names as well as for accessing a field's value.

so syntax error to refer to # names from out of scope. It is also a syntax error to refer to private fields that were not declared before they were called.

important: (maybe your IDE will complain about this # syntax but it works in chrome well).

Program execution

AymanGamal-dev — Thu, 07 Oct 2021 16:49:26 +0000

Before we start talking about machine cycle we need to define what is the program;

A set of instructions to process data,
A computer execute the program to create output data from input data, both data and program are stored in memory.

Now, what is the machine cycle:

The central process unit (CPU) uses repeating cycle to execute the instructions in the program (one by one ), a simplified cycle can consist of three phases:

1- Fetch:
In fetch phase, the control unit orders the system to copy the next instructions into the instructions register in CPU, the address of this instruction ti be copied is held in the program counter register, after copying, program counter ++, to refer to the next instructions in memory.

2- Decode:
When the instructions is in the instruction register, it is decoded by control unit, the result of decode is Binary code for some operation that system will preform.

3- Execute:
The last phase; after decode ends the control unit sends the task order to a component in CPU.

Example:
The control unit sends the task to the system to load( read ) a data item from memory.

Next, what is the program instructions,

( photo example provided from google)

Happy to share knowledge with you:)

How data stored in computer ?

AymanGamal-dev — Wed, 06 Oct 2021 13:56:52 +0000

How data stored in computer ?

( Summary i used to remember this as a reference )

Data comes in different forms including numbers, text, audio, video, all data types are transformed into uniform representation called a bit pattern;

the numbers changed to binary system before being stored in computer memory.
A piece of text in any language is a sequence of symbols, we can represent each symbol with bit pattern, different sets of bit patterns have been designed to represent text symbols, like UniCode that uses 32 bits to represent a symbol.
Audio is a representation of sound or music, audio is an analog data, we can’t record an infinite number of values in interval, we can only record some samples, the values measured for each sample is a real number.
Storage of images is done by using two different techniques: raster graphics and vector graphics.
Video is representation of images (called frames) in time. A movie is a series of frames shown one after another to create illusion of continuous motion.

The numbers systems

AymanGamal-dev — Wed, 06 Oct 2021 13:55:20 +0000

The numbers systems ( cs )

Note :this material for people who interested to know how deep is computer thinking and stores info, basically computer science but i am going to explain it with my understanding in easy way and hop it helps.

The number system define how number can be represented using distinct symbols, as we use symbol (characters) for creating words in language,

we use symbols (digits) to represent the numbers, however we know that number of symbols (character) is limited in any language, we need to repeat characters and combine them to create words,

It’s the same for numbers ; we have a limited number of symbols (digit) to represent numbers, which means the digits need to be represented.

We define them in two groups:

positional numbers systems
Non-positional numbers systems.

I am gonna start a summary with positional numbers system next post.