console.log("Hello, World!");
JavaScript では、変数はデータ値を格納するコンテナです。このガイドでは、重要なルールと概念とともに、JavaScript で変数を宣言、初期化、操作する方法を説明します。
宣言:
JavaScript の変数は、var、let、または const を使用して宣言できます。
var variableName; let anotherVariable;
初期化:
変数は宣言時以降の値で初期化できます。
variableName = value;
var number = 10; let name = "John";
宣言と初期化の組み合わせ:
var age = 25; let salary = 50000.0;
定数に const を使用する:
const は、一度初期化すると再割り当てできない変数を宣言するために使用されます。
const pi = 3.14159;
var greeting = "Hello";
let count = 5;
const url = "https://example.com";
例:
let age; const $price = 9.99; var _isLoggedIn = true; let year2024;
var globalVar = "I am global";
function myFunction() {
var functionScopedVar = "I exist only within this function";
}
if (true) {
let blockScopedVar = "I exist only within this block";
}
JavaScript では、変数宣言 (ただし、初期化は除く) がスコープの先頭にホイストされます。これは、変数が宣言される前に使用できることを意味します。
console.log(myVar); // Outputs: undefined var myVar = 10;
ただし、let と const は宣言前のアクセスを許可しません (「一時的なデッド ゾーン」にあります)。
console.log(myLet); // ReferenceError let myLet = 10;
JavaScript の定数は const を使用して宣言されます。初期値が設定された後は再割り当てすることはできません。
例:
const DAYS_IN_WEEK = 7; const PI = 3.14159;
ただし、値がオブジェクトまたは配列の場合でも、そのプロパティまたは要素は変更できます。
const person = { name: "John" };
person.name = "Doe"; // This is allowed
var、let、または const で宣言されているが初期化されていない変数の値は未定義になります。
例:
let num; // default value is undefined console.log(num); // Outputs: undefined
単一のステートメントで複数の変数をカンマで区切って宣言できます。宣言時に初期化することもできます。
例:
// Declaring multiple variables without values let a, b, c; // Declaring and initializing variables let x = 10, y = 20, z = 30;
代入演算子を連鎖させることで、複数の変数に同じ値を代入できます。
例:
let m, n, o; m = n = o = 50;
コメントは、コードの説明に役立つ実行不可能なステートメントです。これらは、コードを読みやすく、保守しやすくするのに役立ちます。 JavaScript は 2 種類のコメントをサポートしています:
単一行のコメントは 2 つのスラッシュ (//) で始まります。その行の // に続くものはすべてコメントとみなされ、JavaScript エンジンによって無視されます。
構文:
// This is a single-line comment let x = 10; // x is initialized to 10
複数行のコメントは /* で始まり */ で終わります。 /* と */ の間はすべてコメントとみなされ、複数行にまたがることもできます。
構文:
/* This is a multi-line comment. It can span multiple lines. */ let y = 20; /* y is initialized to 20 */
結果の表示とユーザーとの対話は、プログラミングの基本です。ここでは、JavaScript 環境 (Node.js など) で基本的な出力操作を実行するための包括的なガイドを示します:
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!");
Example:
let number = 10;
console.log("The number is: " + number);
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}`);
Using String Concatenation:
You can also format output using the + operator.
Syntax:
let name = "Alice";
let age = 30;
console.log("Name: " + name + ", Age: " + age);
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:
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:
// Represents both integer and floating-point numbers let num = 42; let pi = 3.14159;
// Represents integers with arbitrary precision let largeNumber = 123456789012345678901234567890n;
// Represents a sequence of characters let greeting = "Hello, World!"; let singleChar = 'A';
// Represents true or false values let isValid = true; let isComplete = false;
// Represents a variable that has been declared but not assigned a value let value; console.log(value); // Outputs: undefined
// Represents the intentional absence of any object value let result = null;
// Represents a unique and immutable value used as an object property key
let uniqueSymbol = Symbol('description');
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.
Syntax:
let person = {
name: "Alice",
age: 30
};
Syntax:
let numbers = [1, 2, 3, 4, 5];
Syntax:
function greet(name) {
return "Hello, " + name;
}
Syntax:
let today = new Date();
Syntax:
let pattern = /ab+c/;
JavaScript performs type conversion automatically (implicit conversion) but also allows explicit conversion.
let result = "The number is " + 42; // "The number is 42"
let str = String(123); // "123"
let num = Number("456"); // 456
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:
You can create a String using string literals or by creating instances of the String object.
let str1 = "Hello"; // Using double quotes
let str2 = 'World'; // Using single quotes
let str3 = `Hello, ${str2}`; // Using template literals
let str4 = new String(); // Empty string
let str5 = new String("JavaScript"); // Using constructor with initial value
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
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
You can get the length of a String using the length property.
Example:
let str = "JavaScript"; let length = str.length; // length is 10
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
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)
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
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.
Operators in JavaScript are symbols used to perform operations on values and variables. They are categorized based on their functionality.
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
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
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
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
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
The ternary operator ? : provides a shorthand for conditional expressions.
Example:
let age = 20; let status = (age >= 18) ? "Adult" : "Minor"; console.log(status); // Output: Adult
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.
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.
The basic syntax of an if statement in JavaScript is:
if (condition) {
// Executes if the condition is true
statement(s);
}
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);
}
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);
}
let x = 10;
if (x > 5) {
console.log("x is greater than 5"); // Output: x is greater than 5
}
let x = 3;
if (x % 2 === 0) {
console.log("x is even");
} else {
console.log("x is odd"); // Output: x is odd
}
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
}
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 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.
A for loop is used when the number of iterations is known beforehand. It includes initialization, condition, and update expressions.
for (initialization; condition; update) {
// Code to be executed
}
for (let i = 0; i < 5; i++) {
console.log("Iteration: " + i);
}
The for...in loop iterates over the enumerable properties of an object. It is commonly used to loop through the keys of an object.
for (key in object) {
// Code to be executed
}
let person = { name: "Alice", age: 25, city: "New York" };
for (let key in person) {
console.log(key + ": " + person[key]);
}
The for...of loop iterates over iterable objects like arrays, strings, maps, and sets. It provides a convenient way to loop through elements.
for (element of iterable) {
// Code to be executed
}
let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
A while loop is used when the number of iterations is not known beforehand, and the loop continues until a specified condition is false.
while (condition) {
// Code to be executed
}
let i = 0;
while (i < 5) {
console.log("Iteration: " + i);
i++;
}
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.
do {
// Code to be executed
} while (condition);
let i = 0;
do {
console.log("Iteration: " + i);
i++;
} while (i < 5);
Loops can be nested within other loops, which is useful for iterating over multi-dimensional arrays or performing more complex iterations.
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
console.log("i: " + i + ", j: " + j);
}
}
break and continue statements are used to alter the flow of loops:
for (let i = 0; i < 5; i++) {
if (i === 3) {
break;
}
console.log("Iteration: " + i);
}
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue;
}
console.log("Iteration: " + i);
}
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.
A function in JavaScript is defined using the function keyword, followed by a name, parameters (optional), and a block of code.
function functionName(parameters) {
// Code to be executed
}
function greet() {
return "Hello, World!";
}
console.log(greet()); // Output: Hello, World!
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.
function greet() {
return "Hello, World!";
}
console.log(greet()); // Output: Hello, World!
Functions can take parameters, which are used to pass values into the function.
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // Output: 8
A function can return a value using the return statement. The return type of the function must match the type of the value returned.
function multiply(a, b) {
return a * b;
}
console.log(multiply(4, 7)); // Output: 28
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.
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
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.
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
console.log(factorial(5)); // Output: 120
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.
const greet = function() {
return "Hello, World!";
};
console.log(greet()); // Output: Hello, World!
Arrow functions provide a concise syntax for writing functions. They do not have their own this context and are often used for shorter functions.
const functionName = (parameters) => {
// Code to be executed
};
const add = (a, b) => a + b; console.log(add(5, 3)); // Output: 8
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.
(function() {
// Code to be executed
})();
(function() {
const message = "Hello, World!";
console.log(message);
})(); // Output: Hello, World!
A function expression involves assigning a function to a variable. Function expressions can be named or anonymous.
const square = function(x) {
return x * x;
};
console.log(square(4)); // Output: 16
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.
function functionName(parameter = defaultValue) {
// Code to be executed
}
function greet(name = "Guest") {
return "Hello, " + name + "!";
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!
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.
function functionName(...rest) {
// Code to be executed
}
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
In JavaScript, functions have an arguments object that contains all the arguments passed to the function. This object is not available in arrow functions.
function showArguments() {
console.log(arguments);
}
showArguments(1, "test", true); // Output: [1, "test", true]
Note: The arguments object is not available in arrow functions; instead, use rest parameters for similar functionality.
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
}
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
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)
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)
以上がJavaScript の基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
