Learn to Code via Tutorials on Repl.it!

← Back to all posts
🎇Node JS Crash Course 🎇 [1000 Lines]

JavaScript Tutorial

Welcome to this complete JavaScript tutorial, enough to get you kickstarted into learning the complete JavaScript language.

Course Content:

  • What is JavaScript?
  • Where does JavaScript code run?
  • Running JavaScript code on Google.
  • Running JavaScript code on an editor.
  • Installing Node.JS
  • Actual coding:
    • Comments.
    • Variables.
      • What are variables?
      • Variables in JavaScript
      • Strings.
        • Escaping string literals
    • Arithmetic Operations
      • Addition
      • Subtraction
      • Division
      • Multiplication
      • Remainder
      • Incrementing
      • Floats
      • Augmented Operations
    • String Manipulation
      • Using single quotes
      • Escape Sequences
      • String Manipulation
      • Finding items in a string.
    • Exercise 1
    • User Input
    • Converting Data types.
    • Arrays
      • Single Arrays
        • Accessing Array Data
      • Nested Arrays.
        • Acessing Nested Array Data
      • List manipulation.
        • .push()
        • .shift()
        • .unshift()
        • .pop()
    • Object literals
      • Accessing Object Data
    • Functions
      • Parameters and Arguments.
      • Global vs Local
    • Boolean values.
    • typeof to get data type.
    • If statements.
      • If statements' operators.
      • and and or
      • Else statements
      • Else if statements
    • While loops.
    • Switch Statements

What is JavaScript?

JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions. JS, was introduced by Brendan Eich in 1995, and since has grown to be one of the most popular programming languages for large companies like FAANG(Big Tech) on an average salary of $70,000 in the U.S. With JS, you can become either a Front-End-Developer, a Backend-Developer, and even a Full-Stack-Developer. 97% of the websites uses JS to interact with their pages. YEAH let that sink in .

So, why not start learning it already when it is extremely easy to use and write the language?

Where does JavaScript code run?

JavaScript was initially designed to only run on browsers. On Mozilla, the JS Engine was called SpyderMonkey and on Google, it was called V8. Up until 2009, this was the case, when an extremely clever engineer called Ryan Dhal took the open-source JS Engine in Chrome and embedded it into a C++ program. He called it Node. Soo, basically, Node is a C++ program that allows us to run JS outside of Google.

Hope, I haven't bored you yet. DW, the interesting part is starting lol.

Running JavaScript code on Google

Now, I am going to show you how we can run JS on Google, like I said, using the JS Engine inside Chrome. So..

  • Go to Chrome and right-click the main screen.
  • Hit inspect
  • Go to the console tab.

I assume everyone knows how to do this so I will not add pictures.

To test if your console is working, type in console.log('Hello, World!');. This is a little "Hello, World!" program in JS. Use it to test the console. You should see an output displaying: Hello, World! right under your line of code.

Note: It doesn't matter if you put the semi-colon or not, but it is best practice to put one.

Running JavaScript code on an editor

Now you can't just use google to run all your JS, beacause there is no way to properly save the code you write. For actual code compiling, debugging and plugins, we need a Code-Editor. There are amazing editors out there that you can download. Or you can just use the amazing Replit IDE you are already on. Nevertheless, here are a few editors you can download:

Installing Node.JS

I would also recommend downloading Node as it is very useful and comes in handy when downloading "third-party-libraries" which are very helpful when developing apps and games using JS. For this tutorial though, I will be using Replit as it is the fastest, easiest and the best way to write Code efficently and quickly. So, if you haven't already, go make a Node.js Repl on your replit. Or click here to make one.

NOW!!! Let's get started with actually JavaScript learning and forget the boring stuff.

Actual Coding:

Lets get started with learning JS:


I just wanted to add a little note about comments in JS. Comments in programming generally are a bunch of lines that are there to add context to code. They are not interpreted as code, rather they are ignored and are just there so that other programmars can see those comments and understand what is happening in the code. Comments in JavaScript are defined using two slashes, //. Here is an example:


What are variables?

Variables, the most important concept in JS and in any programming language, are used to store data temporarily in the computer's memory. So variable is we storing our data somewhere and allocating it with a name. With this, we can read the data at the given location using the variable name later on and modify it the way we want. Think of variables like algebra. We assign a value to a variable like: x = 5. In this case, x is the variable. Here is a little metaphor to understand variables.:

