{"id":16930,"date":"2020-07-09T13:19:00","date_gmt":"2020-07-09T07:49:00","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/"},"modified":"2024-09-03T11:24:52","modified_gmt":"2024-09-03T05:54:52","slug":"javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/","title":{"rendered":"JavaScript Tutorial | Introduction to JavaScript"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"what-is-javascript\"><strong>What is JavaScript<\/strong><\/h2>\n\n\n\n<p>JavaScript is known as a scripting language for web pages that defines all the actions to be performed on a webpage. It is an object-oriented programming language that uses a JIT compiler.<\/p>\n\n\n\n<p>JavaScript, often referred to as JS, is widely used in applications such as web development and mobile development. It is supported by all major web browsers and works seamlessly with <a aria-label=\"HTML (opens in a new tab)\" href=\"https:\/\/www.mygreatlearning.com\/blog\/html-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> and <a aria-label=\"CSS (opens in a new tab)\" href=\"https:\/\/www.mygreatlearning.com\/blog\/css-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a>, making it a fundamental skill for software engineers. If you want to build a strong foundation and deepen your understanding of JavaScript concepts, you can explore the course below, which offers comprehensive guidance to help you get started.<\/p>\n\n\n\n    <div class=\"courses-cta-container\">\n        <div class=\"courses-cta-card\">\n            <div class=\"courses-cta-header\">\n                <div class=\"courses-learn-icon\"><\/div>\n                <span class=\"courses-learn-text\">Academy PRO +<\/span>\n            <\/div>\n            <p class=\"courses-cta-title\">\n                <a href=\"https:\/\/www.mygreatlearning.com\/academy\/premium\/advanced-javascript-development\" class=\"courses-cta-title-link\">Advanced JavaScript Course<\/a>\n            <\/p>\n            <p class=\"courses-cta-description\">Learn advanced JavaScript concepts, including ES6+, async programming, and modern frameworks. Strengthen your skills and build dynamic applications to become a proficient JavaScript developer.<\/p>\n            <div class=\"courses-cta-stats\">\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-user-icon\"><\/div>\n                    <span>4.5 learning Hrs<\/span>\n                <\/div>\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-star-icon\"><\/div>\n                    <span>2 Projects<\/span>\n                <\/div>\n            <\/div>\n            <a href=\"https:\/\/www.mygreatlearning.com\/academy\/premium\/advanced-javascript-development\" class=\"courses-cta-button\">\n                Enroll in Advanced JS Course\n                <div class=\"courses-arrow-icon\"><\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-history\"><strong>JavaScript History<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JS was founded by was Brendan Eich<\/li>\n\n\n\n<li>He developed JS in 1995<\/li>\n\n\n\n<li>He also developed first JS Engine, Spider Monkey which is still used by Mozilla firefox<\/li>\n\n\n\n<li>JS name was later changed to 'mocha' and 'LiveScript' but it still remains JS due to some trademark reasons<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-tools\"><strong>JavaScript Tools<\/strong><\/h2>\n\n\n\n<p>For working with JavaScript, we just need&nbsp;two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text editor<\/strong>\n<ul class=\"wp-block-list\">\n<li>For writing and editing of JS code, we need a simple editor that can be notepad too.<\/li>\n\n\n\n<li>But there are other powerful editors that provide additional functionalities like autocomplete, indentation, highlights, etc.<\/li>\n\n\n\n<li>Example: Visual Studio Code, Sublime Text, Atom, etc.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Browser<\/strong>\n<ul class=\"wp-block-list\">\n<li>All browsers come with an inbuilt JS engine.<\/li>\n\n\n\n<li>They are used for executing JS code and also for debugging purposes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Practice work on the <a href=\"http:\/\/Want to see your JavaScript code in action? Practice your HTML, CSS, and JavaScript skills instantly with our Free Online HTML Editor\u2014a powerful web-based tool that lets you write, edit, and run your code right in your browser!\">JavaScript C<\/a><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\">ompiler Tool<\/a>.<\/p>\n\n\n\n<p>While standard text editors and browsers are the foundational tools for writing JavaScript, the modern software engineering landscape is rapidly evolving. Today, top developers are supercharging their environments with Artificial Intelligence to code faster and smarter.&nbsp;<\/p>\n\n\n\n<p>If you are ready to future-proof your newly acquired coding skills, the <strong>Professional Certificate in Generative AI and Agents for Software Development<\/strong> by the McCombs School of Business at The University of Texas at Austin is the perfect next step.<\/p>\n\n\n\n    <div class=\"courses-cta-container\">\n        <div class=\"courses-cta-card\">\n            <div class=\"courses-cta-header\">\n                <div class=\"courses-learn-icon\"><\/div>\n                <span class=\"courses-learn-text\">Texas McCombs<\/span>\n            <\/div>\n            <p class=\"courses-cta-title\">\n                <a href=\"https:\/\/onlineexeced.mccombs.utexas.edu\/genai-for-software-development\" class=\"courses-cta-title-link\">GenAI for Software Development<\/a>\n            <\/p>\n            <p class=\"courses-cta-description\">Build, test, and deploy AI-powered web applications. Gain hands-on experience with full-stack development using Node.js, Express, MongoDB, and React while integrating Generative AI into real-world applications.<\/p>\n            <div class=\"courses-cta-stats\">\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-user-icon\"><\/div>\n                    <span>Live Mentorship<\/span>\n                <\/div>\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-star-icon\"><\/div>\n                    <span>14 Weeks Online Program<\/span>\n                <\/div>\n            <\/div>\n            <a href=\"https:\/\/onlineexeced.mccombs.utexas.edu\/genai-for-software-development\" class=\"courses-cta-button\">\n                Apply Now\n                <div class=\"courses-arrow-icon\"><\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-this-program-helps-you\"><strong>How This Program Helps You?<\/strong><\/h3>\n\n\n\n<p>Designed for aspiring and experienced software professionals, this 14-week online program transforms you into a highly efficient, AI-equipped full-stack developer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Accelerated Full-Stack Mastery:<\/strong> Master the MERN stack (MongoDB, Express.js, React, Node.js) to design and deploy scalable, end-to-end web applications.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>AI-Assisted Coding Workflows:<\/strong> Integrate GitHub Copilot and ChatGPT directly into VS Code for real-time code suggestions, rapid debugging, and automated testing.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Build Next-Generation AI Apps:<\/strong> Go beyond writing code with AI, integrate Large Language Models (LLMs), master prompt engineering, and build autonomous AI agents using LangChain and Claude Code.<\/li>\n<\/ul>\n\n\n\n<p><strong>Real-World Portfolio Building:<\/strong> Complete 10+ hands-on projects to build an industry-ready e-portfolio showcasing your skills in modern frontend\/backend architecture and AWS cloud deployment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-hello-world\"><strong>JavaScript&nbsp; Hello World<\/strong><\/h2>\n\n\n\n<p>Before jumping right into coding, let us understand different ways to write js code. It is important to note that JS basically gets merged into HTML, which is a skeleton of a web page<\/p>\n\n\n\n<p>We can write our JS in 3 ways<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-console\"><strong>1.Console<\/strong><\/h3>\n\n\n\n<p>Either just press Ctrl + Shift + I to open the console or you can right-click and then go to inspect. Now since you are in the console you can start writing your code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"hello world\");\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong><em>VM312:1 hello world<\/em><\/strong>\n<strong><em>undefined<\/em><\/strong> <\/pre>\n\n\n\n<p>&nbsp;console.log is used to print output<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-script-tag\"><strong>2.Script tag<\/strong><\/h3>\n\n\n\n<p><strong>&lt;script&gt;<\/strong> tag is used for writing javascript in HTML directly.But every console.log() will print the output in console of browser<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Home&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;h1&gt;My First JS Code&lt;\/h1&gt;\n&lt;script&gt;\n\tconsole.log(\"Hello World!\");\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\"><\/h4>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-external-file\"><strong>3.External file<\/strong><\/h3>\n\n\n\n<p>JS code is written in a separate file and is incorporated in the HTML using &lt;script&gt; tag.This is the most efficient way. It also enforces reusability and keeps code short, simple, and easy to understand.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--------  html file ----------\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Home&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;h1&gt;My First JS Code&lt;\/h1&gt;\n&lt;script type=\"text\/javascript\" src=\"home.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n-------- JS file ----------\n\nconsole.log(\"Hello World!\");\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\"><\/h4>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-comments\"><strong>JavaScript Comments<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comments are extra info that helps in the understanding of code and is not passed on to compiler at compilation.<\/li>\n\n\n\n<li>In JS, there are 2 types of comment\n<ul class=\"wp-block-list\">\n<li>Single line&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\t\/\/\u2026\u2026\u2026\u2026..<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Multiline&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\n\u2026\u2026\u2026.\n\u2026\u2026\u2026.\n*\/<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML Code\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Home&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;h1&gt;My First JS Code&lt;\/h1&gt;\n&lt;script type=\"text\/javascript\" src=\"home.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\nJS Code\nconsole.log(\"Hello World!\");\n\/*console.log(\"!\");\nconsole.log(\"!\");\nconsole.log(\"!\");\nconsole.log(\"!\");*\/\n\/\/console.log(\"Hello !\");\nconsole.log(\"Bye\");\n\n\n\n<\/code><\/pre>\n\n\n\n<p id=\"output\">Test out your <code>&lt;script><\/code> tags instantly with our <strong><a href=\"https:\/\/www.mygreatlearning.com\/blog\/html-editor-tool\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free Online HTML Editor<\/a><\/strong>, a fast, web-based tool that lets you write, edit, and view your HTML and JavaScript code with ease. This online editor provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Save &amp; Export Easily:<\/strong> Instantly download your work as an <code>.html<\/code> file or copy the code to your clipboard with a single button click.<\/li>\n\n\n\n<li><strong>Live HTML Preview:<\/strong> See your web page update instantly. Your code renders dynamically in a live iframe as you type.<\/li>\n\n\n\n<li><strong>Smart Code Editor:<\/strong> Avoid errors with advanced syntax highlighting, autocomplete, and real-time line numbers that synchronize as you scroll.<\/li>\n\n\n\n<li><strong>Device Size Previews:<\/strong> Ensure your layouts look great everywhere with the new feature that shows exact device sizes while previewing.<\/li>\n\n\n\n<li><strong>Customizable &amp; Distraction-Free:<\/strong> Toggle between light and dark themes (your preference is automatically saved), or switch to Fullscreen mode for better focus while coding.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-variables\"><strong>JavaScript Variables<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Variables are memory locations with names that store the temporary data.<\/li>\n\n\n\n<li><strong>Naming convention:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Variable names should begin with a letter, $, or an underscore(_).<\/li>\n\n\n\n<li>The first character can be then followed by any combination of letters or digits.<\/li>\n\n\n\n<li>A variable name cannot be the same as any keyword as they are reserved for special purposes.<\/li>\n\n\n\n<li>Variable names case sensitive.<\/li>\n\n\n\n<li>Eg: valid- apple, _name, $address1<\/li>\n\n\n\n<li>Eg: invalid- 123apple, *roll, @email<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>In JS, a variable is defined using the var keyword\n<ul class=\"wp-block-list\">\n<li>Eg: var a=5;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>There are 2 types of variable in java depending on scopes\n<ul class=\"wp-block-list\">\n<li><strong>Local<\/strong>\n<ul class=\"wp-block-list\">\n<li>They are defined inside a function or block.<\/li>\n\n\n\n<li>It is accessible within the scope it is defined<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function sum(a,b)\n{\n\tvar ans=a+b;\n\tconsole.log(ans); \/\/prints 5\n}\nsum(2,3);\nconsole.log(ans); \/\/error<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">5\nUncaught ReferenceError: ans is not defined\nat :7:13<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global<\/strong>\n<ul class=\"wp-block-list\">\n<li>A variable defined in window scope, outside of all function scope.<\/li>\n\n\n\n<li>It is accessible everywhere in the program.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var ans=2;\nfunction sum(a,b)\n{\n\tans=a+b;\n\tconsole.log(ans);\n}\nsum(2,3);\nconsole.log(ans);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">5\n5<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Variable shadowing&nbsp;<\/strong>\n<ul class=\"wp-block-list\">\n<li>When a variable with the same name is defined in function and global scope then variable shadowing occurs.<\/li>\n\n\n\n<li>That means that when we are dealing with variables in function scope then it gives priority to its local variable and overshadows the global variable.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var ans=2;\nfunction sum(a,b)\n{\n\tvar ans=a+b;\n\tconsole.log(ans);\n}\nsum(2,3);\nconsole.log(ans);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> 5\n 2<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Undefined Vs Undeclared<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Undefined<\/strong>\n<ul class=\"wp-block-list\">\n<li>It's a variable that has been declared but no value has been assigned to it yet.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var str;\nconsole.log(str)\n\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> undefined<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Undeclared<\/strong>\n<ul class=\"wp-block-list\">\n<li>It's a variable that has not even been declared yet.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(str)\n \n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> Uncaught ReferenceError: str is not defined\n     at :1:13<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-hoisting\"><strong>JavaScript Hoisting<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In JS, there is a phenomenon that takes place when var of function keyword is encountered which is known as Hoisting<\/li>\n\n\n\n<li>When JS code gets parsed, whenever it encounters var or function keyword, it declares it in its execution context<\/li>\n\n\n\n<li>Example 1: var weather is declared and defined in the global execution context, so it will get hoisted in the global scope.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function changeWeather()\n{\n\tconsole.log(\"original weather: \"+weather);\n\tweather=\"rainy\";\n\tconsole.log(\"changing weather : \"+weather);\n}\nvar weather=\"sunny\";\nchangeWeather();\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">original weather: sunny\nchanging weather: rainy\n <\/pre>\n\n\n\n<p>This will get treated as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var weather=\"sunny\";\nfunction changeWeather()\n{\n\tconsole.log(\"original weather: \"+weather);\n\tweather=\"rainy\";\n\tconsole.log(\"changing weather: \"+weather);\n}\nchangeWeather();\n\n<\/code><\/pre>\n\n\n\n<p><strong>Example 2<\/strong>: Here weather is declared in both global and local execution contexts. So here the weather will be hoisted in both the scopes. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var weather=\"sunny\";\n\nfunction changeWeather()\n{\n\tconsole.log(\"original weather: \"+weather);\n\tvar weather=\"rainy\";\n\tconsole.log(\"changing weather: \"+weather);\n}\n\nchangeWeather();\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">original weather: undefined\nchanging weather: rainy <\/pre>\n\n\n\n<p> This will get treated as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var weather=\"sunny\";\n\nfunction changeWeather()\n{\n\tvar weather;\nconsole.log(\"original weather: \"+weather);\n\tweather=\"rainy\";\n\tconsole.log(\"changing weather: \"+weather);\n}\n\nchangeWeather();\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-data-types\"><strong>JavaScript Data Types<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JS is a dynamically typed language and does not need to specify the data type explicitly of the variable.<\/li>\n\n\n\n<li>There are 8 different types of data types in JS which are categorised in 2 categories\n<ul class=\"wp-block-list\">\n<li><strong>Primitive<\/strong>\n<ul class=\"wp-block-list\">\n<li>Number, String, Boolean, Undefined, Null, Symbol<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var num=23;\nvar string=\"hello\";\nvar boolean=true;\nvar undef;\nvar nullValue=null;\nvar symbol=Symbol();\n\nnum\n&gt;&gt;23\n\nstring\n&gt;&gt;\"hello\"\n\nboolean\n&gt;&gt;true\n\nundef\n&gt;&gt;undefined\n\nnullValue\n&gt;&gt;null\n\nsymbol\n&gt;&gt;Symbol()\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Symbol<\/strong>\n<ul class=\"wp-block-list\">\n<li>generally used for creating unique properties of objects<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let sym1 = Symbol();\nlet sym2 = Symbol('foo');\nlet sym3 = Symbol('foo');\nsym2===sym3\n\ufeff\nfalse<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Undefined vs Null<\/strong>\n<ul class=\"wp-block-list\">\n<li>undefined basically used when the variable\u2019s value is yet not known.<\/li>\n\n\n\n<li>null is used when we explicitly want to define a variable with null.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Non Primitive\n<ul class=\"wp-block-list\">\n<li>Object\n<ul class=\"wp-block-list\">\n<li>It is basically a collection of key-value pairs<\/li>\n\n\n\n<li>It is defined within {}<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var fruits ={\n\t'apple':'red',\n\t'watermelon':'green',\n\t'mango':'yellow'\n};\n\nfruits&#091;'apple'];\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><em>\"red\"<\/em><br><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Arrays<\/strong>\n<ul class=\"wp-block-list\">\n<li>It is used to store ordered data together.<\/li>\n\n\n\n<li>It is defined within square brackets( [ ] ) and can have elements of different types<\/li>\n\n\n\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=&#091;1,true,'hello']\na&#091;2]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><em>\"hello\"<\/em><br><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-let-and-const\"><strong>JavaScript Let and Const<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Let and const keywords are also used for declaring variables.<\/li>\n\n\n\n<li>It also stops hoisting.\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function changeWeather()\n{\n\tconsole.log(\"original weather : \"+weather);\n\tlet weather=\"rainy\";\n\tconsole.log(\"changed weather : \"+weather);\n}\n\nchangeWeather();\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> <em>Uncaught ReferenceError: Cannot access 'weather' before initialization<\/em>\n<em>&nbsp;&nbsp;&nbsp;&nbsp;at changeWeather (&lt;anonymous&gt;:3:36)<\/em>\n<em>&nbsp;&nbsp;&nbsp;&nbsp;at &lt;anonymous&gt;:8:1<\/em> <\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It enables the block-level scope.\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let weather=\"sunny\";\nfunction changeWeather()\n{\n\tlet weather=\"rainy\";\n\tconsole.log(\"changed weather: \"+weather);\n}\nchangeWeather();\nconsole.log(\"original weather: \"+weather);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><em>changed weather: rainy<\/em>\n<em>original weather: sunny<\/em> <\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Const is used to declare the variables whose value is not going to change once defined.\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const weather=\"sunny\";\nfunction changeWeather()\n{\n\tweather=\"rainy\";\n\tconsole.log(\"changed weather : \"+weather);\n}\nchangeWeather();\nconsole.log(\"original weather : \"+weather);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> <em>Uncaught TypeError: Assignment to constant variable.<\/em>\n<em>&nbsp;&nbsp;&nbsp;&nbsp;at changeWeather (&lt;anonymous&gt;:4:9)<\/em>\n<em>&nbsp;&nbsp;&nbsp;&nbsp;at &lt;anonymous&gt;:7:1<\/em> <\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-operators\"><strong>JavaScript Operators<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Unary operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>It needs one operand<\/li>\n\n\n\n<li>we have 2 major operators here i.e, increment and decrement and each one has 2 variations of postfix and prefix<\/li>\n\n\n\n<li><strong>Increment <\/strong>- to increase the value by 1\n<ul class=\"wp-block-list\">\n<li>postfix: first assign then increment<\/li>\n\n\n\n<li>prefix: first increment then assign<\/li>\n\n\n\n<li>Example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=2; a++;\n&gt;&gt;2\n\nvar a=2; ++a;\n&gt;&gt;3\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Decrement <\/strong>- to decrease the value by 1\n<ul class=\"wp-block-list\">\n<li>postfix: first assign then decrement<\/li>\n\n\n\n<li>prefix: first decrement then assign<\/li>\n\n\n\n<li>Example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=2; a--;\n&gt;&gt;2\n\nvar a=2; --a;\n&gt;&gt;1\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Arithmetic operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>It comprises all binary arithmetic operations, like add, subtract, multiply, divide, etc.<\/li>\n\n\n\n<li>Another addition operator is modulus(%), which gives you the remainder.<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=2,b=5;\nconsole.log(\"a+b : \"+ (10+5));\nconsole.log(\"a-b : \"+ (10-5));\nconsole.log(\"a*b : \"+ (10*5));\nconsole.log(\"a\/b : \"+ (10\/5));\nconsole.log(\"a%b : \"+ (10%5));<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">a+b : 15\na-b : 5\na*b : 50\na\/b : 2\na%b : 0<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shift operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>Two variations - left and right shift<\/li>\n\n\n\n<li><strong>left shift<\/strong>: shift bits in left direction for the specified value<\/li>\n\n\n\n<li><strong>right shift<\/strong>: shift bits in the right direction for the specified value<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=8,b=2;\nconsole.log(\"a&lt;&lt;b : \"+ (a&lt;&lt;b));\nconsole.log(\"a&gt;&gt;b : \"+ (a&gt;&gt;b));\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">a&lt;&lt;b : 32\na&gt;&gt;b : 2<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Relational operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>It comprises operators for comparisons<\/li>\n\n\n\n<li>There are operators to check inequality i.e., &lt; ,&gt;, &lt;=, &gt;=<\/li>\n\n\n\n<li>For equality check, we have 2 operators i.e., == and !=<\/li>\n\n\n\n<li><strong>Difference between == and ===<\/strong>\n<ul class=\"wp-block-list\">\n<li>== allow type coercion i.e, one type can change into another at the time of comparison<\/li>\n\n\n\n<li>=== does not allow type coercion<\/li>\n\n\n\n<li>Note:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">NaN==NaN\n&gt;&gt;false\nNaN===NaN\n&gt;&gt;false\n+0 == -0\n&gt;&gt;true\n+0 === -0\n&gt;&gt;true <\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log('2==\"2\" : '+ (2==\"2\"));\nconsole.log('2===\"2\" : '+ (2===\"2\"));\nconsole.log('2!=\"2\" : '+ (2!=\"2\"));\nconsole.log('2!==\"2\" : '+ (2!==\"2\"));\nconsole.log('2&gt;\"2\" : '+ (2&gt;\"2\"));\nconsole.log('2&gt;=\"2\" : '+ (2&gt;=\"2\"));\nconsole.log('2&lt;\"2\" : '+ (2&lt;\"2\"));\nconsole.log('2&lt;=\"2\" : '+ (2&lt;=\"2\"));<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">2==\"2\" : true\n 2===\"2\" : false\n 2!=\"2\" : false\n 2!==\"2\" : true\n 2&gt;\"2\" : false\n 2&gt;=\"2\" : true\n 2&lt;\"2\" : false\n 2&lt;=\"2\" : true<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bitwise operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>It computes by going bit by bit<\/li>\n\n\n\n<li>Both sides are checked irrespective of what the first expression computes to<\/li>\n\n\n\n<li>4 major bit operators are:\n<ul class=\"wp-block-list\">\n<li><strong>&amp; <\/strong>- bitwise and, which returns 1 if both bits are 1 else 0.<\/li>\n\n\n\n<li><strong>| <\/strong>- bitwise or, which returns 1 if either of bits is 1 else 0.<\/li>\n\n\n\n<li><strong>^ <\/strong>- bitwise xor, which returns 1 if both bits are different else 0.<\/li>\n\n\n\n<li><strong>~ <\/strong>- bitwise not, which changes 1 to 0 and vice versa.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=8,b=2;\nconsole.log('a&amp;b : '+ (a&amp;b));\nconsole.log('a|b : '+ (a|b));\nconsole.log('a^b : '+ (a^b));\nconsole.log('~a : '+ (~a));<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">a&amp;b : 0\n a|b : 10\n a^b : 10\n ~a : -9<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Logical operator<\/strong>\n<ul class=\"wp-block-list\">\n<li>are used for conditions comparison that basically checks for the validity of them<\/li>\n\n\n\n<li>They are also used in loops as part of termination conditions.<\/li>\n\n\n\n<li>If the first condition is enough to give the final verdict, it will not evaluate the second one.<\/li>\n\n\n\n<li>3 operators are there:\n<ul class=\"wp-block-list\">\n<li><strong>&amp;&amp; <\/strong>- logical AND, returns true when both conditions evaluate to true<\/li>\n\n\n\n<li><strong>|| <\/strong>- logical OR, returns true when either of the conditions evaluates to true<\/li>\n\n\n\n<li><strong>! <\/strong>- logical not, return true when the condition evaluates to false<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=true,b=false;\nconsole.log('a&amp;&amp;b : '+ (a&amp;&amp;b));\nconsole.log('a||b : '+ (a||b));\nconsole.log('!a : '+ (!a));\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">a&amp;&amp;b : false\n a||b : true\n !a : false<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Assignment operator and Ternary operator&nbsp;<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>The assignment operator(=)<\/strong>: is used to assign right-hand side value to the left-hand-side variable.<\/li>\n\n\n\n<li><strong>Ternary operator(?:)<\/strong> : An alternative of if-else. Condition is placed before? and if evaluates to true then LHS of the colon gets executed else RHS of colon will.<\/li>\n\n\n\n<li><strong>Example:<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=2;\nconsole.log('a=2 : '+ (a=2));\nconsole.log((a==2)?console.log(\"ok\"):console.log(\"not ok\"));\n\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"> a=2 : 2\n ok<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-conditions\"><strong>JavaScript Conditions<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>if-else<\/strong>\n<ul class=\"wp-block-list\">\n<li>consist of 2 keywords, if and else<\/li>\n\n\n\n<li>This is a way where there are 2 paths possible depending upon a condition<\/li>\n\n\n\n<li>if condition manipulates to true then, if gets executed otherwise code is else will execute<\/li>\n\n\n\n<li>you can multiple else if followed by else if there are more possible paths.<\/li>\n\n\n\n<li>Also nested if and else are possible<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=5,b=6;\nif(a+b==11)\n\tconsole.log(\"equal\");\nelse\n\tconsole.log(\"not equal\");\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Output:\n equal<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>switch<\/strong>\n<ul class=\"wp-block-list\">\n<li>It is an elegant way to replace multiple else-if<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Syntax<\/strong>:\n\n<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>switch(expression)\n{\n    case val: ... ; \n              break;\n    case val: ... ; \n              break;\n    case val: ... ; \n              break;\n    default: ...;\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here depending upon the answer evaluated by the condition, case code gets executed.<\/li>\n\n\n\n<li>every case must be followed by break unless it is required not to as per logic. Otherwise, all cases will start executing from the matched case till either break is encountered or all cases get exhausted<\/li>\n\n\n\n<li>default is optional and holds the code which should be executed if no catches gets matched.<\/li>\n\n\n\n<li>val can be integer, char or String in java.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var day=\"sun\";\nswitch(day)\n\t{\n\t    case \"mon\": console.log(\"Today is monday\");\n\t                   break;\n\t    case \"tues\": console.log(\"Today is tuesday\");\n\t                   break;\n\t    case \"wed\": console.log(\"Today is wednesday\");\n\t                   break;\n\t    case \"thurs\": console.log(\"Today is thursday\");\n\t                   break;\n\t    case \"fri\": console.log(\"Today is friday\");\n\t                   break;\n\t    case \"sat\": console.log(\"Today is saturday\");\n\t                   break;\n\t    case \"sun\": console.log(\"Today is sunday\");\n\t                   break;\n\t    default : console.log(\"day is invalid!\");\n\t\t}\n\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Output:<br> Today is sunday<\/pre>\n\n\n\n<p><em>Once you\u2019re familiar with conditional statements, take the next step and try working on practical<\/em> <a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-projects\/\">JavaScript projects<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-loops\"><strong>JavaScript Loops<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Three major loops are there: for, while and do-while<\/li>\n\n\n\n<li><strong>for loop :<\/strong>\n<ul class=\"wp-block-list\">\n<li>It is best to use when we know the specified number of times the code should execute.<\/li>\n\n\n\n<li><strong>Syntax<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>for( initialization; termination; update){<\/strong><\/p>\n\n\n\n<p><strong>}<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>initialization - is used to initialize the variable, which is being used for iteration.<\/li>\n\n\n\n<li>termination - comprises conditions that determine when iteration will continue.<\/li>\n\n\n\n<li>update - how our variable will get updated.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>for(var i=0;i&lt;5;i++)\n\tconsole.log(\"current value of i : \"+i);\n\n\n\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output\">Output<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">current value of i : 0\n  current value of i : 1\n  current value of i : 2\n  current value of i : 3\n  current value of i : 4<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>for loop variations - for in and for of<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>for of<\/strong>\n<ul class=\"wp-block-list\">\n<li>used for iterables i.e, arrays and strings<\/li>\n\n\n\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let fruits=&#091;'apple','peach','orange']\nfor(item of fruits){ console.log(item); }\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output:<\/strong>\n apple\n peach\n orange<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>for in<\/strong>\n<ul class=\"wp-block-list\">\n<li>used for enumerables i.e, objects<\/li>\n\n\n\n<li>it can also be used for iterables in which index acts as the key<\/li>\n\n\n\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>for(item in fruits){ console.log(item); }\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output:<\/strong>\n 0\n 1\n 2<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>while loop :<\/strong>\n<ul class=\"wp-block-list\">\n<li>It is best to use when we know the specified expression depending on whose value the code should execute.<\/li>\n\n\n\n<li><strong>Syntax<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>\t<strong>while( expression ){<\/strong><\/p>\n\n\n\n<p><strong>}<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>expression- is used to dictate the condition that is responsible for loop continuation.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var i=0;\nwhile(i&lt;5){\n\tconsole.log(\"current value of i : \"+i);\n\ti++;\n}\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>:\n current value of i : 0\n current value of i : 1\n current value of i : 2\n current value of i : 3\n current value of i : 4<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>do-while loop :<\/strong>\n<ul class=\"wp-block-list\">\n<li>It is best to use when we know that at least code must execute once irrespective of the condition.<\/li>\n\n\n\n<li><strong>Syntax<\/strong>:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>\t<strong>do{<\/strong><\/p>\n\n\n\n<p><strong>}while( expression );<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>expression- is used to dictate the condition who is responsible for loop continuation.<\/li>\n\n\n\n<li><strong>Example<\/strong>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var i=0;\ndo{\n    console.log(\"current value of i : \"+i);\n    i++;\n}while(i&lt;5);\n\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>:\n current value of i : 0\n current value of i : 1\n current value of i : 2\n current value of i : 3\n current value of i : 4<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-function\"><strong>JavaScript Function<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is referred to a code snippet that generally performs some operation<\/li>\n\n\n\n<li>It helps in modularization of code and also enables reusability of it as and when required.<\/li>\n\n\n\n<li>The function can be of 2 types in JS\n<ul class=\"wp-block-list\">\n<li><strong>Function expression:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Starts with a var and assignment operator<\/li>\n\n\n\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var faith=function(){\n console.log(\"hope\");\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>invocation : faith()<\/li>\n\n\n\n<li>gets its definition at runtime<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Function declaration :<\/strong>\n<ul class=\"wp-block-list\">\n<li>starts will function keyword<\/li>\n\n\n\n<li><strong>Example<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function happy(){\n console.log(\"I am grateful\");\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>invocation : happy()<\/li>\n\n\n\n<li>gets its definition at compile time<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-call-apply-and-bind\"><strong>JavaScript Call, Apply and Bind<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>call() and apply() is implicitly used to call the function that is declared<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function greet(){console.log(\"hello\");}\ngreet()\n&gt;&gt;VM1281:1 hello\n\ngreet.call()\n&gt;&gt;VM1281:1 hello\n\ngreet.apply()\n&gt;&gt;VM1358:1 hello\n\n<\/code><\/pre>\n\n\n\n<p><strong>call and apply can be used to borrow methods of another object<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let animal = { \n\tname:'animal', \n\teat(){console.log(\"i \"+name+\" eating...\")}\n};\n\nanimal.eat()\n&gt;&gt;VM2472:3 i  eating..\n\nlet human = { \n\tname:'human'\n};\n\nanimal.eat.call(human)\n&gt;&gt;VM2510:3 i human eating...\n\nanimal.eat.apply(human)\n&gt;&gt;VM2510:3 i human eating\u2026\n\n\t\tpassing arguments-\n\t\tlet animal = { \n\tname : 'animal', \n\teat(a,b){console.log(\"I \"+this.name+\" eating \"+b+\" \"+a)}\n};\n\nanimal.eat('apple',5);\n&gt;&gt;VM2828:3 I animal eating 5 apple\n\nanimal.eat.call(human,'orange',2);\n&gt;&gt;VM2828:3 I human eating 2 orange\n\nanimal.eat.apply(human,&#091;'orange',2]);\n&gt;&gt;VM2828:3 I human eating 2 orange\n<\/code><\/pre>\n\n\n\n<p><strong>bind returns the function definition that can be used later<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let animal = { \n\tname:'animal', \n\teat(a,b){console.log(\"I \"+this.name+\" eating \"+b+\" \"+a)}\n};\n\nlet human = { \n\tname:'human'\n};\n\nlet humanEat = animal.eat.bind(human)\nhumanEat('mango',10)\n&gt;&gt;VM3076:3 I human eating 10 mango\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-this-keyword\"><strong>JavaScript This keyword<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>this <\/strong>is an object whose property is the function\n<ul class=\"wp-block-list\">\n<li>ex : obj.func(this)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>function a is the property of window object<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function a()\n{ console.log(this); }\na()\n\n&gt;&gt;VM808:2 Window {parent: Window, opener: null, top: Window, length: 4, fra\n<\/code><\/pre>\n\n\n\n<p><strong>this gives excess of the object to its methods<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj={\n  name:\"Sam\",\n  sing(){\n    console.log(this.name+\" singing\");\n  }\n}\n\nobj.sing();\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>\n Sam singing<\/pre>\n\n\n\n<p> executes same code on multiple objects <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function getName() {\n  console.log(this.name)\n}\n \nvar name = 'Sunny';\nvar obj1 = { name: 'Cassy', getName: getName}\nvar obj2 = { name: 'Jacob', getName: getName}\n \ngetName()\nobj1.getName()\nobj2.getName()\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>\n Sunny\n Cassy\n Jacob<\/pre>\n\n\n\n<p>this is not lexically scoped rather it is dynamically scoped, which depends on where it is called<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj = {\n  name:'Sam',\n  sing(){\n    console.log('a',this);\n    var anotherfunc=function(){\n      console.log('b',this);\n    }\n    anotherfunc();\n  }\n}\n\nobj.sing();\n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>\n a {name: \"Sam\", sing: \u0192}\n b Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, \u2026}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-arrow-functions\"><strong>JavaScript Arrow functions<\/strong><\/h2>\n\n\n\n<p>To make this lexically bound, we can use arrow functions<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj = {\n  name:'Sam',\n  sing(){\n    console.log('a',this);\n    var anotherfunc = () =&gt; {\n      console.log('b',this);\n    }\n    anotherfunc();\n  }\n}\n\nobj.sing();\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Output<\/strong>\n a {name: \"Sam\", sing: \u0192}\n b {name: \"Sam\", sing: \u0192}<\/pre>\n\n\n\n<p>This brings us to the end of this article where we learned about the basics of JavaScript. To enhance your skills, you can take our free <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/introduction-to-javascript\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript Course<\/a>. Click the banner below to know more.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is JavaScript JavaScript is known as a scripting language for web pages that defines all the actions to be performed on a webpage. It is an object-oriented programming language that uses a JIT compiler. JavaScript, often referred to as JS, is widely used in applications such as web development and mobile development. It is [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":17233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"content_type":[],"class_list":["post-16930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Tutorial | Introduction to JavaScript<\/title>\n<meta name=\"description\" content=\"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tutorial | Introduction to JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-09T07:49:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T05:54:52+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Great Learning Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Great_Learning\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Great Learning Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"JavaScript Tutorial | Introduction to JavaScript\",\"datePublished\":\"2020-07-09T07:49:00+00:00\",\"dateModified\":\"2024-09-03T05:54:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/\"},\"wordCount\":2204,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/BLOG-Images_7-7-2020-03.png\",\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/\",\"name\":\"JavaScript Tutorial | Introduction to JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/BLOG-Images_7-7-2020-03.png\",\"datePublished\":\"2020-07-09T07:49:00+00:00\",\"dateModified\":\"2024-09-03T05:54:52+00:00\",\"description\":\"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/BLOG-Images_7-7-2020-03.png\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/BLOG-Images_7-7-2020-03.png\",\"width\":1000,\"height\":700,\"caption\":\"JavaScript_Tutorial_GL\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IT\\\/Software Development\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/software\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Tutorial | Introduction to JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Tutorial | Introduction to JavaScript","description":"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tutorial | Introduction to JavaScript","og_description":"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","article_published_time":"2020-07-09T07:49:00+00:00","article_modified_time":"2024-09-03T05:54:52+00:00","og_image":[{"width":1000,"height":700,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png","type":"image\/png"}],"author":"Great Learning Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Great_Learning","twitter_site":"@Great_Learning","twitter_misc":{"Written by":"Great Learning Editorial Team","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"JavaScript Tutorial | Introduction to JavaScript","datePublished":"2020-07-09T07:49:00+00:00","dateModified":"2024-09-03T05:54:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/"},"wordCount":2204,"commentCount":0,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png","articleSection":["IT\/Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/","url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/","name":"JavaScript Tutorial | Introduction to JavaScript","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png","datePublished":"2020-07-09T07:49:00+00:00","dateModified":"2024-09-03T05:54:52+00:00","description":"In this JavaScript tutorial, we are going to cover the very basics of javascript.JavaScript is easy, simple and very compatible with HTML and CSS.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png","width":1000,"height":700,"caption":"JavaScript_Tutorial_GL"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"IT\/Software Development","item":"https:\/\/www.mygreatlearning.com\/blog\/software\/"},{"@type":"ListItem","position":3,"name":"JavaScript Tutorial | Introduction to JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",1000,700,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03-150x150.png",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03-300x210.png",300,210,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03-768x538.png",768,538,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",1000,700,false],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",1000,700,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",1000,700,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",640,448,false],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",96,67,false],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2020\/07\/BLOG-Images_7-7-2020-03.png",150,105,false]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":1,"uagb_excerpt":"What is JavaScript JavaScript is known as a scripting language for web pages that defines all the actions to be performed on a webpage. It is an object-oriented programming language that uses a JIT compiler. JavaScript, often referred to as JS, is widely used in applications such as web development and mobile development. It is&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=16930"}],"version-history":[{"count":26,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16930\/revisions"}],"predecessor-version":[{"id":116482,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/16930\/revisions\/116482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/17233"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=16930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=16930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=16930"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/content_type?post=16930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}