JavaScript 101: Ultimate JavaScript Guide.

Published: 2022-02-26 15:46:00

In this guide, I am going to run you through everything you need for you to get started with Javascript or atleast the most important things that will get you started with Javascript. This is from the most commonly used editors you can use to the most important concepts you need to keep in mind to get started.

**CONTENT**

* Introduction 
* Integrated Development Evironment(IDE)
* Hello World in Javascript
* Variables
* Operators(Arithmetic)
* Data Types
* Further Reading
* Summary

**Introduction**
 
Javascript is a cross-platform, object-oriented programming language that is used to make web sites/pages/apps interactive. According to [stack overflow's developer survey of 2021] (https://insights.stackoverflow.com/survey/2021?_ga=2.252103497.1966952700.1645882950-1295647161.1645882950#technology-most-popular-technologies), it remains the most popular programming language. Javascript can be used for the creation of a vast of applications (both web and mobile). In the most basic sense, it is used to make responsive websites/applications. For instance, clicking a button and it responds by taking a specific action as specified.

**Integrated Development Evironment(IDE)**

An integrated development environment (IDE) is software for building applications that combines common developer tools into a single GUI. There are a lot of IDEs or editors that you can use to get started with javascript. The following are my top 5 IDEs reccomendation for Javascript: 

1. [Visual Stuido Code] (https://code.visualstudio.com/download)
2. [Atom] (https://atom.io/)
3. [Brackets] (https://brackets.io/)
4. [Sublime Text] (https://www.sublimetext.com/download)
5. [Chrome DevTools] (https://developer.chrome.com/docs/devtools/console/javascript/) Not really an IDE :joy:

**Hello World in Javascript**

To get started with writing your first line of code, download Visual Studio Code or any other IDE of your choice (I will use VSCode for the guide), when its done downloading, open it up. You will see the welcome page. On the welcome page, click on **Open** then **Create a folder**. Once that is done, the created folder will be your wotking directory in VSCode. You can then click on the Create File icon as shown below:

![Screenshort of the Visual Studio Code create file icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spo1kmb556ggtjnmdtwr.png)  

After that, create a file with the name of your choice. The file extension should always be **.js**. I will name mine **HelloWorld.js**. Once created, you can then write the following line of code:

`console.log('Hello World')`

After that, switch to the 'Debug Console' tab, hit the debug button in the left nav bar, and click the run icon (play button)! and Violla!!!!! your code runs!
**Note:** The Debug Console *Requires nodejs to be [installed](https://nodejs.org/en/download/)!*

**Varibles**

Variables are containers for storing data (storing data values). Variables are decalred i.e is given a data type and a name. However, when '=' sign is used to assign a value to a variable, then it's called assignment. The four ways to Declare a JavaScript Variable are:

* Using var e.g `var a = 2+3`(assignment)
* Using let  e.g  `let a = 2+3`(assignment)
* Using const  e.g  `const a = 2+3`(assignment)
* Using nothing  e.g  `a = 2+3`(assignment)

From the examples above, you can easily tell that a stores the answer to the expression, so a will contain the answer **5** in all the examples. This tells us that we should always declare JavaScript variables with var,let, or const.

The var keyword is used in all JavaScript code from 1995 to 2015. The **let** and **const** keywords were added to JavaScript in 2015. If you want your code to run in older browsers, you must use **var**.

Wondering what the difference is among these? Well, if you want a general rule: always declare variables with **const** but if you think the value of the variable can change, use **let**.

**Operators**

| Operator | Description |
| --- | ----------- |
|+|Addition|
|-|Subtraction|
|*|Multiplication|
|**|Exponentiation (ES2016)|
|/|Division|
|%|Modulus (Remainder)|
|++|Increment|
|--|Decrement|

**Assignment**

|Operator|Example|Same As|
| --- | ----------- | ----------- |
|=|x = y|x = y|
|+=	|x += y	|x = x + y|
|-=	|x -= y	|x = x - y|
|*=	|x *= y	|x = x * y|
|/=	|x /= y	|x = x / y|
|%=	|x %= y|x = x % y|
|<<=	|x <<= y|x = x << y|
|>>=	|x >>= y|x = x >> y|
|>>>=	|x >>>= y|x = x >>> y|
|&=	|x &= y	|x = x & y|
|^=	|x ^= y	|x = x ^ y|
|**=	|x **= y|x = x ** y|


The next concept you need to learn is about data types.

**Data Types**

JavaScript variables can hold different data types: numbers, strings, objects and more. To be able to operate on variables, it is important to know something about the type. Without data types, a computer cannot safely solve some expressions such as this:

`const x = 2 +'Jackson'` run this expression in VSCode and you will get the answer //16Volvo

**Note**: *When adding a number and a string, JavaScript will treat the number as a string*.

**Further Reading**

Upto this point, you have a basic understing of how to go about coding in Javascript. The next step you should take is to read more on platforms such as:

- [w3schools](https://www.w3schools.com/js/default.asp)
- [javaScript info](https://javascript.info/)
- [web platform](https://webplatform.github.io/)

**YouTube Recomendations**

{% embed https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET %}
{% embed https://www.youtube.com/watch?v=2Ji-clqUYnA&t=22037s %}

**Summary**
Always remember that progamming is like an actual language such as English. Thus, for you to be good at it, you need to consistently practice.

Wishing you all the best!