DEV Community

Cover image for JavaScript Ultimate Guide 01: The fundamentals.
Amrin
Amrin

Posted on • Updated on • Originally published at devsloog.netlify.app

JavaScript Ultimate Guide 01: The fundamentals.

JavaScript is called the language of the web. If you want to become a web developer you have to learn JavaScript. But, learning JavaScript is not that easy.

So, to make the process of learning JavaScript a little easier I am writing this JavaScript Ultimate guide series. In this series, we’ll discuss javaScript from the fundamentals to the advanced, including ES6, OOP, Asynchronous JavaScript, and many more.

This is Part 1. In this part, I’ll discuss the fundamentals of JavaScript. I’ll cover concepts like variables, functions, loops, and conditionals.

Table Of Content

01. Variables

02. Data Types

03. Operators

04. Conditionals

05. Functions

06. Loops

07. Arrays and Objects

01. Variables

Variables are a way to store data for later use. In JavaScript, you can declare a variable in three ways.

Using var, let, and const.

Var, let and const have their different use cases. Here’s a quick overview:

Var: var is the old way of declaring a variable. It is compatible with all the older browsers.

Let and const: these were introduced in 2015. If you want to change the value of the variable use Let. And if you don’t want to change the value use Const.

Learn more:

https://javascript.info/variables

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

02. Data Types.

Every data in javaScript has a type. For example, a number is a number type and a text is a string type.

There are 8 data types in JavaScript:

  1. String: Represent text-based data.
  2. Number: Represent Numbers. An integer or a floating-point number.
  3. BigInt: Represents arbitrary length of integer.
  4. Boolean: True or False value
  5. Undefined: Value of a data whose value is not assigned yet.
  6. Null: Represents unknown values.
  7. Symbol: Represents unique and immutable values.
  8. Object: Key-value pairs of data

Learn more:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

https://www.programiz.com/javascript/data-types

03. Operators.

Operators perform operations on two or more data values and produce a result.

There are a lot of operators in javaScript. Here’s a quick overview.

  1. Assignment Operators: =, +=, -=.
  2. Arithmetic Operators: +, -, *, / and %(modulo operator).
  3. Comparison Operators: ==, !=, ===, !==. >, <.
  4. Logical Operators: &&, || and !

Learn more:

https://www.programiz.com/javascript/operators

https://javascript.info/operators

04. Conditionals.

In JavaScript, you can write conditional with If-else, if-else if-else.

You use the comparison operators to make the decision.

example:

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}
Enter fullscreen mode Exit fullscreen mode

Learn more:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals

https://www.freecodecamp.org/news/javascript-if-else-and-if-then-js-conditional-statements/

05. Functions.

Functions are reusable blocks of code. Once you declared a function you can call it anywhere you want.

You can declare a function in JavaScript with the function keyword. Like this:

function showMessage() {
  return "Hello World!";
}
Enter fullscreen mode Exit fullscreen mode

You can call a function by just calling the function name with a set of parenthesis.

ShowMessage();
Enter fullscreen mode Exit fullscreen mode

Learn more:

https://javascript.info/function-basics

https://www.programiz.com/javascript/function

6. Loops

Loops are a way to repeat an action in programming. In JavaScript, you can write loops in 5 ways.

Here’s a quick overview.

  1. for — loops through a block of code until the counter reaches a specified number.
  2. do…while — loops through a block of code once; then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.
  3. for…in — loops through the properties of an object.
  4. for…of — loops over iterable objects such as arrays, strings, etc.
  5. while: loops through a block of code as long as a specified condition evaluates to true.

Learn more:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

https://www.programiz.com/javascript/for-loop

https://javascript.info/while-for

07. Arrays and Objects

Arrays: An array is a special type of variable, used to store more than one value.

example:

const array = [1, 2, 3, 4, 5, 6, 7, 8]
Enter fullscreen mode Exit fullscreen mode

Objects: An object is a data structure that is used to store key-value pairs.

example:

const user = { name: "John", age: 30 };
Enter fullscreen mode Exit fullscreen mode

Learn more:

https://javascript.info/array

https://www.programiz.com/javascript/array

https://javascript.info/object

https://www.programiz.com/javascript/object

Conclusion

In this article, I discussed the fundamental concepts of javascript. We talked about, variables, functions, loops, and objects.

In the next part, we will talk about DOM.

To stay in touch follow me on Twitter at @coderamrin

Happy coding.

Discussion (0)