DEV Community: دادا الدودي

This repository on ML operations has free talks, books, papers and more

دادا الدودي — Thu, 05 Nov 2020 22:46:48 +0000

This repository on ML operations has free talks, books, papers and more: https://thepythoncoding.blogspot.com/2020/11/memory-life-cycle-heap-stack-and-call.html

MLOps #Python #programming #100DaysOfCode #MachineLearning #100DaysOfMLCode #

#javascript #womenwhocode #RStats #CodeNewbie #DataScience #DEVCommunity

Password Hashing with bcrypt (easiest explanation)

دادا الدودي — Thu, 05 Nov 2020 22:38:35 +0000

Password Hashing with bcrypt (easiest explanation)
https://thepythoncoding.blogspot.com/2020/11/password-hashing-with-bcrypt-easiest.html

AI, #Analytics, #BigData, #CloudComputing, #DataScience, #DataScientist, #IoT, #Java, #JavaScript, #Linux, #MachineLearning, #Programming, #Python, #ReactJS, #RStats, #Serverless, #TensorFlow

coding challenge websites Down pointing backhand index

دادا الدودي — Thu, 05 Nov 2020 22:23:39 +0000

coding challenge websites Down pointing backhand index
-Codewars
-Hackerrank
-Projecteuler
-Top coder
-Coderbyte
-Codechef
-Leetcode
Do you know any other?
#CodeNewbie #javascript #NodeJS #reactjs #Python #technology #DataScience #AI
https://thepythoncoding.blogspot.com

JavaScript Tools and Libraries for Creating, Customizing and Validation Forms

دادا الدودي — Thu, 05 Nov 2020 21:50:09 +0000

https://thepythoncoding.blogspot.com/2020/11/javascript-tools-and-libraries-for.html
In the past, we already wrote about datepickers, calendar plugins and tables that will help in building a web application. This time we will talk about tools that will help in the development, validation, and forms customization.

Forms are an essential part of almost every web application. They serve as a basic medium for users to interact with your app. But why does such a simple element as a form take such a long time to develop? The answer is simple: it takes a lot of code to build neat forms. That’s why many developers prefer to use ready-made libraries.

It is important to develop a high-quality form for several reasons:

Higher conversion rate. Good forms won’t frustrate users with the filling process. Remember how many times you have left a shopping cart because of a bad form.

Better user experience. Good forms help the company look more professional and mature.

Libraries for building forms are divided according to the following principle:
Form validation libraries
Validation is an essential part of any form of a library. Modern-day forms have validations that have evolved greatly from the olden days. There are a variety of validations we can see in day to day web applications.

Form builders with UI
These tools allow you to create forms almost without coding. Basically, you just download a tool and start creating a form using various pre-built blocks.

Form extension libraries
There are a lot of plugins and libraries that help to extend forms. For instance, libraries with prebuilt checkboxes and text inputs: you can integrate these into existing forms.

Form builder from JSON/XML
A form builder allows developers to dynamically generate form controls (text fields, select boxes, radio buttons, checkboxes) from structured data models defined using JSON Schema. It also has the ability to encode a set of form controls as a JSON object for manipulation and submission when needed.

How to choose the best form of a library?
We interact with forms almost every day while working with information: login forms, online purchases, registration forms, etc. The main concern of every developer when working with them is to make forms accessible and usable. A poorly designed form can easily turn visitors away from your site.

Thus choosing the right form library for your application is crucial and depends on:

How easy is it to create custom input elements?
How easy is it to extract and change form values?
How easy is it to write custom validation logic?
Quality of user experience and design.
In this post, we’ve gathered some useful Javascript libraries you can use to set up a form validation for your projects, as well as create and extend forms.

Tools
Javascript Form Libraries
In this section of the article, we’ll review libraries that are written and must be used in vanilla JavaScript.

Parsley Js
Web-site: https://parsleyjs.org/
Github: https://github.com/guillaumepotier/Parsley.js/
Demo: https://parsleyjs.org/doc/examples.html
Price and License: Free, MIT license
Type: Form validation library

Learn JavaScript

Parsley is a javascript form validation library. It helps developers to provide users with feedback on their form submission before sending it to the server. The library is totally free to download and it’s one of the most complete plugins made for data validation. What’s unique with Parsley.js is that instead of validating forms with Javascript it uses data attributes embedded in the DOM to achieve the same function. The library also comes with a great number of examples and very accurate documentation.

The product comes with built-in validators for all types of inputs like:

Phone numbers;
Credit cards;
Addresses;
Emails.
Formvalidation
Web-site: https://formvalidation.io/
Github: https://github.com/formvalidation/formvalidation
Demo: https://formvalidation.io/guide/examples/
Price and License: Commercial, from $50 to $200
Type: Form validation library

Learn JavaScript

This library used to be made with jQuery, but now it’s completely rewritten with ES6 and Typescript. The library has zero dependencies and no jQuery at all. There are 50 built-in validators inside such as credit cards, date, id, phone, VAT. Additionally, the library is highly customizable, you can even develop your own validators. All validators can be used independently. Inspired by the functional programming paradigm, all built-in validators are just functions, so you can use it in browsers, with ES6 module, as well as server-side frameworks such as Express. The product was built with a plugin architecture.

The product works on all the major frameworks including Foundation and Bootstrap. Plus the online docs are pretty straightforward, so even non-coders should be able to figure them out.

Validate JS
Web-site: https://validatejs.org/
Github: https://github.com/ansman/validate.js
Demo: https://validatejs.org/examples.html
Price and License: Free, MIT
Type: Form validation library

Learn JavaScript

Validate.js provides a declarative way of validating javascript objects. It augments native HTML5 form validation elements and attributes, providing a better user experience and giving more control. It is unit tested with 100% code coverage and can be considered fit for production.

The goal of validate.js is to provide a cross framework and cross-language way of validating data. The validation constraints can be declared in JSON and shared between clients and server.

Validate.js works with any ECMAScript 5.1 runtime which means it works in both the browser and in node.js. All modern browsers are supported (IE9+, Firefox 3+, Opera 10.5+, Safari 4+, Chrome).

The documentation is very comprehensive and will help you write your own validators or install the solution in your project without any difficulties.

Formbuilder
Web-site: http://dobtco.github.io/formbuilder/
Github: https://github.com/dobtco/formbuilder
Demo: http://dobtco.github.io/formbuilder/
Price and License: Free, MIT License
Type: Online tool with a graphical interface for building forms

Learn JavaScript

Formbuilder is a graphic interface that lets users build their own web forms. Formbuilder.js only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing user responses is all up to you.

Formbuilder itself is a pretty small codebase (6kb gzipped javascript) but it does rely on some external libraries, namely Backbone & Rivets. The solution uses bower to manage dependencies.

Formbuilder consists of just a few different components. Because of its modular nature, Formbuilder is easy to customize. Most of the configuration lives in class variables, which means you can simply override a template or method.

React Form Libraries
Formbuilder.dev
Web-site: https://formbuilder.dev/
Github: –
Demo: https://formbuilder.dev/demo/
Price and License: Free
Type: Online form builder

Learn JavaScript

Formbuilder.dev is a tool for a user interface and debugging panel where you can design and test forms for your web projects. The system is React-based and is compliant with every web app based on React.

It includes 4 groups of elements (Containers, Collections, Controls, Charts) by default, but you can add more elements. FormBuilder uses JSON to describe forms. The product is event-based, so you can define the set of events and handlers for each of these events. Form data can be displayed in the elements. For example, type “Hello, {Name}!” in the Header control, and FormBuilder will automatically replace {Name} with the Name setting value.

React hook form
Web-site: https://react-hook-form.com/
Github: https://github.com/react-hook-form/react-hook-form
Demo: https://react-hook-form.com/
Price and License: Free, MIT License
Type: Form builder and validation library

Learn JavaScript

React Hook Form is a new builder and validation library for React and React Native applications. It has a wide community of contributors and is open to new changes. Like Formik, it was developed in TypeScript. With no dependencies and only 5.7kB gzipped in size, it makes an appealing alternative.

Notable features:

Built with performance and DX in mind;
Embrace uncontrolled form validation;
Simple integration with UI libraries;
Tiny size without any dependency;
Follows HTML standard for validation;
Compatible with React Native;
Supports Yup, Joi, Superstruct or custom;
Build forms quickly with the form builder.
Formik
Web-site: https://jaredpalmer.com/formik
Github: https://github.com/jaredpalmer/formik
Demo: https://codesandbox.io/s/zKrK5YLDZ
Price and License: Free, MIT License
Type: React form builder and validation library

Learn JavaScript

Formik was developed in TypeScript and released in July 2018, having grown to 22,000 stars on GitHub since then. It’s also the biggest package, with almost 15kB gzipped in size and 8 dependencies. The relatively small library helps you organize, test, refactor and reason about your forms.

The product has a lot of examples from its authors and quite a comprehensive documentation. Formik does not use external state management libraries like Redux or MobX. This also makes Formik easy to adopt incrementally and keeps bundle size to a minimum. The library is used by such companies as Airbnb, PWC, Sony, and others.

Features:

Getting values in and out of form state;
Validation and error messages;
Handling form submission.
Formsy
Web-site: –
Github: https://github.com/formsy/formsy-react/
Demo: –
Price and License: Free, MIT License
Type: A form input builder and validator for React JS

Formsy-react is designed as a form builder along with inputs and validations required for forms.

As validations across react projects are done differently, formsy-react provides components that are flexible and reusable.

Notable features:

Build any kind of form element, without restriction to traditional input types. formsy-react will provide the validations;
Manage validations with simple syntax;
Have separate handlers for each state (onSubmit, onValid, etc.) of your forms;
Parse external validations such as server responses to invalidate inputs;
Dynamically add form elements and have them register/unregister automatically.
Formsy architecture is pretty simple and direct. Input components inside of a formsy form are provided with get_() and set_() methods from formsy mixin (or HOC in case of ES6). Using get and set methods we can communicate the data of the form with the library.

Formsy provides callbacks for all the form related events such as when form becomes valid, invalid, or pristine. Over those callbacks we can define the behavior of components.

React final form
Web-site: https://final-form.org/react
Github: https://github.com/final-form/react-final-form
Demo: https://final-form.org/docs/react-final-form/examples
Price and License: Free, MIT License
Type: Form State Management for React\

Learn JavaScript

React Final Form is a High-performance subscription-based form state management for React. Its main goal is to fix complaints developers had with the Redux Form.

React Final Form provides strong typing via both Flow and Typescript to allow you to catch common bugs at coding time. React Final Form and Final Form break out complex functionality into separate packages, so the form state management core doesn’t get bloated by complicated use cases.

The product has famous users: Netflix, Cisco, Vodafone, and others.

Features:

Zero dependencies;
Modular;
Only peer dependencies: React and Final Form;
Opt-in subscriptions – only update on the state you need.
jQuery Form Libraries
Formbuilder.online
Web-site: https://formbuilder.online/
Github: https://github.com/kevinchappell/formBuilder
Demo: https://formbuilder.online/
Price and License: Free, MIT License
Type: Online form builder

Learn JavaScript

jQuery Form Builder is one of the most widely known and used plugins to create a dynamic form builder with JavaScript. It has many options and is localizable. The jQuery formBuilder is a 100% client-side plugin that gives users the power to create forms using an intuitive drag and drop interface. FormBuilder supports a number of form fields and some HTML tags. The library has good documentation and a tiny community that will help with the issues. To install the library you need to use yarn.

The plugin by itself is:

Customizable – enable only the fields you need, use your own notifications, append or prepend content, and more;
Bootstrap ready, but not dependent;
Translatable;
Export the structure of the form in JSON or XML.
Notable features:

Create and edit form templates;
39 configurable options;
11 action methods;
28 languages;
Custom controls;
XML and JSON data.
iCheck
Web-site: http://icheck.fronteed.com/
Github: https://github.com/fronteed/iCheck
Demo: http://icheck.fronteed.com/
Price and License: Free, MIT License
Type: Library for customizing forms

Learn JavaScript

Checkboxes and radio buttons are crucial for web forms. iCheck plugin is just about it: customized checkboxes and radio buttons. It works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

Notable features:

Identical inputs across different browsers and devices;
Touch devices support;
Keyboard accessible inputs;
Lightweight size — 1 kb gzipped;
32 options to customize checkboxes and radio buttons;
11 callbacks to handle changes;
9 methods to make changes programmatically;
Saves changes to original inputs to work carefully with any selectors.
The website says that iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. It should also work in many others.

Chosen
Web-site: https://harvesthq.github.io/chosen/
Github: https://github.com/harvesthq/chosen
Demo: https://harvesthq.github.io/chosen/
Price and License: Free, MIT License
Type: Library for making select boxes

Learn JavaScript

Chosen is a library for making long, unwieldy select boxes more user friendly. This plugin supports a custom search filter where the user can type letters and automatically filter the results. The Chosen plugin has options for multi-select along with a “no results” display for search.

Features:

Chosen automatically highlights selected options and removes disabled options;
Chosen automatically sets the default field text (“Choose a country…”) by reading the select element’s data-placeholder value;
You can easily limit how many options the user can select;
All modern desktop browsers are supported (Firefox, Chrome, Safari, and IE9). Legacy support for IE8 is also enabled. Chosen is disabled on iPhone, iPod Touch, and Android mobile devices.
Selectize
Web-site: https://selectize.github.io/selectize.js/
Github: https://github.com/selectize/selectize.js
Demo: https://selectize.github.io/selectize.js/
Price and License: Free, Apache License 2.0
Type: Textbox creator

Learn JavaScript

Selectize is the hybrid of a textbox and box. It’s jQuery-based and is useful for tagging, contact lists, country selectors, and so on. The Selectize.js plugin also works on select menus, but it combines the idea of a textbox with a dropdown select. This way users can pick many different items and submit your form with many options selected. But the input UX performs just like a select so it should feel familiar to everyone. It clocks in at around ~7kb (gzipped).

Features:

Skinnable — Comes with LESS stylesheets;
Clean API & Code + Extensible;
Smart Ranking / Multi-Property Searching & Sorting;
Caret Between Items;
RTL supported;
Remote Data Loading.
Vue Form Libraries
Vuelidate
Web-site: https://vuelidate.js.org/
Github: https://github.com/vuelidate/vuelidate
Demo: https://jsfiddle.net/b5v4faqf/
Price and License: Free, MIT License
Type: Form validation library

Vuelidate is a simple, lightweight model-based validation for Vue.js 2.0. Here’s what the creators write in their introduction post: “The biggest difference from other libraries you will notice is that the validations are completely decoupled from the template. It means that instead of providing rules for different inputs inside a template, you declare those rules for your data model. This is similar to how Ember does it.”

Features & characteristics:

Model-based;
Decoupled from templates;
Dependency free, minimalistic library;
Support for collection validations;
Support for nested models;
Support for function composition;
Validates different data sources: Vuex getters, computed values, etc.
Vue select
Web-site: https://vue-select.org/
Github: https://github.com/sagalbot/vue-select
Demo: https://codepen.io/sagalbot/pen/NpwrQO
Price and License: Free, MIT License
Type: Dropdown component

Learn JavaScript

Vue Select is a feature-rich select/dropdown/typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. The component is designed to be as lightweight as possible while maintaining high standards for accessibility, developer experience, and customization.

Features:

Tagging;
Filtering / Searching;
Vuex Support;
AJAX Support;
SSR Support;
Zero dependencies.
Vee-validate
Web-site: https://logaretm.github.io/vee-validate/
Github: https://github.com/logaretm/vee-validate
Demo: –
Price and License: Free, MIT License
Type: Form validation library

VeeValidate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported. Many rules are available out of the box.

Features:

Template-based validation that is both familiar and easy to set up;
i18n Support and error Messages in 40+ locales;
Async and Custom Rules Support;
Written in TypeScript;
No dependencies.
VeeValidate tackles the major pain points of form validation and addresses them in the most flexible way possible:

Ability to craft complicated UX for your users;
Most common validations are built-in;
Cross Field validation;
Utilities to enhance the accessibility and styling of your form;
Localization is built-in to the core.
Angular Form Libraries
Formly
Web-site: https://formly.dev/
Github: https://github.com/ngx-formly/ngx-formly
Demo: https://formly.dev/examples/introduction
Price and License: Free, MIT License
Type: Angular Form Builder

Learn JavaScript

Formly is a dynamic (JSON powered) form library for Angular that brings unmatched maintainability to your application’s forms.

Features:

Automatic forms generation;
Easy to extend with custom field type, validation, wrapper and extension;
Support multiple schemes;
A bunch of themes out of the box.
Advantages of using Angular Formly:

No need to write template code as it’s all in the form fields in the component typescript file;
Easy custom validation and error messages.
Schemaform
Web-site: http://schemaform.io/
Github: https://github.com/json-schema-form/angular-schema-form
Demo: http://schemaform.io/examples/bootstrap-example.html
Price and License: Free, MIT License
Type: Form builder

Learn JavaScript

Schema Form is a form builder library for Angular to generate complex web forms from JSON Schema. It can also validate form fields against that same JSON schema. There are also many third-party add-ons you can integrate with Schema Form, such as WYSIWYG editors, datepickers, color pickers, font-pickers.

Features:

Validates the form using a JSON Schema;
Fine tune presentation with a form definition, change field types, change order;
Lots of basic form types out of the box;
Supports array with drag and drop or in tabs.
Form Libraries for multiple frameworks
Surveyjs
Web-site: https://surveyjs.io/Library
Github: https://github.com/surveyjs/survey-library
Demo: https://surveyjs.io/Examples/Library
Price and License: Commercial, 499 Euro
Type: Survey and Forms Library

Learn JavaScript

Survey.js is a javascript form and survey library. The SurveyJS Library has versions for several popular JavaScript Frameworks. Examples are available for Angular2+, jQuery, Knockout, React, and Vue.js.

Main Features:

A lot of question types with a lot of built-in functionalities;
Multiple Pages Support;
Dynamically change survey logic and questions content;
Localization and Multiple language support;
Custom Rendering;
Bootstrap support.
Multiple-select
Web-site: http://multiple-select.wenzhixin.net.cn/
Github: https://github.com/wenzhixin/multiple-select
Demo: http://multiple-select.wenzhixin.net.cn/examples
Price and License: Free, MIT License
Type: Forms Extension Library

Learn JavaScript

Multiple Select gives web developers a massive and well-documented jQuery solution for implementing forms with checkboxes that would require mass selection or multiple orientations for a single purpose.

Features:

Default option allows showing a checkbox;
Ability to group elements;
Supports showing multiple items in a single row;
Select all options.
Feature to show the placeholder.
Conclusion
We’ve had a look at key products that help create and validate forms. A common feature of libraries is that all of them usually allow not only building forms but also validating them. Our collection also includes several libraries that extend the functionality of forms: checkboxes, text boxes and radio buttons.

This is worth mentioning again: it’s important to look at the features of each library and select one that is most suitable for your needs.

If you notice that we missed an important product in our selection, please write to us.

need help

دادا الدودي — Thu, 05 Nov 2020 21:37:31 +0000

If you are here to help then this is the deal!!!
We are looking for software developper who are interested to develop an opensource software in the field of GIS.
This software should containing the most important tools integrated in esri product as well as Qgis.

If you are intersted, don't hesitate to comment
https://thepythoncoding.blogspot.com/2020/11/memory-life-cycle-heap-stack-and-call.html
https://thepythoncoding.blogspot.com/2020/11/react-redux-in-typescript-complete.html

Memory Life cycle, Heap, Stack and Call Stack in JavaScript

دادا الدودي — Thu, 05 Nov 2020 20:28:28 +0000

https://thepythoncoding.blogspot.com/2020/11/memory-life-cycle-heap-stack-and-call.html
There are topics in JavaScript you as a developer may not know. Knowing about these topics can help you write better code. Memory life cycle, heap, stack and call stack are some of them. In this tutorial, you will learn about these topics and a bit about how JavaScript works.

A quick introduction

JavaScript is a very forgiving programming language. It allows you to do a lot, in many ways. It also does a lot of work for you. Memory management is one of these things. Ask yourself: how many times did you have to think about allocating memory for your variables or functions?

How many times did you have to think about releasing that memory when you no longer needed those variables or functions? Chances are not even once. The same applies to knowing how is heap, stack and call stack work, or what it even is. And yet, you can still work with JavaScript. You can still write code that works every day.

These things are not necessary for you to know. Nor are they required. However, knowing about them and how they work can help you understand how JavaScript works. This, in turn, can help you write better code and become a better JavaScript.

Memory life cycle
Let's start with the easiest part. What is a memory life cycle, what it is about and how it works in JavaScript? Memory life cycle refers to how a programming language works with memory. Regardless of the language, memory life cycle is almost always the same. It is composed of three steps.

The first step is memory allocation. When you assign a variable or create a function or object some amount of memory has to be allocated for it. The second step is memory use. When you work with data in your code, read or write, you are using memory. Reading from variables or changing values is reading from, and write to, memory.

The third step is memory release. When you no longer use some function or object, that memory is can be released. Once it is released it can be used again. This is the memory life cycle in a nutshell. The nice thing on JavaScript is that it makes these three steps for you.

JavaScript allocates memory as you need and want. It makes it easier for you to work with that allocated memory. Lastly, it also does the heaving lifting and cleans up all the mess. It uses garbage collection to continuously check memory and release it when it is no longer in use. The result?

As a JavaScript developer, you don't have to worry about allocating memory to your variables or functions. You also don't have to worry about selecting correct memory address before reading from it. And, you don't have to worry about releasing the memory you used somewhere in the past.

The stack and memory heap
Now you know about the steps of memory life cycle. You know about memory allocation, use and release. One question you may ask is where are those variables, functions and objects actually stored? The answer is: it depends. JavaScript doesn't store all these things at the same place.

What JavaScript does instead is it uses two places. These places are stack and memory heap. Which of these places will be used depends on what you are currently working with.

The stack
The stack is a place that JavaScript uses to store only static data. This includes primitive data types values. For example, numbers, strings, booleans, undefined and null. These static data also include references. These references point to objects and functions you've created.

These data have one thing in common. The size of these data is fixed and JavaScript knows this size at compile time. This also means that JavaScript knows how much memory it should allocate, and allocates that amount. This type of memory allocation is called "static memory allocation". It happens right before the code is executed.

There is one important thing about static data and memory. There is a limit to how large these primitive values can be. This is also true for the stack itself. That too has limits. How high these limits are depends on specific browser and engine.

// Declare and assign some variables
// and assign them primitive data types
// All these variables are stored in stack
const firstName = 'Jill'
const lastName = 'Stuart'
const age = 23
const selfEmployed = true
const dateOfMarriage = null

