JavaScript has primitives, objects and functions. All of them are values. All are treated as objects, even primitives.
<h3>Primitives</h3>
Number, boolean, string, <code>undefined</code> and <code>null</code> are primitives.
<h4>Number</h4>
There is only one number type in JavaScript, the 64-bit binary floating point type. Decimal numbers’ arithmetic is inexact.
As you may already know, <code>0.1 + 0.2</code> does not make <code>0.3</code> . But with integers, the arithmetic is exact, so <code>1+2 === 3</code> .
Numbers inherit methods from the <code>Number.prototype</code> object. Methods can be called on numbers:
<pre><code>(123).toString(); &nbsp;//"123" 
(1.23).toFixed(1); //"1.2"</code></pre>
There are functions for converting strings to numbers : <code>Number.parseInt()</code>, <code>Number.parseFloat()</code> and <code>Number()</code>:
<pre><code>Number.parseInt("1") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1 
Number.parseInt("text") &nbsp;&nbsp;&nbsp;//NaN 
Number.parseFloat("1.234") //1.234 
Number("1") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1 
Number("1.234") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1.234</code></pre>
Invalid arithmetic operations or invalid conversions will not throw an exception, but will result in the <code>NaN</code> “Not-a-Number” value. <code>Number.isNaN()</code> can detect <code>NaN</code> .
The <code>+</code> operator can add or concatenate.
<pre><code>1 + 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2 
"1" + "1" &nbsp;//"11" 
1 + "1" &nbsp;&nbsp;&nbsp;//"11"</code></pre>
<h4>String</h4>
A string stores a series of Unicode characters. The text can be inside double quotes <code>""</code> or single quotes <code>''</code>.
Strings inherit methods from <code>String.prototype</code>. They have methods like : <code>substring()</code>, <code>indexOf()</code> and <code>concat()</code> .
<pre><code>"text".substring(1,3) //"ex" 
"text".indexOf('x') &nbsp;&nbsp;//2 
"text".concat(" end") //"text end"</code></pre>
Strings, like all primitives, are immutable. For example <code>concat()</code> doesn’t modify the existing string but creates a new one.
<h4>Boolean</h4>
A boolean has two values : <code>true</code> and <code>false</code> . 
The language has truthy and falsy values. 
<code>false</code>, <code>null</code>, <code>undefined</code>, <code>''</code>(empty string), <code>0 </code>and <code>NaN</code> are falsy. All other values, including all objects, are truthy.
The truthy value is evaluated to <code>true</code> when executed in a boolean context. Falsy value is evaluated to <code>false</code>. Take a look at the next example displaying the <code>false</code> branch.
<pre><code>let text = ''; 
if(text) { 
 &nbsp;console.log("This is true"); 
} else { 
 &nbsp;console.log("This is false"); 
}</code></pre>
The equality operator is <code>===</code>. The not equal operator is <code>!==</code> .
<h3>Variables</h3>
Variables can be defined using <code>var</code>, <code>let</code> and <code>const</code>.
<code>var</code> declares and optionally initializes a variable. Variables declared with <code>var</code> have a function scope. They are treated as declared at the top of the function. This is called variable hoisting.
The <code>let</code> declaration has a block scope.
The value of a variable that is not initialize is <code>undefined</code> .
A variable declared with <code>const</code> cannot be reassigned. Its value, however, can still be mutable. <code>const</code> freezes the variable, <code>Object.freeze()</code> freezes the object. The <code>const</code> declaration has a block scope.
<h3>Objects</h3>
An object is a dynamic collection of properties.
The property key is a unique string. When a non string is used as the property key, it will be converted to a string. The property value can be a primitive, object, or function.
The simplest way to create an object is to use an object literal:
<pre><code>let obj = { 
 &nbsp;message : "A message", 
 &nbsp;doSomething : function() {} 
}</code></pre>
There are two ways to access properties: dot notation and bracket notation. We can read, add, edit and remove an object’s properties at any time.
<ul>
 <li>get: <code>object.name</code>, <code>object[expression]</code></li>
 <li>set: <code>object.name = value,</code> <code>object[expression] = value</code></li>
 <li>delete: <code>delete object.name</code>, <code>delete object[expression]</code></li>
