JavaScript Basics

PHPz
Release: 2024-08-31 06:36:02
Original
283 people have browsed it

JavaScript Basics

JavaScript

console.log("Hello, World!");
Copy after login
Copy after login

Creating Variables

In JavaScript, variables are containers that store data values. This guide will walk you through how to declare, initialize, and work with variables in JavaScript, along with key rules and concepts.

Syntax for Variable Declaration and Initialization

Declaration:
Variables in JavaScript can be declared using var, let, or const.

var variableName; let anotherVariable;
Copy after login

Initialization:
A variable can be initialized with a value at the time of declaration or later.

variableName = value;
Copy after login
var number = 10; let name = "John";
Copy after login

Declaration and Initialization Combined:

var age = 25; let salary = 50000.0;
Copy after login

Using const for Constants:
const is used to declare variables that cannot be reassigned once initialized.

const pi = 3.14159;
Copy after login

Variable Declarations: var, let, and const

  • var:Declares a variable that is function-scoped or globally scoped if declared outside a function. It can be re-declared and updated.
var greeting = "Hello";
Copy after login
  • let:Declares a block-scoped variable, meaning it is only accessible within the block it is declared. It can be updated but not re-declared in the same scope.
let count = 5;
Copy after login
  • const:Declares a block-scoped, read-only variable. It must be initialized at the time of declaration and cannot be reassigned.
const url = "https://example.com";
Copy after login

Rules for Variable Names

  1. Variable names must start with a letter, underscore (_), or dollar sign ($).
  2. Subsequent characters can be letters, digits, underscores, or dollar signs.
  3. Variable names are case-sensitive (myVar and myvar are different).
  4. Variable names cannot be reserved keywords in JavaScript (e.g., let, function, class).

Examples:

let age; const $price = 9.99; var _isLoggedIn = true; let year2024;
Copy after login

Scope of Variables

  • Global Scope:A variable declared outside any function or block is globally scoped and can be accessed from anywhere in the code.
var globalVar = "I am global";
Copy after login
  • Function Scope:Variables declared with var inside a function are function-scoped.
function myFunction() { var functionScopedVar = "I exist only within this function"; }
Copy after login
  • Block Scope:Variables declared with let or const inside a block {} are block-scoped.
if (true) { let blockScopedVar = "I exist only within this block"; }
Copy after login

Hoisting

In JavaScript, variable declarations (but not initializations) are hoisted to the top of their scope. This means a variable can be used before it is declared.

console.log(myVar); // Outputs: undefined var myVar = 10;
Copy after login

However, let and const do not allow access before declaration (they are in a "temporal dead zone").

console.log(myLet); // ReferenceError let myLet = 10;
Copy after login

Constants

Constants in JavaScript are declared using const. They cannot be reassigned after their initial value is set.

Example:

const DAYS_IN_WEEK = 7; const PI = 3.14159;
Copy after login

However, if the value is an object or an array, its properties or elements can still be modified.

const person = { name: "John" }; person.name = "Doe"; // This is allowed
Copy after login

Default Values

Variables declared with var, let, or const but not initialized will have the value undefined.

Example:

let num; // default value is undefined console.log(num); // Outputs: undefined
Copy after login

Declare Multiple Variables

You can declare multiple variables in a single statement, separated by commas. You can also initialize them at the time of declaration.

Examples:

// Declaring multiple variables without values let a, b, c; // Declaring and initializing variables let x = 10, y = 20, z = 30;
Copy after login

Assigning One Value to Multiple Variables

You can assign the same value to multiple variables by chaining the assignment operator.

Example:

let m, n, o; m = n = o = 50;
Copy after login

Creating Comments

Comments are non-executable statements that help describe and explain the code. They are useful for making the code more readable and maintainable. JavaScript supports two types of comments:

1. Single-Line Comments