// The stack after declaring
// and assigning those variables:

// Stack:
// dateOfMarriage = null
// selfEmployed = true
// age = 23
// lastName = 'Stuart'
// firstName = 'Jill'
The memory heap
The second place where JavaScript can store data is memory heap. This storage is more dynamic. When it comes to memory heap, JavaScript doesn't allocate fixed amount of memory. Instead, it allocates memory as needed at the moment. This type of memory allocation is called "dynamic memory allocation".

Which data are stored in memory heap? While the stack is a place where JavaScript stores static data, memory heap is a place where JavaScript stores objects and functions. So, remember, when you create with primitives, you are working with static data. JavaScript stores these static data in the stack.

These data has always fixed allocated memory. When, on the other hand, you create objects or functions JavaScript stores them in memory heap. Allocated memory for these is not fixed. It is allocated dynamically as necessary.

// Declare a variable and assign it an object
const terryP = {
firstName: 'Terry',
lastName: 'Pratchett',
profession: 'author'
}

function introduceTerry() {
return Hi, my name is ${terryP.firstName}.
}

const series = ['Discworld', 'Johnny Maxwell', 'Long Earth']

const isDone = true

// Stack:
// isDone = true
// introduceTerry (reference to function)
// terryP (reference to "terryP" object)
// series (reference to "series" array)

// Memory heap:
// {
// firstName: 'Terry',
// lastName: 'Pratchett',
// profession: 'author
// }
// function introduceTerry() {
// return Hi, my name is ${terryP.firstName}.
// }
// ['Discworld', 'Johnny Maxwell', 'Long Earth']

// NOTE:
// the "terryP" in stack points
// to the "terryP" object in memory heap
// the "introduceTerry" in stack points
// to introduceTerry() function in memory heap
// the "series" in stack points
// to the "series" array in memory heap
// arrays are objects in JavaScript
Stack, heap and references
When you create a variable and assign it a primitive value, it will be stored in stack. Something different happens when you try the same, but with an object. If you declare a variable and assign it an object, two things will happen. First, JavaScript will allocate memory in stack for that variable.

When it comes to the object itself, JavaScript will store it in the memory heap. That variable that exists in the stack will only point to this object in memory heap. That variable will be a reference to this object. You can think of references as shortcuts, or aliases, for existing things.

These references are not those things themselves. They are only links to those "real" things. You can use those links to access those things they reference (they are linked to) and manipulate with them.

// Declare variable and assign it an object
// The "cat" variable will be stored in stack
// It will hold the reference to the "cat" object
const cat = {
name: 'Kitty'
breed: 'Abyssinian'
}

// The "cat" object itself will be stored in memory heap.

// Memory heap:
// {
// name: 'Kitty',
// breed: 'Abyssinian'
// }
Copying objects and primitives
This is also why creating copies of objects is not actually that simple in JavaScript. Trying to create a copy of an object stored in a variable by referencing it will not create real copy. It will not copy the object itself. It will copy only reference to that object. This is called shallow copy.

When you then change the original object, the copy will change as well. This is because there is still only one object. However, there are two references (aliases or links) to that one object. When you use one of these references to change the object, the other reference still points to the same object, the one you just changed.

// Declare a variable and assign it an object
const bookShelf = {
read: 'Colour Of Magic',
reading: 'Night Watch',
toRead: 'Going Postal'
}

// Create a copy of the "bookShelf"
const newBookShelf = bookShelf

// Update the "bookShelf"
bookShelf.reading = 'Mort'
bookShelf.justFinished = 'Night Watch'

// Log the value of "bookShelf"
console.log(bookShelf)
// Output:
// {
// read: 'Colour Of Magic',
// reading: 'Mort',
// toRead: 'Going Postal',
// justFinished: 'Night Watch'
// }

