773 words
4 minutes
JavaScript Basics

Introduction to JavaScript#

JavaScript is a scripting language primarily used to create interactive web pages. JavaScript can be used both on the client side (web browsers) and on the server side (for example, Node.js).

Basic Concepts#

1. Basic Syntax#

Below is a simple example of JavaScript syntax:

// Đây là một dòng comment
/*
Đây là một comment nhiều dòng
*/

// Khai báo biến
var x = 5;
let y = 10;
const z = 15;

// In ra console
console.log(x, y, z);

2. Variables and Constants#

JavaScript provides three ways to declare variables: var, let, and const.

  • var: Declares a variable with global or function scope.
  • let: Declares a variable with block scope.
  • const: Declares a constant whose value cannot be changed after assignment.

3. Data Types#

JavaScript supports many data types including:

  • Number: Numbers (both integers and decimals)
  • String: Character strings
  • Boolean: True or false values (true/false)
  • Object: Objects
  • Array: Arrays
  • Null: Empty value
  • Undefined: Value that has not been defined

Example of data types:

let number = 42; // Number
let name = "John"; // String
let isTrue = true; // Boolean
let person = { firstName: "John", lastName: "Doe" }; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
let emptyValue = null; // Null
let undefinedValue; // Undefined

3. Data Types#

JavaScript supports many data types including:

  • Number: Numbers (both integers and decimals)
  • String: Character strings
  • Boolean: True or false values (true/false)
  • Object: Objects
  • Array: Arrays
  • Null: Empty value
  • Undefined: Value that has not been defined

Example of data types:

let number = 42; // Number
let name = "John"; // String
let isTrue = true; // Boolean
let person = { firstName: "John", lastName: "Doe" }; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
let emptyValue = null; // Null
let undefinedValue; // Undefined

4. Operators#

JavaScript supports many different types of operators:

  • Arithmetic operators: +, -, *, /, %
  • Assignment operators: =, +=, -=, *=, /=
  • Comparison operators: ==, ===, !=, !==, >, <, >=, <=
  • Logical operators: &&, ||, !

Example of operators:

let a = 10;
let b = 20;

console.log(a + b); // 30
console.log(a > b); // false
console.log(a == 10 && b == 20); // true

5. Control Structures#

JavaScript provides control structures such as if, else, switch, for, while, and do...while.

Example of control structures:

let age = 18;

// Câu lệnh if-else
if (age >= 18) {
  console.log("Bạn đã đủ tuổi trưởng thành.");
} else {
  console.log("Bạn chưa đủ tuổi trưởng thành.");
}

// Vòng lặp for
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// Vòng lặp while
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// Vòng lặp do-while
let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);

6. Functions#

A function is a block of code that can be called and executed. Functions can receive parameters and return values.

Example of functions:

// Định nghĩa hàm
function sayHello(name) {
  return `Hello, ${name}!`;
}

// Gọi hàm
console.log(sayHello("Alice"));

7. Objects#

An object is a collection of key-value pairs. Each pair consists of a property and a value.

Example of objects:

let car = {
  make: "Toyota",
  model: "Corolla",
  year: 2020,
  displayInfo: function() {
    return `${this.make} ${this.model} (${this.year})`;
  }
};
console.log(car.displayInfo()); // Toyota Corolla (2020)

8. Arrays#

An array is a list-like object used to store multiple values in a single variable.

Example of arrays:

let fruits = ["Apple", "Banana", "Cherry"];

// Truy cập phần tử trong mảng
console.log(fruits[0]); // Apple

// Thêm phần tử vào mảng
fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Orange"]

// Xóa phần tử khỏi mảng
fruits.pop();
console.log(fruits); // ["Apple", "Banana", "Cherry"]

9. Arrow Functions#

Arrow functions are a more concise way to define functions in JavaScript. They have a shorter syntax and do not have their own this keyword.

Example of arrow functions:

// Định nghĩa hàm bình thường
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5

// Định nghĩa hàm mũi tên
const addArrow = (a, b) => a + b;

console.log(addArrow(2, 3)); // 5

10. Array Methods in JavaScript#

Array.prototype.push()#

Adds one or more elements to the end of an array and returns the new length of the array.

let arr = [1, 2, 3];
arr.push(4); // arr: [1, 2, 3, 4]

Array.prototype.pop()#

Removes the last element from an array and returns that element.

let arr = [1, 2, 3];
let last = arr.pop(); // last: 3, arr: [1, 2]

Array.prototype.shift()#

Removes the first element from an array and returns that element.

let arr = [1, 2, 3];
let first = arr.shift(); // first: 1, arr: [2, 3]

Array.prototype.unshift()#

Adds one or more elements to the beginning of an array and returns the new length of the array.

let arr = [1, 2, 3];
arr.unshift(0); // arr: [0, 1, 2, 3]

Array.prototype.concat()#

Combines two or more arrays and returns a new array.

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr: [1, 2, 3, 4]
JavaScript Basics
https://www.devwithshawn.com/en/posts/javascript-basic-en/
Author
PDXuan(Shawn)
Published at
2024-05-01
Share: