Learn JavaScript - Beginners

Learn JavaScript - Beginners

Guide to help you get started with JavaScript

Introduction

Let's start with what is JavaScript?
Often called JS is a programming language and a core technology of the Web alongside with HTML and CSS. It allows you to implement complex functionalities on the Web.

Let's say you have a webpage with all styles and forms, for example:

The structure is made with HTML, like titles, paragraphs, buttons. The colours, spaces and visual effects are made with CSS.

When you click on the button "Learn more" you would expect some action to happen, like to be redirected to a dedicated page with some info and contacts or some dynamic window to pop with a text, you know what I mean? Well in that case JavaScript comes to the rescue.

JS is to make web pages interactive and when you click on the button "Learn more" it will do it's work.

Click Button GIFs - Find & Share on GIPHY

How to get started and how to use it?

JavaScript is pretty dynamic, you are not very limited when you code, it has a more flexible and dynamic syntax with loose typing and allowing for faster development, unlike other languages like C# and Java (which are pretty good though 😎).

To get started let's learn the basics of the language.

Variables

In programming variable is a container that stores value. You can store numbers, texts and others.

You start by declaring a variable with the let keyword, followed by the name you give to the variable:

let myVariable = 1

You can name your variable anything, however there are some restrictions because JavaScript is case-sensitive, for example, in a case sensitive system, "hello" and "Hello" would be considered two different words.

Let's declare new variable called "Kitty".

let myCat = "Kitty"

We can see the result of our variable by using the console.log() static method which outputs a message to the console.

Now we can play around by changing the value of our variable:

console.log(myCat)
Result: "Kitty"

myCat = "Tom"
Result: "Kitty"

We can change the value inside our variable which makes it pretty flexible.

We can also make arithmetic operations inside a variable, for example:

let a = 3
let b = 4
let sum = a + b

console.log(sum)
Result: 7

Primitive Data types

Now we saw how to declare a variable with let with a random value inside, but we are not limited to only text and numbers, variables may hold values that have different data types, let's see what are those types.

Every Variable has a data type that tells what kind of data is being stored in a variable. There are two types of data types in JavaScript.

  • Primitive data types

  • Non-primitive data types

The predefined data types provided by JavaScript language are known as primitive data types. Primitive data types are also known as in-built data types. Let's see what are the primitive data types:

VariableExplanationExample
StringWe saw it in the previous example, I called it text but in the programming language it is called a string. To signify the string you need to add single or double quote marks.let myCat = "Kitty" or let myColour = 'Red'
NumberThis is a number. Numbers don't have quotes around them.let myVariable = 10
BooleanThis is a True/False value. The words true and false are special keywords that don't need quote marks.let myVariable = true;
let myVariable = false;
UndefinedThe meaning of undefined is ‘value is not assigned’.if you don't initialise variable with let it will be undefined:
console.log(typeof x) will be undefined
NullThis data type can hold only one possible value that is null.let x = null;
BigIntThis data type can represent numbers greater than 253-1 which helps to perform operations on large numbers.let bigNum = 123422222222222222222222222222222222222n
SymbolThis data type is used to create objects which will always be unique.let greet = Symbol("hi")

Don't worry if you are confused with some of them, while learning and writing code it will come up naturally.

It's good to learn at first the String, Number , Boolean and Undefined as they are used mostly.

Non-primitive data types:

The non-primitive data types are 2 - Object and Array

Object

The object type is an entity having properties and values. It is wrapped in brackets and you can tell the name of the property and it's value - { key: value }

Let's see a real example:

let person = {
  name: "John",
  age: 30,
  address: "London, UK",
  married: true,
};

As we see it can hold any data value and the key should not have spaces.

Array

Imagine a basket full of fruits, it can store apples, kiwis, bananas.. An array is something similar. A basket which can store data types. It is a square brackets wrapper - ['apple', true, 23]

Let's see a real example:

let fruits = ['apple', 'banana', 'kiwi'];
let person = ['Mia', 34, true];

You can see it also like this:

let fruits = new Array('apple', 'banana', 'kiwi')
let person = new Array('Mia', 34, true);

Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).
- W3Schools

A function takes input, processes it and returns a result.
Inputs are the parameters you define when you declare the function and outputs are the values returned by the function.

Let's see an example:

function sum(a, b) {
    return a + b;
}

let result = sum(1, 2);
console.log(result)
Result: 3

// or directly log it:
console.log(sum(40, 50)) Result: 90
console.log(sum(100, 120)) Result: 220
console.log(sum(345, 2)) Result: 347

We can call it as many times as we want with different parameters and then returns a result. Keeping our code organised, reusable and easier to manage.

Now what?

This is the essential starting point of knowledge you need to start your programming journey. The process is very simple, just start with the basics:

We Got This Meme GIFs | Tenor

  • Start with declaring a variable

  • Addprimitive/non-primitive data type to this variable (number, text, etc)

  • Create a basic functions and add log the variable you just created :)

Where to write my code?

I prefer to use something easy and lightweight, sutable for all kind of machines, here are my personal favourites:

  1. Visual Studio Code - my favourite since day 1, easy download it and start coding

  2. Sublime Text - again very light and easy to use

  3. Notepad++ - my first code was on Notepad++ it's pretty simple and nice to use

Conclusion

For beginners, JavaScript is an ideal language to start with because of its versatility and the vast ecosystem surrounding it. It's easy to pick up the basics and start building projects quickly, which means you can see your progress and create something tangible early on. This immediate feedback is incredibly motivating and can keep you engaged as you dive deeper into more complex concepts.

Moreover, JavaScript isn't just limited to the front-end of websites. With the rise of technologies like Node.js, it has become a full-stack language, meaning you can use it for both client-side and server-side development. This flexibility ensures that the time and effort you invest in learning JavaScript will pay off in many different areas.

By mastering JavaScript, you're not just learning a programming language—you're unlocking the potential to create, innovate, and contribute to the digital world. So, let's start this exciting journey together, and watch as your skills grow and your confidence as a developer soars!

See You Soon GIFs | GIFDB.com

Thanks for reading this article, hope it was helpful! You can do this, with some practise you will get into it in no time! 😊 ⭐️