{"id":1170,"date":"2021-06-11T16:55:02","date_gmt":"2021-06-11T12:55:02","guid":{"rendered":"https:\/\/tco.am\/blog\/?p=1170"},"modified":"2023-12-18T19:58:01","modified_gmt":"2023-12-18T15:58:01","slug":"javascript","status":"publish","type":"post","link":"https:\/\/tco.am\/blog\/javascript\/","title":{"rendered":"JavaScript"},"content":{"rendered":"\n

What is JavaScript<\/strong><\/h1>\n\n\n\n

JavaScript is a scripting or programming language that allows you to implement complex features on web pages \u2014 every time a web page does more than just sit there and display static information for you to look at \u2014 displaying timely content updates, interactive maps, animated 2D\/3D graphics, scrolling video jukeboxes, etc. \u2014 you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML<\/a>\u00a0and\u00a0CSS<\/a>) we have covered in much more detail in other parts of the Learning Area
.

<\/p>\n<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A\u00a0closure<\/strong>\u00a0is the combination of a function bundled together (enclosed) with references to its surrounding state (the\u00a0lexical environment<\/strong>). In other words, a closure gives you access to an outer function\u2019s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.To use a closure, define a function inside another function and expose it. To expose a function, return it or pass it to another function.The inner function will have access to the variables in the outer function scope, even after the outer function has returned.
<\/p>\n\n\n\n

Compose function<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Function composition is the pointwise application of one function to the result of another. Developers do it in a manual manner every day when the nest functions.<\/p>\n\n\n\n

Reading compose from left to right allows a clear chaining of higher order functions. Real world examples are adding authentications, logging and context properties. It\u2019s a technique that enables reusability on the highest level.<\/p>\n\n\n\n

You might think this is advanced functional programming and it\u2019s not relevant for frontend programming. But it\u2019s also useful in Single Page Applications. For example you can add behavior to a React component by using higher order components<\/p>\n\n\n\n

In conclusion function composition enables reusability of functionality at a very high level. If the functions are structured well it enables developers to created new behavior based upon existing behavior.<\/p>\n\n\n\n

It also increases readability of implementations. Instead of nesting functions you can clearly chain functions and create higher order functions with meaningful names.
<\/p>\n\n\n\n

Data types<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Data types basically specify what kind of data can be stored and manipulated within a program.<\/p>\n\n\n\n

There are six basic data types in JavaScript which can be divided into three main categories: primitive (or primary<\/em>), composite<\/em> (or reference<\/em>), and special<\/em> data types. String, Number, and Boolean are primitive data types. Object, Array, and Function (which are all types of objects) are composite data types. Whereas Undefined and Null are special data types.<\/p>\n\n\n\n

Primitive data types can hold only one value at a time, whereas composite data types can hold collections of values and more complex entities.<\/p>\n\n\n\n

Generators<\/strong><\/h2>\n\n\n\n

In JavaScript, a generator is a function which returns an object on which you can call next(). Every invocation of next() will return an object of shape \u2014<\/p>\n\n\n\n

{<\/p>\n\n\n\n

value: any,<\/p>\n\n\n\n

done: true\/false<\/p>\n\n\n\n

}<\/p>\n\n\n\n

The value property will contain the value. The done property is either true or false. When <\/p>\n\n\n\n

the done becomes true, the generator stops and won\u2019t generate any more values. 

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u201cuse strict\u201d<\/strong><\/p>\n\n\n\n

The “use strict” directive was new in ECMAScript version 5.<\/p>\n\n\n\n

It is not a statement, but a literal expression, ignored by earlier versions of JavaScript.<\/p>\n\n\n\n

The purpose of “use strict” is to indicate that the code should be executed in “strict mode”.<\/p>\n\n\n\n

You can use strict mode in all your programs. It helps you to write cleaner code, like <\/p>\n\n\n\n

preventing you from using undeclared variables.<\/p>\n\n\n\n

“use strict”\u00a0is just a string, so IE 9 will not throw an error even if it does not understand it.
<\/p>\n\n\n\n

Iterators<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

In JavaScript an iterator<\/strong> is an object which defines a sequence and potentially a return value upon its termination.<\/p>\n\n\n\n

Specifically, an iterator is any object which implements the Iterator protocol<\/a> by having a next() method that returns an object with two properties:<\/p>\n\n\n\n

value<\/em><\/strong><\/p>\n\n\n\n

The next value in the iteration sequence.<\/p>\n\n\n\n

done<\/em><\/strong><\/p>\n\n\n\n

This is true if the last value in the sequence has already been consumed. If value<\/em> is present alongside done<\/em>, it is the iterator’s return value.<\/p>\n\n\n\n

Once created, an iterator object can be iterated explicitly by repeatedly calling next(). Iterating over an iterator is said to consume the iterator, because it is generally only possible to do once. After a terminating value has been yielded additional calls to next() should continue to return {done: true}.<\/p>\n\n\n\n

The most common iterator in JavaScript is the Array iterator, which returns each value in the associated array in sequence.<\/p>\n\n\n\n

While it is easy to imagine that all iterators could be expressed as arrays, this is not true. Arrays must be allocated in their entirety, but iterators are consumed only as necessary. Because of this, iterators can express sequences of unlimited size, such as the range of integers between 0 and Infinity<\/a>.<\/p>\n\n\n\n

Map and Set<\/strong><\/h2>\n\n\n\n

Till now, we\u2019ve learned about the following complex data structures:<\/p>\n\n\n\n