Let's say we have a few boxes. Each box contains things like stationery, books, devices, etc. Then to remember what box contains what, we put a label on each of the boxes, with keywords. "Stationery", "Books" "Devices". This way, we remember what thing is in what container. Variables are the same exact thing, but in programming. In programming, the variables' name would be the labels, the value in the variable would be the box contents, and the memory allocated into the computer, would be the box itself.

Variables in JavaScript.

Up until the release of ES6, the standardized version of JavaScript, the practice of defining a variable in JavaScript was using the var keyword. But after its official release, defining a variable is best using let. There is a slight difference between these two keywords. The difference is the scope of the variable. The var keyowrd provides a global scope, meaning that it can be used in the entire function block. Where is let, is used in the enclosing function block, meaning it can only be used in the function itself. For more info on this, read this SO page that explicitly explains the differences between these two ways of defining variables.

Now, after we have written let, we can give a name or an identifier to our variable. This is the variable name. We can call it whatever we want as long as it meets the rules of defining a variable. There are a few ways you can define a variable. Here are the common conventions:

And these are rules that should be followed:

Now, if we use console.log(name); to actually print out the value associated with the name variable, we will see in the output, that it is undefined:

This is because there is no value given to the variable. To actually give a value to a variable, we have to use an = sign:

Now, because the variable name is set to a string, "John", the name's value is John. So when we print out the value of name, we will get the output as John:

BTW, the "John", the value set to name is called a string. A string is a sequence of characters. You can set it to anything you like and it will be printed out. A string can be either double quote, "<string>" or single quote, '<string>' . It evaluates as the same thing.

Arithmetic Operations.

There are four main operations we learned in math:

  • addition : +
  • subtraction : -
  • multiplication : ×
  • division : ÷

These are the normal symbols we use. But in programming, there is a slight difference. Division and Multiplication symbols are differenct and there are a few more operations. Here are the examples with the outputs:

  • Addition:

    • Output:5
  • Subtraction:

    • Output: 1
  • Multiplication:

    • The symbol for multiplication in JS is *
    • Output: 6
  • Division:

    • The symbol for division in JS is /
    • Output: 2
  • Finding only the remainder of a an improper division:

    • We can find only the remainder of a division using the % symbol
    • Output: 1 .
      Because, ³⁄₂ = 1 ½, so 1 is the remainder
  • Floats:

    • Floats are literally decimal numbers in JavaScript. They can also be referred to as doubles.
  • Incrementing.

    • You can add to variables using ++ or by simply using a number.
    • Output: 10 .
  • Augmented Operations.

    • Augmented Operations is basically using operations on variables defined to numbers.
    • Output:

String Manipulation

Using single quotes.

When using a type of quote in a string, the quotes you use outside would be the opposite as not to confuse the IDE. Or you can use a backslash \ to prevent this. Here are quick examples:

Escape Sequences.

Escape Sequences are used to manipulate a string using a backslash and a letter. There are 6 main escape sequences(other than the ones i already told you).

  • \n Creates a newline:

    • Output:
  • \r Creates a Carriage return. Replaces the characters after the sequence with the ones behind the sequence.

    • Output: Hello
  • \t Creates a TAB.

    • Output: Hello... BYE
  • \b Erases the previous character and replaces with the character after the sequence.

    • Output: Hello
  • \f Forms a feed, i.e A \n with a \t

    • Output:
  • Concatenating a string.

    • You can add two strings using a + operator.
    • Output: Hello, John
  • Concatenating a string using +=.

    • You can add two strings also using a += on another line. You can also do this with variables.
    • Output: Hello, John

Finding items in a string.

JavaScript allows us to find things in a string, for example the length of the string, the nth character, the last character etc.

  • Finding the length of a string.

    • We can find the length of a string using .length in JS. It will return the number of characters in the string, including spaces if there are any.

    • Output: 4

  • Bracket notation.

    • Bracket notation can be used to find the index of a character in a string. The brackets we use are squre: [] and the first index starts with the number 0.

Exercise 1

This is an exercise for you. Here is the prompt:

