Javascript Tutorial Series – Basics Of JS

This article is prepared to explain concepts that will be important for programming beginners such as data types, variables, heap and stack, and operators.

This Javascript tutorial series will consist of approximately 10 chapters. I will prepare a new one every week, save this article so that you don’t miss it, I will put the link below when I add a new one.

What is Javascript?

Javascript is a dynamic programming language mostly used in web browsers and server sides also it’s using on mobile app development.

Javascript is currently one of the most used programming languages according to Github. It is also an important criterion for job purchases.

Javascript has many useful libraries and APIs, server applications, web applications, mobile applications, artificial intelligence applications can be made with it.

Installing Node.js For Using Javascript on Terminal

You can use Node.js, a Javascript library, to run your javascript codes on the terminal. Click here for downloading Node.js on the official page.

Thanks to this library, you will have the opportunity to run your codes in the terminal instead of your browser, which makes it easy to learn the basics.

$> node

After the installation of Node.Js is complete, you can use the node command in the terminal to run it and check the installation is correct.

What is Node.Js & Why is Important?

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Node.Js is an open-source library that runs Javascript codes on the terminal outside of a web browser.

With the help of Node.js, you can create command-line tools and server-side scripts with Javascript.

In this series, we will use Node.Js only to run basic Javascript programs on the terminal, after finishing this series I will write a more detailed article about Node.Js.

Variables, Data Types & Type Conversion

Now that we have learned all the necessary information needed before getting started with Javascript, we can now dive into the basics of Javascript.

Data types are prepared to introduce data to a computer. A data type specifies what the variable stores.

Some programming languages require you to explicitly specify the data types of variables (static languages), and some languages do not need you to specify them (dynamic languages).

We have primitive data types and reference data types, primitive data types: string, number, bool, null, undefined. Reference data types are Object, Array, Functions.

  • String Data Type: Variables containing more than one character are of this data type.
  • Number Data Type: A data type that specifies decimals and integers in Javascript.
  • Boolean Data Type: Data type that stores logical data (takes a value of 0 or 1).
  • Undefined Data Type: When a variable is assigned, unvalued variables are called undefined.
  • Null Data Type: It is used to represent an empty value.

We can see the data type of a variable through the typeof function, now let’s explain these data types in more detail.

Primative Data Types

These data types we count can only take 1 value, for example, the int type can only hold 1 number and cannot keep 2 numbers in a variable.

Primitive Data Types; are the types of variables that carry data and fill the memory according to the data they carry. They take up little memory space.

1 – String Data Type

As we explained earlier, this data type allows us to receive only texts. We use the var construct when creating a variable in Javascript.

var txt = "Hello World"

You can specify the text with a ” sign or with a ‘ sign, if you are going to use one of these in the text, change the designation sign. Let’s give an example.

// Error
var txt = 'David's'

// Correct
var txt = "David's"

2 – Number Data Type

Unlike most languages, in Javascript all numbers are stored in a single data type, so every integer or decimal number variable you create is of the Numeric data type.

// Number Data Types
var dec = 12.5
var int = 12

// Write Screen
console.log(typeof(dec) , typeof(int))

// number number

“.” instead of “,” when specifying decimal numbers. should be used. Otherwise, you will get an error.

Number data type also stores other numeric data such as time, date, in short, every data written in numeric is in Number data type.

3 – Boolen Data Type

It is a logical data type, it can only take 1 (True) 0 (False) data, mostly used in conditional expressions.

# Method 1
var b1 = true
var b2 = false

# Method 2
var b1 = !!1
var b2 = !!0

!! We will refer to this structure again in data transformations. Both methods above are considered correct.

4 – Undefined Data Type

We said that when we don’t assign a value to a variable, that variable is undefined, now let’s look at how to use it in Javascript.

// Undefined
var x,y,z

// Undefined
var k,l = undefined, undefined

// String :D
var i = ""

Pay attention to the last example, initializing an empty string, that is, not undefined. Strings continue to be string even if characters are not enclosed in quotes.

5 – Null Data Type

Null is different from undefined. When you create a Null variable, memory space is charged, but the value is empty.

// Null Variable
var x = null

// Undefined Variable
var y = undefined

// Values is equal
x == y

// Type isn't equal
x === y