</ul>
<pre><code>let obj = {}; //create empty object 
obj.message = "A message"; //add property 
obj.message = "A new message"; //edit property 
delete obj.message; //delete property</code></pre>
Objects can be used as maps. A simple map can be created using <code>Object.create(null)</code> :
<pre><code>let french = Object.create(null); 
french["yes"] = "oui"; 
french["no"] &nbsp;= "non"; 
french["yes"];//"oui"</code></pre>
All object’s properties are public. <code>Object.keys()</code> can be used to iterate over all properties.
<pre><code>function logProperty(name){ 
 &nbsp;console.log(name); //property name 
 &nbsp;console.log(obj[name]); //property value 
} 
Object.keys(obj).forEach(logProperty);</code></pre>
<code>Object.assign()</code> copies all properties from one object to another. An object can be cloned by copying all its properties to an empty object:
<pre><code>let book = { title: "The good parts" }; 
let clone = Object.assign({}, book);</code></pre>
An immutable object is an object that once created cannot be changed. If you want to make the object immutable, use <code>Object.freeze()</code> .
<h4>Primitives vs Objects</h4>
Primitives (except <code>null</code> and <code>undefined</code>) are treated like objects, in the sense that they have methods but they are not objects.
Numbers, strings, and booleans have object equivalent wrappers. These are the <code>Number</code>, <code>String</code>, and <code>Boolean</code> functions.
In order to allow access to properties on primitives, JavaScript creates an wrapper object and then destroys it. The process of creating and destroying wrapper objects is optimized by the JavaScript engine.
Primitives are immutable, and objects are mutable.
<h3>Array</h3>
Arrays are indexed collections of values. Each value is an element. Elements are ordered and accessed by their index number.
JavaScript has array-like objects. Arrays are implemented using objects. Indexes are converted to strings and used as names for retrieving values.
A simple array like <code>let arr = ['A', 'B', 'C']</code> is emulated using an object like the one below:
<pre><code>{ 
 &nbsp;'0': 'A', 
 &nbsp;'1': 'B', 
 &nbsp;'2': 'C' 
}</code></pre>
Note that <code>arr[1]</code> gives the same value as <code>arr['1']</code> : <code>arr[1] === arr['1']</code> .
Removing values from the array with <code>delete</code> will leave holes. <code>splice()</code> can be used to avoid the problem, but it can be slow.
<pre><code>let arr = ['A', 'B', 'C']; 
delete arr[1]; 
console.log(arr); // ['A', empty, 'C'] 
console.log(arr.length); // 3</code></pre>
JavaScript’s arrays don’t throw “index out of range” exceptions. If the index is not available, it will return <code>undefined</code>.
Stack and queue can easily be implemented using the array methods:
<pre><code>let stack = []; 
stack.push(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// [1] 
stack.push(2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// [1, 2] 
let last = stack.pop(); &nbsp;// [1] 
console.log(last); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 2 
 
let queue = []; 
queue.push(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// [1] 
queue.push(2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// [1, 2] 
let first = queue.shift();//[2] 
console.log(first); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 1</code></pre>
<h2>Functions</h2>
Functions are independent units of behavior.
Functions are objects. Functions can be assigned to variables, stored in objects or arrays, passed as an argument to other functions, and returned from functions.
There are three ways to define a function:
<ul>
 <li>Function Declaration (aka Function Statement)</li>
 <li>Function Expression (aka Function Literal)</li>
 <li>Arrow Function</li>
</ul>
<h2>The Function Declaration</h2>
<ul>
 <li><code>function</code> is the first keyword on the line</li>
 <li>it must have a name</li>
 <li>it can be used before definition. Function declarations are moved, or “hoisted”, to the top of their scope.</li>
</ul>
<pre><code>function doSomething(){}</code></pre>
The Function Expression
<ul>
 <li><code>function</code> is not the first keyword on the line</li>
 <li>the name is optional. There can be an anonymous function expression or a named function expression.</li>
 <li>it needs to be defined, then it can execute</li>
 <li>it can auto-execute after definition (called “IIFE” Immediately Invoked Function Expression)</li>
</ul>
<pre><code>let doSomething = function() {}</code></pre>
<h2>Arrow Function</h2>
The arrow function is a sugar syntax for creating an anonymous functionexpression.
<pre><code>let doSomething = () =&gt; {};</code></pre>
Arrow functions don’t have their own <code>this</code> and <code>arguments</code>.
<h2>Function invocation</h2>
A function, defined with the <code>function</code> keyword, can be invoked in different ways:
<ul>
 <li>Function form</li>
</ul>
<pre><code>doSomething(arguments)</code></pre>
<ul>
 <li>Method form</li>
</ul>
<pre><code>theObject.doSomething(arguments) 
theObject["doSomething"](arguments)</code></pre>
<ul>
 <li>Constructor form</li>
</ul>
<pre><code>new Constructor(arguments)</code></pre>
<ul>
 <li>Apply form</li>
</ul>
<pre><code>doSomething.apply(theObject, [arguments]) 
 doSomething.call(theObject, arguments)</code></pre>
Functions can be invoked with more or fewer arguments than declared in the definition. The extra arguments will be ignored, and the missing parameters will be set to <code>undefined</code>.
Functions (except arrow functions) have two pseudo-parameters: <code>this</code> and <code>arguments</code>.
<h2>this</h2>
Methods are functions that are stored in objects. Functions are independent. In order for a function to know on which object to work on<code>this</code> is used. <code>this</code> represents the function’s context.
There is no point to use <code>this </code>when a function is invoked with the function form: <code>doSomething()</code>. In this case <code>this</code> is <code>undefined</code> or is the <code>window</code> object, depending if the strict mode is enabled or not.
When a function is invoked with the method form <code>theObject.doSomething()</code>,<code>this</code> represents the object.
When a function is used as a constructor <code>new Constructor()</code>, <code>this</code>represents the newly created object.
The value of <code>this</code> can be set with <code>apply()</code> or <code>call()</code>:<code>doSomething.apply(theObject)</code>. In this case <code>this</code> is the object sent as the first parameter to the method.
The value of <code>this</code> depends on how the function was invoked, not where the function was defined. This is of course a source of confusion.
<h2>arguments</h2>
The <code>arguments</code> pseudo-parameter gives all the arguments used at invocation. It’s an array-like object, but not an array. It lacks the array methods.
<pre><code>function log(message){ 
 &nbsp;console.log(message); 
} 
 
function logAll(){ 
 &nbsp;let args = Array.prototype.slice.call(arguments); 
 &nbsp;return args.forEach(log); 
} 
 
logAll("msg1", "msg2", "msg3");</code></pre>
An alternative is the new rest parameters syntax. This time <code>args</code> is an array object.
<pre><code>function logAll(...args){ 
 &nbsp;return args.forEach(log); 
}</code></pre>
<h2>return</h2>
A function with no <code>return</code> statement returns <code>undefined</code>. Pay attention to the automatic semi-colon insertion when using <code>return</code>. The following function will not return an empty object, but rather an <code>undefined</code> one.
<pre><code>function getObject(){ 
 &nbsp;return 
 &nbsp;{ 
 &nbsp;} 
} 
getObject()</code></pre>
To avoid the issue, use <code>{</code> on the same line as <code>return</code> :
<pre><code>function getObject(){ 
 &nbsp;return { 
 &nbsp;} 
}</code></pre>
<h2>Dynamic Typing</h2>
JavaScript has dynamic typing. Values have types, variables do not. Types can change at run time.
<pre><code>function log(value){ 
 &nbsp;console.log(value); 
} 
 
log(1); 
log("text"); 
log({message : "text"});</code></pre>
The <code>typeof()</code> operator can check the type of a variable.
<pre><code>let n = 1; 
typeof(n); &nbsp;&nbsp;//number 
 
let s = "text"; 
typeof(s); &nbsp;&nbsp;//string 
 
let fn = function() {}; 
typeof(fn); &nbsp;//function</code></pre>
<h2>A Single Thread</h2>
The main JavaScript runtime is single threaded. Two functions can’t run at the same time. The runtime contains an Event Queue which stores a list of messages to be processed. There are no race conditions, no deadlocks.However, the code in the Event Queue needs to run fast. Otherwise the browser will become unresponsive and will ask to kill the task.
<h2>Exceptions</h2>
JavaScript has an exception handling mechanism. It works like you may expect, by wrapping the code using the <code>try/catch</code> statement. The statement has a single <code>catch</code> block that handles all exceptions.
It’s good to know that JavaScript sometimes has a preference for silent errors. The next code will not throw an exception when I try to modify a frozen object:
<pre><code>let obj = Object.freeze({}); 
obj.message = "text";</code></pre>
Strict mode eliminates some JavaScript silent errors. <code>"use strict";</code> enables strict mode.
<h2>Prototype Patterns</h2>
<code>Object.create()</code>, constructor function, and <code>class</code> build objects over the prototype system.
Consider the next example:
<pre><code>let servicePrototype = { 
 doSomething : function() {} 
} 
 
let service = Object.create(servicePrototype); 
console.log(service.__proto__ === servicePrototype); //true</code></pre>
<code>Object.create()</code> builds a new object <code>service</code> which has the<code>servicePrototype</code> object as its prototype. This means that <code>doSomething()</code> is available on the <code>service</code> object. It also means that the <code>__proto__</code> property of <code>service</code> points to the <code>servicePrototype</code> object.
Let’s now build a similar object using <code>class</code>.
<pre><code>class Service { 
 &nbsp;doSomething(){} 
} 
 
let service = new Service(); 
console.log(service.__proto__ === Service.prototype);</code></pre>
All methods defined in the <code>Service</code> class will be added to the<code>Service.prototype</code> object. Instances of the <code>Service</code> class will have the same prototype (<code>Service.prototype</code>) object. All instances will delegate method calls to the <code>Service.prototype</code> object. Methods are defined once on<code>Service.prototype</code> and then inherited by all instances.
<h2>Prototype chain</h2>
Objects inherit from other objects. Each object has a prototype and inherits their properties from it. The prototype is available through the “hidden” property <code>__proto__</code> .
When you request a property which the object does not contain, JavaScript will look down the prototype chain until it either finds the requested property, or until it reaches the end of the chain.
<h2>Functional Patterns</h2>
JavaScript has first class functions and closures. These are concepts that open the way for Functional Programming in JavaScript. As a result, higher order functions are possible.
<code>filter()</code>,<code> map()</code>, <code>reduce()</code> are the basic toolbox for working with arrays in a function style.
<code>filter()</code> selects values from a list based on a predicate function that decides what values should be kept.
<code>map()</code> transforms a list of values to another list of values using a mapping function.
<pre><code>let numbers = [1,2,3,4,5,6]; 
 
function isEven(number){ 
 &nbsp;return number % 2 === 0; 
} 
 
function doubleNumber(x){ 
 &nbsp;return x*2; 
} 
 
let evenNumbers = numbers.filter(isEven); 
//2 4 6 
let doubleNumbers = numbers.map(doubleNumber); 
//2 4 6 8 10 12</code></pre>
<code>reduce()</code> reduces a list of values to one value.
<pre><code>function addNumber(total, value){ 
 &nbsp;return total + value; 
} 
 
function sum(...args){ 
 &nbsp;return args.reduce(addNumber, 0); 
} 
 
sum(1,2,3); //6</code></pre>
Closure is an inner function that has access to the parent function’s variables, even after the parent function has executed. <a href="https://jsfiddle.net/cristi_salcescu/wxzy52mq/?source=post_page---------------------------">Look at the next example</a>:
<pre><code>function createCount(){ 
 &nbsp;&nbsp;let state = 0; 
 &nbsp;&nbsp;return function count(){ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state += 1; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return state; 
 &nbsp;&nbsp;} 
} 
 
let count = createCount(); 
console.log(count()); //1 
console.log(count()); //2</code></pre>
<code>count()</code> is a nested function. <code>count()</code> accesses the variable <code>state</code> from its parent. It survives the invocation of the parent function <code>createCount()</code>.<code>count()</code> is a closure.
A higher order function is a function that takes another function as an input, returns a function, or does both.
<code>filter()</code>,<code> map()</code>, <code>reduce()</code> are higher-order functions.
A pure function is a function that returns a value based only of its input. Pure functions don’t use variables from the outer functions. Pure functions cause no mutations.
In the previous examples <code>isEven()</code>, <code>doubleNumber()</code>, <code>addNumber()</code> and <code>sum()</code>are pure functions.
<h2>Conclusion</h2>
The power of JavaScript lies in its simplicity.
Knowing the JavaScript fundamentals makes us better at understanding and using the language.

Learn these JavaScript fundamentals and become a better developer

Useful links

Company

Information

Content Writers

Freelancers

Freelance Jobs

Online Jobs

Designers

Developers

Translations