Single-line comments start with two forward slashes (//). Everything following // on that line is considered a comment and will be ignored by the JavaScript engine.

Syntax:

// This is a single-line comment let x = 10; // x is initialized to 10
Copy after login

2. Multi-Line Comments

Multi-line comments start with /* and end with */. Everything between /* and */ is considered a comment, and it can span multiple lines.

Syntax:

/* This is a multi-line comment. It can span multiple lines. */ let y = 20; /* y is initialized to 20 */
Copy after login

Basic Output

Displaying results and interacting with users is fundamental in programming. Here's a comprehensive guide on performing basic output operations in a JavaScript environment (e.g., Node.js):

1. Output (Printing to Console)

To display output on the console, use the console.log() method. This method prints the string representation of the given data to the standard output (usually the console) followed by a newline.

Syntax:

console.log("Hello, World!");
Copy after login
Copy after login

Example:

let number = 10; console.log("The number is: " + number);
Copy after login

2. Formatting Output

JavaScript allows you to format output using template literals or string concatenation.

Using Template Literals:
Template literals enable embedded expressions and multi-line strings. They are enclosed in backticks (`).

Syntax:

let name = "Alice"; let age = 30; console.log(`Name: ${name}, Age: ${age}`);
Copy after login

Using String Concatenation:
You can also format output using the + operator.

Syntax:

let name = "Alice"; let age = 30; console.log("Name: " + name + ", Age: " + age);
Copy after login

Data Types

JavaScript is a dynamically-typed language, meaning variables can hold values of any type and can change types during runtime. JavaScript provides several categories of data types:

1. Primitive Data Types

Primitive data types are the most basic types of data in JavaScript. They are immutable and are not objects. There are seven primitive data types:

Number Type:
// Represents both integer and floating-point numbers let num = 42; let pi = 3.14159;
Copy after login
BigInt Type:
// Represents integers with arbitrary precision let largeNumber = 123456789012345678901234567890n;
Copy after login
String Type:
// Represents a sequence of characters let greeting = "Hello, World!"; let singleChar = 'A';
Copy after login
Boolean Type:
// Represents true or false values let isValid = true; let isComplete = false;
Copy after login
Undefined Type:
// Represents a variable that has been declared but not assigned a value let value; console.log(value); // Outputs: undefined
Copy after login
Null Type:
// Represents the intentional absence of any object value let result = null;
Copy after login
Symbol Type:
// Represents a unique and immutable value used as an object property key let uniqueSymbol = Symbol('description');
Copy after login

2. Object Data Types

Object data types are collections of properties, where each property is a key-value pair. Objects can be used to group related data and functionality.

  • Object:The most general type of object in JavaScript. It can hold multiple values as properties.

Syntax:

let person = { name: "Alice", age: 30 };
Copy after login
  • Array:A special type of object used to store ordered collections of values. Arrays are indexed starting from 0.

Syntax:

let numbers = [1, 2, 3, 4, 5];
Copy after login
  • Function:Functions are also objects in JavaScript. They can be assigned to variables, passed as arguments, and returned from other functions.

Syntax:

function greet(name) { return "Hello, " + name; }
Copy after login
  • Date:A built-in object for handling dates and times.

Syntax:

let today = new Date();
Copy after login
  • RegExp:A built-in object for working with regular expressions.

Syntax:

let pattern = /ab+c/;
Copy after login

Type Conversion

JavaScript performs type conversion automatically (implicit conversion) but also allows explicit conversion.

  • Implicit Conversion:Automatically converts types during operations.
let result = "The number is " + 42; // "The number is 42"
Copy after login
  • Explicit Conversion:Manually converting types using functions.
let str = String(123); // "123" let num = Number("456"); // 456
Copy after login

Strings in JavaScript

String is a built-in object that represents a sequence of characters. It is widely used for manipulating text and is immutable, meaning once a String object is created, its value cannot be changed. Here's a comprehensive guide covering everything you need to know about String:

1. Creating Strings

You can create a String using string literals or by creating instances of the String object.

Using String Literals:
let str1 = "Hello"; // Using double quotes let str2 = 'World'; // Using single quotes let str3 = `Hello, ${str2}`; // Using template literals
Copy after login
Using String Constructor:
let str4 = new String(); // Empty string let str5 = new String("JavaScript"); // Using constructor with initial value
Copy after login

2. String Immutability

String objects are immutable, which means once created, their values cannot be changed.

Example:

let immutableStr = "Hello"; immutableStr = immutableStr + " World"; // Creates a new String object console.log(immutableStr); // Output: Hello World
Copy after login

3. String Concatenation

You can concatenate strings using the + operator or template literals. You can also concatenate numbers with strings.

Example:

let str1 = "Hello"; let str2 = "World"; let concatStr = str1 + " " + str2; // Using + let concatStr2 = `${str1} ${str2}`; // Using template literals let num = 42; let numConcat = `The answer is ${num}`; // Concatenating number with string console.log(concatStr); // Output: Hello World console.log(numConcat); // Output: The answer is 42
Copy after login

4. String Length

You can get the length of a String using the length property.

Example:

let str = "JavaScript"; let length = str.length; // length is 10
Copy after login

5. String Comparison

You can compare strings using the === operator for strict equality and locale-aware comparison methods.

Example:

let str1 = "JavaScript"; let str2 = "javascript"; console.log(str1 === str2); // false console.log(str1.toLowerCase() === str2.toLowerCase()); // true
Copy after login

6. String Interning

While not explicitly handled like in some other languages, strings created using literals may be optimized for performance by the JavaScript engine.

Example:

let str1 = "JavaScript"; let str2 = "JavaScript"; console.log(str1 === str2); // true (interning by engine)
Copy after login

7. Escape Sequences

JavaScript supports escape sequences within strings, such as \n for newline, \t for tab, and \\ for a backslash.

Example:

let escapeStr = "Hello\tWorld\nJavaScript"; console.log(escapeStr); // Output: // Hello World // JavaScript
Copy after login

8. String Formatting

You can use template literals for formatting.

Example using Template Literals:

let age = 30; let formattedStr = `I am ${age} years old.`; console.log(formattedStr); // Output: I am 30 years old. let price = 19.95; let formattedPrice = `The price is ${price.toFixed(2)} dollars.`; console.log(formattedPrice); // Output: The price is 19.95 dollars.
Copy after login

Operators in JavaScript

Operators in JavaScript are symbols used to perform operations on values and variables. They are categorized based on their functionality.

Arithmetic Operators

Arithmetic operators are used for basic mathematical operations.

Operator Name Description Example
+ Addition Adds two operands x + y
- Subtraction Subtracts the right operand from the left x - y
* Multiplication Multiplies two operands x * y
/ Division Divides the left operand by the right operand x / y
% Modulus Returns the remainder of the division x % y
++ Increment Increases the value of operand by 1 x++ or ++x
-- Decrement Decreases the value of operand by 1 x-- or --x

Example:

let a = 10; let b = 3; console.log(a + b); // Output: 13 console.log(a / b); // Output: 3.3333333333333335 console.log(a % b); // Output: 1 let x = 5; x++; console.log(x); // Output: 6 let y = 8; y--; console.log(y); // Output: 7
Copy after login

Assignment Operators

Assignment operators are used to assign values to variables and perform operations.

Operator Name Description Example
= Assignment Assigns the value on the right to the variable on the left x = 5
+= Addition Adds right operand to the left operand and assigns the result to the left x += 3
-= Subtraction Subtracts right operand from the left operand and assigns the result to the left x -= 3
*= Multiplication Multiplies right operand with the left operand and assigns the result to the left x *= 3
/= Division Divides left operand by right operand and assigns the result to the left x /= 3
%= Modulus Computes modulus of left operand with right operand and assigns the result to the left x %= 3

Example:

let x = 10; x += 5; console.log(x); // Output: 15
Copy after login

Comparison Operators

Comparison operators evaluate conditions and return Boolean values.

Operator Name Description Example
== Equal Checks if two operands are equal x == y
=== Strict Equal Checks if two operands are equal and of the same type x === y
!= Not Equal Checks if two operands are not equal x != y
!== Strict Not Equal Checks if two operands are not equal or not of the same type x !== y
> Greater Than Checks if left operand is greater than right x > y
< Less Than Checks if left operand is less than right x < y
>= Greater Than or Equal Checks if left operand is greater than or equal to right x >= y
<= Less Than or Equal Checks if left operand is less than or equal to right x <= y

Example:

let a = 5; let b = 10; console.log(a == b); // Output: false console.log(a < b); // Output: true
Copy after login

Logical Operators

Logical operators combine Boolean expressions and return Boolean values.

Operator Description Example
&& Logical AND x < 5 && x < 10
|| Logical OR x < 5 || x < 4
! Logical NOT !(x < 5 && x < 10)

Example:

let x = 3; console.log(x < 5 && x < 10); // Output: true console.log(x < 5 || x < 2); // Output: true
Copy after login

Bitwise Operators

Bitwise operators are used to perform bitwise operations on integers.

Operator Name Description Example
& AND Sets each bit to 1 if both bits are 1 x & y
| OR Sets each bit to 1 if one of two bits is 1 x | y
^ XOR Sets each bit to 1 if only one of two bits is 1 x ^ y
~ NOT Inverts all the bits ~x
<< Left Shift Shifts bits to the left x << 2
>> Right Shift Shifts bits to the right x >> 2
>>> Unsigned Right Shift Shifts bits to the right and fills with zeros x >>> 2

Example:

let x = 5; let y = 3; console.log(x & y); // Output: 1 console.log(x | y); // Output: 7
Copy after login

Ternary Operator

The ternary operator ? : provides a shorthand for conditional expressions.

Example:

let age = 20; let status = (age >= 18) ? "Adult" : "Minor"; console.log(status); // Output: Adult
Copy after login

Conditions

Conditions are used to execute specific blocks of code based on whether a certain expression evaluates to true or false. They control the flow of a program by allowing different code to run depending on the outcome of conditional expressions. In JavaScript, conditional statements such as if, else if, and else help manage decision-making in the code.

If-Else Statements in JavaScript

In JavaScript, if statements are employed to execute code based on the evaluation of a condition. A condition in JavaScript evaluates to either true or false, determining which block of code will execute. The else and else if statements are used to specify alternative code blocks based on different conditions.

Syntax and Usage

The basic syntax of an if statement in JavaScript is:

if (condition) { // Executes if the condition is true statement(s); }
Copy after login

If you need to execute an alternative block of code when the condition is false, use else:

if (condition) { // Executes if the condition is true statement(s); } else { // Executes if the condition is false statement(s); }
Copy after login

For handling multiple conditions, use else if:

if (condition1) { // Executes if condition1 is true statement(s); } else if (condition2) { // Executes if condition1 is false and condition2 is true statement(s); } else { // Executes if both condition1 and condition2 are false statement(s); }
Copy after login

Examples

  1. Simple if statement:
let x = 10; if (x > 5) { console.log("x is greater than 5"); // Output: x is greater than 5 }
Copy after login
  1. if-else statement:
let x = 3; if (x % 2 === 0) { console.log("x is even"); } else { console.log("x is odd"); // Output: x is odd }
Copy after login
  1. if-else if-else statement:
let x = 20; if (x > 50) { console.log("x is greater than 50"); } else if (x > 30) { console.log("x is greater than 30 but less than or equal to 50"); } else { console.log("x is 30 or less"); // Output: x is 30 or less }
Copy after login

Note:

In JavaScript, you can use any expression in a condition, and values that are not strictly true or false can still be evaluated. For example, non-zero numbers, non-empty strings, and objects are considered true, while 0, null, undefined, NaN, and empty strings are considered false. This flexibility allows for concise condition checks without explicitly comparing values to true or false.

Loops

Loops in JavaScript are used to execute a block of code repeatedly based on a specified condition. JavaScript supports several types of loops: for, for...in, for...of, while, and do...while. Each loop serves different purposes and choosing the right loop can help streamline your code and improve its readability.

1. For Loop

A for loop is used when the number of iterations is known beforehand. It includes initialization, condition, and update expressions.

Syntax:
for (initialization; condition; update) { // Code to be executed }
Copy after login
Example:
for (let i = 0; i < 5; i++) { console.log("Iteration: " + i); }
Copy after login

2. For...in Loop

The for...in loop iterates over the enumerable properties of an object. It is commonly used to loop through the keys of an object.

Syntax:
for (key in object) { // Code to be executed }
Copy after login
Example:
let person = { name: "Alice", age: 25, city: "New York" }; for (let key in person) { console.log(key + ": " + person[key]); }
Copy after login

3. For...of Loop

The for...of loop iterates over iterable objects like arrays, strings, maps, and sets. It provides a convenient way to loop through elements.

Syntax:
for (element of iterable) { // Code to be executed }
Copy after login
Example:
let numbers = [1, 2, 3, 4, 5]; for (let number of numbers) { console.log(number); }
Copy after login

4. While Loop

A while loop is used when the number of iterations is not known beforehand, and the loop continues until a specified condition is false.

Syntax:
while (condition) { // Code to be executed }
Copy after login
Example:
let i = 0; while (i < 5) { console.log("Iteration: " + i); i++; }
Copy after login

5. Do...While Loop

A do...while loop is similar to a while loop, but it ensures that the code block is executed at least once because the condition is evaluated after the loop body.

Syntax:
do { // Code to be executed } while (condition);
Copy after login
Example:
let i = 0; do { console.log("Iteration: " + i); i++; } while (i < 5);
Copy after login

6. Nested Loops

Loops can be nested within other loops, which is useful for iterating over multi-dimensional arrays or performing more complex iterations.

Example:
for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log("i: " + i + ", j: " + j); } }
Copy after login

7. Break and Continue

break and continue statements are used to alter the flow of loops:

  • break exits the loop immediately.
  • continue skips the current iteration and proceeds to the next iteration.
Example of break:
for (let i = 0; i < 5; i++) { if (i === 3) { break; } console.log("Iteration: " + i); }
Copy after login
Example of continue:
for (let i = 0; i < 5; i++) { if (i === 3) { continue; } console.log("Iteration: " + i); }
Copy after login

Functions in JavaScript

Functions in JavaScript are blocks of code designed to perform specific tasks. Functions allow you to write reusable code, making your programs more organized and modular. JavaScript functions can be defined using several syntaxes and can handle parameters and return values. Here's a comprehensive guide to understanding and using functions in JavaScript.

1. Function Definition and Syntax

A function in JavaScript is defined using the function keyword, followed by a name, parameters (optional), and a block of code.

Syntax:
function functionName(parameters) { // Code to be executed }
Copy after login
  • functionName: The name of the function.
  • parameters: A comma-separated list of input parameters. If there are no parameters, leave the parentheses empty.
Example:
function greet() { return "Hello, World!"; } console.log(greet()); // Output: Hello, World!
Copy after login
Copy after login

2. Calling Functions

To execute a function, you call it by using its name followed by parentheses. Functions can be called from within other functions or from different parts of your code.

Example:
function greet() { return "Hello, World!"; } console.log(greet()); // Output: Hello, World!
Copy after login
Copy after login

3. Function Parameters

Functions can take parameters, which are used to pass values into the function.

Example:
function add(a, b) { return a + b; } console.log(add(5, 3)); // Output: 8
Copy after login

4. Return Values

A function can return a value using the return statement. The return type of the function must match the type of the value returned.

Example:
function multiply(a, b) { return a * b; } console.log(multiply(4, 7)); // Output: 28
Copy after login

5. Function Overloading

JavaScript does not support method overloading (having multiple functions with the same name but different parameters) directly. Instead, you can use default parameters or check the number and types of arguments inside the function.

Example with argument checking:
function print(value) { if (typeof value === "number") { console.log("Number: " + value); } else if (typeof value === "string") { console.log("String: " + value); } } print(10); // Output: Number: 10 print("Hello"); // Output: String: Hello
Copy after login

6. Recursive Functions

A function can call itself, a concept known as recursion. Recursion is useful for solving problems that can be broken down into smaller, repetitive tasks.

Example:
function factorial(n) { if (n === 0) { return 1; } else { return n * factorial(n - 1); } } console.log(factorial(5)); // Output: 120
Copy after login

7. Anonymous Functions

An anonymous function is a function that does not have a name. These functions are often used as arguments to other functions or assigned to variables.

Example:
const greet = function() { return "Hello, World!"; }; console.log(greet()); // Output: Hello, World!
Copy after login

8. Arrow Functions

Arrow functions provide a concise syntax for writing functions. They do not have their own this context and are often used for shorter functions.

Syntax:
const functionName = (parameters) => { // Code to be executed };
Copy after login
Example:
const add = (a, b) => a + b; console.log(add(5, 3)); // Output: 8
Copy after login

9. Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that is executed immediately after its definition. It is often used to create a new scope to avoid polluting the global namespace.

Syntax:
(function() { // Code to be executed })();
Copy after login
Example:
(function() { const message = "Hello, World!"; console.log(message); })(); // Output: Hello, World!
Copy after login

10. Function Expressions

A function expression involves assigning a function to a variable. Function expressions can be named or anonymous.

Example:
const square = function(x) { return x * x; }; console.log(square(4)); // Output: 16
Copy after login

11. Default Parameters

Functions in JavaScript can have default values for parameters. If a parameter is not provided when the function is called, the default value is used.

Syntax:
function functionName(parameter = defaultValue) { // Code to be executed }
Copy after login
Example:
function greet(name = "Guest") { return "Hello, " + name + "!"; } console.log(greet()); // Output: Hello, Guest! console.log(greet("Alice")); // Output: Hello, Alice!
Copy after login

12. Rest Parameters

Rest parameters allow you to represent an indefinite number of arguments as an array. They must be the last parameter in the function’s parameter list.

Syntax:
function functionName(...rest) { // Code to be executed }
Copy after login
Example:
function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3, 4, 5)); // Output: 15
Copy after login

13. The arguments Object

In JavaScript, functions have an arguments object that contains all the arguments passed to the function. This object is not available in arrow functions.

Example:
function showArguments() { console.log(arguments); } showArguments(1, "test", true); // Output: [1, "test", true]
Copy after login

Note:The arguments object is not available in arrow functions; instead, use rest parameters for similar functionality.

Method Parameters in JavaScript

1. Syntax for Defining Method Parameters

In JavaScript, method parameters are defined within parentheses following the method name. Each parameter is declared with its name, and there is no need to specify its type.

function functionName(parameter1, parameter2, ...) { // Code to be executed }
Copy after login

2. Passing Arguments

When invoking a function, you pass arguments to match the parameters defined in the function signature. JavaScript functions can accept any number of arguments, and extra arguments are ignored if they are not specified in the function definition.

function printDetails(name, age) { console.log("Name: " + name + ", Age: " + age); } printDetails("John", 30); // Passing arguments "John" and 30
Copy after login

3. Pass by Value

JavaScript passes primitive data types (e.g., numbers, strings) by value. This means a copy of the actual value is passed to the function. Changes made to the parameter inside the function do not affect the original value.

function modifyValue(num) { num = num + 10; // Changes made to num inside the function } let x = 5; modifyValue(x); console.log(x); // Output: 5 (unchanged)
Copy after login

4. Pass by Reference

JavaScript objects and arrays are passed by reference. This means that the reference to the object or array is passed, and changes to the object's properties or array elements will affect the original object or array.

function modifyObject(obj) { obj.value = obj.value + 10; // Modifying obj inside the function } let myObject = { value: 5 }; modifyObject(myObject); console.log(myObject.value); // Output: 15 (modified)
Copy after login

The above is the detailed content of JavaScript Basics. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!