Getting Started With JavaScript for Beginners
Intro
JavaScript is one of the best programming languages for beginners to get started. Sometimes the resources found online are not exactly beginner-friendly, so in this article, I'm going to be as easy as possible for you to get the hang of it.
Let's get started with the definition. As per MDN,
JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods.
Don’t get scared, Let’s break it down to a simple format.
JavaScript is a multi-paradigm, paradigm is a way to classify programming language based on their features such as object-oriented, functional, and so on, multi-paradigm simply means this programming language can be classified by multiple features.
Dynamic Language is a type of high-level programming language that supports operations at run-time whereas static programming language only supports that kind of operations at compile-time. These operations can be adding new code, extending objects, changing the type, etc.
In sort, JavaScript data types define what kind of data can be stored or modified inside a variable. Ex Number: 1, 2, 3 Array: [5,10, 15] String:`Hi`. Operators are symbols that define which operation needs to be done. For example, the Mathematical operator +(plus) adds two or more variables.
Built-in objects pre-defined set of code that helps to extend the flexibility of the language. Many operations are done by them and we can just use them instead of writing code. For example Date, Math, String, Array
And finally, JavaScript methods are built-in functions that return specific values once called. Example isNaN() checks the given value is null or not.
Coding in JavaScript is relatively easy compared to coding in C/C++ or Java. You need not to specify Data Types before assigning values For Example
In C : int a = 50; , in JS var c = 50/`50`/{number:`50`};
And there are lots of built-in methods in JavaScript that help with the code. Let's take a look at some of the common built-in methods and functions in Js.
Common Built-In Methods and Functions
String types:
Strings are useful to hold data in text form. There are some really easy string methods that we can use that can help save a lot of time and coding. To create strings simply type:
//usig variables
const myName = 'Ahsan';//using object
const myName = new String('Ahsan');
To compare, add strings in JavaScript you just need to use conditional operators:
const str1 = 'Hi';
const str2 = 'Hi';console.log(str1 == str2); // The result is true
console.log(str1 > str2); // The result is falseconsole.log(str1 + str2); // The result is 'HiHi'
To transform text uppercase simply use {string.toUpperCase()} method similarly for lowercase apply {string.toLowerCase()} method. There is a method called {string.trim()} which is used to remove empty space both side of the string. Also you can use {string.repeat(count)} to repeat your string for given count.
// transform uppercase --> {string}.toUpperCase()const stringLowerCase = 'sky is blue';
console.log(stringLowerCase.toUpperCase()); // returns 'SKY IS BLUE'// transform lowercase --> {string}.toLowerCase()const stringUpperCase = 'SUN IS RED';
console.log(stringUpperCase.toLowerCase()); // returns 'sun is red'// trim white space --> {string}.trim()const strSpace = ' This is a string ';
console.log(strSpace.trim())// 'this is a string'// Repeat a string --> {string}.repeat(count)const stringRepeat = 'Hello ';
console.log(stringRepeat.repeat(5))// Returns 5 times 'Hello'
To get the length of a string use {string.length} method. To find a specific word starting index you can use {string.indexOf()} method it returns the index if found and -1 if not found. If you want to find the specific character in a given index you have to use {string.charAt(index)} method.
If you want to check the exact matching word in a string you can use {string.includes(word)} method. This method is case-sensitive.
// Length of a string --> {string}.lengthconst str3 = 'Hello World';
console.log(str3.length); // The result will be 11// Finding a word inside a string --> string.indexOf({word})const largeString='How are you today ? I hope you are doing fine';
console.log(largeString.indexOf('hope'));//Returns 22 starting point// Finding a character inside a string --> {string}.charAt(index)const string = 'I love Coding in JavaScript';
console.log(string.charAt(17)); // Returns 7// Finding exact match word --> {string}.includes({word})const string = 'Hello how are you ?';
console.log(string.includes(you))// Returns true
console.log(string.includes(You))// Returns false
Now, for matching against a Regular Expression purpose, you can use {string.match(regularExpression)} method. This method is very useful for form validation. The regular expression can decide what filtered data will be and the method will provide output according to it.
//matching against a Regular Expression{string}.match(regex)const string = 'I love to travel around the World';
const refex = /[A-Z]/g;
console.log(string.match(regex)); // Returns capital words ['I' 'W']
Number Types:
Numbers are an essential part of any programming language. Unlike other programming languages, JavaScript has only one type. For every number assigned to a variable JavaScript considers it as a Double type. To create a Number type you just have to assign it to a variable.
// In C++ Number declaration....int num1 = 5; // number of integer type
float num2 = 5.80 // number of floting point type// In JavaScript....const num1 = 5; // number of double type
const num2 = 5.8 // number of double type
console.log(typeof(5))// returns number
Let’s see some of the number limitations in JavaScript. The maximum safe integer number is and 253 - 1 to get the maximum safe number just use the Number.MAX_SAFE_INTEGER method similarly to get the minimum safe number use the Number.MIN_SAFE_INTEGER method which is about -(253 - 1).
If you want to find the smallest positive number in JavaScript simply use Number.MIN_VALUE and use Number.MAX_VALUE for the maximum positive number. In JavaScript, any value greater than MAX_VALUE is considered an Infinity number.
// Maximum - Minimum Safe Integerconsole.log(Number.MAX_SAFE_INTEGER) // returns 9007199254740991
console.log(Number.MIN_SAFE_INTEGER) // returns -9007199254740991// Smallest - Largest Positive Numberconsole.log(Number.MIN_VALUE) // returns 5e-324 --> 5 × 10-324
console.log(Number.MAX_VALUE) // returns 1.7976931348623157e+308 --> 2^1024
Now let’s explore some of the common functions in number that comes in handy while coding.
First, there is isNaN() this one determines if the given value is a number or not, isNaN derives Is Not A Number so isNaN() is true if the given value is not a number false otherwise.
Secondly, we have Number.isFinite() which of course judging by the name checks if a value is finite. It returns true if the value is finite false otherwise.
Thirdly there is Number.isInteger(), this also returns true if the given value is an integer false if not.
// isNaN()
console.log(isNaN('a')); // returns true
console.log(isNaN('3')); // returns false// Number.isFinite()
console.log(Number.isFinite(1 / 0)); // retuns: false
console.log(Number.isFinite(10 / 5)); // returns: true// Number.isInteger()
console.log(Number.isInteger(.6)); // returns: false
console.log(Number.isInteger(6)); // returns: true
Array Types:
The last topic is going to be array types. As a definition, we can say that array is a list-like object which collects similar types of data. In JavaScript you don’t have to define type array in order to declare arrays you can just assign a collection of data into a variable using [] braces. JavaScript defines arrays in form of object For example:
// Arrays in JavaScript
let animals = ['Dog', 'Cat', 'Cow'];
console.log(typeOf(animals)); // returns ObjectLet’s get to know some of the useful array functions and methods.
For finding the length of an array simply use array.length method
You can use array.push() to add an item at the end of an array similarly use array.pop() to remove an item from the end.
If you want to remove an item from the start of an array you can use array.shift() and for adding an item from the start use array.Unshift() method.
To find an item inside an array by indexing a number just use array[index] but if you want to find which index the given item is located inside of an array you can use array.indexOf(item) method.
To remove an item from the index position simply use array.splice(index) this will return an item. to remove multiple items use multiple indexes inside array.splice(inex1, index2) method, this will return an array.
To copy an array simply use array.slice() method. but if you want to separate an item from a certain position use array.splice(index).
// Array length
const animals = ['Cat', 'Dog', 'Chicken', 'Cow'];
console.log(animals.length); // Returns 4// adding items in Array end
animals.push('goat');
console.log(animals);// returns ['Cat', 'Dog', 'Cow', 'goat'];//removing items from Array end
animals.pop();
console.log(animals);// returns ['Cat', 'Dog', 'Cow'];//adding item in Array Front
animals.unShift('sheep');
console.log(animals);// returns ['Cat', 'Dog', 'Cow', 'sheep'];//removing item in Array Front
animals.shift();
console.log(animals);// returns ['Cat', 'Dog', 'Cow'];// Finding an item by index
console.log(animals[2]) // returns 'Cow'//finding index of an item
console.log(animals.indexOf(Cow))// returns 2//Copying an array
let animalsCopy = animals.slice();
console.log(animalsCopy); // returns ['Cat', 'Dog', 'Cow'];// Seperating specific item
animals.splice(2);
console.log(animals); // returns ['Cow']
Phew, it was long wasn't it?
I hope you got some basics of JavaScript from this article. From here you must learn Objects, Functions and continue the journey of JavaScript that lies ahead of you.
Good luck Adventurer!
