
JavaScript is a popular programming language that's widely used in web development. As a beginner in JavaScript, you may have come across the terms objects and JSON several times. You might have even wondered, "What are these things, and why do I need to know about them?"

Well, worry no more, because in this blog post, we'll discuss objects and JSON in a fun and easy-to-understand way. We'll also provide some code snippets to help you get a better grasp of these concepts.

In this blog post, we'll explore objects and JSON in JavaScript, and show you how to use them in your own projects.




What are Objects in JavaScript?

In JavaScript, an object is a collection of properties. Properties are simply key-value pairs, where the key is a string, and the value can be of any type, including another object. Everything can be an object and objects do have properties and properties have values, so an object is a key-value pair. Ah, that's too many heavy words lets make it easy for my peeps reading it out, so objects are like the superhero of JavaScript - they swoop in, save the day, and organize your data like a boss. Objects are like the pizza delivery of data - you can customize them to your liking, and they always arrive hot and fresh!" Let us try to understand it using the snippet:




In this example, car is an object that has four properties: make, model, year, and color. The values of these properties are 'Honda', 'Civic', 2023, and 'black', respectively.

So this is how we create an object in Javascript.




Accessing objects is like unlocking a treasure chest of data - just remember your key (the object property).To access the properties of an object, you can use either dot notation or bracket notation. Here's an example using dot notation:




In this example, car.make returns the value of the make property, which is 'Honda'.

Ah this reminds you of something yes in Javascript everything is an object like in console.log console is the object and log is a method of the object console. Same goes for the math methods we learned in our first javascript blog.



Here's an example using bracket notation:




In this example, car['model'] returns the value of the model property, which is 'Civic'.



You can also create objects using constructor functions. A constructor function is a function that creates an object. Here's an example:





In this example, we've created a constructor function called Car. This function takes four parameters: make, model, year, and color. Inside the function, we use the this keyword to assign the values of the parameters to the object's properties.

We then create a new object using the new keyword and the Car constructor function. Finally, we use dot notation to access the make property of the car1 object.



JSON (JavaScript Object Notation) is a lightweight data format that's commonly used for transmitting data between a server and a web application. JSON is easy to read and write and is supported by almost all programming languages, including JavaScript. "It is like the magic wand of data formats - it makes data easy to read and write, and you don't need a degree in rocket science to use it. JSON is like the online shopping cart of data - just add your items and checkout, it's that simple!"

JSON uses a syntax that's similar to JavaScript objects. Here's an example of a JSON object:




In this example, we've created a JSON object with three properties: name, age, and city. The syntax is similar to JavaScript objects, but with a few key differences:

Property names must be enclosed in double quotes

Strings must be enclosed in double quotes

JSON does not support functions or undefined values



You can convert JavaScript objects to JSON using the JSON.stringify() method. Here's an example:





In this example, we've created a JavaScript object called person. We then use the JSON.stringify() method to convert the object to a JSON string, which we store in the personJSON variable.

The resulting JSON string is the same as the JSON object we showed earlier.



You can convert JSON strings to JavaScript objects using the JSON.parse() method. Here's an example:





In this example, we've created a JSON string called personJSON, which contains the same data as the person object we showed earlier. We then use the JSON.parse() method to convert the JSON string to a JavaScript object, which we store in the person variable.

The resulting person object is the same as the JavaScript object we created earlier.





Objects and JSON can be used to store and transmit complex data structures. Here's an example of a more complex JavaScript object:




In this example, we've created a JavaScript object called car, which has several properties, including an array (features) and another object (owner). We then use the JSON.stringify() method to convert the object to a JSON string, which we store in the carJSON variable.

The resulting JSON string contains all the data from the car object, including the nested object and array.

Well I have something more about json.






As we mentioned earlier, JSON is often used for transmitting data between a server and a web application. This is commonly done through APIs (Application Programming Interfaces).

An API is a set of protocols and standards for building software applications. APIs allow different software applications to communicate with each other.

JSON and APIs are like a match made in heaven they're like the peanut butter and jelly of web development. With JSON, your data is like a well-behaved kid, and APIs are like the cool parent that lets them go out and play with other applications.