Write a program that is going to use augmented operations to write a BODMAS (Brackets, Orders, Division, Multiplication, Addition, Subtraction.) to print an answer of 9. Use the numbers 3, 6, 2, 8, and 4 only. Use variables from 'a' to 'e' for each of the number. Then use the variable calculation to do the math using the varaibles. Next, print out the following sentence in the exact fomat using string concatenation and escape sequences.

Note: Use only string concatenation.

Solution, Exercise 1.


Hope you got it.

User Input.

We can get user input in JavaScript using the prompt function, which is defined to a variable name. The prompt asks the user to input something. We can use that input to print out fancy things.

So if we input John, we will get, Hello, John. Welcome to JavaScript..

Converting data types.

We can change an integer to a string and vice versa in JS. We can do that using the parseInt and toString methods. To do that, we can define a varibale, and use these functions to convert them into a different datatype.


Single Arrays

Arrays in JS are basically lists, that can contain items and can be modified. The syntax of writing an array is using a set of square brackets [], and inside, the items separated by commas. Lets define an array:

Accessing Array Data

We can access array data using the same way we access data and characters in a string. We can use the index of the list, once again, starting from 0.

Nested Arrays.

Nested Arrays, or Multi-Dimensional Arrays in JavaScript and in any other programming language, are a bunch of lists contained inside another list. The arrays in the larger array are treated as single elements and are separated by commas. Here is an example:

Accessing Nested Array Data

Accessing data in Multi-Dimensional Arrays is the same as accessing elements in normal arrays, except first we need to refer the index of the list in the array, and then the elements in the list. Here is an example:

This is helpful if we want to print out information from the lists into a nice statement like:

Output: One of my favorite movies is Avengers: Endgame, directed by Russo Brothers.

List manipulation.

  • .push()

    • We can add elements into an array in JavaScript using the .push() function. The push() function will ad an element to the end of an array. We know it is a function because of the parentheses in the end.

  • .unshift()

    • .unshift() is the same as .push() but, .unshift() adds elements to the start of the list.

  • .pop()

    • We can remove only the last element in an array using the .pop(). This will then return the same array without the lat element, so then the new array's last element will be the second last of the initial list.

  • .shift()

    • .shift() is the same as .pop() but it is the opposite. .shift() removes the first element from the array, not the last.

Object Literals

Objects in real life are literally things that have propetrties, like a bag is an object, it's color is its property. The same way, objects in JavaScript are the same, but we use key:value pairs to define them. The value is defined to the key using a colon. This is an example of an object in JavaScript.

As you can see, you can have multiple objects in an object. And all new objects are separated by commas.

Accessing Object Data.

We can access data in Objects using a . after the name of the object and referring to the key name, which would give us the value. So to access the place where replit was founded, the placeFounded key, we do this:

This will return the value for placeFounded, which would give us San Francisco.

To access the data inside another object in the object, we will use the . to access the object, and then another . to access the keys inside that object.

So first we will access the funds object and then inside we will access fund1.


Functions are used to "encapsulate" a few lines of code that are meant to accomplish a specific task. Once a function is written, it can be used over and over and over again. Functions can be "called" from the inside of other functions. The syntax of defining a function is using a pair of brackets after the function name which comes after the keyword function and all the code that has to be executed in a pair of curly brackets.

Now if you run the program, nothing happens and that is because the function gets allocated into the computer's memory, but doesn't get called, and thus nothing happens. To actually interpret the code in the function, we need to call it.

Parameters and Arguments.

Arguments are values that can be input into the function that can be given when calling the function. Parameters are the values that is given by the arguments. Confusing? Let me explain practically.

Returning a value from a function.

A return statement simply returns a statement. Instead of console.log(), we can just use return. Although, console.log() is a function used to print information to the console. return on the other hand is a call to pass some value back up to where the call was made. Here is an example:

Global vs Local.

Global scope is when a variable is defined outside a function. This variable can now be used anywhere in the whole code, in any function. For example this code has a variable defined outside the printNumber function. So, it can be used in any function:

Local scope is when a variable defined in a function can only be used in the same function block, and will not work in other functions.

But here, we get an error : number is not defined, which is because the scope of the variable number, is only limited to the function printNumber .

Boolean values.

