DEV Community

Cover image for Getting started with JavaScript - Chapter 1 🚀
devlazar
devlazar

Posted on

Getting started with JavaScript - Chapter 1 🚀

Table Of Contents
* 🤓INTRODUCTION
* 🤔WHY LEARN JAVASCRIPT
* 👀COMPILING VS INTERPRETING
* 👨🏻‍💻JAVASCRIPT GRAMMAR
* ➕FUNCTIONS
* 😝FUNCTION EXPRESSION
* 🤷🏻‍♂️IIFE FUNCTIONS
* 🙏THANK YOU

🤓 INTRODUCTION

WELCOME, my dear coders, to the first chapter of the Getting started with the javascript series. I hope you are all having a great codelicious day! In the series, I will concentrate especially on the beginners. We will start from the very beginning and the very basics of the JavaScript programming language. So let's conquer the dragon and complete this quest that will improve and build your knowledge.

Here is a visual representation of the euphoria.
euphoria

🤔 WHY LEARN JAVASCRIPT

JavaScript is an important language because it is the language of the web browser. Its association with the browser makes it one of the most popular programming languages in the world. JavaScript is a scripting language and as with most scripting languages it is being interpreted, rather than compiled, so it is considered as a fast programming language (of course depending on the skills it may also be a slow programming language). The beauty of the javascript programming language si that when you make changes to your code - javascript script - you can test those changes immediately; You don't have to compile the script file first. Skipping the compile step saves a great deal of time during the debugging stage of Web page development. Last but not least, modern technologies provide you to use of javascript on the Front-End as well as on the Back-End, which is kinda neat, but the pros and cons of that approach are a part of a totally different topic.

⚙ COMPILING VS INTERPRETING

In the above section, I mentioned the "compiling" and "interpreting". And I feel obligated to explain as simple as I can, what the compiler is and what is compiling vs what an interpreter is, and what is interpreting.

COMPILING

In computer science, compiling represents the process of translating computer code written in one programming language into another language. The name compiler is primarily used for programs that translate source code from a high-level programming language to a lower level language (either assembly language, object code, or even machine code).

Different types of compiles:

cross-compiler

A compiler can run on a computer whose CPU or operating system is different from the one on which the code it produces will run, this type of compiler is called a cross-compiler.


bootstrap-compiler

A bootstrap compiler is written in the language that it intends to compile.


decompiler

A program that translates from a low-level language to a higher level one is a decompiler.


source-to-source-compiler

A program that translates between high-level languages

Compiler operations:

preprocessing

A preprocessor is a program that processes its input data to produce output that is used as input to another program.


lexical-analysis

lexical analysis, lexing or tokenization is the process of converting a sequence of characters (such as in a computer program or web page) into a sequence of tokens


parsing

Parsing, syntax analysis, or syntactic analysis is the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar.


semantical-analysis

Semantic analysis or context sensitive analysis is a process in compiler construction, usually after parsing, to gather necessary semantic information from the source code.[

INTERPRETING

In computer science, an interpreter is a computer program that directly executes instructions written in a programming or scripting language, without requiring them previously to have been compiled into a machine language program.

INTERPRETER OPERATIONS:

parse

Parse the source code and perform its behavior directly;


translate

Translate source code into some efficient intermediate representation and immediately execute this;


execute

Explicitly execute stored precompiled code made by a compiler which is part of the interpreter system.

👨🏻‍💻 JAVASCRIPT GRAMMAR

WHITESPACES

Whitespace can take the form of formatting characters or comments. Whitespace is usually insignificant, but it is occasionally necessary to use whitespace to separate sequences of characters that would otherwise be combined into a single token.

COMMENTS

Block comments - /* */
Line ending comments //

NAMES

A name is a letter optionally followed by one or more letters, digits, or underscores. A name cannot be a keyword:

  • abstract
  • boolean break byte
  • case catch const continue
  • debugger default delete do double
  • else enum export extends
  • false final finally for function
  • if implements import in instanceof int interface
  • long
  • native new null
  • package private protected public
  • return short static super switch synchronized
  • this throw throws transient true try typeof
  • var volatile let void
  • while with

STRING

A string literal can be wrapped in single quotes or double-quotes. It can contain zero or more characters. The \ (backslash) is the escape character.

FUNCTIONS

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of the recursion) to the function. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects. Every function in JavaScript is a Function object. See Function for information on properties and methods of Function objects.

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of this parameter. For all other functions, the default return value is undefined.

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function.

Function declaration:

function name([param[, param[, ... param]]]) {
   statements
}
Enter fullscreen mode Exit fullscreen mode

name - The function name.
param - The name of an argument to be passed to the function.
statements - The statements comprising the body of the function.

THE FUNCTION EXPRESSION

A function expression is similar to and has the same syntax as a function declaration. A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions.

Function expression:

function [name]([param[, param[, ... param]]]) {
   statements
}
Enter fullscreen mode Exit fullscreen mode

name - The function name. Can be omitted, in which case the function becomes known as an anonymous function.
param - The name of an argument to be passed to the function.
statements - The statements comprising the body of the function.

THE ARROW FUNCTIONS

An arrow function expression has a shorter syntax and lexically binds this value

([param[, param]]) => {
   statements
}

param => expression
Enter fullscreen mode Exit fullscreen mode

param - The name of an argument. Zero arguments need to be indicated with (). For only one argument, the parentheses are not required.
statements - Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.

IIFE FUNCTIONS

Immediately Invoked Function Expression is a JavaScript function that runs as soon as it is defined.

(function () {
    statements
})();
Enter fullscreen mode Exit fullscreen mode

Example of an IIFEE FUNCTION:

var result = (function () {
    return Math.PI;
})();
// Immediately creates the output:
console.log(result); // "3.141592653589793"
Enter fullscreen mode Exit fullscreen mode

🙏 THANK YOU FOR READING!

References:
School notes...
School books...

Please leave the comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!
Buy Me a Coffee at ko-fi.com

Have a nice time hacking! 😊

Top comments (4)

Collapse
 
aalphaindia profile image
Pawan Pawar

Good content!!

Collapse
 
devlazar profile image
devlazar

Thank you for your support, I'll keep doing the good work! 🚀

Collapse
 
sanjaysinghrajpoot profile image
Sanjay Singh Rajpoot

nice

Collapse
 
devlazar profile image
devlazar

Thank you for your support! 🚀