You can use this type of difference in your projects. A null value indicates that something pre-existing is currently absent, in undefined, there is nothing.

We’ll go into more detail about reference data types in future articles, but for now, let’s just take a quick look.

Referance (Non-Primative) Data Types

Reference data types hold the address instead of the data in the memory region, and the data is kept where that address points.

The subheadings in this section will be written to form the basis, and then we will examine all the topics here in more detail.

Referance Data Type vs Primative Data Types

We’ve made a small introduction to these two concepts before, let’s unpack it a bit and have a little more knowledge before we get into reference data types.

Javascript uses memory to store the variables you assign and we have two types of memory: heap and stack.

Stack: This memory section contains primitive data types, only values with a certain size are stored here.

Heap: Data types of uncertain size and structure are stored in this area. Objects and strings can change at runtime, so they are stored in this memory area.

When you check two values stored in Stack memory with the == operator, it compares their values, Heap checks whether the addresses are equal for values stored in memory.

1 – Javascript Objects

Generally, Reference data types are called Objects. The object type is passed as a custom type.

All other types are called “primitive” because their values can contain only one thing (a text or a number, etc.).

Rather, objects are used to store collections of data and more complex entities.

var coordinate= {
   city: 'Boston',
   country: 'USA',
   number : 1
}

console.log(typeof(coordinate)) // object

2 – Javascript Arrays

They are used to hold multiple variables, so they can mutate while the program is running, meaning they are stored in the Heap field.

var names =["Mikey" , "Takemichi" , "Draken"]
console.log(typeof(names)) // object

In the Objects and Objects section, we will also deal with how to create custom objects, now let’s look at the functions.

3 – Functions

In Javascript, functions also qualify as an object but are unique in type. They are similar to functions in mathematics, they take an input and perform an operation.

Since functions can be callable, they are separated from other objects, so the function is seen as a type instead of an object.

function sum(x , y)
{
  console.log(x + y)
}

// function
console.log(typeof(sum))

There are a few more sample data types in the Heap memory area, but since we’re looking at the basics of Javascript, I won’t get into them for now.

Operators in Javascript

Let’s see briefly how you can use operators that are frequently used in mathematics on Javascript.

var x = 12
var y = 5

// Addition: 17
console.log(x + y)

// Extraction: 7
console.log(x - y)

// Multiplication: 60
console.log(x * y)

// Division: 2.4
console.log(x / y)

// Exponential: 248832
console.log(x ** y)

// Floor division: 2
console.log(Math.floor(x / y))

// Modulus: 2
console.log(x % y)

All basic math operations are included in arithmetic functions: modulus, addition, subtraction, division, floor division, etc.

You can also use strings instead of numeric variables in Javascript for addition, it will be useful for text processing.

var txt = "Hello"
var txt2 = "Joe!"

// HelloJoe!
console.log(txt + txt2)

2 – Comparison Operators

Comparison operators are used to compare two values, and the result is given as a boolean. They are often used in conditional statements.

Some of these operators work on certain data types, but the equals operator works on all data types, let’s examine these operators now.

// 12 equal 12
console.log(12 == 12)

// 12 not equal 13
console.log(12 != 13)

// 12 is bigger than 8
console.log(12 > 9)

// 12 is smaller than 15
console.log(12 < 5)

// 12 equal or bigger
console.log(12 >= 13)

// 12 equal or smaller
console.log(12 <= 12)

The operators here allow you to create conditions on the program so you can modify your results according to the conditions.

Value Assignment Operators

These operators are designed to automate some value assignments, such as add, subtract, divide, multiply, etc.

var num = 121

// Adddition + Assignment
console.log(num += 12)

// Subtraction + Assignment
console.log(num -= 2)

// Division + Assignment
console.log(num /= 2)

// Multiplication + Assigment
console.log(num * 2)

This operator first applies the desired operation to the variable and then assigns the processed value to that variable.

Therefore, the variable you receive at the beginning specifies its new value every time it is written to the screen, the variable passed to the other operator stores the changed data.

Last Word

In the second part of this series, we will see conditional expressions and loops. You can save this article to be informed.

When a new article is uploaded, a link will be added at the end of the article. I hope you enjoyed the article, good coding.

Leave a Reply

Your email address will not be published. Required fields are marked *