// Log the value of "newBookShelf"
// Since "newBookShelf" and "bookShelf"
// points to the same object
// the output will be the same
console.log(newBookShelf)
// Output:
// {
// read: 'Colour Of Magic',
// reading: 'Mort',
// toRead: 'Going Postal',
// justFinished: 'Night Watch'
// }
This will not happen when you try to copy primitive value. When you try to copy primitive value, and you change the original, the copy will remain unchanged. The reason: there are no references. You are creating real copies and you are working directly with those copies.

// Declare a variable with some primitive value
let book = 'Guards! Guards! (Paperback)'

// Create a copy of the "book"
const bookToRead = book

// Update the value of "book"
book = 'Guards! Guards! (Kindle Edition)'

// Log the value of "book"
// This will log the updated value
console.log(book)
// Output:
// 'Guards! Guards! (Kindle Edition)'

// Log the value of "bookToRead"
// This will log the old value because the "bookToRead"
// is a real copy of "book"
console.log(bookToRead)
// Output:
// 'Guards! Guards! (Paperback)'
Creating a real copy, deep copy, is a bit more complicated. One option, less effective one, is writing that object from again scratch. Another option is using Object.assign(). Another one is using combination of JSON.parse() and JSON.stringify().

// Declare a variable and assign it an object
const bookShelf = {
read: 'Colour Of Magic',
reading: 'Night Watch',
toRead: 'Going Postal'
}

// Create a copy of the "bookShelf"
const newBookShelf = Object.assign({}, bookShelf)

// Update the "bookShelf"
bookShelf.reading = 'Mort'
bookShelf.justFinished = 'Night Watch'

// Log the value of "bookShelf"
console.log(bookShelf)
// Output:
// {
// read: 'Colour Of Magic',
// reading: 'Mort',
// toRead: 'Going Postal',
// justFinished: 'Night Watch'
// }

// Log the value of "newBookShelf"
// The output will be different this time
// because the "newBookShelf" points
// to a different object than the "bookShelf"
console.log(newBookShelf)
// Output:
// {
// read: 'Colour Of Magic',
// reading: 'Night Watch',
// toRead: 'Going Postal'
// }
The call stack
Chances are that you've already heard about something called "call stack". This is not the same as the stack we previously discussed in this tutorial. As you know, stack is a place JavaScript uses to store variables assigned with primitive values. Call stack is something different.

Call stack is a mechanism JavaScript uses to keep track of functions. When you call a function JavaScript will add that function to the call stack. If this function calls another function, JavaScript will add that function to the call stack as well, above the first function.

This process will repeat with any other function that will be called by the previous function. When one function is finished, JavaScript will remove that function from the call stack. There are two important things. The first thing is that every new function in the stack will be added to the top of the call stack.

The second thing is that the call stack is executed from the top to the bottom. The last function added to the stack will be executed as first. The first function added to the stack will be executed as last. This is also called LIFO principle (Last-In-First-Out). Let's illustrate this in code on one simple example.

function myFuncOne() {
return 'This is the end.'
}

function myFuncTwo() {
myFuncOne()

return 'Knock knock.'
}

// Call stack is still empty here

myFuncTwo()

// Call stack:
// Step 1: myFuncTwo() is invoked
// Step 2: myFuncTwo() added to the call stack
// Step 3: myFuncTwo() calls myFuncOne()
// Step 4: myFuncOne() is added to the call stack
// Step 5: myFuncOne(), is executed
// Step 6: myFuncOne() removed from the stack
// Step 7: JavaScript goes back to myFuncTwo()
// Step 8: any code left inside myFuncTwo() after myFuncOne() call is executed
// Step 9: myFuncTwo() is removed from the stack
// Step 10: call stack is empty
Conclusion: Memory Life cycle, Heap, Stack and Call Stack in JavaScript
Memory life cycle, heap, stack and call stack are topics that are not discussed that often. There is not much material one can use to learn more about them. I hope that this tutorial helped you understand what memory life cycle, heap, stack and call stack are and how they work.