JavaScript Basics

Photo By Greg Rakozy on Unsplash

JavaScript is a programming language used to make web content dynamic and interactive. JavaScript is one of the three core web technologies, along with HTML and CSS. In this article, I’ll explain the basics of JavaScript as well as some fundamental concepts that are important to understand.

In the Indonesian dictionary (KBBI), a variable is described as something that can change or vary. So, in the context of programming, a variable is a symbol used to store data, and that data can change over time.

In JavaScript, variables are written starting with the `var` keyword. Take a look at the example below:

var a = 5;
var b = 7;
var hasil = a+b;
console.log(hasil);

All JavaScript variables must have unique names. This means that if you want to store different values, the variable names must differ from those you’ve already declared.

For example, if you want to store your birth year in a variable called year, then for the current year you shouldn’t use year again but could use something like `yearNow`. This unique name is called an identifier. Identifiers can be short (like x and y) or more descriptive (such as age, total, totalVolume, etc).

Some general rules for writing JavaScript variables include:

• Variable names can contain letters, numbers, underscores, and dollar signs.
• Variable names must start with a letter, dollar sign `$`, or underscore `_`.
• Variable names are case sensitive (so A and a are different).
• You cannot use reserved JavaScript keywords (like built-in functions such as date, print, etc.).

JavaScript can handle various types of data, such as String, Number, Object, and more. For example:

var a = 42;    // a sebagai number
var a = 'bar'; // a sebagai string
var a = true;  // a sebagai boolean

As of the latest ECMAScript version (ES 2017), JavaScript defines 7 data types, which are divided into :

Primitive Data Type(6 data types that are primitives)  dan Tipe data Object

1. Boolean

Boolean has only two values: true and false.

2. Null

Null is a data type with only one value: `null`. It’s commonly used to initialize variables with no value.

3. Undefined

Undefined represents a value that hasn’t been defined yet. For example:

var a = 10;
var b = 20;
var c = a+b+d;
console.log(c)

The script above will result in an undefined property error because variable d hasn’t been defined.

4. Number

Referring to the EcmaScript standard, there is only one Number data type, which is Double (a number between -(25³ – 1) and 25³ – 1). It is important to note that in JavaScript, there is no specific data type like Integer, so if we want to produce an integer data type, we can use decimal rounding with Math.ceil, Math.floor, or similar functions.

5. String

It is a data type used to represent data in the form of text. Each letter in a String occupies a specific position in the text itself. The first letter/element starts at index 0, then continues to index 1, and so on. The length of an element is the total number of characters that make up the text itself.

var nama = "Nugraha";
console.log(nama[0]) //
result
 : N
var panjang = nama.length //
result
 : 7 (terdiri dari 7 huruf)

In JavaScript, strings are immutable, meaning once created, their internal structure cannot be changed. However, you can reassign the variable to a new value.

</p class=”custom-spacing”>Example:

var str = 'foo';
alert(str.substr(1)); // oo
alert(str); // foo

In the example above, when we create the variable str, the computer will create a new object containing ‘foo’, and then in the next line, it will create another new object containing ‘oo’.

So, when we call the str variable again, it will return to the first object containing ‘foo’, not ‘oo’. However, if we make a new assignment by writing str = ‘bar’, the computer will change the str object from containing ‘foo’ to ‘bar’.

For more explanation on immutability:

• stackoverflow.com
• sitepoint.com

In general, immutable in JavaScript is similar to immutable in Java. However, if you are still confused by the explanation above, feel free to send your questions in the comment section below. God willing, I will answer them as best as I can.

6. Symbol (new in ECMAScript 6)

Symbol is a new data type introduced in ES6. It creates unique values that can be used as object property keys without interfering with other properties.

Symbols can be used to create private keys within an object, but the use of Symbols actually goes beyond that. Personally, I’m still looking for more references regarding Symbols and haven’t fully understood their functions and uses. God willing, we will discuss Symbols further in the next article.

As an illustration, take a look at the example of using Symbol below.

Example:

var _x = Symbol("x");
var _y = Symbol("y");


class Bidang {
    constructor(x, y) {
        this[_x] = x;
        this[_y] = y;
        this._z = 5;
    }


    getCoordinate() {
        return ("x:" + this[_x] + ", y:" + this[_y]);
    }


    getZ() {
        return this._z;
    }


    changeCoordinate(x, y) {
        this[_x] = x;
        this[_y] = y;
    }
}


console.log(_x); // Symbol(x)


var AB = new Bidang(2, 3);
console.log(AB._z); // 5
console.log(AB.getZ()); // 5
console.log(AB._x); // undefined
console.log(AB.getCoordinate()); // x:2, y:3


AB._z = 7;
console.log(AB.getZ()); // 7


AB.changeCoordinate(3, 4);
console.log(AB.getCoordinate()); // x:3, y:4

For more references:

• https://docs.microsoft.com/en-us/scripting/javascript/reference/symbol-object-javascript
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

7. Object

Objects in JavaScript work similarly to objects in other programming languages. Objects are instances of classes, containing properties, (attributes) and methods (behaviors).

Still confused with these terms? In everyday life, we can compare a Class to something like Humans, while You, Me, and Us are the objects of that Human class itself. We all have the same characteristics, such as having a nose, mouth, and eyes (these are called properties), but they come in different shapes.

These differences are what we call the values of the properties themselves. Every day we eat and drink—these are examples of behaviors (or methods). Beyond that, the way we eat and what we eat will definitely vary from one person to another.

Take a look at the Class and Function examples in the Symbol discussion. There, I indirectly gave an overview of how to create an object through a class. As for the full discussion about Objects, Classes, and Functions, we will cover that in the next article. Meanwhile, observe the simple example below. For example:

var magcoding = {};
magcoding.lahir = 1989;


magcoding.age = function() {
    return new Date().getFullYear() - this.lahir + " Tahun";
}


console.log(magcoding); // object properties {lahir: 1989, age: ƒ}


console.log(magcoding.age()); //28 Tahun


magcoding.lahir = 1999;


console.log(magcoding.age()); //18 Tahun

That’s a brief explanation of JavaScript basics, focusing on Variables and Data Types. Hopefully, this helps make the learning process easier.

If you spot any mistakes or have questions about this article, feel free to leave a comment below. God willing, I’ll try my best to respond and make this blog even more useful.

Happy Learning ^_^

• Introduction to JavaScript
• JavaScript Fundamentals
• JavaScript Basics Part 2