Many APIs return data in JSON format. For example, here's an API that returns information about the weather in New York:




https://api.openweathermap.org/data/2.5/weather?q=New%20York&appid=YOUR_API_KEY


If you visit this URL in your web browser, you'll see a JSON object with information about the weather in New York.

You can use JavaScript to fetch data from APIs and then parse the JSON data to display it on your web page.




Objects and JSON are powerful tools that allow you to work with data in JavaScript. Objects are collections of key-value pairs, while JSON is a lightweight data format that's easy to read and write. You can use JavaScript methods like JSON.stringify() and JSON.parse() to convert between objects and JSON, allowing you to transmit and store data in various formats.

In conclusion, working with objects and JSON in JavaScript can be as easy as baking a cake just follow the recipe and enjoy the delicious results. With a little bit of practice, you'll be navigating through data structures like a pro and impressing all your coding friends. And always remember, just like a good joke, programming can always use a little humor to lighten things up!!!!

Objects & JSON in Javascript

In programming, scope refers to the part of a program where a particular variable or identifier is accessible. There are two main types of scope: function scope and block scope.

Function scope refers to the visibility and accessibility of variables within a function. In other words, variables defined within a function are only accessible and visible within that function, and cannot be accessed or modified outside of the function.

Block scope, on the other hand, refers to the visibility and accessibility of variables within a block of code (enclosed by curly braces {}). In JavaScript, the keywords "let" and "const" create variables with block scope, whereas the keyword "var" creates variables with function scope.

For example, in the following code, the variable "x" has a function scope, and can only be accessed within the "myFunction" function:

In most programming languages, variables declared with the let keyword have block scope, while variables declared with the var keyword have function scope. However, this can vary depending on the language. It's important to understand the scope of your variables in order to avoid unexpected behavior in your code.

Function Scope vs Block Scope in Javascript

Hoisting is the process by which JavaScript variables and functions are moved to the top of their respective scope before code execution. This means that a variable or function can be used before it is declared in the code.

In JavaScript, hoisting refers to the way in which variable and function declarations are treated by the interpreter. In short, the JavaScript interpreter moves all declarations to the top of the current scope (either the global scope or the current function scope) before code execution begins. This means that you can use a variable or function before you declare it because it will be declared by the time the code runs.

For example, the following code will still run correctly because the variable and function declarations are hoisted to the top of the code:

However, hoisting only affects the declarations, not the assignments. In the following code, the variable x will be undefined because the assignment x = 5 is not hoisted:

Hoisting can also cause unexpected behavior if a variable is declared and assigned a value within a block of code (e.g. within an if statement), as the variable will be accessible outside of the block:

In general, it is best practice to avoid relying on hoisting and to declare variables and functions at the beginning of their respective scope to avoid confusion and potential errors.

What is Hoisting in Javascript

 Install chocolatey from the instructions given in the link below. 

Run all the below commands on Powershell (Open Powershell as Admin) 

choco install virtualbox --version=6.1.40

 Install brew from the instructions given in the link below

After installing homebrew Create a file in users home directory with name .curlrc with content “-k” (-k without quotes and give a new line character after -k.) 

Prerequisites commands for DevOps Installation tools for windows and mac

A Vagrant is an open-source tool that helps us to automate the creation and management of Virtual Machines. 

When we use virtual machines we usually get management problems such as

Challenging Replication for Multi-Virtual Machine

So vagrant comes to a rescue which provides 

Virtual Machine setup through images (vagrant boxes)

Images boxes available in the vagrant cloud

Manage Virtual Machine changes automatically through vagrant file

vagrant commands to manage virtual machine 

Also, make sure you install the virtual box from here -

default hypervisor of vagrant is Oracle virtual box

now let's assume you want to set up Linux ubuntu or centos using vagrant 

create any folder name for it and after entering into the folder hit the command 

Here is the image box (eg geerlingguy/centos7, generic/ubuntu1804, etc) that you want to install which you will get from 

Once your vagrant  image is  downloaded  hit the command 

After this, your VM is initialized and ready for ssh now to go inside the respected Linux server hit the command 