Boolean values are simple values that evaluate to true, or false. They are basically like on and off switches, were on means true, off means false. All numbers return true, except 0 which return false.

Getting to know the data type.

We can know the data type of a variable using the typeof.


If statements.

If statements are basically conditionals, they are used to make decisions. If statements are english like and do something, if something is what we have set it to be. Here is how we would define an if statement. The == operator compares the value or equality of two objects.

If statements' operators.

Operators in if statements consists of ==, >, >=, <, <=. These are just like math inequalities. Here is an example:

Note: If we don't put any operator, then it is going to check the boolean value of the value and execute code if it is true.

Else statements.

Else statements do something if the previous conditionals do not meet the requirement.

"Nope, you are too old." will be printed out because age is less then 18 and all other ages under 18 will be ignored.

The && and ||.

&& means and and || means or. && compares all values and if they are true, the code will run. The ||, will run if either of the given conditions evaluate to true.

Else If Statements.

Else if statements are executed after the initial if statement.

While loops.

A while loop will run as long as some conditional is true. While loops are english like. "While something is true, run this code."

But this will run forever an never stop. To stop the program once it has done what we want, we use a break statement.

Switch Statements

Switch statement are used to perform different actions in different conditions. They are basically used to avoid repetition of if statements. Here is the syntax of writing a switch statement, which is usually embedded in a function.

Lets make a switch statement that relies on user_input to print out the name of the day, relative to the number. Try it out yourself first. Here is my solution:


I used parseInt to convert the user input into an integer because it is initially a string.


I hope this course is enough to build your foundations on JavaScript and its syntax. There are many courses on YouTube that build more knowledge on these topics. Here are a few on Youtube:


Credits to @OldWizard209 and @0ldWizard209 's brain for contributing to 100% in making the tutorial. Also thanks to @Th3Coder for picking out spelling mistakes and asking me to add a few more touches.

And also, there are tons of mistakes in grammar and spelling. So if you find any, tell me and I will fix it 🤙🤙🤙

A tutorial... that's not for Python...?


Yeah, I kind of started getting annoyed by the number of Python tutorials there were and how no one made a real comprehensive tutorial for other languages, so I made this. @RayhanADev


@OldWizard209 ✨ awesome ✨


thanks, man. @RayhanADev


Really cool!

JavaScript (often shortened to JS)

Lol when I read this sentence, it reminded me of how some people incorrectly think that Java is short for Javascript xD

Also, you could add that you can use multi-line comments (/* */) instead of individually commenting out each line with (//):

And I saw someone suggested adding for loops; why don't you add them? You could add them in a Loops section with the while loops. :)

Anyways, great tutorial! :D



Lol when I read this sentence, it reminded me of how some people incorrectly think that Java is short for Javascript xD

So true. I have also seen many people confuse java with javascript. Mainly because they are both popular, and were released in a one-year gap.

About the comments, yeah I didn't talk about multiline comments. Imma add it dw.

I will add for loops soon. Blame school. @Bookie0

and lastly, THANKS.



@OldWizard209 Lmao alright.
No problem! :)




Thanks :P. @ComputerProgr29


Thanks for all the hard work you put into this. Updoot :)


thanks. or should I say you are welcome? @codingjlu

And also, there are tons of mistakes in grammar and spelling. So if you find any, tell me and I will fix it 🤙🤙🤙


So here you mistyped the off:

Here, you mistyped Statements and both Numbers.

Here you mistyped program and doesn't:

...keyword and are...


...and that's all I found! (There could be more though)

Don't worry though, in my previous tutorial I also made so many typos! I fixed most of them by now!

Also, you can add for loops, alert, confirm, switch cases, document objects, and importing modules!

Nevertheless though, I absolutely like it! Keep up the good work...

...and congrats on getting to the HOT section!


Thank you so much!! I learned a lot


Thanks. Hope it is useful, stay tuned for more topics coming on this. BTW, you can make a new comment also... @fifa21coin

  1. Thanks for the grammar errors corrections.
  2. Fixed all of them.
  3. I didn't add for loops because they are a little complex and need three different things you need to define. I will add them though.
  4. alert, confirm and document are not added because they require HTML and I don't want to go over HTML in an only JS Course.
  5. Switch is coming...

    "...and congrats on getting to the HOT section!"

Also, I got Grammarly to fix all the mistakes which you missed. OFC, you are not a computer. NEvertheless, I appreciate your effort in catching these mistakes. Thanks once again.



@OldWizard209 you're welcome!

Oh yeah, when comparing values with 0, true, or false we need to use triple (yes, triple) equal signs! ===

You can explain the pass and continue keywords as well!

Also, this might help to resolve errors:

Also, I like your explanation. Very clear and good!


@OldWizard209 btw the off typo is still not fixed. You can add toString and parseInt as well! (Sorry if this too much to add though XD)


Here is my explanation:


Off is the opposite of on. As in switch on the light, opposite will be, switch off the light. So the off I used was to express the switch the false boolean value throws...


Of is used to express the relationship between two things. So I am not expresiing any relation over here.

Now this is google's defenition of OF
and google's definition of OFF
Now. You decide what is correct.


@OldWizard209 well, switches have 2 values which are on and off...


soo... ? @Th3Coder


@OldWizard209 no, what I mean is this typo:

Also, no tutorial is complete so I suggest you to change the title!


oh, you were talking about that. Sorry. @Th3Coder

Also, no tutorial if complete so I suggest you to change the title!

ANd, if you will be soooo pushy, FINE, i will change it...


@OldWizard209 oh sorry if I'm actually THAT pushy XD


First - really nice tutorial. I have used JS a little bit before and this was a nice refresher.

You might add a little bit in the "if statements" section about what evaluates to true or false. For instance, you have

In this case, number evaluates as true, because number is nonzero.
I believe (in JS) a string evaluates as true, unless it is an empty string, like

On another note, there was a bit of confusion for me on the else section. After the else, there is

console.log("Nope, you are too old.")

I think you meant to type "Nope, you are too young." or "Nope, you are not old enough."

Again, good stuff here, and thanks for taking the time to write this up!


Wow nice content :D


Thanks! @reshammalla


Good Crash Course

Very good Tutorial!


THANKS!!! @codermaster8


I did not read it though but I just think it looks good :) @OldWizard209


lol thanks :P. @codermaster8


Great job!


Thanks!!! @RolandJLevy


I only knew HTML,CSS, and basic JS functions, but now, i no longer have to be ashamed of my lack of JS knowledge, i can finally say i know it all! Proceeds to not understand tutorial


lol, thanks. I you need any help, feel free to ask me. @bwoop


@OldWizard209 And congrats on making the monthly replit thing


oh yeah, thanks. @bwoop


The one thing you should have covered for loops. Before this i only knew processing javascript and now i know more. yay


Great tutorial man


Thanks bro :P. @CarlosEduard225


Most of the people already said the suggestions or mistakes in the tutorial so yeah. Epic tutorial by the way.


Thanks. :) @IcynDevz


thumbs up, helped me learn js


Great!! I am glad I was able to help. @FlaminHotValdez


I like it but the it could be structured way better


@Th3Coder , I added switch, typeof, parseInt, toString. I will not add for loops for now. Is the information right? Thanks in advance.


@OldWizard209 great! The information is correct!


use that for anti-cheating


so. What does this do? @ch1ck3n


@OldWizard209 it prevents ppl from cheating using the e console


Note: It doesn't matter if you put the semi-colon or not
best practices to put semicolons, though


Yeah, i know. But I said that for people comming from different coding backgrounds. Like in Python, colons are not used. So most of the time, people who used python, will forget the semi-colon. But I will add that it is best practice tho. Thanks @ch1ck3n


WOOW. I am already a full stack developer and dont need this, but this tutorial is sooo comprehensive and amazing. I love the hardwork. KEEP IT UP.


really? thanks. Can you give me a few tips on what can be improved in this tutorial? @ChopSueyMaster


yes. really,,, @TestOP


@ChopSueyMaster I cannot believe that at all. I looked at your repls. Not full stack, I even don’t think I’m full stack or even that great and I have been doing this for 2months. And still suck


bruh. I have been doing this for years. And btw, I work for a company and most of the projects are made on their computer, i have at home, mainly atom and vs code. I barely put anything on replit. Only if I want to use it ony my computer, which I rarely ever do. I only made a replit account to access my projects on my own laptop, but haven't used it yet.. @TestOP


This is a great tutorial!