Now you are successfully into the respected downloaded VM Linux machine server

After using it if you want to power off the machine hit command 

How to set up Vagrant in windows

Javascript Engine was first made by Bredan Elich. He first created javascript engine known as

 used by mozilla. Later on Google created 

 which was most advanced js engine ever made

Actually its called EcmaScript engines not Javascript engines because  if everybody is allowed to  just create js engine than it will be a total chaos, which is why ecmascript was created.

Ecmascript is the governing body of js essentially decides how the language should be standerize, it tells engine creators that this is how js should work.

Interpreters translate and read the file line by line on the fly while Compilers doesn't translate line by line on the fly, waht it does it works ahead of time to create a translation of what code we have written and it compiles down to usually a language that can be understood by our machines

For Example Forloop Interpreters run for loop again and again and slows the performance but compilers as it becomes slow at first because of translating in machine level language it also optimize the code, instead of running repeative for loop it will optimize to the value 110010 lets say output of that repeated function or loop, So compilers become more fast than interpreters 

In V8 engine we see the combination of both compilers and Interpreters and create something called

 to make engine faster. The JIT compiler for V8 engine is called Turbofan

So javascript is an interpreted language ? 

Yes, initially earlier in spidermonkey but we also use compilers now but it depends on implimentation now

The JavaScript runtime environment provides access to built-in libraries and objects that are available to a program so that it can interact with the outside world and make the code work.

In the context of a browser this is comprised of the following elements:

The JavaScript engine (which in turn is made up of the heap and the call stack)

For the purpose of this article, we are going to focus on the V8 JavaScript engine.

The heap, also called the ‘memory heap’, is a section of unstructured memory that is used for the allocation of objects and variables.

The call stack is a data structure that keeps track of where we are in the program and runs in a last-in, first-out way. Each entry in the stack is called a stack frame. This means that the frame at the top of the stack is the one the engine is focused on, and it will not move on to the next function unless the function above it has been removed from the stack.

When js engine runs function, it is pushed onto the stack and get popped off the stack once that function return a value or gets sent to the web apis. If a function doesn’t explicitly return a value then the engine will return undefined and also pop the function off the stack. This is what is meant by the term 

; it is single-threaded, so can only do one thing at a time.

WebApi e.g,(DOM, fetch(), setTimeout() ->This web apis,
our applications which can do a variety of things like send HTTP requests
listen to DOM events may be click events on a dom ,
delay execution using something like set timeout can use set interval

The callback queue stores the callback functions sent from the Web APIs in the order in which they were added. This queue is a data structure that runs 

 to add a new callback function to the end of the queue and 

Callback functions will sit in the queue until the call stack is empty, they are then moved into the stack by the event loop.

The job of the event loop is to constantly monitor the state of the call stack and the callback queue. If the stack is empty it will grab a callback from the callback queue and put it onto the call stack, scheduling it for execution.

This is why JavaScript often gets described as being able to run asynchronously, even though it is a single-threaded language. JavaScript can only execute one function at a time, so this means it is synchronous, but as we can push callbacks from the Web APIs to the callback queue and in turn, the event loop can constantly add those callback to the call stack, we think of JavaScript as being able to run asynchronously.

Know about javascript engine and runtime

It's very often that we need pagination if we are working with any headless cms and frontend libraries or frameworks so, here we are going to learn how we can achieve it. In our case, we have sanity.io for headless cms and next js or react js for the frontend.

Second, if you are using react then you can fetch data using useEffect and implement pagination as shown below:

Third, If your using next js we can use getServerSideProps as shown below:

 Lastly, we can also customize pagination using different props listed below:

How to Create Pagination using Sanity.io and  Next js  / React js

-progress bar. From 2021 onwards it's very easy to implement it. 

So first of all you need to download the npm package 

It is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

 After downloading the package In your Next.js app go to _app.js file and

Once you add the following code in the _app.js file progress bar will  work as 

per our requirements with default configuration properties for example color, height, startPosition, stop delays, etc.

For custom configuration just add props to the component as follows:

Hope this solves your issue, Enjoy coding and developing

TechYodhya is a place to consume content related to Technology

Easy and Free to Read